Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -62,9 +62,7 @@ export default function HomePage() {
           brandName="Montois Multi Services"
           navItems={navItems}
           button={{
-            text: "Nous Contacter",
+            text: "Nous Contacter",            href: "/contact"}}
-            href: "/contact",
-          }}
           animateOnLoad={true}
         />
       </div>
@@ -79,28 +77,21 @@ export default function HomePage() {
           background={{ variant: "plain" }}
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/stair-pool_1203-2781.jpg",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AanP4tq0gi26KyP6ID7LVKsvKY/uploaded-1772907690471-fpgwof8v.jpg",              imageAlt: "Belle maison côtière Vendéenne"},
-              imageAlt: "Belle maison côtière Vendéenne",
-            },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/view-beach-sand-summertime_23-2151145634.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/view-beach-sand-summertime_23-2151145634.jpg",              imageAlt: "Vue sur l'océan Atlantique à Notre-Dame-de-Monts"},
-              imageAlt: "Vue sur l'océan Atlantique à Notre-Dame-de-Monts",
-            },
           ]}
           rating={5}
           ratingText="Confiance de nos clients locaux"
           buttons={[
             {
-              text: "En Savoir Plus",
+              text: "En Savoir Plus",              href: "/services"},
-              href: "/services",
-            },
             {
-              text: "Demander Un Devis",
+              text: "Demander Un Devis",              href: "/contact"},
-              href: "/contact",
-            },
           ]}
           buttonAnimation="slide-up"
           mediaAnimation="slide-up"
+          imageClassName="w-full h-auto object-cover scale-30"
         />
       </div>
 
@@ -113,63 +104,39 @@ export default function HomePage() {
           tagAnimation="slide-up"
           features={[
             {
-              title: "Entretiens Intérieurs",
+              title: "Entretiens Intérieurs",              description: "Ménage complet, nettoyage des vitres, entretien des surfaces. Nous veillons à la propreté impeccable de votre intérieur.",              icon: Home,
-              description: "Ménage complet, nettoyage des vitres, entretien des surfaces. Nous veillons à la propreté impeccable de votre intérieur.",
-              icon: Home,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/digital-lavender-interior-design_23-2151561164.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/digital-lavender-interior-design_23-2151561164.jpg?_wi=1",                  imageAlt: "Salon propre et bien entretenu"},
-                  imageAlt: "Salon propre et bien entretenu",
-                },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-eating_23-2149048185.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-eating_23-2149048185.jpg?_wi=1",                  imageAlt: "Cuisine étincelante après nettoyage"},
-                  imageAlt: "Cuisine étincelante après nettoyage",
-                },
               ],
             },
             {
-              title: "Entretiens Extérieurs",
+              title: "Entretiens Extérieurs",              description: "Tonte de pelouse, taille de haies, entretien jardin. Vos espaces verts restent impeccables toute l'année.",              icon: Leaf,
-              description: "Tonte de pelouse, taille de haies, entretien jardin. Vos espaces verts restent impeccables toute l'année.",
-              icon: Leaf,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/outdoor-dreamy-barefooted-lady-with-long-curly-hair-sitting-wooden-bench-park-looking-away-romantic-girl-straw-hat-white-dress-posing-front-flowerbed_197531-3979.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/outdoor-dreamy-barefooted-lady-with-long-curly-hair-sitting-wooden-bench-park-looking-away-romantic-girl-straw-hat-white-dress-posing-front-flowerbed_197531-3979.jpg?_wi=1",                  imageAlt: "Jardin bien entretenu et aménagé"},
-                  imageAlt: "Jardin bien entretenu et aménagé",
-                },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/kids-learnign-about-environment_23-2149176599.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/kids-learnign-about-environment_23-2149176599.jpg?_wi=1",                  imageAlt: "Haies taillées et pelouse soignée"},
-                  imageAlt: "Haies taillées et pelouse soignée",
-                },
               ],
             },
             {
-              title: "Petits Travaux de Maintenance",
+              title: "Petits Travaux de Maintenance",              description: "Réparations mineures, petits bricolages, interventions de maintenance préventive pour votre tranquillité.",              icon: Wrench,
-              description: "Réparations mineures, petits bricolages, interventions de maintenance préventive pour votre tranquillité.",
-              icon: Wrench,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/top-view-decorative-elements-blank-slate-father-s-day_23-2147684784.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/top-view-decorative-elements-blank-slate-father-s-day_23-2147684784.jpg?_wi=1",                  imageAlt: "Outils de maintenance professionnels"},
-                  imageAlt: "Outils de maintenance professionnels",
-                },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/inspectors-interacting_1098-14279.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/inspectors-interacting_1098-14279.jpg?_wi=1",                  imageAlt: "Petit travail de réparation en cours"},
-                  imageAlt: "Petit travail de réparation en cours",
-                },
               ],
             },
             {
-              title: "Gestion Personnalisée",
+              title: "Gestion Personnalisée",              description: "Supervision complète de vos propriétés, interventions ponctuelles ou récurrentes selon vos besoins spécifiques.",              icon: Users,
-              description: "Supervision complète de vos propriétés, interventions ponctuelles ou récurrentes selon vos besoins spécifiques.",
-              icon: Users,
               mediaItems: [
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/creative-students-working-together_23-2147656002.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/creative-students-working-together_23-2147656002.jpg?_wi=1",                  imageAlt: "Équipe coordonnée de professionnels"},
-                  imageAlt: "Équipe coordonnée de professionnels",
-                },
                 {
-                  imageSrc: "http://img.b2bpic.net/free-photo/real-estate-agents-front-building_23-2147653355.jpg?_wi=1",
+                  imageSrc: "http://img.b2bpic.net/free-photo/real-estate-agents-front-building_23-2147653355.jpg?_wi=1",                  imageAlt: "Inspection et suivi de propriété"},
-                  imageAlt: "Inspection et suivi de propriété",
-                },
               ],
             },
           ]}
@@ -178,11 +145,10 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Prendre Rendez-Vous",
+              text: "Prendre Rendez-Vous",              href: "/contact"},
-              href: "/contact",
-            },
           ]}
           buttonAnimation="slide-up"
+          mediaClassName="scale-30 origin-center"
         />
       </div>
 
@@ -193,11 +159,7 @@ export default function HomePage() {
           tagAnimation="slide-up"
           members={[
             {
-              id: "1",
+              id: "1",              name: "Fabrice Chatelier",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AanP4tq0gi26KyP6ID7LVKsvKY/uploaded-1772842156474-a6oliyzl.jpg",              imageAlt: "Fabrice Chatelier, Gérant de Montois Multi Services"},
-              name: "Fabrice Chatelier",
-              imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-can-solve-problem_329181-10291.jpg",
-              imageAlt: "Fabrice Chatelier, Gérant de Montois Multi Services",
-            },
           ]}
           memberVariant="default"
           useInvertedBackground={false}
@@ -214,60 +176,31 @@ export default function HomePage() {
           tagAnimation="slide-up"
           testimonials={[
             {
-              id: "1",
+              id: "1",              name: "Monsieur Dupont",              role: "Propriétaire",              company: "Notre-Dame-de-Monts",              rating: 5,
-              name: "Monsieur Dupont",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-with-selfie-stick_23-2148542713.jpg",              imageAlt: "Monsieur Dupont, propriétaire satisfait"},
-              role: "Propriétaire",
-              company: "Notre-Dame-de-Monts",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/man-with-selfie-stick_23-2148542713.jpg",
-              imageAlt: "Monsieur Dupont, propriétaire satisfait",
-            },
             {
-              id: "2",
+              id: "2",              name: "Mme Leblanc",              role: "Résidente",              company: "Ile de Noirmoutier",              rating: 5,
-              name: "Mme Leblanc",
+              imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13309.jpg",              imageAlt: "Mme Leblanc, résidente"},
-              role: "Résidente",
-              company: "Ile de Noirmoutier",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13309.jpg",
-              imageAlt: "Mme Leblanc, résidente",
-            },
             {
-              id: "3",
+              id: "3",              name: "M. Martin",              role: "Gestionnaire Propriété",              company: "Côte Vendéenne",              rating: 5,
-              name: "M. Martin",
+              imageSrc: "http://img.b2bpic.net/free-photo/serious-successful-young-businessman-standing-office-looking-camera_1163-4223.jpg",              imageAlt: "M. Martin, gestionnaire"},
-              role: "Gestionnaire Propriété",
-              company: "Côte Vendéenne",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/serious-successful-young-businessman-standing-office-looking-camera_1163-4223.jpg",
-              imageAlt: "M. Martin, gestionnaire",
-            },
             {
-              id: "4",
+              id: "4",              name: "Mme Rousseau",              role: "Propriétaire Secondaire",              company: "Saint-Hilaire-de-Riez",              rating: 5,
-              name: "Mme Rousseau",
+              imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65932.jpg",              imageAlt: "Mme Rousseau, propriétaire secondaire"},
-              role: "Propriétaire Secondaire",
-              company: "Saint-Hilaire-de-Riez",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65932.jpg",
-              imageAlt: "Mme Rousseau, propriétaire secondaire",
-            },
           ]}
           kpiItems={[
             {
-              value: "500+",
+              value: "500+",              label: "Propriétés entretenues"},
-              label: "Propriétés entretenues",
-            },
             {
-              value: "98%",
+              value: "98%",              label: "Satisfaction clients"},
-              label: "Satisfaction clients",
-            },
             {
-              value: "15+",
+              value: "15+",              label: "Années d'expérience"},
-              label: "Années d'expérience",
-            },
           ]}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           buttonAnimation="slide-up"
+          imageClassName="scale-30 origin-center"
         />
       </div>
 
@@ -280,30 +213,15 @@ export default function HomePage() {
           tagAnimation="slide-up"
           faqs={[
             {
-              id: "1",
+              id: "1",              title: "Quels types de propriétés entretenez-vous ?",              content: "Nous nous occupons de résidences principales et secondaires, petits immeubles et propriétés commerciales sur la côte vendéenne. Nos services s'adaptent à tous les besoins d'entretien."},
-              title: "Quels types de propriétés entretenez-vous ?",
-              content: "Nous nous occupons de résidences principales et secondaires, petits immeubles et propriétés commerciales sur la côte vendéenne. Nos services s'adaptent à tous les besoins d'entretien.",
-            },
             {
-              id: "2",
+              id: "2",              title: "Comment puis-je demander un devis ?",              content: "Vous pouvez nous contacter par téléphone au 06 77 22 14 66 ou par email à montois.multiservices@gmail.com. Nous serons heureux de vous proposer un devis personnalisé après visite de votre propriété."},
-              title: "Comment puis-je demander un devis ?",
-              content: "Vous pouvez nous contacter par téléphone au 06 77 22 14 66 ou par email à montois.multiservices@gmail.com. Nous serons heureux de vous proposer un devis personnalisé après visite de votre propriété.",
-            },
             {
-              id: "3",
+              id: "3",              title: "Êtes-vous disponibles toute l'année ?",              content: "Oui, nous proposons des services réguliers tout au long de l'année. Nous adaptons nos interventions aux saisons pour un entretien optimal de votre propriété."},
-              title: "Êtes-vous disponibles toute l'année ?",
-              content: "Oui, nous proposons des services réguliers tout au long de l'année. Nous adaptons nos interventions aux saisons pour un entretien optimal de votre propriété.",
-            },
             {
-              id: "4",
+              id: "4",              title: "Pouvez-vous gérer les urgences ?",              content: "Nous offrons une certaine flexibilité pour les demandes urgentes. Contactez-nous directement pour discuter de vos besoins spécifiques et de la disponibilité de notre équipe."},
-              title: "Pouvez-vous gérer les urgences ?",
-              content: "Nous offrons une certaine flexibilité pour les demandes urgentes. Contactez-nous directement pour discuter de vos besoins spécifiques et de la disponibilité de notre équipe.",
-            },
             {
-              id: "5",
+              id: "5",              title: "Comment fonctionnent les forfaits récurrents ?",              content: "Nos forfaits récurrents peuvent être hebdomadaires, bi-hebdomadaires ou mensuels selon vos besoins. Nous établissons un calendrier d'interventions régulières et facturons selon vos préférences."},
-              title: "Comment fonctionnent les forfaits récurrents ?",
-              content: "Nos forfaits récurrents peuvent être hebdomadaires, bi-hebdomadaires ou mensuels selon vos besoins. Nous établissons un calendrier d'interventions régulières et facturons selon vos préférences.",
-            },
           ]}
           imageSrc="http://img.b2bpic.net/free-photo/concentrated-thoughtful-business-colleagues-standing-near-table-analyzing-documents_1262-12289.jpg"
           imageAlt="Service client professionnel en Vendée"
@@ -313,6 +231,7 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="smooth"
+          mediaClassName="scale-30 origin-center"
         />
       </div>
 
@@ -324,13 +243,9 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Nous Appeler",
+              text: "Nous Appeler",              href: "tel:0677221466"},
-              href: "tel:0677221466",
-            },
             {
-              text: "Envoyer Un Email",
+              text: "Envoyer Un Email",              href: "mailto:montois.multiservices@gmail.com"},
-              href: "mailto:montois.multiservices@gmail.com",
-            },
           ]}
         />
       </div>

src/app/pricing/page.tsx

@@ -56,9 +56,7 @@ export default function PricingPage() {
           brandName="Montois Multi Services"
           navItems={navItems}
           button={{
-            text: "Nous Contacter",
+            text: "Nous Contacter",            href: "/contact"}}
-            href: "/contact",
-          }}
           animateOnLoad={true}
         />
       </div>
@@ -74,86 +72,79 @@ export default function PricingPage() {
         </div>
       </div>
 
-      <div id="pricing-options" data-section="pricing-options" className="py-16 md:py-24 px-4 md:px-6">
+      <div id="pricing-table" data-section="pricing-table" className="py-12 md:py-16 px-4 md:px-6">
         <div className="mx-auto max-w-6xl">
-          <div className="grid md:grid-cols-3 gap-6 md:gap-8">
+          <div className="overflow-x-auto">
-            <div className="bg-card rounded-lg p-8 border border-background-accent/50">
+            <table className="w-full border-collapse">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">Intervention Ponctuelle</h3>
+              <thead>
-              <p className="text-foreground/70 mb-6">
+                <tr className="border-b border-background-accent/50">
-                Pour vos besoins occasionnels et ponctuels d'entretien ou de maintenance.
+                  <th className="text-left py-4 px-6 text-foreground font-bold">
-              </p>
+                    Service
-              <div className="mb-6">
+                  </th>
-                <p className="text-3xl font-bold text-primary-cta">À partir de</p>
+                  <th className="text-right py-4 px-6 text-foreground font-bold">
-                <p className="text-xl text-foreground/60 mt-2">50 € / heure</p>
+                    Tarif
-              </div>
+                  </th>
-              <ul className="space-y-3 mb-8 text-foreground/70">
+                </tr>
-                <li className="flex items-center">
+              </thead>
-                  <span className="mr-3 text-accent">✓</span>
+              <tbody>
-                  Tarif horaire flexible
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-                </li>
+                  <td className="py-4 px-6 text-foreground">
-                <li className="flex items-center">
+                    Entretien intérieur
-                  <span className="mr-3 text-accent">✓</span>
+                  </td>
-                  Disponibilité selon calendrier
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-                </li>
+                    30 €/h
-                <li className="flex items-center">
+                  </td>
-                  <span className="mr-3 text-accent">✓</span>
+                </tr>
-                  Devis avant intervention
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-                </li>
+                  <td className="py-4 px-6 text-foreground">
-              </ul>
+                    Entretien extérieur
-            </div>
+                  </td>
-
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-            <div className="bg-card rounded-lg p-8 border border-accent/50 relative">
+                    30 €/h
-              <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-accent text-primary-cta-text px-4 py-2 rounded-full text-sm font-semibold">
+                  </td>
-                Recommandé
+                </tr>
-              </div>
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">Forfait Mensuel</h3>
+                  <td className="py-4 px-6 text-foreground">
-              <p className="text-foreground/70 mb-6">
+                    Travaux de maintenance
-                Pour un entretien régulier et continu de votre propriété.
+                  </td>
-              </p>
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-              <div className="mb-6">
+                    30 €/h
-                <p className="text-3xl font-bold text-primary-cta">À partir de</p>
+                  </td>
-                <p className="text-xl text-foreground/60 mt-2">500 € / mois</p>
+                </tr>
-              </div>
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-              <ul className="space-y-3 mb-8 text-foreground/70">
+                  <td className="py-4 px-6 text-foreground">
-                <li className="flex items-center">
+                    Entretien extérieur avec matériel thermique
-                  <span className="mr-3 text-accent">✓</span>
+                  </td>
-                  Interventions régulières
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-                </li>
+                    35 €/h
-                <li className="flex items-center">
+                  </td>
-                  <span className="mr-3 text-accent">✓</span>
+                </tr>
-                  Suivi personnalisé
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-                </li>
+                  <td className="py-4 px-6 text-foreground">
-                <li className="flex items-center">
+                    Entretien du linge
-                  <span className="mr-3 text-accent">✓</span>
+                  </td>
-                  10% de réduction
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-                </li>
+                    30 €/h
-              </ul>
+                  </td>
-            </div>
+                </tr>
-
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-            <div className="bg-card rounded-lg p-8 border border-background-accent/50">
+                  <td className="py-4 px-6 text-foreground">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">Forfait Annuel</h3>
+                    Enlèvement des déchets
-              <p className="text-foreground/70 mb-6">
+                  </td>
-                Pour la gestion complète de votre propriété avec engagement annuel.
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-              </p>
+                    35 €/h
-              <div className="mb-6">
+                  </td>
-                <p className="text-3xl font-bold text-primary-cta">À partir de</p>
+                </tr>
-                <p className="text-xl text-foreground/60 mt-2">5 000 € / an</p>
+                <tr className="border-b border-background-accent/50 hover:bg-card/50 transition-colors">
-              </div>
+                  <td className="py-4 px-6 text-foreground">
-              <ul className="space-y-3 mb-8 text-foreground/70">
+                    Vérification de logement
-                <li className="flex items-center">
+                  </td>
-                  <span className="mr-3 text-accent">✓</span>
+                  <td className="text-right py-4 px-6 text-foreground font-semibold">
-                  Meilleur tarif
+                    7,50 €/visite
-                </li>
+                  </td>
-                <li className="flex items-center">
+                </tr>
-                  <span className="mr-3 text-accent">✓</span>
+              </tbody>
-                  Priorité d'intervention
+            </table>
-                </li>
-                <li className="flex items-center">
-                  <span className="mr-3 text-accent">✓</span>
-                  Support prioritaire
-                </li>
-              </ul>
-            </div>
           </div>
         </div>
       </div>
@@ -218,13 +209,9 @@ export default function PricingPage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Demander Un Devis",
+              text: "Demander Un Devis",              href: "/contact"},
-              href: "/contact",
-            },
             {
-              text: "Nous Appeler",
+              text: "Nous Appeler",              href: "tel:0677221466"},
-              href: "tel:0677221466",
-            },
           ]}
         />
       </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fffefe;
+  --background: #ffffff;
-  --card: #f6f7f4;
+  --card: #f9f9f9;
-  --foreground: #080908;
+  --foreground: #000612e6;
-  --primary-cta: #0e3a29;
+  --primary-cta: #15479c;
-  --primary-cta-text: #fffefe;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #e7eecd;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #080908;
+  --secondary-cta-text: #000612e6;
-  --accent: #35c18b;
+  --accent: #e2e2e2;
-  --background-accent: #ecebe4;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);