feat: Add 'The AI Atelier' and 'Your Video Engine' links, and refactor homepage layout by relocating the footer and adjusting left column padding.

src/pages/index.astro

@@ -31,48 +31,60 @@ const links = [
     >
       <!-- LEFT COLUMN: Profile & Bio (Spans 5 cols) -->
       <div
-        class="lg:col-span-5 p-8 sm:p-12 border-b lg:border-b-0 lg:border-r border-black flex flex-col justify-between min-h-[500px]"
+        class="lg:col-span-5 border-b lg:border-b-0 lg:border-r border-black flex flex-col justify-between min-h-[500px]"
       >
-        <!-- Header / Avatar -->
+        <!-- Main Content Area -->
-        <div>
+        <div class="p-8 sm:p-12 flex-1 flex flex-col justify-between">
-          <div
+          <!-- Header / Avatar -->
-            class="w-48 mb-8 bg-gradient-to-br from-[#FFE4D9] to-[#FFD6CC] rounded-3xl overflow-hidden shadow-2xl shadow-rose-900/20"
+          <div>
-          >
+            <div
-            <img
+              class="w-48 mb-8 bg-gradient-to-br from-[#FFE4D9] to-[#FFD6CC] rounded-3xl overflow-hidden shadow-2xl shadow-rose-900/20"
-              src="https://cdn.avqn.ch/photos/manu/manu-left.webp"
+            >
-              alt="Emmanuel Bernard"
+              <img
-              class="w-full h-auto object-cover grayscale object-top mix-blend-multiply"
+                src="https://cdn.avqn.ch/photos/manu/manu-left.webp"
-            />
+                alt="Emmanuel Bernard"
+                class="w-full h-auto object-cover grayscale object-top mix-blend-multiply"
+              />
+            </div>
+
+            <h1
+              class="text-4xl sm:text-5xl font-extrabold tracking-tighter text-black mb-4 uppercase leading-[0.9]"
+            >
+              Emmanuel<br />Bernard
+            </h1>
           </div>
 
-          <h1
+          <!-- Body -->
-            class="text-4xl sm:text-5xl font-extrabold tracking-tighter text-black mb-4 uppercase leading-[0.9]"
+          <div class="space-y-6">
-          >
+            <h2
-            Emmanuel<br />Bernard
+              class="text-xl font-bold border-l-4 border-black pl-4 py-1 leading-snug"
-          </h1>
+            >
+              Consultant-formateur<br />AI Automation &<br />Expert n8n à
+              Lausanne
+            </h2>
+
+            <p
+              class="text-lg text-black font-medium leading-relaxed max-w-sm text-balance"
+            >
+              Avec 20 ans d'expérience technique, j'accompagne les équipes et
+              agences pour automatiser leurs processus et prototyper leurs idées
+              grâce à l'IA.
+            </p>
+          </div>
         </div>
 
-        <!-- Body -->
+        <!-- Footer (Moved from Right Col) -->
-        <div class="space-y-6">
+        <div
-          <h2
+          class="border-t border-black bg-gray-50 p-6 flex items-center justify-between text-xs font-mono uppercase tracking-widest text-black/50"
-            class="text-xl font-bold border-l-4 border-black pl-4 py-1 leading-snug"
+        >
-          >
+          <span>© {new Date().getFullYear()} Emmanuel Bernard</span>
-            Consultant-formateur<br />AI Automation &<br />Expert n8n à Lausanne
+          <span>Lausanne, CH</span>
-          </h2>
-
-          <p
-            class="text-lg text-black font-medium leading-relaxed max-w-sm text-balance"
-          >
-            Avec 20 ans d'expérience technique, j'accompagne les équipes et
-            agences pour automatiser leurs processus et prototyper leurs idées
-            grâce à l'IA.
-          </p>
         </div>
       </div>
 
       <!-- RIGHT COLUMN: Links Broken Grid (Spans 7 cols) -->
       <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2">
-        <!-- Link Block 1: Agency Site -->
+        <!-- Link Block 1: Agency Site (Full Width) -->
         <a
           href="https://avqn.ch"
           target="_blank"
@@ -97,7 +109,41 @@ const links = [
           </div>
         </a>
 
-        <!-- Link Block 2: LinkedIn -->
+        <!-- Link Block 2: The AI Atelier -->
+        <a
+          href="https://www.skool.com/the-ai-atelier/about"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative border-b sm:border-r border-black p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"
+        >
+          <div class="absolute top-6 right-6">
+            <span class="text-2xl font-light">↗</span>
+          </div>
+          <div class="mt-auto">
+            <span class="block text-2xl font-bold mb-1">The AI Atelier</span>
+            <span class="text-xs uppercase opacity-60">Skool Community</span>
+          </div>
+        </a>
+
+        <!-- Link Block 3: Your Video Engine -->
+        <a
+          href="https://www.yourvideoengine.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative border-b border-black p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"
+        >
+          <div class="absolute top-6 right-6">
+            <span class="text-2xl font-light">↗</span>
+          </div>
+          <div class="mt-auto">
+            <span class="block text-2xl font-bold mb-1">Your Video Engine</span>
+            <span class="text-xs uppercase opacity-60"
+              >AI Avatar video Generator</span
+            >
+          </div>
+        </a>
+
+        <!-- Link Block 4: LinkedIn -->
         <a
           href="https://www.linkedin.com/in/emmbernard"
           target="_blank"
@@ -113,7 +159,7 @@ const links = [
           </div>
         </a>
 
-        <!-- Link Block 3: YouTube -->
+        <!-- Link Block 5: YouTube -->
         <a
           href="https://www.youtube.com/@emmanuelflux"
           target="_blank"
@@ -128,14 +174,6 @@ const links = [
             <span class="text-xs uppercase opacity-60">Tutoriels & Démos</span>
           </div>
         </a>
-
-        <!-- Optional Filler / Deco Block (To complete grid if needed, or footer) -->
-        <div
-          class="sm:col-span-2 border-t border-black bg-gray-50 p-6 flex items-center justify-between text-xs font-mono uppercase tracking-widest text-black/50"
-        >
-          <span>© {new Date().getFullYear()} Emmanuel Bernard</span>
-          <span>Lausanne, CH</span>
-        </div>
       </div>
     </div>
   </main>