Update src/app/page.tsx

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"
@@ -178,22 +191,306 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
+        <div className="py-20 px-6 md:px-12">
-          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."
+          <div className="max-w-6xl mx-auto">
-          animationType="entrance-slide"
+            <h2 className="text-4xl md:text-5xl font-bold mb-12 text-center">Formulaires de Demande de Devis</h2>
-          buttons={[
+            <p className="text-center mb-16 text-lg opacity-90 max-w-2xl mx-auto">
-            { text: "Nous Contacter", href: "tel:+237123456789" },
+              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.
-            { text: "Envoyer un Message", href: "#" },
+            </p>
-          ]}
+            
-          background={{ variant: "plain" }}
+            <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"
-          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 +509,19 @@ export default function LandingPage() {
               ],
             },
             {
-              title: "Contact",              items: [
+              title: "Contact & Localisation",              items: [
-                { label: "Nous Contacter", href: "#contact" },
+                { 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: "Reclamations", href: "#" },
+                { label: "Conditions de Service", href: "#" },
+                { label: "Conformité", href: "#" },
               ],
             },
           ]}