Update theme colors

Merge version_1 into main

src/app/appointment/page.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import Input from "@/components/form/Input";
+import { Calendar, Clock, Eye, Instagram, Facebook, Linkedin, MapPin } from "lucide-react";
+
+export default function AppointmentPage() {
+  const navItems = [
+    { name: "Collections", id: "collections" },
+    { name: "Services", id: "services" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const navButton = {
+    text: "Book Appointment",    href: "/appointment"};
+
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    phone: "",    date: "",    time: "",    service: "",    message: ""});
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Appointment booked:", formData);
+    // Handle form submission here
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="medium"
+      background="aurora"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      {/* Navbar */}
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Pearle"
+          navItems={navItems}
+          button={navButton}
+          animateOnLoad={true}
+        />
+      </div>
+
+      {/* Hero Section */}
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Book Your Perfect Vision Appointment"
+          description="Schedule a personalized consultation with our certified opticians. We'll help you find the perfect frames and ensure optimal eye health."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Professional Eye Care"
+          tagIcon={Calendar}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Schedule Now", href: "#booking-form" },
+            { text: "Learn More", href: "/services" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=2"
+          imageAlt="Professional optician consultation"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+          ariaLabel="Appointment booking hero section"
+        />
+      </div>
+
+      {/* Booking Form Section */}
+      <div id="booking-form" data-section="booking-form">
+        <div className="py-16 md:py-24">
+          <div className="container mx-auto max-w-3xl px-4">
+            <div className="mb-12 text-center">
+              <h2 className="text-3xl md:text-5xl font-bold mb-4">Schedule Your Appointment</h2>
+              <p className="text-lg text-gray-600">Fill out the form below and we'll confirm your appointment shortly</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="bg-white rounded-lg p-8 shadow-lg">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Full Name *</label>
+                  <Input
+                    value={formData.name}
+                    onChange={(value) => handleInputChange("name", value)}
+                    placeholder="Your full name"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Email *</label>
+                  <Input
+                    value={formData.email}
+                    onChange={(value) => handleInputChange("email", value)}
+                    placeholder="your@email.com"
+                    type="email"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Phone *</label>
+                  <Input
+                    value={formData.phone}
+                    onChange={(value) => handleInputChange("phone", value)}
+                    placeholder="(123) 456-7890"
+                    type="tel"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Preferred Date *</label>
+                  <Input
+                    value={formData.date}
+                    onChange={(value) => handleInputChange("date", value)}
+                    placeholder="mm/dd/yyyy"
+                    type="date"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Preferred Time *</label>
+                  <Input
+                    value={formData.time}
+                    onChange={(value) => handleInputChange("time", value)}
+                    placeholder="Select time"
+                    type="time"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Service Type *</label>
+                  <select
+                    value={formData.service}
+                    onChange={(e) => handleInputChange("service", e.target.value)}
+                    className="w-full px-4 py-2 border border-gray-300 rounded bg-white"
+                    required
+                  >
+                    <option value="">Select a service</option>
+                    <option value="eye-exam">Comprehensive Eye Exam</option>
+                    <option value="frame-fitting">Frame Fitting Consultation</option>
+                    <option value="adjustment">Frame Adjustment & Repair</option>
+                    <option value="lens-replacement">Lens Replacement</option>
+                    <option value="general">General Consultation</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="mb-6">
+                <label className="block text-sm font-medium mb-2">Additional Notes</label>
+                <textarea
+                  value={formData.message}
+                  onChange={(e) => handleInputChange("message", e.target.value)}
+                  placeholder="Tell us about your needs or preferences..."
+                  className="w-full px-4 py-2 border border-gray-300 rounded bg-white"
+                  rows={4}
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded transition"
+              >
+                Book Appointment
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      {/* Service Types */}
+      <div id="service-types" data-section="service-types">
+        <FeatureBorderGlow
+          title="Our Professional Services"
+          description="Choose from our range of comprehensive eye care and optical services"
+          features={[
+            {
+              icon: Eye,
+              title: "Comprehensive Eye Exams",              description: "Full vision assessments by certified optometrists using advanced diagnostic equipment"},
+            {
+              icon: Calendar,
+              title: "Frame Fitting Consultation",              description: "Personalized styling consultations to find frames that suit your style and face shape"},
+            {
+              icon: Clock,
+              title: "Same-Day Adjustments",              description: "Quick frame adjustments, repairs, and lens replacements to keep you seeing clearly"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          tag="Quality Services"
+        />
+      </div>
+
+      {/* Locations Section */}
+      <div id="locations" data-section="locations">
+        <ContactCTA
+          tag="Visit Us"
+          tagIcon={MapPin}
+          title="Visit Our Premium Boutiques"
+          description="We have multiple convenient locations ready to serve you with expert care. Walk in or book ahead for priority service."
+          buttons={[
+            { text: "Find Locations", href: "/contact" },
+            { text: "Call Us", href: "tel:+1-800-PEARLE-1" },
+          ]}
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      {/* Footer */}
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Pearle"
+          copyrightText="© 2025 Pearle Eyewear. All rights reserved. | Premium Vision Solutions"
+          socialLinks={[
+            {
+              icon: Instagram,
+              href: "https://instagram.com/pearleeyewear",              ariaLabel: "Follow Pearle on Instagram"},
+            {
+              icon: Facebook,
+              href: "https://facebook.com/pearleeyewear",              ariaLabel: "Visit Pearle on Facebook"},
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com/company/pearleeyewear",              ariaLabel: "Connect with Pearle on LinkedIn"},
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -17,9 +17,7 @@ export default function ContactPage() {
   ];
 
   const navButton = {
-    text: "Book Appointment",
-    href: "/appointment",
-  };
+    text: "Book Appointment",    href: "/appointment"};
 
   return (
     <ThemeProvider
@@ -69,11 +67,7 @@ export default function ContactPage() {
           tag="Hours & Locations"
           tagIcon={Star}
           names={[
-            "Downtown Location",
-            "Midtown Gallery",
-            "Westside Studio",
-            "Northpoint Boutique",
-          ]}
+            "Downtown Location",            "Midtown Gallery",            "Westside Studio",            "Northpoint Boutique"]}
           textboxLayout="default"
           useInvertedBackground={false}
           speed={40}
@@ -89,22 +83,16 @@ export default function ContactPage() {
           socialLinks={[
             {
               icon: Instagram,
-              href: "https://instagram.com/pearleeyewear",
-              ariaLabel: "Follow Pearle on Instagram",
-            },
+              href: "https://instagram.com/pearleeyewear",              ariaLabel: "Follow Pearle on Instagram"},
             {
               icon: Facebook,
-              href: "https://facebook.com/pearleeyewear",
-              ariaLabel: "Visit Pearle on Facebook",
-            },
+              href: "https://facebook.com/pearleeyewear",              ariaLabel: "Visit Pearle on Facebook"},
             {
               icon: Linkedin,
-              href: "https://linkedin.com/company/pearleeyewear",
-              ariaLabel: "Connect with Pearle on LinkedIn",
-            },
+              href: "https://linkedin.com/company/pearleeyewear",              ariaLabel: "Connect with Pearle on LinkedIn"},
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -4,38 +4,23 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 
 const publicSans = Public_Sans({
-  variable: "--font-public-sans",
-  subsets: ["latin"],
+  variable: "--font-public-sans",  subsets: ["latin"],
 });
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Pearle - Premium Eyewear & Expert Optical Services",
-  description: "Discover premium eyewear and expert optical services at Pearle. Certified opticians, personalized frame fitting, and eye care solutions. Book your appointment today.",
-  keywords: "eyewear, optical services, glasses, frames, optician, eye exam, premium eyewear, frame fitting, vision care",
-  openGraph: {
-    title: "Pearle - Premium Eyewear & Optical Services",
-    description: "Expert eyewear boutique offering premium frames, professional eye exams, and personalized consultations.",
-    type: "website",
-    siteName: "Pearle",
-    images: [
+  title: "Pearle - Premium Eyewear & Expert Optical Services",  description: "Discover premium eyewear and expert optical services at Pearle. Certified opticians, personalized frame fitting, and eye care solutions. Book your appointment today.",  keywords: "eyewear, optical services, glasses, frames, optician, eye exam, premium eyewear, frame fitting, vision care",  openGraph: {
+    title: "Pearle - Premium Eyewear & Optical Services",    description: "Expert eyewear boutique offering premium frames, professional eye exams, and personalized consultations.",    type: "website",    siteName: "Pearle",    images: [
       {
-        url: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg",
-        alt: "Pearle premium eyewear",
-      },
+        url: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg",        alt: "Pearle premium eyewear"},
     ],
   },
   twitter: {
-    card: "summary_large_image",
-    title: "Pearle - Premium Eyewear",
-    description: "Discover your perfect frames at Pearle. Expert fitting, premium quality, certified opticians.",
-    images: [
-      "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg",
-    ],
+    card: "summary_large_image",    title: "Pearle - Premium Eyewear",    description: "Discover your perfect frames at Pearle. Expert fitting, premium quality, certified opticians.",    images: [
+      "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg"],
   },
   robots: {
     index: true,
@@ -1422,4 +1407,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -21,9 +21,7 @@ export default function HomePage() {
   ];
 
   const navButton = {
-    text: "Book Appointment",
-    href: "/appointment",
-  };
+    text: "Book Appointment",    href: "/appointment"};
 
   return (
     <ThemeProvider
@@ -76,19 +74,13 @@ export default function HomePage() {
           features={[
             {
               icon: Eye,
-              title: "Free Vision Screening",
-              description: "Comprehensive eye health assessment included with every appointment",
-            },
+              title: "Free Vision Screening",              description: "Comprehensive eye health assessment included with every appointment"},
             {
               icon: Zap,
-              title: "Same-Day Adjustments",
-              description: "Quick frame repairs and adjustments to keep you seeing clearly",
-            },
+              title: "Same-Day Adjustments",              description: "Quick frame repairs and adjustments to keep you seeing clearly"},
             {
               icon: Heart,
-              title: "30-Day Fit Guarantee",
-              description: "Guaranteed satisfaction or we'll find you the perfect fit",
-            },
+              title: "30-Day Fit Guarantee",              description: "Guaranteed satisfaction or we'll find you the perfect fit"},
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -104,47 +96,17 @@ export default function HomePage() {
           description="Discover our carefully curated selection of premium eyewear for every lifestyle and preference"
           products={[
             {
-              id: "1",
-              name: "Everyday Collection",
-              price: "From $149",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-big-city-woman-big-city_169016-66673.jpg?_wi=1",
-              imageAlt: "Everyday eyewear collection",
-            },
+              id: "1",              name: "Everyday Collection",              price: "From $149",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-big-city-woman-big-city_169016-66673.jpg?_wi=1",              imageAlt: "Everyday eyewear collection"},
             {
-              id: "2",
-              name: "Premium Designer",
-              price: "From $349",
-              imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg?_wi=2",
-              imageAlt: "Premium designer frames",
-            },
+              id: "2",              name: "Premium Designer",              price: "From $349",              imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg?_wi=2",              imageAlt: "Premium designer frames"},
             {
-              id: "3",
-              name: "Sport & Active",
-              price: "From $179",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-fit-man-beach-wearing-sunglasses_273609-15952.jpg?_wi=1",
-              imageAlt: "Sports eyewear collection",
-            },
+              id: "3",              name: "Sport & Active",              price: "From $179",              imageSrc: "http://img.b2bpic.net/free-photo/young-fit-man-beach-wearing-sunglasses_273609-15952.jpg?_wi=1",              imageAlt: "Sports eyewear collection"},
             {
-              id: "4",
-              name: "Sunglasses",
-              price: "From $199",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-red-dress-sexy-carefree-woman-posing-near-blue-wall-studio-positive-model-having-fun-cheerful-happy-sunny-day-shadow-from-window_158538-25864.jpg?_wi=1",
-              imageAlt: "Premium sunglasses",
-            },
+              id: "4",              name: "Sunglasses",              price: "From $199",              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-red-dress-sexy-carefree-woman-posing-near-blue-wall-studio-positive-model-having-fun-cheerful-happy-sunny-day-shadow-from-window_158538-25864.jpg?_wi=1",              imageAlt: "Premium sunglasses"},
             {
-              id: "5",
-              name: "Kids Frames",
-              price: "From $99",
-              imageSrc: "http://img.b2bpic.net/free-photo/cute-little-girl-holding-books-isolated-studio_1303-31007.jpg?_wi=1",
-              imageAlt: "Children eyewear",
-            },
+              id: "5",              name: "Kids Frames",              price: "From $99",              imageSrc: "http://img.b2bpic.net/free-photo/cute-little-girl-holding-books-isolated-studio_1303-31007.jpg?_wi=1",              imageAlt: "Children eyewear"},
             {
-              id: "6",
-              name: "Blue-Light Protection",
-              price: "From $129",
-              imageSrc: "http://img.b2bpic.net/free-photo/black-office-business-equipment-black-background_1387-730.jpg?_wi=1",
-              imageAlt: "Blue light filtering glasses",
-            },
+              id: "6",              name: "Blue-Light Protection",              price: "From $129",              imageSrc: "http://img.b2bpic.net/free-photo/black-office-business-equipment-black-background_1387-730.jpg?_wi=1",              imageAlt: "Blue light filtering glasses"},
           ]}
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
@@ -162,15 +124,7 @@ export default function HomePage() {
           tag="Certifications & Guarantees"
           tagIcon={Star}
           names={[
-            "Certified Opticians",
-            "Insurance Support",
-            "30-Day Fit Guarantee",
-            "Expert Consultations",
-            "Premium Brands",
-            "Same-Day Service",
-            "Lifetime Support",
-            "Eye Health Leaders",
-          ]}
+            "Certified Opticians",            "Insurance Support",            "30-Day Fit Guarantee",            "Expert Consultations",            "Premium Brands",            "Same-Day Service",            "Lifetime Support",            "Eye Health Leaders"]}
           textboxLayout="default"
           useInvertedBackground={false}
           speed={40}
@@ -183,41 +137,17 @@ export default function HomePage() {
         <TestimonialCardTwelve
           testimonials={[
             {
-              id: "1",
-              name: "Sarah Mitchell",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
-              imageAlt: "Sarah Mitchell, satisfied customer",
-            },
+              id: "1",              name: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=1",              imageAlt: "Sarah Mitchell, satisfied customer"},
             {
-              id: "2",
-              name: "James Rodriguez",
-              imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
-              imageAlt: "James Rodriguez, happy client",
-            },
+              id: "2",              name: "James Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",              imageAlt: "James Rodriguez, happy client"},
             {
-              id: "3",
-              name: "Emily Chen",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg?_wi=1",
-              imageAlt: "Emily Chen, valued customer",
-            },
+              id: "3",              name: "Emily Chen",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg?_wi=1",              imageAlt: "Emily Chen, valued customer"},
             {
-              id: "4",
-              name: "Michael Thompson",
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
-              imageAlt: "Michael Thompson, satisfied customer",
-            },
+              id: "4",              name: "Michael Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "Michael Thompson, satisfied customer"},
             {
-              id: "5",
-              name: "Lisa Anderson",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg?_wi=2",
-              imageAlt: "Lisa Anderson, happy client",
-            },
+              id: "5",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg?_wi=2",              imageAlt: "Lisa Anderson, happy client"},
             {
-              id: "6",
-              name: "David Kim",
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
-              imageAlt: "David Kim, satisfied customer",
-            },
+              id: "6",              name: "David Kim",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "David Kim, satisfied customer"},
           ]}
           cardTitle="Over 5,000 customers have experienced better vision and style with Pearle"
           cardTag="Trusted by our community"
@@ -252,22 +182,16 @@ export default function HomePage() {
           socialLinks={[
             {
               icon: Instagram,
-              href: "https://instagram.com/pearleeyewear",
-              ariaLabel: "Follow Pearle on Instagram",
-            },
+              href: "https://instagram.com/pearleeyewear",              ariaLabel: "Follow Pearle on Instagram"},
             {
               icon: Facebook,
-              href: "https://facebook.com/pearleeyewear",
-              ariaLabel: "Visit Pearle on Facebook",
-            },
+              href: "https://facebook.com/pearleeyewear",              ariaLabel: "Visit Pearle on Facebook"},
             {
               icon: Linkedin,
-              href: "https://linkedin.com/company/pearleeyewear",
-              ariaLabel: "Connect with Pearle on LinkedIn",
-            },
+              href: "https://linkedin.com/company/pearleeyewear",              ariaLabel: "Connect with Pearle on LinkedIn"},
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -17,9 +17,7 @@ export default function ServicesPage() {
   ];
 
   const navButton = {
-    text: "Book Appointment",
-    href: "/appointment",
-  };
+    text: "Book Appointment",    href: "/appointment"};
 
   return (
     <ThemeProvider
@@ -52,19 +50,13 @@ export default function ServicesPage() {
           features={[
             {
               icon: Eye,
-              title: "Comprehensive Eye Exams",
-              description: "Full vision assessments by certified optometrists using advanced diagnostic equipment to ensure optimal eye health and prescription accuracy",
-            },
+              title: "Comprehensive Eye Exams",              description: "Full vision assessments by certified optometrists using advanced diagnostic equipment to ensure optimal eye health and prescription accuracy"},
             {
               icon: Zap,
-              title: "Expert Frame Fitting",
-              description: "Personalized styling consultations to find frames that complement your face shape, lifestyle, and personal preferences",
-            },
+              title: "Expert Frame Fitting",              description: "Personalized styling consultations to find frames that complement your face shape, lifestyle, and personal preferences"},
             {
               icon: Heart,
-              title: "Adjustments & Repairs",
-              description: "Same-day frame adjustments, lens replacements, and professional repairs to keep your eyewear in perfect condition",
-            },
+              title: "Adjustments & Repairs",              description: "Same-day frame adjustments, lens replacements, and professional repairs to keep your eyewear in perfect condition"},
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -98,22 +90,16 @@ export default function ServicesPage() {
           socialLinks={[
             {
               icon: Instagram,
-              href: "https://instagram.com/pearleeyewear",
-              ariaLabel: "Follow Pearle on Instagram",
-            },
+              href: "https://instagram.com/pearleeyewear",              ariaLabel: "Follow Pearle on Instagram"},
             {
               icon: Facebook,
-              href: "https://facebook.com/pearleeyewear",
-              ariaLabel: "Visit Pearle on Facebook",
-            },
+              href: "https://facebook.com/pearleeyewear",              ariaLabel: "Visit Pearle on Facebook"},
             {
               icon: Linkedin,
-              href: "https://linkedin.com/company/pearleeyewear",
-              ariaLabel: "Connect with Pearle on LinkedIn",
-            },
+              href: "https://linkedin.com/company/pearleeyewear",              ariaLabel: "Connect with Pearle on LinkedIn"},
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/shop/page.tsx

@@ -17,9 +17,7 @@ export default function ShopPage() {
   ];
 
   const navButton = {
-    text: "Book Appointment",
-    href: "/appointment",
-  };
+    text: "Book Appointment",    href: "/appointment"};
 
   return (
     <ThemeProvider
@@ -51,47 +49,17 @@ export default function ShopPage() {
           description="Explore our full range of premium eyewear across all categories. From everyday classics to luxury designer frames, find your perfect style."
           products={[
             {
-              id: "1",
-              name: "Everyday Collection",
-              price: "From $149",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-big-city-woman-big-city_169016-66673.jpg?_wi=2",
-              imageAlt: "Everyday eyewear collection",
-            },
+              id: "1",              name: "Everyday Collection",              price: "From $149",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-big-city-woman-big-city_169016-66673.jpg?_wi=2",              imageAlt: "Everyday eyewear collection"},
             {
-              id: "2",
-              name: "Premium Designer",
-              price: "From $349",
-              imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg?_wi=3",
-              imageAlt: "Premium designer frames",
-            },
+              id: "2",              name: "Premium Designer",              price: "From $349",              imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg?_wi=3",              imageAlt: "Premium designer frames"},
             {
-              id: "3",
-              name: "Sport & Active",
-              price: "From $179",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-fit-man-beach-wearing-sunglasses_273609-15952.jpg?_wi=2",
-              imageAlt: "Sports eyewear collection",
-            },
+              id: "3",              name: "Sport & Active",              price: "From $179",              imageSrc: "http://img.b2bpic.net/free-photo/young-fit-man-beach-wearing-sunglasses_273609-15952.jpg?_wi=2",              imageAlt: "Sports eyewear collection"},
             {
-              id: "4",
-              name: "Sunglasses",
-              price: "From $199",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-red-dress-sexy-carefree-woman-posing-near-blue-wall-studio-positive-model-having-fun-cheerful-happy-sunny-day-shadow-from-window_158538-25864.jpg?_wi=2",
-              imageAlt: "Premium sunglasses",
-            },
+              id: "4",              name: "Sunglasses",              price: "From $199",              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-red-dress-sexy-carefree-woman-posing-near-blue-wall-studio-positive-model-having-fun-cheerful-happy-sunny-day-shadow-from-window_158538-25864.jpg?_wi=2",              imageAlt: "Premium sunglasses"},
             {
-              id: "5",
-              name: "Kids Frames",
-              price: "From $99",
-              imageSrc: "http://img.b2bpic.net/free-photo/cute-little-girl-holding-books-isolated-studio_1303-31007.jpg?_wi=2",
-              imageAlt: "Children eyewear",
-            },
+              id: "5",              name: "Kids Frames",              price: "From $99",              imageSrc: "http://img.b2bpic.net/free-photo/cute-little-girl-holding-books-isolated-studio_1303-31007.jpg?_wi=2",              imageAlt: "Children eyewear"},
             {
-              id: "6",
-              name: "Blue-Light Protection",
-              price: "From $129",
-              imageSrc: "http://img.b2bpic.net/free-photo/black-office-business-equipment-black-background_1387-730.jpg?_wi=2",
-              imageAlt: "Blue light filtering glasses",
-            },
+              id: "6",              name: "Blue-Light Protection",              price: "From $129",              imageSrc: "http://img.b2bpic.net/free-photo/black-office-business-equipment-black-background_1387-730.jpg?_wi=2",              imageAlt: "Blue light filtering glasses"},
           ]}
           gridVariant="bento-grid"
           animationType="slide-up"
@@ -126,22 +94,16 @@ export default function ShopPage() {
           socialLinks={[
             {
               icon: Instagram,
-              href: "https://instagram.com/pearleeyewear",
-              ariaLabel: "Follow Pearle on Instagram",
-            },
+              href: "https://instagram.com/pearleeyewear",              ariaLabel: "Follow Pearle on Instagram"},
             {
               icon: Facebook,
-              href: "https://facebook.com/pearleeyewear",
-              ariaLabel: "Visit Pearle on Facebook",
-            },
+              href: "https://facebook.com/pearleeyewear",              ariaLabel: "Visit Pearle on Facebook"},
             {
               icon: Linkedin,
-              href: "https://linkedin.com/company/pearleeyewear",
-              ariaLabel: "Connect with Pearle on LinkedIn",
-            },
+              href: "https://linkedin.com/company/pearleeyewear",              ariaLabel: "Connect with Pearle on LinkedIn"},
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #efebe5;;
-  --card: #f7f2ea;;
-  --foreground: #2b180a;;
-  --primary-cta: #2b180a;;
-  --secondary-cta: #ffffff;;
-  --accent: #ffffff;;
-  --background-accent: #e1b875;; */
+  /* --background: #ffffff;;;;;;
+  --card: #f9f9f9;;;;;;
+  --foreground: #000612e6;;;;;;
+  --primary-cta: #106EFB;;;;;;
+  --secondary-cta: #f9f9f9;;;;;;
+  --accent: #e2e2e2;;;;;;
+  --background-accent: #106EFB;;;;;; */
 
-  --background: #efebe5;;
-  --card: #f7f2ea;;
-  --foreground: #2b180a;;
-  --primary-cta: #2b180a;;
-  --primary-cta-text: #efebe5;;
-  --secondary-cta: #ffffff;;
-  --secondary-cta-text: #2b180a;;
-  --accent: #ffffff;;
-  --background-accent: #e1b875;;
+  --background: #ffffff;;;;;;
+  --card: #f9f9f9;;;;;;
+  --foreground: #000612e6;;;;;;
+  --primary-cta: #106EFB;;;;;;
+  --primary-cta-text: #ffffff;;;;;;
+  --secondary-cta: #f9f9f9;;;;;;
+  --secondary-cta-text: #000612e6;;;;;;
+  --accent: #e2e2e2;;;;;;
+  --background-accent: #106EFB;;;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);