Update src/app/styles/variables.css

src/app/page.tsx

@@ -15,6 +15,10 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import { Activity, Award, Clock, ShieldCheck, Smile, Sparkles, UserPlus } from "lucide-react";
 
 export default function LandingPage() {
+  const handleBooking = () => {
+    window.open("https://wa.me/9647703131418", "_blank");
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -32,26 +36,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "services" },
+        { name: "Reviews", id: "testimonials" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Dent Cent"
     />
@@ -59,77 +48,24 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient" }}
       title="Excellence in Dental Aesthetics"
       description="Experience luxury dentistry in the heart of Kirkuk. Our specialized team provides world-class care in a serene, modern environment."
+      buttons={[{ text: "Book Appointment", onClick: handleBooking }]}
       kpis={[
-        {
-          value: "4.9",
-          label: "Google Rating",
-        },
-        {
-          value: "10+",
-          label: "Years Experience",
-        },
-        {
-          value: "5000+",
-          label: "Happy Smiles",
-        },
+        { value: "4.9", label: "Google Rating" },
+        { value: "10+", label: "Years Experience" },
+        { value: "5000+", label: "Happy Smiles" },
       ]}
       enableKpiAnimation={true}
       imageSrc="http://img.b2bpic.net/free-photo/top-view-career-guidance-items-dentists_23-2149443494.jpg"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/dental-tools-equipment-white-background_1232-4445.jpg",
-          alt: "Dental tools and equipment on white background",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-female-patient-waiting-have-dental-procedure-dentist_23-2148985767.jpg",
-          alt: "Young female patient waiting to have dental procedure at the dentist",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-orthodontist-stomatology-hospital-office-room-prepared-medical-healthcare-treatment-after-dental-diagnosis-orthodontic-cabinet-equipped-with-tooth-instruments-oral-care_482257-9417.jpg",
-          alt: "Empty orthodontist stomatology hospital office room prepared for medical healthcare treatment after dental diagnosis. Orthodontic cabinet equipped with tooth instruments for oral care",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/image-engineering-objects-workplace-top-view-construction-concept-engineering-tools-vintage-tone-retro-filter-effect-soft-focus-selective-focus_1418-516.jpg",
-          alt: "Image of engineering objects on workplace top view.Construction concept. Engineering tools.Vintage tone retro filter effect,soft focus(selective focus)",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/male-female-dentist-examining-patient_107420-65616.jpg",
-          alt: "Male and female dentist examining patient",
-        },
-      ]}
-      avatarText="Trusted by our community of 5000+ patients"
       marqueeItems={[
-        {
-          type: "text-icon",
-          text: "Luxury Dentistry",
-          icon: Sparkles,
-        },
-        {
-          type: "text-icon",
-          text: "Advanced Technology",
-          icon: Activity,
-        },
-        {
-          type: "text-icon",
-          text: "Painless Care",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Professional Team",
-          icon: UserPlus,
-        },
-        {
-          type: "text-icon",
-          text: "Certified Quality",
-          icon: Award,
-        },
+        { type: "text-icon", text: "Luxury Dentistry", icon: Sparkles },
+        { type: "text-icon", text: "Advanced Technology", icon: Activity },
+        { type: "text-icon", text: "Painless Care", icon: ShieldCheck },
+        { type: "text-icon", text: "Professional Team", icon: UserPlus },
+        { type: "text-icon", text: "Certified Quality", icon: Award },
       ]}
     />
   </div>
@@ -139,9 +75,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Welcome to Dent Cent Clinic"
       description={[
-        "Dent Cent Clinic is dedicated to providing high-quality, luxury dental experiences for all our patients. Located in the heart of Kirkuk, we combine expert knowledge with state-of-the-art technology to ensure you receive the best possible care.",
-        "Our team of specialists is committed to your comfort and oral health, making sure every visit is as relaxing and effective as possible.",
-      ]}
+        "Dent Cent Clinic is dedicated to providing high-quality, luxury dental experiences for all our patients. Located in the heart of Kirkuk, we combine expert knowledge with state-of-the-art technology to ensure you receive the best possible care.",        "Our team of specialists is committed to your comfort and oral health, making sure every visit is as relaxing and effective as possible."]}
     />
   </div>
 
@@ -150,34 +84,11 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
+      buttons={[{ text: "Book Now", onClick: handleBooking }]}
       features={[
-        {
-          id: "s1",
-          title: "Cosmetic Whitening",
-          tags: [
-            "Whitening",
-            "Aesthetic",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/female-patient-lying-dentist-chair-looking-teeth-x-ray-screen_23-2147879119.jpg",
-        },
-        {
-          id: "s2",
-          title: "Orthodontics",
-          tags: [
-            "Braces",
-            "Alignment",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/female-dentist-holding-dental-model-hands-concept-dentistry-dental-treatment_169016-67189.jpg",
-        },
-        {
-          id: "s3",
-          title: "Dental Implants",
-          tags: [
-            "Surgery",
-            "Restoration",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/dentist-nurse-explaining-x-ray-scan-patient-with-toothache-stomatology-cabinet-team-specialists-doing-oral-care-consultation-treat-man-pain-with-denture-problem_482257-40449.jpg",
-        },
+        { id: "s1", title: "Cosmetic Whitening", tags: ["Whitening", "Aesthetic"], imageSrc: "http://img.b2bpic.net/free-photo/female-patient-lying-dentist-chair-looking-teeth-x-ray-screen_23-2147879119.jpg", onFeatureClick: handleBooking },
+        { id: "s2", title: "Orthodontics", tags: ["Braces", "Alignment"], imageSrc: "http://img.b2bpic.net/free-photo/female-dentist-holding-dental-model-hands-concept-dentistry-dental-treatment_169016-67189.jpg", onFeatureClick: handleBooking },
+        { id: "s3", title: "Dental Implants", tags: ["Surgery", "Restoration"], imageSrc: "http://img.b2bpic.net/free-photo/dentist-nurse-explaining-x-ray-scan-patient-with-toothache-stomatology-cabinet-team-specialists-doing-oral-care-consultation-treat-man-pain-with-denture-problem_482257-40449.jpg", onFeatureClick: handleBooking },
       ]}
       title="Premium Dental Services"
       description="We offer a wide range of advanced treatments designed to restore and beautify your smile."
@@ -190,24 +101,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          icon: Award,
-          title: "Clinical Excellence",
-          value: "100%",
-        },
-        {
-          id: "m2",
-          icon: Smile,
-          title: "Smile Satisfaction",
-          value: "99%",
-        },
-        {
-          id: "m3",
-          icon: Clock,
-          title: "Appointment Efficiency",
-          value: "95%",
-        },
+        { id: "m1", icon: Award, title: "Clinical Excellence", value: "100%" },
+        { id: "m2", icon: Smile, title: "Smile Satisfaction", value: "99%" },
+        { id: "m3", icon: Clock, title: "Appointment Efficiency", value: "95%" },
       ]}
       title="Our Impact"
       description="Evidence of our commitment to excellence."
@@ -220,41 +116,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah A.",
-          handle: "@sarah_a",
-          testimonial: "Excellent service and very high-end clinic.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-professional-dentist-with-gloves-mask-discuss-what-treatment-will-look-like-patient-s-teeth_158595-7630.jpg",
-        },
-        {
-          id: "t2",
-          name: "Omar K.",
-          handle: "@omar_k",
-          testimonial: "Truly professional and luxury experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/nurse-portrait-hospital_23-2150780294.jpg",
-        },
-        {
-          id: "t3",
-          name: "Layla M.",
-          handle: "@layla_m",
-          testimonial: "Best dental clinic in town. Very happy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-panama-hat-with-attractive-smile-close-up-portrait_1321-3927.jpg",
-        },
-        {
-          id: "t4",
-          name: "Ahmed H.",
-          handle: "@ahmed_h",
-          testimonial: "Highly recommended, painless procedures.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-doctor-helping-female-patient_23-2148328405.jpg",
-        },
-        {
-          id: "t5",
-          name: "Zainab B.",
-          handle: "@zainab_b",
-          testimonial: "The staff are so friendly and professional.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-doctor-checking-patient_23-2149726926.jpg",
-        },
+        { id: "t1", name: "Sarah A.", handle: "@sarah_a", testimonial: "Excellent service and very high-end clinic.", imageSrc: "http://img.b2bpic.net/free-photo/male-professional-dentist-with-gloves-mask-discuss-what-treatment-will-look-like-patient-s-teeth_158595-7630.jpg" },
+        { id: "t2", name: "Omar K.", handle: "@omar_k", testimonial: "Truly professional and luxury experience.", imageSrc: "http://img.b2bpic.net/free-photo/nurse-portrait-hospital_23-2150780294.jpg" },
+        { id: "t3", name: "Layla M.", handle: "@layla_m", testimonial: "Best dental clinic in town. Very happy.", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-panama-hat-with-attractive-smile-close-up-portrait_1321-3927.jpg" },
+        { id: "t4", name: "Ahmed H.", handle: "@ahmed_h", testimonial: "Highly recommended, painless procedures.", imageSrc: "http://img.b2bpic.net/free-photo/male-doctor-helping-female-patient_23-2148328405.jpg" },
+        { id: "t5", name: "Zainab B.", handle: "@zainab_b", testimonial: "The staff are so friendly and professional.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-doctor-checking-patient_23-2149726926.jpg" },
       ]}
       title="What Our Patients Say"
       description="Trusted by hundreds of patients in Kirkuk."
@@ -266,14 +132,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Health Authority",
-        "Dental Council",
-        "Kirkuk Medical Board",
-        "Global Dental Alliance",
-        "Modern Dentistry Journal",
-        "Professional Ortho Union",
-        "Oral Care Experts",
-      ]}
+        "Health Authority", "Dental Council", "Kirkuk Medical Board", "Global Dental Alliance", "Modern Dentistry Journal", "Professional Ortho Union", "Oral Care Experts"]}
       title="Proudly Recognized"
       description="Collaborating with leading health organizations."
     />
@@ -284,21 +143,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "How do I book an appointment?",
-          content: "You can call us directly or via WhatsApp at 0770 313 1418.",
-        },
-        {
-          id: "f2",
-          title: "What are your operating hours?",
-          content: "We are open daily starting at 3 PM.",
-        },
-        {
-          id: "f3",
-          title: "Do you offer emergency services?",
-          content: "Yes, please contact us via phone immediately for emergency dental care.",
-        },
+        { id: "f1", title: "How do I book an appointment?", content: "You can call us directly or via WhatsApp at 0770 313 1418." },
+        { id: "f2", title: "What are your operating hours?", content: "We are open daily starting at 3 PM." },
+        { id: "f3", title: "Do you offer emergency services?", content: "Yes, please contact us via phone immediately for emergency dental care." },
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know before visiting."
@@ -309,19 +156,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
+      background={{ variant: "radial-gradient" }}
       text="Ready to transform your smile? Book your luxury dental appointment with Dent Cent Clinic today."
       buttons={[
-        {
-          text: "WhatsApp Now",
-          href: "https://wa.me/9647703131418",
-        },
-        {
-          text: "Get Directions",
-          href: "https://maps.app.goo.gl/...",
-        },
+        { text: "WhatsApp Now", onClick: handleBooking },
+        { text: "Get Directions", href: "https://maps.app.goo.gl/..." },
       ]}
     />
   </div>
@@ -329,14 +168,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Dent Cent Clinic"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Kirkuk, Baghdad Rd",
-        href: "#",
-      }}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Kirkuk, Baghdad Rd", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
+  --background: #fbfbfb;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #c5a059;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #1c1c1c;
-  --accent: #b8860b;
-  --background-accent: #e1b875;
+  --accent: #d4af37;
+  --background-accent: #f4ede0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);