feat: Add n8n creator profile link and adjust borders for social media links.

Reviewed-on: AVQN/starter-astro#7

Dockerfile

@@ -1,19 +1,22 @@
 # Multi-stage build pour Astro
 FROM node:20-alpine AS builder
 
+# Installer pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
 WORKDIR /app
 
 # Copier les fichiers de dépendances
-COPY package*.json ./
+COPY package.json pnpm-lock.yaml ./
 
 # Installer les dépendances
-RUN npm ci
+RUN pnpm install --frozen-lockfile
 
 # Copier le code source
 COPY . .
 
 # Build du projet Astro
-RUN npm run build
+RUN pnpm run build
 
 # Stage de production avec nginx
 FROM nginx:alpine

README.md

@@ -35,10 +35,10 @@ Un starter kit moderne et élégant, optimisé pour la performance et le SEO. Co
 
 ```bash
 # Installer les dépendances
-npm install
+pnpm install
 
 # Lancer le serveur de dev
-npm run dev
+pnpm run dev
 ```
 
 Le site sera accessible sur `http://localhost:4321`
@@ -47,10 +47,10 @@ Le site sera accessible sur `http://localhost:4321`
 
 ```bash
 # Générer les fichiers statiques
-npm run build
+pnpm run build
 
 # Prévisualiser le build
-npm run preview
+pnpm run preview
 ```
 
 ### Docker
@@ -110,4 +110,62 @@ Créez un fichier `.jsx` dans `src/components/` et utilisez-le avec une directiv
 - [Tailwind CSS](https://tailwindcss.com) - Framework CSS utility-first
 - [Docker](https://www.docker.com) - Containerisation
 
+## 🚀 Déploiement sur Coolify (Production)
 
+Suivez cette procédure étape par étape pour déployer une nouvelle instance de ce site.
+
+### 1. Préparation dans Gitea
+
+1. Allez sur le dépôt du template dans Gitea.
+2. Cliquez sur **"Utiliser ce modèle"** (Use this template).
+3. Créez votre nouveau dépôt (ex: `mon-nouveau-site`).
+
+### 2. Création du projet dans Coolify
+
+1. Dans Coolify, créez un **New Project**.
+2. Choisissez **Private Repository** (avec déploiement via clé privée).
+3. Sélectionnez la clé privée : `Gitea`.
+4. Sélectionnez le serveur : `avqn-worker`.
+
+### 3. Configuration du Git
+
+Remplissez les informations suivantes :
+
+- **Repository URL** : Utilisez le format SSH court (ex: `git@git.avqn.ch:AVQN/mon-nouveau-site.git`).
+  > ⚠️ **Attention** : Ne mettez PAS `ssh://` devant.
+- **Branch** : `main`
+
+### 4. Configuration du Build
+
+Coolify va charger le dépôt. Une fois chargé, configurez comme suit :
+
+- **Build Pack** : Choisissez `Nixpacks`.
+- **Options** :
+  - Cochez la case **Is it a static site?** ✅.
+  - **Publish Directory** : Laissez `dist`.
+
+### 5. Configuration du Domaine
+
+Changez le domaine par défaut (ex: `https://mon-site.app.avqn.ch`).
+
+### 6. Fonctionnalités Avancées (Indispensable pour les PRs)
+
+1. Allez dans l'onglet **Features** (ou Configuration -> Advanced).
+2. Cochez **Preview Deployments** pour activer les environnements temporaires sur les Pull Requests.
+
+### 7. Configuration des Webhooks (Sécurité)
+
+Pour que Coolify puisse nettoyer les environnements de PR automatiquement :
+
+1. Dans Coolify (menu **Webhooks** du projet), définissez un **Webhook Secret** (générez-en un ou mettez un mot de passe fort).
+2. Copiez ce secret.
+3. Allez dans **Gitea -> Configuration du dépôt -> Webhooks**.
+4. Ajoutez le Webhook Coolify (ou modifiez l'existant) et collez le code dans le champ **Secret**.
+
+### 8. Lancement
+
+Cliquez sur **Deploy**. 🚀
+
+
+
+<!-- Webhook test mar. 30 déc. 2025 09:27:22 CET -->

public/favicon.svg

@@ -1,9 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+<g clip-path="url(#clip0_1_40)">
-    <style>
+<rect width="107" height="21" fill="black"/>
-        path { fill: #000; }
+<rect y="107" width="128" height="21" fill="black"/>
-        @media (prefers-color-scheme: dark) {
+<rect y="53" width="128" height="21" fill="black"/>
-            path { fill: #FFF; }
+<rect x="5.59506e-06" y="128" width="128" height="21" transform="rotate(-90 5.59506e-06 128)" fill="black"/>
-        }
+<rect x="43" y="128" width="128" height="21" transform="rotate(-90 43 128)" fill="black"/>
-    </style>
+<rect x="86" y="74" width="74" height="21" transform="rotate(-90 86 74)" fill="black"/>
+<rect x="107" y="127" width="74" height="21" transform="rotate(-90 107 127)" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1_40">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
 </svg>

src/components/MobileMenu.jsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+
+export default function MobileMenu({ currentPath }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const links = [
+        { href: '/', label: 'Home' },
+        { href: '/about', label: 'About' },
+        { href: '/contact', label: 'Contact' },
+    ];
+
+    return (
+        <>
+            {/* Hamburger Button */}
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="md:hidden flex flex-col gap-1.5 p-2 hover:bg-gray-100 rounded transition-colors"
+                aria-label="Toggle menu"
+            >
+                <span
+                    className={`block w-6 h-0.5 bg-gray-900 transition-transform ${isOpen ? 'rotate-45 translate-y-2' : ''
+                        }`}
+                />
+                <span
+                    className={`block w-6 h-0.5 bg-gray-900 transition-opacity ${isOpen ? 'opacity-0' : ''
+                        }`}
+                />
+                <span
+                    className={`block w-6 h-0.5 bg-gray-900 transition-transform ${isOpen ? '-rotate-45 -translate-y-2' : ''
+                        }`}
+                />
+            </button>
+
+            {/* Mobile Menu Overlay */}
+            {isOpen && (
+                <div
+                    className="fixed inset-0 bg-black/20 z-40 md:hidden"
+                    onClick={() => setIsOpen(false)}
+                />
+            )}
+
+            {/* Mobile Menu Panel */}
+            <div
+                className={`fixed top-0 right-0 h-full w-64 bg-white shadow-xl z-50 transform transition-transform duration-300 md:hidden ${isOpen ? 'translate-x-0' : 'translate-x-full'
+                    }`}
+            >
+                <div className="flex flex-col h-full">
+                    {/* Header */}
+                    <div className="flex items-center justify-between p-6 border-b border-gray-200">
+                        <span className="text-lg font-semibold text-gray-900">Menu</span>
+                        <button
+                            onClick={() => setIsOpen(false)}
+                            className="p-2 hover:bg-gray-100 rounded transition-colors"
+                            aria-label="Close menu"
+                        >
+                            <svg
+                                className="w-6 h-6"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+
+                    {/* Navigation Links */}
+                    <nav className="flex-1 p-6">
+                        <ul className="space-y-4">
+                            {links.map((link) => (
+                                <li key={link.href}>
+                                    <a
+                                        href={link.href}
+                                        className={`block py-3 px-4 rounded-lg text-base font-medium transition-colors ${currentPath === link.href
+                                                ? 'bg-gray-900 text-white'
+                                                : 'text-gray-700 hover:bg-gray-100'
+                                            }`}
+                                        onClick={() => setIsOpen(false)}
+                                    >
+                                        {link.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+
+                    {/* Footer */}
+                    <div className="p-6 border-t border-gray-200">
+                        <p className="text-xs text-gray-500">Astro Starter Kit</p>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

src/components/Navbar.astro

@@ -1,4 +1,6 @@
 ---
+import MobileMenu from "./MobileMenu.jsx";
+
 const currentPath = Astro.url.pathname;
 ---
 
@@ -12,7 +14,8 @@ const currentPath = Astro.url.pathname;
                 Starter Kit
             </a>
 
-            <div class="flex gap-8">
+            {/* Desktop Navigation */}
+            <div class="hidden md:flex gap-8">
                 <a
                     href="/"
                     class:list={[
@@ -47,6 +50,9 @@ const currentPath = Astro.url.pathname;
                     Contact
                 </a>
             </div>
+
+            {/* Mobile Menu */}
+            <MobileMenu currentPath={currentPath} client:load />
         </div>
     </div>
 </nav>

src/layouts/BaseLayout.astro

@@ -4,11 +4,13 @@ import "../styles/global.css";
 interface Props {
   title?: string;
   description?: string;
+  image?: string;
 }
 
 const {
-  title = "Astro Starter Kit",
+  title = "Emmanuel Bernard - Consultant-formateur en AI Automation & expert n8n, Lausanne, Suisse Romande",
-  description = "Un starter kit Astro minimal et élégant",
+  description = "Expert en automatisation n8n et intelligence artificielle basé à Lausanne. J'accompagne les agences et équipes pour décupler leur productivité.",
+  image = "https://cdn.avqn.ch/images/website/aussi-vite-que-necessaire.jpg",
 } = Astro.props;
 ---
 
@@ -24,20 +26,40 @@ const {
     <title>{title}</title>
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
-    <meta property="og:type" content="website" />
+    <meta property="og:type" content="profile" />
+    <meta property="og:image" content={image} />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    <meta property="twitter:image" content={image} />
 
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
-    <!-- Google Fonts - Inter -->
+    <!-- Font Optimization: Preload Critical Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="preload"
-      rel="stylesheet"
+      href="https://cdn.avqn.ch/fonts/ClashDisplay-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
     />
+    <link
+      rel="preload"
+      href="https://cdn.avqn.ch/fonts/GeneralSans-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <!-- Analytics -->
+    <script
+      defer
+      src="https://analytics.avqn.ch/script.js"
+      data-website-id="0446d79d-9348-418f-b990-3321e98f7fe4"></script>
   </head>
-  <body class="font-sans antialiased bg-white text-gray-900">
+  <body class="font-sans antialiased bg-white text-gray-900 min-h-screen">
     <slot />
   </body>
 </html>

src/pages/about.astro

@@ -1,69 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
-import Navbar from "../components/Navbar.astro";
----
-
-<BaseLayout
-    title="About - Astro Starter Kit"
-    description="À propos de ce starter kit Astro"
->
-    <Navbar />
-
-    <main class="max-w-4xl mx-auto px-6 py-16">
-        <div class="mb-16">
-            <h1 class="text-5xl font-bold tracking-tight mb-4">About</h1>
-            <p class="text-xl text-gray-600 leading-relaxed">
-                Un starter kit pensé pour la simplicité et l'élégance.
-            </p>
-            <div class="mt-4">
-                <span
-                    class="inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full"
-                >
-                    v2.0 - Test auto-deploy
-                </span>
-            </div>
-        </div>
-
-        <div class="prose prose-gray max-w-none">
-            <h2 class="text-2xl font-semibold mb-4">Philosophie</h2>
-            <p class="text-gray-600 leading-relaxed mb-8">
-                Ce starter kit adopte une approche minimaliste : fournir une
-                base solide et élégante sans superflu, avec les outils
-                essentiels pour démarrer rapidement un projet web moderne et
-                performant.
-            </p>
-
-            <h2 class="text-2xl font-semibold mb-4">Technologies</h2>
-            <ul class="space-y-3 text-gray-600">
-                <li class="flex items-start">
-                    <span class="font-medium text-gray-900 mr-2">Astro</span>
-                    <span>— Framework web moderne avec génération statique</span
-                    >
-                </li>
-                <li class="flex items-start">
-                    <span class="font-medium text-gray-900 mr-2">React</span>
-                    <span
-                        >— Bibliothèque UI pour les composants interactifs</span
-                    >
-                </li>
-                <li class="flex items-start">
-                    <span class="font-medium text-gray-900 mr-2"
-                        >Tailwind CSS</span
-                    >
-                    <span>— Framework CSS utility-first</span>
-                </li>
-                <li class="flex items-start">
-                    <span class="font-medium text-gray-900 mr-2">Docker</span>
-                    <span>— Containerisation pour un déploiement simplifié</span
-                    >
-                </li>
-            </ul>
-
-            <div class="mt-12 pt-8 border-t border-gray-200">
-                <p class="text-sm text-gray-500">
-                    Construit avec attention aux détails et à la performance.
-                </p>
-            </div>
-        </div>
-    </main>
-</BaseLayout>

src/pages/contact.astro

@@ -1,83 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
-import Navbar from "../components/Navbar.astro";
----
-
-<BaseLayout
-    title="Contact - Astro Starter Kit"
-    description="Contactez-nous via ce formulaire"
->
-    <Navbar />
-
-    <main class="max-w-4xl mx-auto px-6 py-16">
-        <div class="mb-12">
-            <h1 class="text-5xl font-bold tracking-tight mb-4">Contact</h1>
-            <p class="text-xl text-gray-600 leading-relaxed">
-                Envoyez-nous un message, nous serons ravis de vous répondre.
-            </p>
-        </div>
-
-        <!-- Formulaire -->
-        <form class="max-w-2xl space-y-6">
-            <div>
-                <label
-                    for="name"
-                    class="block text-sm font-medium text-gray-900 mb-2"
-                >
-                    Nom
-                </label>
-                <input
-                    type="text"
-                    id="name"
-                    name="name"
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
-                    placeholder="Votre nom"
-                />
-            </div>
-
-            <div>
-                <label
-                    for="email"
-                    class="block text-sm font-medium text-gray-900 mb-2"
-                >
-                    Email
-                </label>
-                <input
-                    type="email"
-                    id="email"
-                    name="email"
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
-                    placeholder="votre@email.com"
-                />
-            </div>
-
-            <div>
-                <label
-                    for="message"
-                    class="block text-sm font-medium text-gray-900 mb-2"
-                >
-                    Message
-                </label>
-                <textarea
-                    id="message"
-                    name="message"
-                    rows="6"
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all resize-none"
-                    placeholder="Votre message..."></textarea>
-            </div>
-
-            <button
-                type="button"
-                onclick="alert('Ceci est un formulaire de démonstration. Aucune donnée n\'est envoyée.')"
-                class="w-full px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors"
-            >
-                Envoyer le message
-            </button>
-
-            <p class="text-sm text-gray-500 text-center">
-                Note : Ce formulaire est une démonstration et n'envoie aucune
-                donnée.
-            </p>
-        </form>
-    </main>
-</BaseLayout>

src/pages/index.astro

@@ -1,73 +1,198 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-import Navbar from "../components/Navbar.astro";
+
+const links = [
+  {
+    title: "Aussi Vite Que Nécessaire",
+    url: "https://avqn.ch",
+    icon: "🌐",
+  },
+  {
+    title: "LinkedIn",
+    url: "https://www.linkedin.com/in/emmbernard",
+    icon: "💼",
+  },
+  {
+    title: "YouTube",
+    url: "https://www.youtube.com/@emmanuelflux",
+    icon: "🎥",
+  },
+];
 ---
 
-<BaseLayout
+<BaseLayout>
-	title="Astro Starter Kit"
+  <!-- Main Container: Full screen height, centered content but with a grid layout -->
-	description="Un starter kit minimal et élégant avec Astro, React et Tailwind CSS"
+  <main
->
+    class="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-white selection:bg-black selection:text-white"
-	<Navbar />
+  >
+    <!-- Grid Wrapper: Max width restriction for large screens, grid on desktop -->
+    <div
+      class="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-12 border border-black"
+    >
+      <!-- LEFT COLUMN: Profile & Bio (Spans 5 cols) -->
+      <div
+        class="lg:col-span-5 border-b lg:border-b-0 lg:border-r border-black flex flex-col justify-between min-h-[500px]"
+      >
+        <!-- Main Content Area -->
+        <div class="p-8 sm:p-12 flex-1 flex flex-col justify-between">
+          <!-- Header / Avatar -->
+          <div>
+            <div
+              class="w-48 mb-8 bg-gradient-to-br from-[#FFE4D9] to-[#FFD6CC] rounded-3xl overflow-hidden shadow-2xl shadow-rose-900/20"
+            >
+              <img
+                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>
 
-	<main class="max-w-4xl mx-auto px-6 py-16">
+            <h1
-		<!-- Hero Section -->
+              class="text-4xl sm:text-5xl font-extrabold tracking-tighter text-black mb-4 uppercase leading-[0.9]"
-		<div class="mb-16">
+            >
-			<h1 class="text-5xl font-bold tracking-tight mb-4">
+              Emmanuel<br />Bernard
-				Astro Starter Kit
+            </h1>
-			</h1>
+          </div>
-			<p class="text-xl text-gray-600 leading-relaxed">
-				Un point de départ minimal et élégant pour vos projets web
-				modernes.
-			</p>
-			<p class="text-sm text-gray-500 mt-2 italic">
-				✨ Mise à jour de test — Version améliorée
-			</p>
-		</div>
 
-		<!-- Features -->
+          <!-- Body -->
-		<div class="space-y-12">
+          <div class="space-y-6">
-			<div>
+            <h2
-				<h2 class="text-2xl font-semibold mb-3">Performance</h2>
+              class="text-xl font-bold border-l-4 border-black pl-4 py-1 leading-snug"
-				<p class="text-gray-600 leading-relaxed">
+            >
-					Génération statique ultra-rapide avec Astro. Zéro JavaScript
+              Consultant-formateur<br />AI Automation &<br />Expert n8n à
-					par défaut, hydratation partielle intelligente uniquement
+              Lausanne
-					quand nécessaire.
+            </h2>
-				</p>
-			</div>
 
-			<div>
+            <p
-				<h2 class="text-2xl font-semibold mb-3">Design System</h2>
+              class="text-lg text-black font-medium leading-relaxed max-w-sm text-balance"
-				<p class="text-gray-600 leading-relaxed">
+            >
-					Tailwind CSS intégré pour un développement rapide et
+              Avec 20 ans d'expérience technique, j'accompagne les équipes et
-					cohérent. Typographie soignée avec Inter, design épuré et
+              agences pour automatiser leurs processus et prototyper leurs idées
-					moderne.
+              grâce à l'IA.
-				</p>
+            </p>
-			</div>
+          </div>
+        </div>
 
-			<div>
+        <!-- Footer (Moved from Right Col) -->
-				<h2 class="text-2xl font-semibold mb-3">
+        <div
-					Prêt pour la production
+          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"
-				</h2>
+        >
-				<p class="text-gray-600 leading-relaxed">
+          <span>© {new Date().getFullYear()} Emmanuel Bernard</span>
-					Build Docker multi-stage optimisé, SEO configuré, structure
+          <span>Lausanne, CH</span>
-					claire et extensible.
+        </div>
-				</p>
+      </div>
-			</div>
-		</div>
 
-		<!-- CTA -->
+      <!-- RIGHT COLUMN: Links Broken Grid (Spans 7 cols) -->
-		<div class="mt-16 pt-12 border-t border-gray-200">
+      <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2">
-			<div class="flex items-center gap-2 mb-2">
+        <!-- Link Block 1: Agency Site (Full Width) -->
-				<span
+        <a
-					class="inline-block px-2 py-1 text-xs font-medium bg-gray-900 text-white rounded"
+          href="https://avqn.ch"
-				>
+          target="_blank"
-					Nouveau
+          rel="noopener noreferrer"
-				</span>
+          class="group relative sm:col-span-2 border-b border-black p-8 sm:p-12 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-center min-h-[240px]"
-				<span class="text-sm text-gray-600">Prêt pour vos projets</span>
+        >
-			</div>
+          <span
-			<p class="text-sm text-gray-500">
+            class="text-sm font-bold uppercase tracking-widest mb-2 opacity-60 group-hover:opacity-80"
-				Commencez à construire votre projet dès maintenant.
+            >AVQN.CH</span
-			</p>
+          >
-		</div>
+          <span
-	</main>
+            class="text-3xl sm:text-4xl font-black uppercase leading-none tracking-tighter mb-4"
+            >Aussi Vite<br />Que Nécessaire</span
+          >
+          <p
+            class="text-sm sm:text-base font-medium max-w-sm mt-auto border-l-2 border-current pl-3 opacity-90"
+          >
+            Découvrez mes services en<br />AI Automation et n8n
+          </p>
+          <div class="absolute top-6 right-6">
+            <span class="text-4xl font-light">↗</span>
+          </div>
+        </a>
+
+        <!-- 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"
+          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">LinkedIn</span>
+            <span class="text-xs uppercase opacity-60">Connectons-nous</span>
+          </div>
+        </a>
+
+        <!-- Link Block 5: YouTube -->
+        <a
+          href="https://www.youtube.com/@emmanuelflux"
+          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">YouTube</span>
+            <span class="text-xs uppercase opacity-60">Tutoriels & Démos</span>
+          </div>
+        </a>
+
+        <!-- Link Block 6: n8n -->
+        <a
+          href="https://n8n.io/creators/n8ninja/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative sm:col-span-2 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">Mes Workflows n8n</span>
+            <span class="text-xs uppercase opacity-60"
+              >Profil Créateur & Modèles</span
+            >
+          </div>
+        </a>
+      </div>
+    </div>
+  </main>
 </BaseLayout>

src/styles/global.css

@@ -1,7 +1,98 @@
 @import "tailwindcss";
 
+@theme {
+    --font-sans: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
+    --font-display: "Clash Display", "Inter", system-ui, -apple-system, sans-serif;
+
+    --color-primary-50: #FFE5EF;
+    --color-primary-100: #FFCCE0;
+    --color-primary-200: #FF99C1;
+    --color-primary-300: #FF66A2;
+    --color-primary-400: #FF5C8A;
+    --color-primary-500: #FF5C8A;
+    --color-primary-600: #FF2E6E;
+    --color-primary-700: #FF0052;
+    --color-primary-800: #CC0042;
+    --color-primary-900: #990032;
+}
+
+/* Fonts Setup */
+@font-face {
+    font-family: 'General Sans';
+    src: url('https://cdn.avqn.ch/fonts/GeneralSans-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'General Sans';
+    src: url('https://cdn.avqn.ch/fonts/GeneralSans-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'General Sans';
+    src: url('https://cdn.avqn.ch/fonts/GeneralSans-Semibold.woff2') format('woff2');
+    font-weight: 600;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'General Sans';
+    src: url('https://cdn.avqn.ch/fonts/GeneralSans-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Clash Display';
+    src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Clash Display';
+    src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Clash Display';
+    src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Semibold.woff2') format('woff2');
+    font-weight: 600;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Clash Display';
+    src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-display: swap;
+    font-style: normal;
+}
+
 @layer base {
     body {
-        font-family: 'Inter', system-ui, -apple-system, sans-serif;
+        font-family: var(--font-sans);
+        @apply bg-primary-50 text-gray-900 antialiased selection:bg-primary-500 selection:text-white;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-family: var(--font-display);
     }
 }