home page

src/pages/index.tsx

@@ -17,18 +17,24 @@ function Header() {
       <nav>
         <ul className="flex items-center gap-2 space-x-4">
           <li>
-            <Link href="/le-club" className="text-xl font-poppins">Le club</Link>
+            <Link href="/le-club" className="font-poppins text-xl">
+              Le club
+            </Link>
           </li>
           <li>
-            <Link href="/galeries" className="text-xl font-poppins">Galeries</Link>
+            <Link href="/galeries" className="font-poppins text-xl">
+              Galeries
+            </Link>
           </li>
           <li>
-            <Link href="/contact" className="text-xl font-poppins">Contact</Link>
+            <Link href="/contact" className="font-poppins text-xl">
+              Contact
+            </Link>
           </li>
           <li>
             <Link
               href="/espace-membres"
-              className="bg-white px-6 py-2 text-xl text-stone-900 font-poppins"
+              className="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
             >
               Espace membres
             </Link>
@@ -41,7 +47,7 @@ function Header() {
 
 function Footer() {
   return (
-    <footer className="absolute bottom-0 w-full bg-neutral-800">
+    <footer className="w-full bg-neutral-800">
       <div className="container mx-auto p-8">
         <div className="flex items-center justify-around md:flex-row">
           <div className="flex items-center">
@@ -80,7 +86,7 @@ function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
       <Header />
-        <main className="container mx-auto p-8">{children}</main>
+      <main className="container mx-auto p-8">{children}</main>
       <Footer />
     </div>
   );
@@ -89,15 +95,74 @@ function Layout({ children }: { children: React.ReactNode }) {
 function Home() {
   return (
     <Layout>
-      <Image
-        src="/IMG_2439-CLUB-3 2.png"
-        alt=""
-        width={1920}
-        height={500}
-        className="absolute top-0 left-0 -z-10"
-      />
-      <div className="content mt-[400px]">
-        <h1 className="text-5xl font-bold font-poppins">Notre club photo</h1>
+      <div className="h-[65vh]">
+        <Image
+          src="/IMG_2439-CLUB-3 2.png"
+          alt=""
+          width={1920}
+          height={500}
+          className="absolute top-0 left-0 -z-10"
+        />
+      </div>
+      <div className="flex gap-10 mb-4">
+        <div className="w-1/2">
+          <h1 className="font-poppins text-5xl">Notre club photo</h1>
+          <div className="line h-1 w-full bg-black"></div>
+        </div>
+        <div className="w-1/2"></div>
+      </div>
+      <div className="flex gap-10">
+        <div className="flex w-1/2 flex-col gap-8">
+          <p className="text-xl">
+            Le Photo Club de Haute Lozère est une association loi 1901 créée en
+            2018.
+          </p>
+          <p className="text-xl">
+            Le club propose à ses adhérents de partager en groupe la
+            pratique de la photographie, de l'initiation à des techniques plus
+            avancées et en découvrir les multiples facettes.
+          </p>
+          <p className="text-xl">
+            L’échange de connaissances et de savoir-faire autour des techniques et de l’art
+            photographiques ainsi que l’organisation d’événements (rencontres,
+            sorties, reportages, concours liés à la pratique photographique)
+            travaux informatiques de post traitement font parties de nos
+            activités.
+          </p>
+          <Image
+            src={"/forum-eaee.png"}
+            alt="Forum photo club haute lozère"
+            width={640}
+            height={320}
+          />
+        </div>
+        <div className="flex w-1/2 flex-col gap-6">
+          <Image
+            src={"/132108978_o.png"}
+            alt="Forum photo club haute lozère"
+            width={640}
+            height={320}
+          />
+          <p className="text-xl">
+            Ainsi, des sorties à thème sont programmées avec des séances
+            d’analyse des photos réalisées.
+          </p>
+          <p className="text-xl">
+            Nous proposons également des séances
+            de formations aux différentes techniques de la photographie
+            (l’appareil photo, la prise de vue, gestion de la lumière…).
+          </p>
+          <p className="text-xl">
+            En fin de saison, pour finaliser et mettre en valeur nos travaux, une
+            exposition de nos photographies sera proposée au public. Nous
+            invitons tous les amateurs de photos à nous rejoindre et partager
+            cette passion.
+          </p>
+          <p className="text-xl">
+            N’hésitez à contacter le Président : Bernard Sapin au
+            <a href="tel:0681818181" className="font-bold"> 06 81 81 81 81</a>
+          </p>
+        </div>
       </div>
     </Layout>
   );