Skip to content

Commit

Permalink
Merge pull request #48 from razafindratsiza/hero-section-cover
Browse files Browse the repository at this point in the history 
Hero section cover
  • Loading branch information
@Ntsoa2112
Ntsoa2112 authored Jun 1, 2024
2 parents 11e423d + 9965041 commit 78f895c
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 77 deletions.
60 changes: 41 additions & 19 deletions src/page/Hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,56 @@
import Vector from '../assets/images/Vector.png';
import QR from '../assets/images/qr_code.png';
import ButtonFill from "../components/ButtonFill";
import Button from "../components/Button";
import GetTicketButton from "../components/GetTicketButton";
const Hero = () => {
return (
<div className="grid mt-4 max-w-[1600px] mx-auto px-4 py-8 mx-auto items-center lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 h-full">
<div className="contents">
<div className='mr-auto place-self-center lg:col-span-7 '>
<ButtonFill content="22 Juin 2024" />
<div className="backtitle">
<h1 className="max-w-2xl mb-4 text-[38px] md:text-[78px] Kontes-Compressed-Bold font-extrabold tracking-tight leading-none xl:text-7xl text-white">Empowering Communities</h1>
<h1 className='Kontes-Compressed-Bold text-[38px] md:text-[78px] text-white pl-3 md:pl-0'>Through <span className="color-raven">Open Source</span></h1>
</div>
<p className="max-w-2xl mb-6 font-light text-white lg:mb-8 md:text-lg lg:text-xl ">Explorez le pouvoir transformateur de Linux. Rejoignez-nous pour découvrir son potentiel illimité lors de cet évènement incontournable..</p>
<div className=' bg-white rounded-md items-center justify-center inline-flex items-center justify-center px-5 py-3 mr-3'>
<button className='text-dark capitalize mr-6 font-DMMono'>Obtenir un billet</button>
<img className='object-contain' src={Vector} alt="" />
<>
<div className="grid mt-4 max-w-[1600px] mx-auto px-4 py-8 mx-auto items-center lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 h-full hidden md:grid">
<div className="contents">
<div className='mr-auto place-self-center lg:col-span-7 '>
<ButtonFill content="22 Juin 2024" />
<div className="backtitle">
<h1 className="max-w-2xl mb-4 text-[38px] md:text-[78px] Kontes-Compressed-Bold font-extrabold tracking-tight leading-none xl:text-7xl text-white">Empowering Communities</h1>
<h1 className='Kontes-Compressed-Bold text-[38px] md:text-[78px] text-white pl-3 md:pl-0'>Through <span className="color-raven">Open Source</span></h1>
</div>
<p className="max-w-2xl mb-6 text-white lg:mb-8 md:text-lg lg:text-xl font-DMMono ">Explorez le pouvoir transformateur de Linux. Rejoignez-nous pour découvrir son potentiel illimité lors de cet évènement incontournable..</p>

<div className="mt-3 flex flex-col justify-center items-center space-y-2 md:items-start md:justify-start md:flex-row md:space-y-0 md:space-x-3 mb-5">
<GetTicketButton />
<Button content="Devenir sponsor" />
</div>
</div>

<div className=' border border-raven rounded-md items-center justify-center inline-flex items-end justify-center px-5 py-3 '>
<button className='text-white capitalize mr-6 font-DMMono'>Devenir sponsor</button>
<img className='object-contain' src={Vector} alt="" />
<div className="hidden lg:mt-0 lg:col-span-5 lg:inline-flex items-end justify-end ">
<img src={QR} alt="qr" width={200} />
</div>
</div>
</div>

<div className="hidden lg:mt-0 lg:col-span-5 lg:inline-flex items-end justify-end ">
<img src={QR} alt="qr" width={200} />
<div className="max-w-7xl mx-12">
<div className="pt-28 flex flex-col md:items-end md:justify-between">
{/* for mobile device */}
<div className="w-full md:w-1/2 md:hidden">
<div className="text-center md:text-left flex items-center justify-center flex-col md">
<ButtonFill content="22 juin 2024" />
<h2 className="font-kontes text-white text-[42px] md:text-[90px]">
Empowering <br className="md:hidden" /> Communities Through <br />{" "}
<span className="text-raven">Open Source.</span>
</h2>
<p className="font-DMMono text-white max-w-xl text-[14px] md:text-[20px] mt-4">
Explorez le pouvoir transformateur de Linux. Rejoignez-nous pour
découvrir son potentiel illimité lors de cet évènement incontournable.
</p>
<div className="mt-3 flex flex-col justify-center items-center space-y-2 md:items-start md:justify-start md:flex-row md:space-y-0 md:space-x-3 mb-5">
<GetTicketButton />
<Button content="Devenir sponsor" />
</div>
</div>
</div>
</div>
</div>

</div>
</>
);
}

Expand Down
66 changes: 8 additions & 58 deletions src/scenes/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,14 @@
import Qr from "../assets/images/qr.png";
import Button from "../components/Button";
import ButtonFill from "../components/ButtonFill";
import GetTicketButton from "../components/GetTicketButton";
import Nav from "../components/nav";


import Nav from "../components/nav";
import Hero from "../page/Hero";
const Home = () => {
return (
<div className="top-section">
<div className="mx-12">
<div className="max-w-[1600px] mx-auto">
<div className="flex flex-col justify-between items-center md:items-stretch">
<Nav />
<div className="max-w-7xl mx-12">
<div className="pt-28 flex flex-col md:items-end md:justify-between">
{/* for mobile device */}
<div className="w-full md:w-1/2 md:hidden">
<div className="text-center md:text-left flex items-center justify-center flex-col md">
<ButtonFill content="22 juin 2024" />
<h2 className="font-kontes text-white text-[42px] md:text-[90px]">
Empowering <br className="md:hidden" /> Communities Through <br />{" "}
<span className="text-raven">Open Source.</span>
</h2>
<p className="font-DMMono text-white max-w-xl text-[14px] md:text-[20px] mt-4">
Explorez le pouvoir transformateur de Linux. Rejoignez-nous pour
découvrir son potentiel illimité lors de cet évènement incontournable.
</p>
<div className="mt-3 flex flex-col justify-center items-center space-y-2 md:items-start md:justify-start md:flex-row md:space-y-0 md:space-x-3 mb-5">
<GetTicketButton />
<Button content="Devenir sponsor" />
</div>
</div>
</div>

{/* for large device */}
<div className="w-full hidden md:flex">
<div className="flex justify-center flex-col ">
<ButtonFill content="22 juin 2024" />
<h2 className="font-kontes text-white text-[42px] md:text-[74px] max-w-2xl">
Empowering Communities Through {" "}
<span className="text-raven">Open Source.</span>
</h2>
<p className="font-DMMono text-white max-w-3xl text-[14px] md:text-[20px] mt-4">
Explorez le pouvoir transformateur de Linux. Rejoignez-nous pour
découvrir son potentiel illimité lors de cet évènement incontournable.
</p>
<div className="mt-3 flex flex-col justify-center items-center space-y-2 md:items-start md:justify-start md:flex-row md:space-y-0 md:space-x-3 mb-5">
<GetTicketButton />
<Button content="Devenir sponsor" />
</div>
</div>
<div className="hidden md:flex md:justify-end md:items-end md:w-1/2">
<img src={Qr} alt="QR code" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<main className="top-section dark:bg-gray-800 bg-white relative overflow-hidden h-screen">
<Nav />
<Hero />

</main>
);
};

Expand Down

0 comments on commit 78f895c

Please sign in to comment.