Merge version_2 into main #1
@@ -1422,4 +1422,4 @@ export default function RootLayout({
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
335
src/app/page.tsx
335
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
|
||||
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" }}
|
||||
<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"
|
||||
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: [
|
||||
{ label: "Nous Contacter", href: "#contact" },
|
||||
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: "Reclamations", href: "#" },
|
||||
{ label: "Conditions de Service", href: "#" },
|
||||
{ label: "Conformité", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -224,4 +529,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user