Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -1,163 +1,138 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { Shield, Heart, Sparkles, Star, Phone, TrendingUp, Smile, ThumbsUp, Award, Users } from 'lucide-react';
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Star, Phone, MapPin, Clock, Award, Smile, Shield, Zap } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Services", id: "#services" },
+  { name: "Reviews", id: "#reviews" },
+  { name: "Gallery", id: "#gallery" },
+  { name: "Contact", id: "#contact" }
+];
+
+const testimonials = [
+  { id: "1", name: "Rajesh Patel", imageSrc: "/testimonials/patient1.jpg" },
+  { id: "2", name: "Priya Sharma", imageSrc: "/testimonials/patient2.jpg" },
+  { id: "3", name: "Anil Kumar", imageSrc: "/testimonials/patient3.jpg" },
+  { id: "4", name: "Neha Verma", imageSrc: "/testimonials/patient4.jpg" },
+  { id: "5", name: "Vikram Singh", imageSrc: "/testimonials/patient5.jpg" }
+];
+
+const galleryImages = [
+  { id: "1", imageSrc: "/gallery/clinic1.jpg", imageAlt: "Modern dental clinic reception" },
+  { id: "2", imageSrc: "/gallery/clinic2.jpg", imageAlt: "State-of-the-art treatment room" },
+  { id: "3", imageSrc: "/gallery/clinic3.jpg", imageAlt: "Dental equipment and technology" }
+];
+
+const metrics = [
+  { icon: Award, label: "Years of Experience", value: "15+" },
+  { icon: Smile, label: "Happy Patients", value: "5000+" },
+  { icon: Star, label: "Patient Rating", value: "4.9★" },
+  { icon: Shield, label: "Certified & Insured", value: "100%" }
+];
+
+const services = [
+  {
+    title: "General Dentistry",    description: "Routine cleanings, checkups, and preventive care",    bentoComponent: "icon-info-cards",    items: [
+      { icon: Zap, label: "Quick Checkups", value: "15 mins" },
+      { icon: Shield, label: "Preventive Care", value: "Expert" },
+      { icon: Smile, label: "Cleanings", value: "Professional" },
+      { icon: Phone, label: "24/7 Support", value: "Available" }
+    ]
+  },
+  {
+    title: "Cosmetic Dentistry",    description: "Teeth whitening, veneers, and smile makeovers",    bentoComponent: "globe"
+  },
+  {
+    title: "Root Canal Treatment",    description: "Advanced endodontic treatment with precision",    bentoComponent: "animated-bar-chart"
+  },
+  {
+    title: "Orthodontics",    description: "Braces and aligners for perfect alignment",    bentoComponent: "line-chart"
+  }
+];
+
+const footerColumns = [
+  {
+    title: "Services",    items: [
+      { label: "General Dentistry", href: "#services" },
+      { label: "Cosmetic Dentistry", href: "#services" },
+      { label: "Root Canals", href: "#services" },
+      { label: "Orthodontics", href: "#services" }
+    ]
+  },
+  {
+    title: "Quick Links",    items: [
+      { label: "About Us", href: "#about" },
+      { label: "Gallery", href: "#gallery" },
+      { label: "Reviews", href: "#reviews" },
+      { label: "Contact", href: "#contact" }
+    ]
+  },
+  {
+    title: "Contact",    items: [
+      { label: "(+91) 9876543210", href: "tel:+919876543210" },
+      { label: "info@drnirmaldental.com", href: "mailto:info@drnirmaldental.com" },
+      { label: "Rajkot, Gujarat", href: "#contact" },
+      { label: "Open 9 AM - 8 PM", href: "#hours" }
+    ]
+  }
+];
 
 export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
+      defaultButtonVariant="hover-bubble"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="circleGradient"
+      background="aurora"
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleApple
-          brandName="Dr Nirmal's Dental Clinic"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
-          ]}
-        />
-      </div>
+      <NavbarStyleApple navItems={navItems} brandName="Dr Nirmal's Dental Clinic" />
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="Dr Nirmal's Dental Clinic"
-          description="Experience professional, comfortable, and hygienic dental care in Rajkot. Our expert team is dedicated to creating healthy, beautiful smiles for the entire family."
+        <HeroBillboardScroll
+          title="Premium Dental Care in Rajkot"
+          description="Experience world-class dental treatment with a 4.9★ rating. Modern facilities, expert dentists, and gentle care."
+          tag="4.9★ Rated Dental Clinic"
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="/hero-clinic.jpg"
+          imageAlt="Dr Nirmal's Dental Clinic"
           buttons={[
             { text: "Book Appointment", href: "#contact" },
-            { text: "Call Now: 072039 64464", href: "tel:07203964464" }
+            { text: "Learn More", href: "#services" }
           ]}
-          buttonAnimation="slide-up"
-          background={{ variant: "floatingGradient" }}
-          imageSrc="http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg"
-          imageAlt="Dr Nirmal's Dental Clinic - Modern treatment facility"
-          mediaAnimation="blur-reveal"
-          frameStyle="card"
         />
       </div>
 
       <div id="about" data-section="about">
-        <TestimonialAboutCard
-          tag="Why Choose Us"
-          tagIcon={Shield}
-          tagAnimation="slide-up"
-          title="Trusted Dental Care Excellence in Rajkot"
-          description="4.9★ | 253 Reviews"
-          subdescription="LGBTQ+ Friendly | Patient-Focused Care"
-          icon={Heart}
-          imageSrc="http://img.b2bpic.net/free-photo/smiling-business-woman-with-reports_1098-191.jpg"
-          imageAlt="Dr Nirmal - Expert Dentist"
-          mediaAnimation="blur-reveal"
-          useInvertedBackground={true}
+        <AboutMetric
+          title="Trusted Dental Excellence - 15 Years of Professional Care"
+          metrics={metrics}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="services" data-section="services">
-        <FeatureCardTwentySeven
-          title="Our Services"
-          description="Comprehensive dental solutions for every need, delivered with expert care and modern technology"
-          tag="Premium Dentistry"
-          tagIcon={Sparkles}
+        <FeatureBento
+          title="Our Comprehensive Services"
+          description="From routine checkups to advanced cosmetic procedures, we offer complete dental solutions"
+          tag="Professional Care"
           tagAnimation="slide-up"
-          features={[
-            {
-              id: "general-checkup",              title: "General Dental Checkup",              descriptions: [
-                "Regular oral health examination",                "Professional cleaning and assessment",                "Early detection of dental issues"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-having-dentist-check-up_23-2148338117.jpg",              imageAlt: "Professional dental checkup"
-            },
-            {
-              id: "root-canal",              title: "Root Canal Treatment",              descriptions: [
-                "Advanced endodontic expertise",                "Pain-free procedure with precision",                "Long-term tooth preservation"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/dentist-using-dental-implant-machine-implantology-procedure_651396-3118.jpg",              imageAlt: "Root canal treatment"
-            },
-            {
-              id: "tooth-cleaning",              title: "Professional Tooth Cleaning",              descriptions: [
-                "Deep scaling and polishing",                "Plaque and tartar removal",                "Refreshed smile and better health"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-dentist-instruments_23-2151053264.jpg",              imageAlt: "Professional cleaning service"
-            },
-            {
-              id: "tooth-filling",              title: "Tooth Filling",              descriptions: [
-                "Modern composite materials",                "Natural-looking restorations",                "Immediate cavity treatment"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/female-patient-with-braces-teeth-receiving-orthodontic-treatment_651396-3136.jpg",              imageAlt: "Tooth filling restoration"
-            },
-            {
-              id: "cosmetic-dentistry",              title: "Cosmetic Dentistry",              descriptions: [
-                "Smile design and enhancement",                "Whitening and alignment solutions",                "Confidence-boosting treatments"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/dentist-looking-dental-tools_107420-73943.jpg",              imageAlt: "Cosmetic dentistry makeover"
-            },
-            {
-              id: "pain-relief",              title: "Dental Pain Treatment",              descriptions: [
-                "Emergency pain management",                "Rapid relief solutions",                "Comfortable care approach"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/young-lady-keeping-hand-cheek-pink-shirt-looking-excited_176474-17529.jpg",              imageAlt: "Pain relief treatment"
-            },
-            {
-              id: "elderly-care",              title: "Elderly Dental Care",              descriptions: [
-                "Specialized senior care",                "Gentle treatment methods",                "Mobility-friendly appointments"
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/senior-business-man-smiling-while-talking-phone_1262-797.jpg",              imageAlt: "Elderly dental care"
-            }
-          ]}
-          gridVariant="bento-grid"
-          animationType="blur-reveal"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[{ text: "Schedule Service", href: "#contact" }]}
-          buttonAnimation="slide-up"
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
-          title="Patient Reviews & Testimonials"
-          description="Join thousands of satisfied patients who trust Dr Nirmal's Dental Clinic for their oral health"
-          tag="Patient Testimonials"
-          tagIcon={Star}
-          tagAnimation="slide-up"
-          testimonials={[
-            {
-              id: "1",              name: "Priya Patel",              role: "Software Professional",              testimonial: "Fantastic experience from start to finish! The staff was incredibly welcoming and the clinic was spotless. Dr Nirmal explained everything clearly and made me feel comfortable throughout my treatment.",              imageSrc: "http://img.b2bpic.net/free-photo/pretty-blond-woman-showing-double-thumbs-up-green-jacket-looking-merry-front-view_176474-71773.jpg",              imageAlt: "Priya Patel - Satisfied patient",              icon: Heart
-            },
-            {
-              id: "2",              name: "Rajesh Kumar",              role: "Business Owner",              testimonial: "Great experience treating my dental issue. Kind staff and the doctor explained everything clearly. The environment is very friendly and welcoming. Highly recommend for anyone in Rajkot!",              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-shopping-bags-one-hand-credit-card-other_23-2148673233.jpg",              imageAlt: "Rajesh Kumar - Happy patient",              icon: Smile
-            },
-            {
-              id: "3",              name: "Anjali Desai",              role: "Healthcare Worker",              testimonial: "Excellent dental clinic with very friendly staff and clean environment. They treat you like family and provide expert care. The facilities are modern and professional.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-stylish-young-man-standing-profile-turn-head-with-beaming-smile-express-satisfaction-enthusiasm-standing-white-wall-pleased_176420-33957.jpg",              imageAlt: "Anjali Desai - Testimonial",              icon: ThumbsUp
-            },
-            {
-              id: "4",              name: "Vikram Singh",              role: "Retired Professional",              testimonial: "As a senior, I appreciate their gentle approach and patience. The team made my complex treatment painless and manageable. They truly care about patient comfort and satisfaction.",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-sitting_23-2149037013.jpg",              imageAlt: "Vikram Singh - Senior patient",              icon: Award
-            },
-            {
-              id: "5",              name: "Sneha Sharma",              role: "Teacher",              testimonial: "Professional, punctual, and passionate about dental health. The staff remembers your preferences and makes you feel valued. My entire family now comes here!",              imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-showing-double-thumbs-up-blue-blouse-looking-happy_176474-81606.jpg",              imageAlt: "Sneha Sharma - Family patient",              icon: Users
-            },
-            {
-              id: "6",              name: "Arjun Bhatt",              role: "Entrepreneur",              testimonial: "Outstanding service and genuine care. The LGBTQ+ friendly environment shows they truly welcome everyone. Dr Nirmal's expertise combined with compassion makes all the difference.",              imageSrc: "http://img.b2bpic.net/free-photo/pensive-young-businessman-looking-side_329181-747.jpg",              imageAlt: "Arjun Bhatt - Client testimonial",              icon: Star
-            }
-          ]}
+          features={services}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
@@ -165,75 +140,123 @@ export default function Home() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardTwo
-          title="Our Track Record"
-          description="Trusted by the Rajkot community with proven excellence in dental care"
-          tag="Performance Metrics"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
-          metrics={[
-            { id: "rating", value: "4.9★", description: "Average Rating" },
-            { id: "reviews", value: "253+", description: "Patient Reviews" },
-            { id: "experience", value: "15+", description: "Years of Excellence" },
-            { id: "patients", value: "5000+", description: "Happy Patients Served" }
-          ]}
-          gridVariant="four-items-2x2-equal-grid"
-          animationType="blur-reveal"
-          textboxLayout="default"
+      <div id="reviews" data-section="reviews">
+        <TestimonialCardTwelve
+          testimonials={testimonials}
+          cardTitle="Over 5,000+ Patients Trust Us With Their Smile - 4.9★ Rating"
+          cardTag="See What Our Patients Say"
+          cardAnimation="blur-reveal"
           useInvertedBackground={false}
         />
       </div>
 
+      <div id="gallery" data-section="gallery" className="w-full py-16 md:py-24">
+        <div className="mx-auto max-w-7xl px-4 md:px-6">
+          <div className="mb-12 text-center">
+            <h2 className="text-3xl md:text-5xl font-semibold mb-4">Our Clinic Gallery</h2>
+            <p className="text-base md:text-lg text-foreground/70 mb-2">State-of-the-art facilities and modern equipment</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {galleryImages.map((img) => (
+              <div
+                key={img.id}
+                className="group relative overflow-hidden rounded-lg aspect-square cursor-pointer transform hover:scale-105 transition-transform duration-300"
+              >
+                <img
+                  src={img.imageSrc}
+                  alt={img.imageAlt}
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                  <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 0a10 10 0 1110 10A10 10 0 0110 0zm0 18a8 8 0 110-16 8 8 0 0110 16z" />
+                    <path d="M9 5h2v8H9zm0 10h2v2H9z" />
+                  </svg>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div id="hours" data-section="hours" className="w-full py-16 md:py-24 bg-card">
+        <div className="mx-auto max-w-7xl px-4 md:px-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-semibold mb-8">Opening Hours</h2>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between pb-3 border-b border-foreground/10">
+                  <span className="font-medium">Monday - Friday</span>
+                  <span className="text-foreground/70">9:00 AM - 8:00 PM</span>
+                </div>
+                <div className="flex items-center justify-between pb-3 border-b border-foreground/10">
+                  <span className="font-medium">Saturday</span>
+                  <span className="text-foreground/70">9:00 AM - 6:00 PM</span>
+                </div>
+                <div className="flex items-center justify-between pb-3 border-b border-foreground/10">
+                  <span className="font-medium">Sunday</span>
+                  <span className="text-foreground/70">10:00 AM - 4:00 PM</span>
+                </div>
+                <div className="flex items-center justify-between pt-2">
+                  <span className="font-medium">Emergency</span>
+                  <span className="text-primary-cta font-semibold">24/7 Available</span>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h2 className="text-3xl md:text-4xl font-semibold mb-8">Clinic Details</h2>
+              <div className="space-y-6">
+                <div className="flex gap-4">
+                  <MapPin className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <p className="font-medium mb-1">Address</p>
+                    <p className="text-foreground/70">123 Dental Plaza, Rajkot, Gujarat 360001</p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <Phone className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <p className="font-medium mb-1">Phone</p>
+                    <p className="text-foreground/70">(+91) 9876543210</p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <Clock className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <p className="font-medium mb-1">Response Time</p>
+                    <p className="text-foreground/70">Usually within 1 hour</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Get in Touch"
-          tagIcon={Phone}
-          tagAnimation="slide-up"
-          title="Ready for Your Healthy Smile?"
-          description="Book your appointment today or visit us at our Rajkot clinic. Our friendly team is ready to welcome you with professional dental care."
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={true}
-          inputPlaceholder="Enter your email to book appointment"
+        <ContactSplit
+          tag="Get In Touch"
+          title="Schedule Your Dental Appointment"
+          description="Contact us today to book your appointment. Our friendly team is ready to help you achieve your best smile."
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          imageSrc="/contact-clinic.jpg"
+          imageAlt="Dr Nirmal's Dental Clinic Contact"
+          inputPlaceholder="Enter your email"
           buttonText="Book Now"
-          termsText="We respect your privacy. Our team will contact you within 24 hours to confirm your appointment."
+          termsText="We'll contact you within 1 hour. Your information is secure with us."
+          onSubmit={(email) => console.log("Email submitted:", email)}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/smiling-patient-dentist-s-dental-clinic_23-2147879193.jpg"
-          imageAlt="Dr Nirmal's Dental Clinic Interior"
+        <FooterBase
+          columns={footerColumns}
           logoText="Dr Nirmal's Dental Clinic"
-          copyrightText="© 2025 Dr Nirmal's Dental Clinic. All rights reserved."
-          columns={[
-            {
-              title: "Quick Links",              items: [
-                { label: "Home", href: "/" },
-                { label: "Services", href: "#services" },
-                { label: "About Us", href: "#about" },
-                { label: "Contact", href: "#contact" }
-              ]
-            },
-            {
-              title: "Contact Info",              items: [
-                { label: "Phone: 072039 64464", href: "tel:07203964464" },
-                { label: "Get Directions", href: "https://maps.google.com/?q=7QQ9+FJ+Rajkot+Gujarat" },
-                { label: "Book Appointment", href: "#contact" },
-                { label: "Emergency Care", href: "tel:07203964464" }
-              ]
-            },
-            {
-              title: "Hours",              items: [
-                { label: "Morning: 9AM - 2PM", href: "#" },
-                { label: "Evening: 4PM - 9PM", href: "#" },
-                { label: "LGBTQ+ Friendly", href: "#" },
-                { label: "Privacy Policy", href: "#" }
-              ]
-            }
-          ]}
+          copyrightText="© 2025 Dr Nirmal's Dental Clinic. All rights reserved. | Privacy Policy"
+          onPrivacyClick={() => console.log("Privacy clicked")}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfaff;
-  --card: #f7f5ff;
-  --foreground: #0f0022;
-  --primary-cta: #8b5cf6;
+  --background: #ffffff;
+  --card: #f0f9ff;
+  --foreground: #001f3f;
+  --primary-cta: #0369a1;
   --primary-cta-text: #fbfaff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #06b6d4;
   --secondary-cta-text: #0f0022;
-  --accent: #d8cef5;
-  --background-accent: #c4a8f9;
+  --accent: #0891b2;
+  --background-accent: #cffafe;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);