Update theme colors

src/app/layout.tsx

@@ -1404,4 +1404,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,28 +1,309 @@
-export default function Home() {
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import Link from "next/link";
+import {
+  Coffee,
+  Star,
+  Users,
+  TrendingUp,
+  MapPin,
+  Instagram,
+  Facebook,
+  Phone,
+} from "lucide-react";
+
+export default function HomePage() {
   return (
-    <main className="min-h-screen w-full">
+    <ThemeProvider
-      <div id="hero" data-section="hero" className="relative w-full h-screen flex items-center justify-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-slate-900 dark:to-slate-800">
+      defaultButtonVariant="elastic-effect"
-        <div className="absolute inset-0 overflow-hidden">
+      defaultTextAnimation="entrance-slide"
-          <div className="absolute top-20 right-10 w-72 h-72 bg-orange-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 dark:opacity-10"></div>
+      borderRadius="rounded"
-          <div className="absolute -bottom-8 left-20 w-72 h-72 bg-amber-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 dark:opacity-10"></div>
+      contentWidth="smallMedium"
-        </div>
+      sizing="mediumSizeLargeTitles"
-        <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      background="blurBottom"
-          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white mb-6 leading-tight">
+      cardStyle="gradient-mesh"
-            Welcome to The Ora Cafe
+      primaryButtonStyle="shadow"
-          </h1>
+      secondaryButtonStyle="radial-glow"
-          <p className="text-lg sm:text-xl text-slate-600 dark:text-slate-300 mb-8 max-w-2xl mx-auto leading-relaxed">
+      headingFontWeight="light"
-            Discover Bhilwara's most beloved rooftop dining destination. Enjoy fusion cuisine, cozy vibes, and stunning views that make every moment unforgettable.
+    >
-          </p>
+      {/* Navbar */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+      <div id="nav" data-section="nav">
-            <a href="#about" className="px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl">
+        <NavbarLayoutFloatingOverlay
-              Explore Now
+          brandName="The Ora Cafe"
-            </a>
+          navItems={[
-            <a href="#menu" className="px-8 py-4 border-2 border-slate-900 dark:border-white text-slate-900 dark:text-white font-semibold rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-200">
+            { name: "Home", id: "/" },
-              View Menu
+            { name: "Menu", id: "/menu" },
-            </a>
+            { name: "About", id: "rooftop-experience" },
-          </div>
+            { name: "Contact", id: "contact" },
-        </div>
+          ]}
+          button={{
+            text: "Reserve Table",            href: "#contact"
+          }}
+        />
       </div>
-    </main>
+
+      {/* Hero Section */}
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="The Ora Cafe"
+          description="Bhilwara's Favorite Rooftop Cafe Experience. Enjoy delicious food, cozy vibes, and the perfect place to hang out with friends and family."
+          buttons={[
+            {
+              text: "Reserve Now",              href: "#contact"
+            },
+            {
+              text: "Call Now",              href: "tel:+919460351156"
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg"
+          imageAlt="The Ora Cafe rooftop seating with warm evening lighting"
+          showDimOverlay={true}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      {/* Why People Love Ora Cafe */}
+      <div id="why-love-ora" data-section="why-love-ora">
+        <FeatureCardNine
+          title="Why People Love The Ora Cafe"
+          description="Discover what makes us Bhilwara's most beloved rooftop destination"
+          tag="Experience"
+          features={[
+            {
+              id: 1,
+              title: "Rooftop Ambience",              description:
+                "Beautiful rooftop seating with warm lighting and panoramic views of Bhilwara's skyline",              phoneOne: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/young-woman-using-phone-outside-night-street_1303-17020.jpg",                imageAlt: "Rooftop ambience with beautiful lighting"
+              },
+              phoneTwo: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/guy-brought-order-friends-have-meeting-evening-nice-outside-restaurant_146671-14492.jpg",                imageAlt: "Rooftop seating at night"
+              },
+            },
+            {
+              id: 2,
+              title: "Perfect Hangout Spot",              description:
+                "Ideal for friends gathering, casual meetups, dates, and family celebrations with cozy seating",              phoneOne: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/positive-young-women-smiling-dinner-party_23-2148454161.jpg",                imageAlt: "Friends hanging out at cafe"
+              },
+              phoneTwo: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/roommates-sharing-meal-together_23-2149112123.jpg",                imageAlt: "Friends dining together"
+              },
+            },
+            {
+              id: 3,
+              title: "Creative Food",              description:
+                "Delicious Indian fusion dishes and cafe favorites crafted by our talented culinary team",              phoneOne: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=1",                imageAlt: "Creative food plating"
+              },
+              phoneTwo: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/eggplant-dolma-with-tomato-belly-pepper_140725-4615.jpg?_wi=1",                imageAlt: "Fusion dishes"
+              },
+            },
+            {
+              id: 4,
+              title: "Instagram-Worthy",              description:
+                "A photogenic cafe loved by social media users with stunning backdrops and beautiful plating",              phoneOne: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/close-up-food-lover-taking-pictures-meal_23-2149286401.jpg",                imageAlt: "Instagram worthy food photography"
+              },
+              phoneTwo: {
+                imageSrc:
+                  "http://img.b2bpic.net/free-photo/close-up-hands-taking-photos-with-phone_23-2149250092.jpg",                imageAlt: "Social media food photography"
+              },
+            },
+          ]}
+          showStepNumbers={true}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Popular Dishes */}
+      <div id="popular-dishes" data-section="popular-dishes">
+        <ProductCardOne
+          title="Popular Dishes"
+          description="Try our signature menu items loved by our customers"
+          tag="Menu Favorites"
+          products={[
+            {
+              id: "1",              name: "Chur Chur Naan",              price: "₹180",              imageSrc:
+                "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=1",              imageAlt: "Crispy Chur Chur Naan"
+            },
+            {
+              id: "2",              name: "Cold Coffee",              price: "₹150",              imageSrc:
+                "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg?_wi=1",              imageAlt: "Refreshing Cold Coffee"
+            },
+            {
+              id: "3",              name: "Pizza",              price: "₹250",              imageSrc:
+                "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=1",              imageAlt: "Wood-fired Pizza"
+            },
+            {
+              id: "4",              name: "Cigar Rolls",              price: "₹120",              imageSrc:
+                "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg?_wi=1",              imageAlt: "Crispy Cigar Rolls"
+            },
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          buttons={[
+            {
+              text: "View Full Menu",              href: "/menu"
+            },
+          ]}
+        />
+      </div>
+
+      {/* Rooftop Experience */}
+      <div id="rooftop-experience" data-section="rooftop-experience">
+        <TestimonialAboutCard
+          tag="Our Story"
+          title="A Rooftop Experience Like No Other"
+          description="The Ora Cafe Team"
+          subdescription="Located in Bhilwara, Rajasthan"
+          icon={Coffee}
+          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-friends-restaurant_23-2149930136.jpg?_wi=1"
+          imageAlt="The Ora Cafe rooftop dining experience"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Gallery */}
+      <div id="gallery" data-section="gallery">
+        <TestimonialCardOne
+          title="Gallery Moments"
+          description="Capture the essence of The Ora Cafe through our customers' favorite moments"
+          tag="Visual Stories"
+          testimonials={[
+            {
+              id: "1",              name: "Food Plating",              role: "Culinary Art",              company: "The Ora Cafe",              rating: 5,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/vertical-view-delicious-tuna-dish-with-glass-wine-cheese-set_8353-10584.jpg?_wi=1",              imageAlt: "Gourmet food plating"
+            },
+            {
+              id: "2",              name: "Rooftop View",              role: "Ambience",              company: "Evening Scene",              rating: 5,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/middle-age-friends-having-fun_23-2149150932.jpg?_wi=1",              imageAlt: "Rooftop view with friends"
+            },
+            {
+              id: "3",              name: "Interior Design",              role: "Decor",              company: "Modern Cafe",              rating: 5,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/woman-golden-suit-sits-cafe_8353-301.jpg?_wi=1",              imageAlt: "Modern cafe interior"
+            },
+            {
+              id: "4",              name: "Coffee & Desserts",              role: "Beverages",              company: "Specialties",              rating: 5,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/top-view-cup-coffee-with-creamy-cake-pillow-formed-cookies-along-with-berries-grey-desk-berry-biscuit-cookie-photo-color_140725-33953.jpg?_wi=1",              imageAlt: "Coffee and desserts"
+            },
+            {
+              id: "5",              name: "Friends Enjoying",              role: "Social Scene",              company: "Happy Moments",              rating: 5,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg?_wi=1",              imageAlt: "Friends enjoying coffee"
+            },
+            {
+              id: "6",              name: "Night Lighting",              role: "Atmosphere",              company: "Evening Glow",              rating: 5,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/antique-ceiling-lamp_1203-804.jpg?_wi=1",              imageAlt: "Cafe night lighting"
+            },
+          ]}
+          gridVariant="bento-grid"
+          animationType="scale-rotate"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[
+            {
+              text: "Follow on Instagram",              href: "https://instagram.com"
+            },
+          ]}
+        />
+      </div>
+
+      {/* Customer Reviews */}
+      <div id="reviews" data-section="reviews">
+        <MetricCardThree
+          title="Customer Love"
+          description="Trusted by thousands of happy visitors"
+          tag="Reviews & Ratings"
+          metrics={[
+            {
+              id: "1",              icon: Star,
+              title: "Rating",              value: "4.0★"
+            },
+            {
+              id: "2",              icon: Users,
+              title: "Reviews",              value: "1,100+"
+            },
+            {
+              id: "3",              icon: TrendingUp,
+              title: "Visitors",              value: "1,000+/mo"
+            },
+            {
+              id: "4",              icon: MapPin,
+              title: "Location",              value: "Bhilwara"
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      {/* Contact & Reservation */}
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get in Touch"
+          title="Reserve Your Table Today"
+          description="Join us at The Ora Cafe for an unforgettable dining experience. Call us, visit Google Maps for directions, or fill out the form below to make your reservation."
+          tagIcon={Phone}
+          background={{
+            variant: "rotated-rays-animated-grid"
+          }}
+          useInvertedBackground={false}
+          inputPlaceholder="your.email@example.com"
+          buttonText="Reserve Table"
+          termsText="We respect your privacy. Unsubscribe at any time. You can also call us at +91 94603 51156 or visit us at G38 Rooftop, The Grandstand, Bhilwara."
+        />
+      </div>
+
+      {/* Footer */}
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="The Ora Cafe"
+          copyrightText="© 2025 The Ora Cafe | G38 Rooftop, Bhilwara, Rajasthan | +91 94603 51156"
+          socialLinks={[
+            {
+              icon: Instagram,
+              href: "https://instagram.com",              ariaLabel: "Instagram"
+            },
+            {
+              icon: Facebook,
+              href: "https://facebook.com",              ariaLabel: "Facebook"
+            },
+            {
+              icon: MapPin,
+              href: "https://maps.google.com",              ariaLabel: "Google Maps"
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4f0;
+  --background: #e3deea;
   --card: #ffffff;
-  --foreground: #1a1a1a;
+  --foreground: #1f2027;
-  --primary-cta: #2c2c2c;
+  --primary-cta: #1f2027;
-  --primary-cta-text: #f5f4f0;
+  --primary-cta-text: #e3deea;
-  --secondary-cta: #f5f4f0;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1a1a1a;
+  --secondary-cta-text: #1f2027;
-  --accent: #8a8a8a;
+  --accent: #627dc6;
-  --background-accent: #e8e6e1;
+  --background-accent: #627dc6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);