Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -12,21 +12,23 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { ShieldCheck, Smile, Sparkles, Zap } from "lucide-react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import MobileStickyBand from '@/components/MobileStickyBand';
+import { MapPin, ShieldCheck, Smile, Sparkles, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
+        defaultButtonVariant="expand-hover"
         defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="medium"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
         sizing="mediumLargeSizeMediumTitles"
-        background="blurBottom"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="glass"
-        headingFontWeight="light"
+        background="noise"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -45,7 +47,9 @@ export default function LandingPage() {
         {
           name: "FAQ",          id: "#faq"},
         {
-          name: "Contact",          id: "#contact"},
+          name: "Contact Rapide",          id: "#contact"},
+        {
+          name: "Contact & Accès",          id: "#contact-details"},
       ]}
       brandName="Dr Gharbi Mounib"
     />
@@ -53,8 +57,8 @@ export default function LandingPage() {
 
   <div id="home" data-section="home">
       <HeroOverlayTestimonial
-      title="Votre sourire, notre engagement professionnel"
-      description="Soins dentaires modernes, esthétiques et rassurants à El Mourouj. Consultation, urgences et traitements complets avec une équipe dédiée à votre confort."
+      title="Votre Sourire, Notre Spécialité. Des Soins Dentaires d'Excellence."
+      description="Découvrez une approche moderne et personnalisée de la stomatologie et de l'esthétique dentaire. Notre équipe d'orthodontistes et de dentistes vous offre des soins complets pour un sourire sain et éclatant."
       testimonials={[
         {
           name: "Fatma B.",          handle: "@fatma.b",          testimonial: "Une équipe formidable et des soins impeccables. Je recommande vivement le Dr Gharbi Mounib pour son professionnalisme et sa gentillesse.",          rating: 5,
@@ -96,6 +100,9 @@ export default function LandingPage() {
       imageAlt="Modern dental clinic interior"
       showDimOverlay={true}
       showBlur={true}
+      tag="Stomatologie & Esthétique Dentaire"
+      tagIcon={Smile}
+      tagAnimation="blur-reveal"
     />
   </div>
 
@@ -213,6 +220,10 @@ export default function LandingPage() {
       showRating={true}
       title="Ce Que Nos Patients Disent"
       description="La satisfaction de nos patients est notre plus grande fierté. Lisez leurs témoignages et découvrez pourquoi ils nous font confiance pour leur santé bucco-dentaire et leur sourire."
+      buttons={[
+        {
+          text: "Voir sur Google Maps",          href: "https://www.google.com/maps/search/Dr+Gharbi+Mounib+El+Mourouj"},
+      ]}
     />
   </div>
 
@@ -229,8 +240,8 @@ export default function LandingPage() {
         {
           id: "faq4",          title: "Le cabinet est-il accessible aux personnes à mobilité réduite ?",          content: "Oui, notre cabinet est entièrement équipé pour accueillir les personnes à mobilité réduite, assurant un accès facile et confortable pour tous nos patients."},
       ]}
-      sideTitle="Questions Fréquemment Posées"
-      sideDescription="Trouvez les réponses à vos interrogations concernant nos services, rendez-vous, paiements et urgences dentaires. Nous sommes là pour clarifier tous vos doutes."
+      sideTitle="Vos Questions, Nos Réponses sur Votre Santé Dentaire"
+      sideDescription="Nous répondons à vos interrogations concernant nos services de stomatologie, nos traitements d'orthodontie, la préservation de votre smile, et l'esthétique dentaire."
       faqsAnimation="slide-up"
       textPosition="left"
     />
@@ -251,6 +262,25 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="contact-details" data-section="contact-details">
+    <ContactSplitForm
+      title="Contact & Accès"
+      description="Cabinet Dentaire Dr Gharbi Mounib\nAdresse : Cité Ennasr 2, Tunis, Tunisie\nTél : +216 XX XXX XXX\nWhatsApp : +216 XX XXX XXX\nHoraires : Lun-Ven 09:00-18:00, Sam 09:00-13:00\n\nNous sommes là pour répondre à vos questions et vous accueillir dans les meilleures conditions. N'hésitez pas à nous contacter."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Nom Complet", required: true },
+        { name: "email", type: "email", placeholder: "Votre Email", required: true },
+        { name: "phone", type: "tel", placeholder: "Numéro de Téléphone", required: false },
+      ]}
+      textarea={{ name: "message", placeholder: "Votre message", rows: 4, required: true }}
+      imageSrc="http://img.b2bpic.net/free-photo/map-with-pin_23-2147714341.jpg"
+      imageAlt="Localisation du cabinet sur une carte"
+      mediaPosition="right"
+      mediaAnimation="slide-up"
+      buttonText="Envoyer le message"
+      useInvertedBackground={true}
+    />
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Dr Gharbi Mounib"
@@ -261,6 +291,7 @@ export default function LandingPage() {
     />
   </div>
       </ReactLenis>
+      <MobileStickyBand />
     </ThemeProvider>
   );
 }

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-source-sans-3), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-poppins), sans-serif;
+  font-family: var(--font-source-sans-3), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f8f9fa;
-  --foreground: #000a18;
-  --primary-cta: #0D6EFD;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f8f9fa;
-  --secondary-cta-text: #0D6EFD;
-  --accent: #0D6EFD;
-  --background-accent: #e2e2e2;
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1f3251;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #15479c;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/MobileStickyBand.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React from 'react';
+import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
+
+const MobileStickyBand = () => {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-background-accent p-4 shadow-lg md:hidden">
+      <div className="container mx-auto flex justify-around gap-4">
+        <ButtonDirectionalHover
+          text="Appeler le Cabinet"
+          href="tel:+216XXXXXXXX"
+          className="w-full bg-primary-cta text-white"
+          bgClassName="bg-primary-cta"
+        />
+        <ButtonDirectionalHover
+          text="WhatsApp Direct"
+          href="https://wa.me/216XXXXXXXX"
+          className="w-full bg-green-500 text-white"
+          bgClassName="bg-green-500"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MobileStickyBand;