Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -5,10 +5,11 @@ import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TeamCardTen from '@/components/sections/team/TeamCardTen';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import { Award, Shield, Sparkles } from "lucide-react";
 
@@ -30,67 +31,32 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "home" },
-          name: "Home",          id: "home"},
+        { name: "About", id: "about" },
-        {
+        { name: "Team", id: "team" },
-          name: "About",          id: "about"},
+        { name: "Treatments", id: "treatments" },
-        {
+        { name: "Technology", id: "technology" },
-          name: "Treatments",          id: "treatments"},
-        {
-          name: "Technology",          id: "technology"},
       ]}
       brandName="Ben's Orthodontie"
-      button={{
+      button={{ text: "Book Now", href: "#booking" }}
-        text: "Book Now",        href: "#booking"}}
     />
   </div>
 
   <div id="home" data-section="home">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "glowing-orb" }}
-        variant: "glowing-orb"}}
       title="Precision. Comfort. Confidence."
       description="Ben's Orthodontie sets a new standard for orthodontic care in Antwerp, utilizing advanced 3D scanning and personalized treatment plans."
       kpis={[
-        {
+        { value: "15+", label: "Years Experience" },
-          value: "15+",          label: "Years Experience"},
+        { value: "2000+", label: "Smiles Transformed" },
-        {
+        { value: "100%", label: "Patient Care" },
-          value: "2000+",          label: "Smiles Transformed"},
-        {
-          value: "100%",          label: "Patient Care"},
       ]}
       enableKpiAnimation={true}
-      buttons={[
+      buttons={[{ text: "Book Consultation", href: "#booking" }]}
-        {
-          text: "Book Consultation",          href: "#booking"},
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-dental-gems_23-2151212458.jpg"
       imageAlt="3D Dental Model"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-man-posing-with-dental-gems_23-2151212418.jpg",          alt: "Front view man posing with dental gems"},
-        {
-          src: "http://img.b2bpic.net/free-photo/medical-denture-smile-jaws-teeth-white-background_633478-82.jpg",          alt: "Medical denture smile jaws teeth on white background"},
-        {
-          src: "http://img.b2bpic.net/free-photo/3d-representation-dental-health-hygiene_23-2150473207.jpg",          alt: "3d representation of dental health and hygiene"},
-        {
-          src: "http://img.b2bpic.net/free-photo/3d-representation-dental-health-hygiene_23-2150473214.jpg",          alt: "3d representation of dental health and hygiene"},
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-happy-man-showing-approval_23-2148230800.jpg",          alt: "Front view happy man showing approval"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Antwerp's Premier Orthodontist"},
-        {
-          type: "text",          text: "Advanced 3D Technology"},
-        {
-          type: "text",          text: "Personalized Care"},
-        {
-          type: "text",          text: "Patient-First Approach"},
-        {
-          type: "text",          text: "Proven Results"},
-      ]}
     />
   </div>
 
@@ -99,37 +65,39 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Advanced Orthodontics in Antwerp"
       metrics={[
-        {
+        { icon: Shield, label: "Precision Tech", value: "Digital Scans" },
-          icon: Shield,
+        { icon: Award, label: "Certified Pros", value: "Top Tier" },
-          label: "Precision Tech",          value: "Digital Scans"},
+        { icon: Sparkles, label: "Comfort First", value: "Patient focus" },
-        {
-          icon: Award,
-          label: "Certified Pros",          value: "Top Tier"},
-        {
-          icon: Sparkles,
-          label: "Comfort First",          value: "Patient focus"},
       ]}
       metricsAnimation="blur-reveal"
     />
   </div>
 
+  <div id="team" data-section="team">
+    <TeamCardTen
+      title="Meet Our Experts"
+      tag="Professional Staff"
+      memberVariant="card"
+      useInvertedBackground={false}
+      members={[
+        { id: "m1", name: "Dr. Ben Ortho", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg" },
+        { id: "m2", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-woman-portrait_23-2149051723.jpg?_wi=1" }
+      ]}
+      membersAnimation="slide-up"
+    />
+  </div>
+
   <div id="treatments" data-section="treatments">
       <FeatureCardMedia
       animationType="scale-rotate"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "t1", title: "Invisalign", description: "Crystal clear aligners for a seamless smile journey.", tag: "Invisible", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-delicious-gummy-bear-candy_23-2149894275.jpg" },
-          id: "t1",          title: "Invisalign",          description: "Crystal clear aligners for a seamless smile journey.",          tag: "Invisible",          imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-delicious-gummy-bear-candy_23-2149894275.jpg"},
+        { id: "t2", title: "Insignia Braces", description: "Customized brackets tailored exactly to your tooth anatomy.", tag: "Precision", imageSrc: "http://img.b2bpic.net/free-photo/caucasian-preteen-girl-with-braces-her-teeth-looking-mirror_169016-38199.jpg" }
-        {
-          id: "t2",          title: "Insignia Braces",          description: "Customized brackets tailored exactly to your tooth anatomy.",          tag: "Precision",          imageSrc: "http://img.b2bpic.net/free-photo/caucasian-preteen-girl-with-braces-her-teeth-looking-mirror_169016-38199.jpg"},
-        {
-          id: "t3",          title: "Damon System",          description: "Self-ligating braces for faster and more comfortable results.",          tag: "Advanced",          imageSrc: "http://img.b2bpic.net/free-photo/surgical-taper-kit_651396-1888.jpg"},
-        {
-          id: "t4",          title: "Teen Aligners",          description: "Designed specifically for adolescent growth and alignment.",          tag: "Youth",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-orthodontist-child-dentist-s-office_329181-17720.jpg"},
       ]}
       title="Treatment Solutions"
-      description="Tailored orthodontic solutions for every smile, from discreet aligners to advanced bracing systems."
+      description="Tailored orthodontic solutions for every smile."
     />
   </div>
 
@@ -140,12 +108,8 @@ export default function LandingPage() {
       gridVariant="one-large-left-three-stacked-right"
       useInvertedBackground={true}
       products={[
-        {
+        { id: "p1", name: "iTero Scanner", price: "High Speed", variant: "Digital", imageSrc: "http://img.b2bpic.net/free-photo/woman-physiotherapy-making-physical-exercises-with-qualified-therapist_1157-38129.jpg" },
-          id: "p1",          name: "iTero Scanner",          price: "High Speed",          variant: "Digital",          imageSrc: "http://img.b2bpic.net/free-photo/woman-physiotherapy-making-physical-exercises-with-qualified-therapist_1157-38129.jpg"},
+        { id: "p2", name: "3D Printing", price: "Precision", variant: "Hardware", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-designer-using-3d-printer_23-2151019902.jpg" }
-        {
-          id: "p2",          name: "3D Printing",          price: "Precision",          variant: "Hardware",          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-designer-using-3d-printer_23-2151019902.jpg"},
-        {
-          id: "p3",          name: "ClinCheck AI",          price: "Predictive",          variant: "Software",          imageSrc: "http://img.b2bpic.net/free-photo/man-using-monitor-with-horizontal-green-screen-talking-dentist-about-oral-care-cabinet-specialists-working-with-dental-tools-teethcare-isolated-mockup-template-computer_482257-38465.jpg"},
       ]}
       title="Cutting-Edge Tech"
       description="Leveraging world-class scanning and AI-driven predictive modeling."
@@ -158,21 +122,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "ts1", name: "Sofie V.", handle: "@sofie_v", testimonial: "The precision and care at Ben's is incredible. My teeth look perfect.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-woman-portrait_23-2149051723.jpg?_wi=2" },
-          id: "ts1",          name: "Sofie V.",          handle: "@sofie_v",          testimonial: "The precision and care at Ben's is incredible. My teeth look perfect.",          rating: 5,
+        { id: "ts2", name: "Mark D.", handle: "@mark_d", testimonial: "Fast, professional, and very comfortable experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-nurse-with-stethoscope_23-2148740054.jpg" }
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-woman-portrait_23-2149051723.jpg"},
-        {
-          id: "ts2",          name: "Mark D.",          handle: "@mark_d",          testimonial: "Fast, professional, and very comfortable experience.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-nurse-with-stethoscope_23-2148740054.jpg"},
-        {
-          id: "ts3",          name: "Elena C.",          handle: "@elena_c",          testimonial: "I love my new smile. Highly recommended for Antwerp.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg"},
-        {
-          id: "ts4",          name: "Thomas P.",          handle: "@thomas_p",          testimonial: "Advanced technology made all the difference in my alignment.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg"},
-        {
-          id: "ts5",          name: "Lise K.",          handle: "@lise_k",          testimonial: "The most modern clinic I have ever visited. Truly top-notch.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/coffee-break_1098-14791.jpg"},
       ]}
       showRating={true}
       title="Smile Transformations"
@@ -183,26 +134,23 @@ export default function LandingPage() {
   <div id="booking" data-section="booking">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       tag="Get Started"
       title="Begin Your Smile Journey"
       description="Book a consultation with Ben's Orthodontie to discuss your personalized plan."
-      buttons={[
+      buttons={[{ text: "Book Now", href: "#" }]}
-        {
-          text: "Book Now",          href: "#"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterSimple
-      logoText="Ben's Orthodontie"
+        columns={[
-      leftLink={{
+            { title: "Contact", items: [{ label: "Jan Van Rijswijcklaan 107, Antwerp" }, { label: "hello@orthodontie.be" }] },
-        text: "Jan Van Rijswijcklaan 107, Antwerp",        href: "#"}}
+            { title: "Social", items: [{ label: "Instagram" }, { label: "Facebook" }] }
-      rightLink={{
+        ]}
-        text: "Instagram",        href: "https://instagram.com"}}
+        bottomLeftText="© 2024 Ben's Orthodontie"
-    />
+        bottomRightText="All Rights Reserved"
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0F;
+  --background: #ffffff;
-  --card: #0D1B2A;
+  --card: #f5faff;
-  --foreground: #F5F0E8;
+  --foreground: #001122;
-  --primary-cta: #F5F0E8;
+  --primary-cta: #15479c;
   --primary-cta-text: #0A0A0F;
-  --secondary-cta: #1B2A4A;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #F5F0E8;
-  --accent: #EDE8DC;
+  --accent: #a8cce8;
-  --background-accent: #0D1B2A;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);