Merge version_3 into main

Merge version_3 into main

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>
+  );
+}

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`}
@@ -1422,4 +1422,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -8,11 +8,24 @@ import FeatureCardThree from "@/components/sections/feature/featureCardThree/Fea
 import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
-import ContactText from "@/components/sections/contact/ContactText";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Shield, Users, CheckCircle, Award, Sparkles, Crown } from "lucide-react";
+import { Shield, Users, CheckCircle, Award, Sparkles, Crown, Mail, Phone, MapPin } from "lucide-react";
+import { useState } from "react";
+import Input from "@/components/form/Input";
 
 export default function LandingPage() {
+  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"
@@ -30,24 +43,25 @@ 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>
 
       <div id="hero" data-section="hero">
         <HeroCarouselLogo
-          logoText="SOCCAR ASSURANCES"
+          logoText="
+Cree un site web Moderne, Professionnel et fiable pour une entreprise d’assurance appelée Soccar assurances, située au Camerou plus près à Akwa Nord. Le site doit inspirer La Confiance, La sécurité et le Proffessionalisme afin d’attirer des particuliers, des familles et des entreprises. Services proposant ; - Assurance automobile ; l - Assurance Santé - Assurance Habitation - Assurance Voyage - Assurance pour entreprises Public Cible ; Les particuliers, les familles, Les propriétaires de voitures, Les travailleures, les petites l entreprises au Cameroun et dans"
           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={[
             {
@@ -81,13 +95,13 @@ export default function LandingPage() {
           tag="Services Complets"
           features={[
             {
-              id: "01",              title: "Assurance Automobile",              description: "Protection complète pour votre véhicule avec couverture tous risques, responsabilité civile et assistance routière 24/7.",              imageSrc: "http://img.b2bpic.net/free-photo/agent-discussing-with-couple-wanting-lease-vehicle-close-up_482257-118046.jpg",              imageAlt: "Assurance automobile protection"},
+              id: "01",              title: "Assurance Automobile",              description: "Protection complète pour votre véhicule avec couverture tous risques, responsabilité civile et assistance routière 24/7.",              imageSrc: "http://img.b2bpic.net/free-photo/agent-discussing-with-couple-wanting-lease-vehicle-close-up_482257-118046.jpg?_wi=1",              imageAlt: "Assurance automobile protection"},
             {
-              id: "02",              title: "Assurance Habitation",              description: "Sécurisez votre maison et vos biens avec une protection contre les incendies, cambriolages et sinistres divers.",              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: "Assurance habitation maison"},
+              id: "02",              title: "Assurance Habitation",              description: "Sécurisez votre maison et vos biens avec une protection contre les incendies, cambriolages et sinistres divers.",              imageSrc: "http://img.b2bpic.net/free-photo/covid-pandemic-real-estate-concept-cheerful-asian-woman-smiling-medical-mask-showing-paper-ho_1258-161860.jpg?_wi=1",              imageAlt: "Assurance habitation maison"},
             {
-              id: "03",              title: "Assurance Santé",              description: "Couverture médicale complète pour vous et votre famille avec accès à un réseau de professionnels de santé.",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-arrangement-medical-still-life-elements_23-2148854037.jpg",              imageAlt: "Assurance santé famille"},
+              id: "03",              title: "Assurance Santé",              description: "Couverture médicale complète pour vous et votre famille avec accès à un réseau de professionnels de santé.",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-arrangement-medical-still-life-elements_23-2148854037.jpg?_wi=1",              imageAlt: "Assurance santé famille"},
             {
-              id: "04",              title: "Assurance Professionnelle",              description: "Solutions d'assurance responsabilité civile et protection des biens pour les entreprises et professionnels.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-real-estate-agent-senior-clients-shaking-hands-after-successful-meeting-office_637285-1815.jpg",              imageAlt: "Assurance professionnelle entreprise"},
+              id: "04",              title: "Assurance Professionnelle",              description: "Solutions d'assurance responsabilité civile et protection des biens pour les entreprises et professionnels.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-real-estate-agent-senior-clients-shaking-hands-after-successful-meeting-office_637285-1815.jpg?_wi=1",              imageAlt: "Assurance professionnelle entreprise"},
           ]}
           gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
@@ -133,7 +147,7 @@ export default function LandingPage() {
             {
               id: "1",              title: "Service Exceptionnel et Fiable",              quote: "Soccar Assurances a géré mon sinistre automobile avec professionnalisme et rapidité. L'équipe a été très attentive et a résolu le problème en moins d'une semaine. Je recommande vivement leurs services.",              name: "Michel Kenmogne",              role: "Propriétaire d'Entreprise",              imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",              imageAlt: "Michel Kenmogne"},
             {
-              id: "2",              title: "Protection Complète pour ma Famille",              quote: "J'ai souscrit à l'assurance santé familiale et je suis très satisfait. Les remboursements sont rapides et la couverture est excellente. C'est un investissement judicieux pour la tranquillité d'esprit.",              name: "Jeanne Ndong",              role: "Mère de Famille",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280737.jpg",              imageAlt: "Jeanne Ndong"},
+              id: "2",              title: "Protection Complète pour ma Famille",              quote: "J'ai souscrit à l'assurance santé familiale et je suis très satisfait. Les remboursements sont rapides et la couverture est excellente. C'est un investissement judicieux pour la tranquillité d'esprit.",              name: "Jeanne Ndong",              role: "Mère de Famille",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280737.jpg?_wi=1",              imageAlt: "Jeanne Ndong"},
             {
               id: "3",              title: "Assurance Professionnelle de Qualité",              quote: "En tant que responsable d'une petite entreprise, j'avais besoin d'une couverture complète. Soccar a proposé un plan adapté et abordable. Leur support est vraiment au top.",              name: "André Tamze",              role: "Chef d'Entreprise",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-businessman-with-his-arms-crossed_23-2148176206.jpg",              imageAlt: "André Tamze"},
             {
@@ -177,23 +191,10 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactText
-          text="Prêt à protéger ce qui compte le plus pour vous ? Contactez notre équipe d'experts dès aujourd'hui pour un devis personnalisé ou pour discuter de vos besoins en assurance."
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Nous Contacter", href: "tel:+237123456789" },
-            { text: "Envoyer un Message", href: "#" },
-          ]}
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-        />
-      </div>
-
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Soccar Assurances"
-          copyrightText="© 2025 Soccar Assurances. Tous droits réservés. Situé à Akwa Nord, Douala, Cameroun."
+          copyrightText="© 2025 Soccar Assurances. Tous droits réservés."
           columns={[
             {
               title: "Services",              items: [
@@ -212,11 +213,19 @@ export default function LandingPage() {
               ],
             },
             {
-              title: "Contact",              items: [
-                { label: "Nous Contacter", href: "#contact" },
+              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: "Reclamations", href: "#" },
+                { label: "Conditions de Service", href: "#" },
+                { label: "Conformité", href: "#" },
               ],
             },
           ]}
@@ -224,4 +233,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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?_wi=2",              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?_wi=2",              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?_wi=2",              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?_wi=2",              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?_wi=2",              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?_wi=3",              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>
+  );
+}

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;