src/app/about/page.tsx

@@ -1,16 +1,26 @@
 "use client";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function AboutPage() {
-  const navItems = [{ name: "Accueil", id: "/" }, { name: "À propos", id: "/about" }, { name: "Tarifs", id: "/pricing" }];
-  return (
-    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen navItems={navItems} brandName="FacturPro" />
-      </div>
-      <FooterBaseCard logoText="FacturPro" columns={[{ title: "Produit", items: [{ label: "Fonctionnalités", href: "/features" }, { label: "Tarifs", href: "/pricing" }] }]} />
-    </ThemeProvider>
-  );
+    const navItems = [{ name: "Accueil", id: "/" }, { name: "Fonctionnalités", id: "/fonctionnalites" }, { name: "Tarifs", id: "/tarifs" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }, { name: "Blog", id: "/blog" }, { name: "Mentions Légales", id: "/legal" }, { name: "À propos", id: "/about" }, { name: "Équipe", id: "/team" }];
+
+    return (
+        <ThemeProvider>
+            <div id="nav" data-section="nav"><NavbarStyleFullscreen navItems={navItems} brandName="FacturPro" button={{ text: "Essayer gratuitement", href: "/contact" }} /></div>
+            <div id="about" data-section="about">
+                <MetricSplitMediaAbout
+                    title="Notre Mission"
+                    description="Simplifier radicalement la mise en conformité des entreprises françaises face aux enjeux de la dématérialisation."
+                    metrics={[{ value: "1.2k+", title: "Entreprises accompagnées" }, { value: "500k+", title: "Factures traitées" }, { value: "99%", title: "Taux de satisfaction" }]}
+                    useInvertedBackground={false}
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5f03cm"
+                />
+            </div>
+            <div id="footer" data-section="footer"><FooterBaseCard logoText="FacturPro" columns={[{ title: "Produit", items: [{ label: "Fonctionnalités", href: "/fonctionnalites" }, { label: "Tarifs", href: "/tarifs" }] }, { title: "Légal", items: [{ label: "Mentions légales", href: "/legal" }, { label: "CGU", href: "/legal" }] }, { title: "Ressources", items: [{ label: "Blog", href: "/blog" }] }, { title: "Contact", items: [{ label: "Support", href: "/contact" }] }]} /></div>
+        </ThemeProvider>
+    );
 }

src/app/blog/page.tsx

@@ -1,14 +1,33 @@
 "use client";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function BlogPage() {
-  return (
-    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen navItems={[{name: "Home", id: "/"}]} brandName="FacturPro" />
-      </div>
-      <div>Blog</div>
-    </ThemeProvider>
-  );
+    const navItems = [{ name: "Accueil", id: "/" }, { name: "Fonctionnalités", id: "/fonctionnalites" }, { name: "Tarifs", id: "/tarifs" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }, { name: "Blog", id: "/blog" }, { name: "Mentions Légales", id: "/legal" }, { name: "À propos", id: "/about" }, { name: "Équipe", id: "/team" }];
+
+    return (
+        <ThemeProvider>
+            <div id="nav" data-section="nav"><NavbarStyleFullscreen navItems={navItems} brandName="FacturPro" button={{ text: "Essayer gratuitement", href: "/contact" }} /></div>
+            <div id="blog" data-section="blog">
+                <BlogCardOne
+                    title="Ressources & Actualités"
+                    description="Découvrez nos guides pratiques sur la réforme de la facturation électronique 2026."
+                    animationType="slide-up"
+                    useInvertedBackground={false}
+                    blogs={[
+                        { id: "1", category: "Guide", title: "Comprendre la réforme 2026", excerpt: "Tout savoir sur les nouvelles obligations légales pour votre PME.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5f03cm", authorName: "Jean Dupont", authorAvatar: "", date: "12 Mai 2025" },
+                        { id: "2", category: "Technique", title: "Factur-X : Le standard expliqué", excerpt: "Pourquoi ce format hybride est la clé de votre conformité.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5f03cm", authorName: "Sarah Martin", authorAvatar: "", date: "05 Mai 2025" }
+                    ]}
+                />
+            </div>
+            <div id="contact" data-section="contact">
+                <ContactCTA tag="Besoin d'aide ?" title="Des questions sur nos ressources ?" description="Nos experts sont là pour vous accompagner dans votre mise en conformité." buttons={[{ text: "Contactez-nous", href: "/contact" }]} />
+            </div>
+            <div id="footer" data-section="footer"><FooterBaseCard logoText="FacturPro" columns={[{ title: "Produit", items: [{ label: "Fonctionnalités", href: "/fonctionnalites" }, { label: "Tarifs", href: "/tarifs" }] }, { title: "Légal", items: [{ label: "Mentions légales", href: "/legal" }, { label: "CGU", href: "/legal" }] }, { title: "Ressources", items: [{ label: "Blog", href: "/blog" }] }, { title: "Contact", items: [{ label: "Support", href: "/contact" }] }]} /></div>
+        </ThemeProvider>
+    );
 }

src/app/contact/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function ContactPage() {
+    const navItems = [{ name: "Accueil", id: "/" }, { name: "Fonctionnalités", id: "/fonctionnalites" }, { name: "Tarifs", id: "/tarifs" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }, { name: "Blog", id: "/blog" }, { name: "Mentions Légales", id: "/legal" }, { name: "À propos", id: "/about" }, { name: "Équipe", id: "/team" }];
+
+    return (
+        <ThemeProvider>
+            <div id="nav" data-section="nav"><NavbarStyleFullscreen navItems={navItems} brandName="FacturPro" button={{ text: "Essayer gratuitement", href: "/contact" }} /></div>
+            <div id="contact" data-section="contact">
+                <ContactSplit
+                    tag="Support"
+                    title="Besoin d'assistance ?"
+                    description="Notre équipe support est disponible du lundi au vendredi de 9h à 18h pour répondre à toutes vos questions concernant FacturPro."
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5f03cm"
+                />
+            </div>
+            <div id="footer" data-section="footer"><FooterBaseCard logoText="FacturPro" columns={[{ title: "Produit", items: [{ label: "Fonctionnalités", href: "/fonctionnalites" }, { label: "Tarifs", href: "/tarifs" }] }, { title: "Légal", items: [{ label: "Mentions légales", href: "/legal" }, { label: "CGU", href: "/legal" }] }, { title: "Ressources", items: [{ label: "Blog", href: "/blog" }] }, { title: "Contact", items: [{ label: "Support", href: "/contact" }] }]} /></div>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -148,11 +148,11 @@ export default function FacturProLanding() {
                     columns={[
                         { title: "Produit", items: [{ label: "Fonctionnalités", href: "/fonctionnalites" }, { label: "Tarifs", href: "/tarifs" }] },
                         { title: "Légal", items: [{ label: "Mentions légales", href: "/legal" }, { label: "CGU", href: "/legal" }] },
-                        { title: "Ressources", items: [{ label: "Blog", href: "/blog" }, { label: "Guide réforme", href: "#" }] },
+                        { title: "Ressources", items: [{ label: "Blog", href: "/blog" }, { label: "Guide réforme", href: "/guide" }] },
                         { title: "Contact", items: [{ label: "Support", href: "#" }, { label: "Email", href: "/contact" }] }
                     ]}
                 />
             </div>
         </ThemeProvider>
     );
-}
+}