diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..301c504
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,441 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Shield, Users, Award, MapPin, Phone, Mail, MessageSquare } from "lucide-react";
+import { useState } from "react";
+import Input from "@/components/form/Input";
+
+export default function ContactPage() {
+  const [contactForm, setContactForm] = useState({
+    auto: { name: "", phone: "", email: "", message: "" },
+    habitation: { name: "", phone: "", email: "", message: "" },
+    sante: { name: "", phone: "", email: "", message: "" },
+    professionnel: { name: "", phone: "", email: "", message: "" },
+  });
+
+  const handleContactSubmit = (type: string) => {
+    console.log(`Formulaire ${type} soumis:`, contactForm[type as keyof typeof contactForm]);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Soccar Assurances"
+          navItems={[
+            { name: "Accueil", id: "/" },
+            { name: "À Propos", id: "about" },
+            { name: "Services", id: "features" },
+            { name: "Tarifs", id: "pricing" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{
+            text: "Demander un Devis",            href: "/contact"}}
+        />
+      </div>
+
+      <div className="py-20 px-6 md:px-12 min-h-screen">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">Contactez-Nous</h1>
+            <p className="text-lg opacity-90 max-w-2xl mx-auto">
+              Nous sommes à votre écoute. Remplissez le formulaire ci-dessous ou contactez-nous directement par téléphone ou WhatsApp.
+            </p>
+          </div>
+
+          {/* Contact Information Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            {/* Phone Numbers */}
+            <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity text-center">
+              <Phone className="w-8 h-8 mx-auto mb-4" />
+              <h3 className="text-2xl font-bold mb-4">Téléphone</h3>
+              <p className="mb-3">
+                <a href="tel:+237699318991" className="hover:underline font-semibold">
+                  +237 699 318 991
+                </a>
+              </p>
+              <p>
+                <a href="tel:+237672072869" className="hover:underline font-semibold">
+                  +237 672 072 869
+                </a>
+              </p>
+            </div>
+
+            {/* WhatsApp */}
+            <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity text-center">
+              <MessageSquare className="w-8 h-8 mx-auto mb-4" />
+              <h3 className="text-2xl font-bold mb-4">WhatsApp</h3>
+              <p>
+                <a
+                  href="https://wa.me/237699318991"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline font-semibold"
+                >
+                  Discuter sur WhatsApp
+                </a>
+              </p>
+              <p className="text-sm opacity-75 mt-2">Disponible 24/7</p>
+            </div>
+
+            {/* Location */}
+            <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity text-center">
+              <MapPin className="w-8 h-8 mx-auto mb-4" />
+              <h3 className="text-2xl font-bold mb-4">Localisation</h3>
+              <p className="font-semibold">Akwa Nord, Douala</p>
+              <p className="text-sm opacity-75 mt-2">Cameroun</p>
+            </div>
+          </div>
+
+          {/* Contact Forms */}
+          <div className="mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold mb-12 text-center">Formulaires de Demande de Devis</h2>
+            <p className="text-center mb-16 text-lg opacity-90 max-w-2xl mx-auto">
+              Sélectionnez le type d'assurance qui vous intéresse et remplissez le formulaire. Notre équipe vous contactera rapidement pour discuter de vos besoins spécifiques.
+            </p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* Assurance Automobile */}
+              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
+                <div className="flex items-center gap-3 mb-6">
+                  <Shield className="w-6 h-6" />
+                  <h3 className="text-2xl font-bold">Assurance Automobile</h3>
+                </div>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleContactSubmit("auto");
+                  }}
+                  className="space-y-4"
+                >
+                  <Input
+                    value={contactForm.auto.name}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        auto: { ...prev.auto, name: value },
+                      }))
+                    }
+                    placeholder="Votre nom"
+                    required
+                  />
+                  <Input
+                    value={contactForm.auto.phone}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        auto: { ...prev.auto, phone: value },
+                      }))
+                    }
+                    placeholder="Téléphone"
+                    required
+                  />
+                  <Input
+                    value={contactForm.auto.email}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        auto: { ...prev.auto, email: value },
+                      }))
+                    }
+                    placeholder="Email"
+                    type="email"
+                    required
+                  />
+                  <textarea
+                    value={contactForm.auto.message}
+                    onChange={(e) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        auto: { ...prev.auto, message: e.target.value },
+                      }))
+                    }
+                    placeholder="Détails de votre véhicule et besoins"
+                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
+                    rows={4}
+                  />
+                  <button
+                    type="submit"
+                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
+                  >
+                    Demander un Devis Auto
+                  </button>
+                </form>
+              </div>
+
+              {/* Assurance Habitation */}
+              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
+                <div className="flex items-center gap-3 mb-6">
+                  <MapPin className="w-6 h-6" />
+                  <h3 className="text-2xl font-bold">Assurance Habitation</h3>
+                </div>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleContactSubmit("habitation");
+                  }}
+                  className="space-y-4"
+                >
+                  <Input
+                    value={contactForm.habitation.name}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        habitation: { ...prev.habitation, name: value },
+                      }))
+                    }
+                    placeholder="Votre nom"
+                    required
+                  />
+                  <Input
+                    value={contactForm.habitation.phone}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        habitation: { ...prev.habitation, phone: value },
+                      }))
+                    }
+                    placeholder="Téléphone"
+                    required
+                  />
+                  <Input
+                    value={contactForm.habitation.email}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        habitation: { ...prev.habitation, email: value },
+                      }))
+                    }
+                    placeholder="Email"
+                    type="email"
+                    required
+                  />
+                  <textarea
+                    value={contactForm.habitation.message}
+                    onChange={(e) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        habitation: { ...prev.habitation, message: e.target.value },
+                      }))
+                    }
+                    placeholder="Type de bien, localisation, superficie"
+                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
+                    rows={4}
+                  />
+                  <button
+                    type="submit"
+                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
+                  >
+                    Demander un Devis Habitation
+                  </button>
+                </form>
+              </div>
+
+              {/* Assurance Santé */}
+              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
+                <div className="flex items-center gap-3 mb-6">
+                  <Award className="w-6 h-6" />
+                  <h3 className="text-2xl font-bold">Assurance Santé</h3>
+                </div>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleContactSubmit("sante");
+                  }}
+                  className="space-y-4"
+                >
+                  <Input
+                    value={contactForm.sante.name}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        sante: { ...prev.sante, name: value },
+                      }))
+                    }
+                    placeholder="Votre nom"
+                    required
+                  />
+                  <Input
+                    value={contactForm.sante.phone}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        sante: { ...prev.sante, phone: value },
+                      }))
+                    }
+                    placeholder="Téléphone"
+                    required
+                  />
+                  <Input
+                    value={contactForm.sante.email}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        sante: { ...prev.sante, email: value },
+                      }))
+                    }
+                    placeholder="Email"
+                    type="email"
+                    required
+                  />
+                  <textarea
+                    value={contactForm.sante.message}
+                    onChange={(e) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        sante: { ...prev.sante, message: e.target.value },
+                      }))
+                    }
+                    placeholder="Nombre de personnes, âge, besoins spécifiques"
+                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
+                    rows={4}
+                  />
+                  <button
+                    type="submit"
+                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
+                  >
+                    Demander un Devis Santé
+                  </button>
+                </form>
+              </div>
+
+              {/* Assurance Professionnelle */}
+              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
+                <div className="flex items-center gap-3 mb-6">
+                  <Users className="w-6 h-6" />
+                  <h3 className="text-2xl font-bold">Assurance Professionnelle</h3>
+                </div>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleContactSubmit("professionnel");
+                  }}
+                  className="space-y-4"
+                >
+                  <Input
+                    value={contactForm.professionnel.name}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        professionnel: { ...prev.professionnel, name: value },
+                      }))
+                    }
+                    placeholder="Nom de l'entreprise"
+                    required
+                  />
+                  <Input
+                    value={contactForm.professionnel.phone}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        professionnel: { ...prev.professionnel, phone: value },
+                      }))
+                    }
+                    placeholder="Téléphone"
+                    required
+                  />
+                  <Input
+                    value={contactForm.professionnel.email}
+                    onChange={(value) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        professionnel: { ...prev.professionnel, email: value },
+                      }))
+                    }
+                    placeholder="Email"
+                    type="email"
+                    required
+                  />
+                  <textarea
+                    value={contactForm.professionnel.message}
+                    onChange={(e) =>
+                      setContactForm((prev) => ({
+                        ...prev,
+                        professionnel: { ...prev.professionnel, message: e.target.value },
+                      }))
+                    }
+                    placeholder="Secteur d'activité, type de couverture recherchée"
+                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
+                    rows={4}
+                  />
+                  <button
+                    type="submit"
+                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
+                  >
+                    Demander un Devis Pro
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+
+          {/* Email Contact */}
+          <div className="text-center mb-16 p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
+            <Mail className="w-8 h-8 mx-auto mb-4" />
+            <h3 className="text-2xl font-bold mb-4">Email</h3>
+            <p>
+              <a href="mailto:contact@soccar-assurances.cm" className="hover:underline font-semibold">
+                contact@soccar-assurances.cm
+              </a>
+            </p>
+            <p className="text-sm opacity-75 mt-2">Nous répondons à tous les emails dans les 24 heures</p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Soccar Assurances"
+          copyrightText="© 2025 Soccar Assurances. Tous droits réservés."
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Assurance Automobile", href: "/#features" },
+                { label: "Assurance Habitation", href: "/#features" },
+                { label: "Assurance Santé", href: "/#features" },
+                { label: "Assurance Professionnelle", href: "/#features" },
+              ],
+            },
+            {
+              title: "Entreprise",              items: [
+                { label: "À Propos de Nous", href: "/#about" },
+                { label: "Tarifs", href: "/#pricing" },
+                { label: "Témoignages", href: "/#testimonials" },
+                { label: "FAQ", href: "/#faq" },
+              ],
+            },
+            {
+              title: "Contact & Localisation",              items: [
+                { label: "Akwa Nord, Douala, Cameroun", href: "#" },
+                { label: "+237 699318991", href: "tel:+237699318991" },
+                { label: "+237 672072869", href: "tel:+237672072869" },
+                { label: "contact@soccar-assurances.cm", href: "mailto:contact@soccar-assurances.cm" },
+              ],
+            },
+            {
+              title: "Juridique",              items: [
+                { label: "Politique de Confidentialité", href: "#" },
+                { label: "Conditions Générales", href: "#" },
+                { label: "Conditions de Service", href: "#" },
+                { label: "Conformité", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c295f75..4dea781 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ const mulish = Mulish({
 });
 
 export const metadata: Metadata = {
-  title: "Soccar Assurances | Assurance Fiable au Cameroun",  description: "Soccar Assurances offre des solutions d'assurance complètes au Cameroun : automobile, habitation, santé et professionnelle. Protection fiable à Akwa Nord, Douala.",  keywords: "assurance Cameroun, assurance automobile, assurance habitation, assurance santé, Douala, Akwa Nord",  metadataBase: new URL("https://soccar-assurances.cm"),
+  title: "Soccar Assurances | Assurance Fiable au Cameroun",  description: "Soccar Assurances offre des solutions d'assurance complètes au Cameroun : automobile, habitation, santé et professionnelle. Protection fiable à Akwa Nord, Douala.",  keywords: "assurance Cameroun, assurance auto Cameroun, assurance santé Cameroun, Soccar assurances, assurance en ligne, contact assurance Douala",  metadataBase: new URL("https://soccar-assurances.cm"),
   alternates: {
     canonical: "https://soccar-assurances.cm"},
   openGraph: {
@@ -44,7 +44,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="fr" suppressHydrationWarning>
       <ServiceWrapper>
         <body
           className={`${halant.variable} ${inter.variable} ${mulish.variable} antialiased`}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4569d21..fcfe4a0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,14 +43,14 @@ export default function LandingPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Soccar Assurances"
           navItems={[
-            { name: "Accueil", id: "hero" },
+            { name: "Accueil", id: "/" },
             { name: "À Propos", id: "about" },
             { name: "Services", id: "features" },
             { name: "Tarifs", id: "pricing" },
-            { name: "Contact", id: "contact" },
+            { name: "Contact", id: "/contact" },
           ]}
           button={{
-            text: "Demander un Devis",            href: "#contact"}}
+            text: "Demander un Devis",            href: "/contact"}}
         />
       </div>
 
@@ -60,7 +60,7 @@ export default function LandingPage() {
           description="Votre partenaire de confiance pour une protection complète et des solutions d'assurance adaptées à vos besoins à Akwa Nord, Cameroun."
           buttons={[
             { text: "Découvrir Nos Services", href: "#features" },
-            { text: "Demander un Devis Gratuit", href: "#contact" },
+            { text: "Demander un Devis Gratuit", href: "/contact" },
           ]}
           slides={[
             {
@@ -190,303 +190,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <div className="py-20 px-6 md:px-12">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-4xl md:text-5xl font-bold mb-12 text-center">Formulaires de Demande de Devis</h2>
-            <p className="text-center mb-16 text-lg opacity-90 max-w-2xl mx-auto">
-              Sélectionnez le type d'assurance qui vous intéresse et remplissez le formulaire. Notre équipe vous contactera rapidement pour discuter de vos besoins spécifiques.
-            </p>
-            
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              {/* Assurance Automobile */}
-              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-3 mb-6">
-                  <Shield className="w-6 h-6" />
-                  <h3 className="text-2xl font-bold">Assurance Automobile</h3>
-                </div>
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    handleContactSubmit("auto");
-                  }}
-                  className="space-y-4"
-                >
-                  <Input
-                    value={contactForm.auto.name}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        auto: { ...prev.auto, name: value },
-                      }))
-                    }
-                    placeholder="Votre nom"
-                    required
-                  />
-                  <Input
-                    value={contactForm.auto.phone}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        auto: { ...prev.auto, phone: value },
-                      }))
-                    }
-                    placeholder="Téléphone"
-                    required
-                  />
-                  <Input
-                    value={contactForm.auto.email}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        auto: { ...prev.auto, email: value },
-                      }))
-                    }
-                    placeholder="Email"
-                    type="email"
-                    required
-                  />
-                  <textarea
-                    value={contactForm.auto.message}
-                    onChange={(e) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        auto: { ...prev.auto, message: e.target.value },
-                      }))
-                    }
-                    placeholder="Détails de votre véhicule et besoins"
-                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
-                    rows={4}
-                  />
-                  <button
-                    type="submit"
-                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
-                  >
-                    Demander un Devis Auto
-                  </button>
-                </form>
-              </div>
-
-              {/* Assurance Habitation */}
-              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-3 mb-6">
-                  <MapPin className="w-6 h-6" />
-                  <h3 className="text-2xl font-bold">Assurance Habitation</h3>
-                </div>
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    handleContactSubmit("habitation");
-                  }}
-                  className="space-y-4"
-                >
-                  <Input
-                    value={contactForm.habitation.name}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        habitation: { ...prev.habitation, name: value },
-                      }))
-                    }
-                    placeholder="Votre nom"
-                    required
-                  />
-                  <Input
-                    value={contactForm.habitation.phone}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        habitation: { ...prev.habitation, phone: value },
-                      }))
-                    }
-                    placeholder="Téléphone"
-                    required
-                  />
-                  <Input
-                    value={contactForm.habitation.email}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        habitation: { ...prev.habitation, email: value },
-                      }))
-                    }
-                    placeholder="Email"
-                    type="email"
-                    required
-                  />
-                  <textarea
-                    value={contactForm.habitation.message}
-                    onChange={(e) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        habitation: { ...prev.habitation, message: e.target.value },
-                      }))
-                    }
-                    placeholder="Type de bien, localisation, superficie"
-                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
-                    rows={4}
-                  />
-                  <button
-                    type="submit"
-                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
-                  >
-                    Demander un Devis Habitation
-                  </button>
-                </form>
-              </div>
-
-              {/* Assurance Santé */}
-              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-3 mb-6">
-                  <Award className="w-6 h-6" />
-                  <h3 className="text-2xl font-bold">Assurance Santé</h3>
-                </div>
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    handleContactSubmit("sante");
-                  }}
-                  className="space-y-4"
-                >
-                  <Input
-                    value={contactForm.sante.name}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        sante: { ...prev.sante, name: value },
-                      }))
-                    }
-                    placeholder="Votre nom"
-                    required
-                  />
-                  <Input
-                    value={contactForm.sante.phone}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        sante: { ...prev.sante, phone: value },
-                      }))
-                    }
-                    placeholder="Téléphone"
-                    required
-                  />
-                  <Input
-                    value={contactForm.sante.email}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        sante: { ...prev.sante, email: value },
-                      }))
-                    }
-                    placeholder="Email"
-                    type="email"
-                    required
-                  />
-                  <textarea
-                    value={contactForm.sante.message}
-                    onChange={(e) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        sante: { ...prev.sante, message: e.target.value },
-                      }))
-                    }
-                    placeholder="Nombre de personnes, âge, besoins spécifiques"
-                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
-                    rows={4}
-                  />
-                  <button
-                    type="submit"
-                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
-                  >
-                    Demander un Devis Santé
-                  </button>
-                </form>
-              </div>
-
-              {/* Assurance Professionnelle */}
-              <div className="p-8 rounded-lg border-2 border-current opacity-80 hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-3 mb-6">
-                  <Users className="w-6 h-6" />
-                  <h3 className="text-2xl font-bold">Assurance Professionnelle</h3>
-                </div>
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    handleContactSubmit("professionnel");
-                  }}
-                  className="space-y-4"
-                >
-                  <Input
-                    value={contactForm.professionnel.name}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        professionnel: { ...prev.professionnel, name: value },
-                      }))
-                    }
-                    placeholder="Nom de l'entreprise"
-                    required
-                  />
-                  <Input
-                    value={contactForm.professionnel.phone}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        professionnel: { ...prev.professionnel, phone: value },
-                      }))
-                    }
-                    placeholder="Téléphone"
-                    required
-                  />
-                  <Input
-                    value={contactForm.professionnel.email}
-                    onChange={(value) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        professionnel: { ...prev.professionnel, email: value },
-                      }))
-                    }
-                    placeholder="Email"
-                    type="email"
-                    required
-                  />
-                  <textarea
-                    value={contactForm.professionnel.message}
-                    onChange={(e) =>
-                      setContactForm((prev) => ({
-                        ...prev,
-                        professionnel: { ...prev.professionnel, message: e.target.value },
-                      }))
-                    }
-                    placeholder="Secteur d'activité, type de couverture recherchée"
-                    className="w-full p-3 rounded border opacity-75 focus:opacity-100 transition-opacity"
-                    rows={4}
-                  />
-                  <button
-                    type="submit"
-                    className="w-full px-6 py-3 rounded font-semibold hover:opacity-80 transition-opacity"
-                  >
-                    Demander un Devis Pro
-                  </button>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <ContactCenter
-          tag="Contactez-Nous Directement"
-          title="Besoin de parler à quelqu'un ?"
-          description="Notre équipe d'experts est disponible pour répondre à vos questions et vous fournir un service personnalisé."
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={false}
-          inputPlaceholder="Votre adresse email"
-          buttonText="S'inscrire"
-          termsText="Nous respectons votre vie privée. Vous pouvez vous désinscrire à tout moment."
-          onSubmit={(email) => console.log("Email soumis:", email)}
-        />
-      </div>
-
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Soccar Assurances"
@@ -511,9 +214,9 @@ export default function LandingPage() {
             {
               title: "Contact & Localisation",              items: [
                 { label: "Akwa Nord, Douala, Cameroun", href: "#" },
-                { label: "+237 6 XX XXX XXX", href: "tel:+237600000000" },
+                { label: "+237 699318991", href: "tel:+237699318991" },
+                { label: "+237 672072869", href: "tel:+237672072869" },
                 { label: "contact@soccar-assurances.cm", href: "mailto:contact@soccar-assurances.cm" },
-                { label: "Formulaire de Réclamation", href: "#contact" },
               ],
             },
             {
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..f86cfa6
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Shield, Heart, Home, Briefcase, Plane } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Soccar Assurances"
+          navItems={[
+            { name: "Accueil", id: "/" },
+            { name: "À Propos", id: "/#about" },
+            { name: "Services", id: "/services" },
+            { name: "Tarifs", id: "/#pricing" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          button={{
+            text: "Demander un Devis",            href: "/#contact"}}
+        />
+      </div>
+
+      <div className="pt-32 pb-20 px-6 md:px-12">
+        <div className="max-w-6xl mx-auto text-center mb-16">
+          <h1 className="text-5xl md:text-6xl font-bold mb-6">Nos Services d'Assurance</h1>
+          <p className="text-xl opacity-90 max-w-3xl mx-auto">
+            Explorez nos solutions d'assurance complètes, conçues pour protéger ce qui compte le plus pour vous.
+          </p>
+        </div>
+      </div>
+
+      <div id="auto-insurance" data-section="auto-insurance">
+        <FeatureCardThree
+          title="Assurance Automobile Complète"
+          description="Protégez votre véhicule avec nos formules d'assurance automobile adaptées à vos besoins, du tiers complet aux garanties tous risques."
+          features={[
+            {
+              id: "01",              title: "Responsabilité Civile",              description: "Couverture légale minimum pour les dégâts causés à tiers. Inclus dans tous nos contrats avec une protection complète.",              imageSrc: "http://img.b2bpic.net/free-photo/business-compliance-concept-with-agreement_23-2149314159.jpg",              imageAlt: "Responsabilité civile assurance"},
+            {
+              id: "02",              title: "Tous Risques",              description: "Protection maximale couvrant sinistres, vol, vandalisme, et dégâts matériels. Idéal pour les véhicules neufs et de valeur.",              imageSrc: "http://img.b2bpic.net/free-photo/agent-discussing-with-couple-wanting-lease-vehicle-close-up_482257-118046.jpg",              imageAlt: "Assurance tous risques"},
+            {
+              id: "03",              title: "Assistance Routière 24/7",              description: "Dépannage d'urgence, remorquage, taxi de remplacement. Notre équipe vous aide à toute heure en cas de problème.",              imageSrc: "http://img.b2bpic.net/free-photo/automotive-service-inspection_1098-2457.jpg",              imageAlt: "Assistance routière"},
+            {
+              id: "04",              title: "Protection Vol et Incendie",              description: "Couverture spécifique pour vol, tentative de vol, et sinistres liés au feu. Tranquillité d'esprit garantie.",              imageSrc: "http://img.b2bpic.net/free-photo/car-insurance-concept_23-2149314157.jpg",              imageAlt: "Protection vol incendie"},
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="health-insurance" data-section="health-insurance">
+        <FeatureCardThree
+          title="Assurance Santé Familiale"
+          description="Couverture médicale complète pour vous et votre famille avec accès à un réseau de professionnels de santé de qualité."
+          features={[
+            {
+              id: "01",              title: "Consultation Médicale",              description: "Accès illimité aux médecins généralistes et spécialistes. Remboursement rapide des frais de consultation.",              imageSrc: "http://img.b2bpic.net/free-photo/doctor-stethoscope-checking-patient-back_1098-2455.jpg",              imageAlt: "Consultation médicale"},
+            {
+              id: "02",              title: "Hospitalisation",              description: "Couverture complète pour l'hospitalisation, incluant chambre, interventions chirurgicales, et honoraires médicaux.",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-arrangement-medical-still-life-elements_23-2148854037.jpg",              imageAlt: "Hospitalisation"},
+            {
+              id: "03",              title: "Médicaments et Pharmacie",              description: "Remboursement des médicaments prescrits et produits pharmaceutiques. Accès préférentiel à nos pharmacies partenaires.",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-medical-equipment-assortment_23-2148854015.jpg",              imageAlt: "Médicaments pharmacie"},
+            {
+              id: "04",              title: "Couverture Maternité",              description: "Suivi complet de la grossesse, accouchement, et soins postnatals. Protection pour la mère et le nouveau-né.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280737.jpg",              imageAlt: "Couverture maternité"},
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="home-insurance" data-section="home-insurance">
+        <FeatureCardThree
+          title="Assurance Habitation et Biens"
+          description="Protégez votre maison, appartement, et biens personnels contre les sinistres et dommages imprévus."
+          features={[
+            {
+              id: "01",              title: "Protection Incendie",              description: "Couverture complète contre l'incendie, explosion, et dégâts des eaux causés par le feu. Remboursement de la valeur de reconstruction.",              imageSrc: "http://img.b2bpic.net/free-photo/covid-pandemic-real-estate-concept-cheerful-asian-woman-smiling-medical-mask-showing-paper-ho_1258-161860.jpg",              imageAlt: "Protection incendie habitation"},
+            {
+              id: "02",              title: "Vol et Cambriolage",              description: "Indemnisation en cas de vol avec effraction, cambriolage, ou tentative. Inclus bijoux, électroménager, et mobilier.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-real-estate-agent-senior-clients-shaking-hands-after-successful-meeting-office_637285-1815.jpg",              imageAlt: "Protection vol cambriolage"},
+            {
+              id: "03",              title: "Dégâts des Eaux",              description: "Couverture des dégâts causés par rupture de tuyauterie, infiltration, ou débordement. Assistance et dépannage rapide.",              imageSrc: "http://img.b2bpic.net/free-photo/house-key-on-floor-plan_1098-2453.jpg",              imageAlt: "Dégâts des eaux"},
+            {
+              id: "04",              title: "Responsabilité Civile Propriétaire",              description: "Protection légale en cas de dégâts causés à des tiers, voisins, ou visiteurs dans votre logement.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-house-model_23-2149314153.jpg",              imageAlt: "Responsabilité civile propriétaire"},
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="travel-insurance" data-section="travel-insurance">
+        <FeatureCardThree
+          title="Assurance Voyage"
+          description="Voyagez l'esprit tranquille avec notre couverture d'assurance complète pour tous vos déplacements."
+          features={[
+            {
+              id: "01",              title: "Annulation de Voyage",              description: "Remboursement complet des frais de voyage en cas d'annulation pour motif assuré (maladie, décès, accident).",              imageSrc: "http://img.b2bpic.net/free-photo/woman-using-travel-app-plan-vacation_1098-2452.jpg",              imageAlt: "Annulation voyage"},
+            {
+              id: "02",              title: "Assistance Médicale Internationale",              description: "Couverture médicale complète à l'étranger, rapatriement sanitaire, et frais de secours d'urgence.",              imageSrc: "http://img.b2bpic.net/free-photo/medical-uniform-with-stethoscope-on-desk_1098-2454.jpg",              imageAlt: "Assistance médicale voyage"},
+            {
+              id: "03",              title: "Bagages et Effets Personnels",              description: "Indemnisation en cas de perte, vol, ou dégâts de bagages lors de votre voyage.",              imageSrc: "http://img.b2bpic.net/free-photo/travel-planning-concept-with-map_23-2149314155.jpg",              imageAlt: "Bagages effets personnels"},
+            {
+              id: "04",              title: "Responsabilité Civile Vacancier",              description: "Protection contre les réclamations de tiers pour dommages causés durant votre séjour à l'étranger.",              imageSrc: "http://img.b2bpic.net/free-photo/travel-insurance-health-coverage_1098-2456.jpg",              imageAlt: "Responsabilité civile vacancier"},
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="business-insurance" data-section="business-insurance">
+        <FeatureCardThree
+          title="Assurance Professionnelle et Commerciale"
+          description="Solutions d'assurance adaptées aux entreprises pour protéger votre activité, vos biens, et votre responsabilité."
+          features={[
+            {
+              id: "01",              title: "Responsabilité Civile Professionnelle",              description: "Couverture des dommages causés à clients ou tiers suite à une erreur ou négligence professionnelle.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-real-estate-agent-senior-clients-shaking-hands-after-successful-meeting-office_637285-1815.jpg",              imageAlt: "Responsabilité civile professionnelle"},
+            {
+              id: "02",              title: "Assurance Multirisque Commerciale",              description: "Protection complète pour locaux professionnels, équipements, stocks, mobilier, et marchandises contre tous risques.",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-together-office_1098-2451.jpg",              imageAlt: "Multirisque commerciale"},
+            {
+              id: "03",              title: "Assurance Responsabilité Employeur",              description: "Couverture des accidents du travail et des maladies professionnelles. Indemnisation des victimes et couverture légale.",              imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-discussing-about-contract_1098-2450.jpg",              imageAlt: "Responsabilité employeur"},
+            {
+              id: "04",              title: "Assurance Interruption d'Activité",              description: "Indemnisation en cas d'arrêt d'activité causé par un sinistre assuré. Perte de chiffre d'affaires couverte.",              imageSrc: "http://img.b2bpic.net/free-photo/startup-business-concept-team-collaboration_1098-2449.jpg",              imageAlt: "Interruption activité"},
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Soccar Assurances"
+          copyrightText="© 2025 Soccar Assurances. Tous droits réservés."
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Assurance Automobile", href: "#auto-insurance" },
+                { label: "Assurance Santé", href: "#health-insurance" },
+                { label: "Assurance Habitation", href: "#home-insurance" },
+                { label: "Assurance Voyage", href: "#travel-insurance" },
+              ],
+            },
+            {
+              title: "Entreprise",              items: [
+                { label: "Accueil", href: "/" },
+                { label: "À Propos de Nous", href: "/#about" },
+                { label: "Tarifs", href: "/#pricing" },
+                { label: "Témoignages", href: "/#testimonials" },
+              ],
+            },
+            {
+              title: "Contact & Localisation",              items: [
+                { label: "Akwa Nord, Douala, Cameroun", href: "#" },
+                { label: "+237 6 XX XXX XXX", href: "tel:+237600000000" },
+                { label: "contact@soccar-assurances.cm", href: "mailto:contact@soccar-assurances.cm" },
+                { label: "Formulaire de Réclamation", href: "/#contact" },
+              ],
+            },
+            {
+              title: "Juridique",              items: [
+                { label: "Politique de Confidentialité", href: "#" },
+                { label: "Conditions Générales", href: "#" },
+                { label: "Conditions de Service", href: "#" },
+                { label: "Conformité", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 4fd73bf..5d1da2c 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -13,8 +13,8 @@
   --background: #ffffff;
   --card: #f9f9f9;
   --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
+  --primary-cta: #D4AF37;
+  --primary-cta-text: #000612;
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;