Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -7,8 +7,8 @@ import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwent
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import { MapPin, Zap, Coffee, Smartphone, Flame } from "lucide-react";
 
 export default function LandingPage() {
@@ -26,113 +26,110 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Features", id: "features" },
-        { name: "Contact", id: "contact" },
-      ]}
-      brandName="The Dark Cafe AI"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Home", id: "hero" },
+                { name: "About", id: "about" },
+                { name: "Features", id: "features" },
+                { name: "Reviews", id: "testimonials" },
+                { name: "Contact", id: "contact" },
+              ]}
+              brandName="The Dark Cafe"
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{ variant: "plain" }}
-      title="Coffee, Elevated by AI."
-      description="Experience the perfect brew crafted by intelligence. The Dark Cafe combines artisanal tradition with the precision of modern AI for an unforgettable experience."
-      imageSrc="http://img.b2bpic.net/free-photo/empty-wood-chair_1339-6716.jpg?_wi=1"
-      imageAlt="The Dark Cafe minimalist interior"
-      buttons={[
-        { text: "View Menu", href: "#features" },
-        { text: "Book a Table", href: "#contact" },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboardScroll
+              background={{ variant: "plain" }}
+              title="Coffee, Elevated by AI."
+              description="Experience the perfect brew crafted by intelligence. The Dark Cafe combines artisanal tradition with the precision of modern AI for an unforgettable experience."
+              imageSrc="http://img.b2bpic.net/free-photo/empty-wood-chair_1339-6716.jpg?_wi=1"
+              imageAlt="The Dark Cafe minimalist interior"
+              buttons={[
+                { text: "View Menu", href: "#features" },
+                { text: "Book a Table", href: "#contact" },
+              ]}
+            />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="The Future of Cafe Experience"
-      description="We are revolutionizing the way you enjoy your daily cup. By integrating predictive AI with our classic heritage, we ensure every drink is exactly as you like it, every single time."
-      metrics={[
-        { value: "4.9", title: "Customer Rating" },
-        { value: "34+", title: "Verified Reviews" },
-        { value: "100%", title: "Service Accuracy" },
-        { value: "24/7", title: "AI Support" },
-      ]}
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/empty-wood-chair_1339-6716.jpg?_wi=2"
-      imageAlt="The Dark Cafe futuristic coffee brewing"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+            <MetricSplitMediaAbout
+              title="The Future of Cafe Experience"
+              description="We are revolutionizing the way you enjoy your daily cup. By integrating predictive AI with our classic heritage, we ensure every drink is exactly as you like it, every single time."
+              metrics={[
+                { value: "4.9", title: "Customer Rating" },
+                { value: "34+", title: "Verified Reviews" },
+                { value: "100%", title: "Service Accuracy" },
+                { value: "24/7", title: "AI Support" },
+              ]}
+              useInvertedBackground={false}
+              imageSrc="http://img.b2bpic.net/free-photo/empty-wood-chair_1339-6716.jpg?_wi=2"
+              imageAlt="The Dark Cafe futuristic coffee brewing"
+              mediaAnimation="slide-up"
+              metricsAnimation="slide-up"
+            />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentySix
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        { title: "AI-Crafted Profiles", description: "Personalized blends that adapt to your taste palette.", buttonIcon: Zap },
-        { title: "Smart Atmosphere", description: "Intelligent lighting and sound adjustments for peak relaxation.", buttonIcon: Coffee },
-        { title: "Seamless Ordering", description: "Order via app and pick up without any wait.", buttonIcon: Smartphone },
-        { title: "Precision Roasting", description: "AI-monitored heat curves for consistent flavor profiles.", buttonIcon: Flame },
-      ]}
-      title="Why The Dark Cafe?"
-      description="Smarter coffee, faster service, and a truly comfortable atmosphere."
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureCardTwentySix
+              textboxLayout="split"
+              useInvertedBackground={false}
+              features={[
+                { title: "AI-Crafted Profiles", description: "Personalized blends that adapt to your taste palette.", buttonIcon: Zap },
+                { title: "Smart Atmosphere", description: "Intelligent lighting and sound adjustments for peak relaxation.", buttonIcon: Coffee },
+                { title: "Seamless Ordering", description: "Order via app and pick up without any wait.", buttonIcon: Smartphone },
+                { title: "Precision Roasting", description: "AI-monitored heat curves for consistent flavor profiles.", buttonIcon: Flame },
+              ]}
+              title="Why The Dark Cafe?"
+              description="Smarter coffee, faster service, and a truly comfortable atmosphere."
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        { id: "1", name: "Never Settle", role: "Guest", testimonial: "The service is also good and they'll hear your requests and are quite friendly." },
-        { id: "2", name: "Jakkala Kiran", role: "Visitor", testimonial: "Nice atmosphere for eating." },
-        { id: "3", name: "SREENADH KUNCHAM", role: "Regular", testimonial: "Coffee tea food all verities all available here" },
-        { id: "4", name: "Anonymous", role: "Visitor", testimonial: "A truly modern experience in the heart of Hyderabad." },
-        { id: "5", name: "Rahul P.", role: "Tech Professional", testimonial: "The AI recommendations are spot on. It's like my own personal barista." },
-      ]}
-      title="Voices of the Cafe"
-      description="What our customers are saying about the AI-enhanced experience."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardOne
+              animationType="slide-up"
+              textboxLayout="split"
+              gridVariant="bento-grid"
+              useInvertedBackground={true}
+              testimonials={[
+                { id: "1", name: "Never Settle", role: "Guest", company: "The Dark Cafe", rating: 5, imageAlt: "The service is also good and they'll hear your requests and are quite friendly." },
+                { id: "2", name: "Jakkala Kiran", role: "Visitor", company: "The Dark Cafe", rating: 4, imageAlt: "Nice atmosphere for eating." },
+                { id: "3", name: "SREENADH KUNCHAM", role: "Regular", company: "The Dark Cafe", rating: 5, imageAlt: "Coffee tea food all verities all available here" },
+                { id: "4", name: "Rahul P.", role: "Tech Professional", company: "The Dark Cafe", rating: 5, imageAlt: "The AI recommendations are spot on. It's like my own personal barista." },
+              ]}
+              title="Voices of the Cafe"
+              description="What our customers are saying about the AI-enhanced experience."
+            />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactFaq
-      animationType="slide-up"
-      useInvertedBackground={false}
-      faqs={[
-        { id: "f1", title: "Where are you located?", content: "Kuntloor Rd, Kolan Shiva Reddy Nagar, Hayathnagar_Khalsa, Hyderabad, Telangana 501505." },
-        { id: "f2", title: "What are your hours?", content: "We are open daily and close at 11:00 PM." },
-        { id: "f3", title: "What is the average price?", content: "Our menu ranges from ₹1 to ₹200 per person." },
-        { id: "f4", title: "Do you offer parking?", content: "Yes, we have ample parking space available for all visitors." },
-      ]}
-      ctaTitle="Visit Us Today"
-      ctaDescription="Join us at The Dark Cafe for an experience that blends intelligence with the finest ingredients."
-      ctaButton={{ text: "Get Directions", href: "#" }}
-      ctaIcon={MapPin}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactFaq
+              animationType="slide-up"
+              useInvertedBackground={false}
+              faqs={[
+                { id: "f1", title: "Where are you located?", content: "Kuntloor Rd, Kolan Shiva Reddy Nagar, Hayathnagar_Khalsa, Hyderabad, Telangana 501505." },
+                { id: "f2", title: "What are your hours?", content: "We are open daily and close at 11:00 PM." },
+                { id: "f3", title: "What is the average price?", content: "Our menu ranges from ₹1 to ₹200 per person." },
+                { id: "f4", title: "Do you offer parking?", content: "Yes, we have ample parking space available for all visitors." },
+              ]}
+              ctaTitle="Visit Us Today"
+              ctaDescription="Join us at The Dark Cafe for an experience that blends intelligence with the finest ingredients."
+              ctaButton={{ text: "Get Directions", href: "#" }}
+              ctaIcon={MapPin}
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            { label: "Home", href: "/" },
-            { label: "Contact", href: "#contact" },
-          ],
-        },
-      ]}
-      logoText="The Dark Cafe"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              columns={[
+                { items: [{ label: "Home", href: "#hero" }, { label: "Contact", href: "#contact" }] },
+                { items: [{ label: "About", href: "#about" }, { label: "Reviews", href: "#testimonials" }] },
+              ]}
+              logoText="The Dark Cafe"
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}