Update src/app/services/page.tsx

Merge version_3 into main

src/app/facilities/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+
+export default function FacilitiesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="small"
+        sizing="largeSmall"
+        background="blurBottom"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Facilities", id: "/facilities" },
+              { name: "Patient Portal", id: "/patient-portal" },
+            ]}
+            brandName="Dent Cent"
+          />
+        </div>
+
+        <main className="py-20">
+            <FeatureCardTwentyEight
+                title="Our Relaxing Environment"
+                description="Designed to make every visit comfortable and stress-free."
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={false}
+                features={[
+                    {
+                        id: "facility-1",                        title: "Comfortable Waiting Zone",                        subtitle: "A serene space to relax before your appointment.",                        category: "Waiting",                        value: "Comfort",                        buttons: [{ text: "Tour Space" }]
+                    },
+                    {
+                        id: "facility-2",                        title: "Exclusive Clinic Cafe",                        subtitle: "Refreshing cold drinks while you wait.",                        category: "Cafe",                        value: "Refresh",                        buttons: [{ text: "View Menu" }]
+                    }
+                ]}
+            />
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Dent Cent Clinic"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Kirkuk, Baghdad Rd", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,19 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Activity, Award, Clock, ShieldCheck, Smile, Sparkles, UserPlus } from "lucide-react";
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [lang, setLang] = useState("EN");
+
+  const handleBooking = () => {
+    window.open("https://wa.me/9647703131418", "_blank");
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -29,317 +27,41 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <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",
-        },
-      ]}
-      brandName="Dent Cent"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Face ID System", id: "/face-id-system" },
+              { name: "Patient Portal", id: "/patient-portal" },
+            ]}
+            brandName="Dent Cent"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      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."
-      kpis={[
-        {
-          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,
-        },
-      ]}
-    />
-  </div>
+        <main className="py-20 text-center">
+          <div className="mb-6 flex justify-center gap-4">
+            <button onClick={() => setLang("EN")} className={`px-2 ${lang === 'EN' ? 'font-bold underline' : ''}`}>EN</button>
+            <button onClick={() => setLang("AR")} className={`px-2 ${lang === 'AR' ? 'font-bold underline' : ''}`}>AR</button>
+            <button onClick={() => setLang("TR")} className={`px-2 ${lang === 'TR' ? 'font-bold underline' : ''}`}>TR</button>
+          </div>
+          <h1 className="text-4xl font-bold mb-6">Patient Portal</h1>
+          <p className="mb-10 text-lg opacity-80">Manage your dental health, appointments, and Face ID access.</p>
+          <div className="max-w-xl mx-auto p-8 border rounded-lg">
+            <p>Authentication and dashboard modules are available for authorized patients.</p>
+            <button className="mt-6 px-6 py-3 bg-primary rounded-lg" onClick={handleBooking}>
+              Login / Sign Up
+            </button>
+          </div>
+        </main>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      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.",
-      ]}
-    />
-  </div>
-
-  <div id="services" data-section="services">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      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",
-        },
-      ]}
-      title="Premium Dental Services"
-      description="We offer a wide range of advanced treatments designed to restore and beautify your smile."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      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%",
-        },
-      ]}
-      title="Our Impact"
-      description="Evidence of our commitment to excellence."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      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",
-        },
-      ]}
-      title="What Our Patients Say"
-      description="Trusted by hundreds of patients in Kirkuk."
-    />
-  </div>
-
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "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."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      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.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Everything you need to know before visiting."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      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/...",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Dent Cent Clinic"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Kirkuk, Baghdad Rd",
-        href: "#",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Dent Cent Clinic"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Kirkuk, Baghdad Rd | Language: " + lang, onClick: () => setLang(lang === 'EN' ? 'AR' : 'EN') }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/patient-portal/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function PatientPortal() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="small"
+        sizing="largeSmall"
+        background="blurBottom"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Patient Portal", id: "/patient-portal" },
+            ]}
+            brandName="Dent Cent"
+          />
+        </div>
+
+        <main className="py-20 max-w-4xl mx-auto px-6">
+          <h1 className="text-3xl font-bold mb-8">Patient Dashboard</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="p-6 border rounded-lg shadow-sm">
+                <h2 className="text-xl font-semibold mb-4">My Appointments</h2>
+                <p className="text-sm opacity-70">View and manage your upcoming dental visits.</p>
+            </div>
+            <div className="p-6 border rounded-lg shadow-sm">
+                <h2 className="text-xl font-semibold mb-4">Medical Records</h2>
+                <p className="text-sm opacity-70">Secure access to your dental history and treatment plans.</p>
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Dent Cent Clinic"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Kirkuk, Baghdad Rd", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="small"
+        sizing="largeSmall"
+        background="blurBottom"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Facilities", id: "/facilities" },
+              { name: "Patient Portal", id: "/patient-portal" },
+            ]}
+            brandName="Dent Cent"
+          />
+        </div>
+
+        <main className="py-20">
+            <FeatureCardTwentyEight
+                title="Our Specialized Treatments"
+                description="Advanced dental care solutions tailored to your comfort and health."
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={false}
+                features={[
+                    {
+                        id: "treatment-1",                        title: "Electrical Anesthesia",                        subtitle: "Electronic anesthesia delivery for a painless experience.",                        category: "Anesthesia",                        value: "Painless",                        buttons: [{ text: "Learn More" }]
+                    },
+                    {
+                        id: "treatment-2",                        title: "Advanced Dental Care",                        subtitle: "Comprehensive dental treatments including restorative.",                        category: "Dental",                        value: "Advanced",                        buttons: [{ text: "View Treatments" }]
+                    }
+                ]}
+            />
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Dent Cent Clinic"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Kirkuk, Baghdad Rd", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

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);