Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,16 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import { lazy, Suspense } from "react";
-import FaqBase from '@/components/sections/faq/FaqBase';
+
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+const ContactCTA = lazy(() => import('@/components/sections/contact/ContactCTA'));
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+const FaqSplitText = lazy(() => import('@/components/sections/faq/FaqSplitText'));
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+const FeatureCardSeven = lazy(() => import('@/components/sections/feature/FeatureCardSeven'));
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+const FooterCard = lazy(() => import('@/components/sections/footer/FooterCard'));
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+const HeroCentered = lazy(() => import('@/components/sections/hero/HeroCentered'));
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+const MetricCardFourteen = lazy(() => import('@/components/sections/metrics/MetricCardFourteen'));
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+const NavbarStyleFullscreen = lazy(() => import('@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'));
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+const ProductCardOne = lazy(() => import('@/components/sections/product/ProductCardOne'));
+const TestimonialCardThirteen = lazy(() => import('@/components/sections/testimonial/TestimonialCardThirteen'));
+const SplitAbout = lazy(() => import('@/components/sections/about/SplitAbout'));
 
 export default function LandingPage() {
   return (
@@ -22,200 +24,139 @@ export default function LandingPage() {
         contentWidth="mediumSmall"
         sizing="largeSmallSizeLargeTitles"
         background="noise"
-        cardStyle="solid"
+        cardStyle="glass-depth"
         primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <Suspense fallback={<div className="h-screen w-full flex items-center justify-center" />}>
-      <NavbarStyleCentered
+          <div id="nav" data-section="nav">
-      navItems={[
+            <NavbarStyleFullscreen
-        {
+              navItems={[
-          name: "About",          id: "about"},
+                { name: "About", id: "about" },
-        {
+                { name: "Menu", id: "products" },
-          name: "Menu",          id: "products"},
+                { name: "Experience", id: "features" },
-        {
+                { name: "Contact", id: "contact" },
-          name: "Experience",          id: "features"},
+              ]}
-        {
+              brandName="Anthology Coffee"
-          name: "Contact",          id: "contact"},
+            />
-      ]}
+          </div>
-      brandName="Anthology Coffee"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+          <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+            <HeroCentered
-      background={{
+              title="Craft roasted coffee, thoughtfully served daily"
-        variant: "gradient-bars"}}
+              description="Explore our house-roasted beans and industrial minimalist space. From espresso to cold brew, experience specialty coffee crafted with genuine care."
-      title="Craft roasted coffee, thoughtfully served daily"
+              background={{ variant: "gradient-bars" }}
-      description="Explore our house-roasted beans and industrial minimalist space. From espresso to cold brew, experience specialty coffee crafted with genuine care."
+              avatars={[]}
-      buttons={[
+              buttons={[{ text: "Visit us or order online", href: "#contact" }]}
-        {
+            />
-          text: "Visit us or order online",          href: "#contact"},
+          </div>
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-cafe-interior-design_23-2151945689.jpg"
-    />
-  </div>
 
-  <div id="about" data-section="about">
+          <div id="about" data-section="about">
-      <TextSplitAbout
+            <SplitAbout
-      useInvertedBackground={true}
+              useInvertedBackground={true}
-      title="Our Craft in Detroit"
+              title="Our Craft in Detroit"
-      description={[
+              description="Anthology Coffee was born in Detroit, built on a foundation of transparency and craftsmanship. We source exceptional beans and roast them with an uncompromising commitment to quality."
-        "Anthology Coffee was born in Detroit, built on a foundation of transparency and craftsmanship. We source exceptional beans and roast them with an uncompromising commitment to quality.",        "Our space reflects this honesty—an industrial, minimalist environment designed to celebrate the purity of the roast and the richness of the community."]}
+              textboxLayout="split"
-    />
+              bulletPoints={[
-  </div>
+                { title: "Transparency", description: "Sourcing directly from farmers." },
+                { title: "Craftsmanship", description: "Roasting with uncompromising quality." }
+              ]}
+            />
+          </div>
 
-  <div id="features" data-section="features">
+          <div id="features" data-section="features">
-      <FeatureCardMedia
+            <FeatureCardSeven
-      animationType="slide-up"
+              animationType="slide-up"
-      textboxLayout="split"
+              textboxLayout="split"
-      useInvertedBackground={false}
+              useInvertedBackground={false}
-      features={[
+              features={[
-        {
+                { title: "Precision Roasting", description: "Every batch is roasted to highlight origin.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-drip-coffee-desk-table_197531-32459.jpg?w=600&q=75" },
-          id: "1",          title: "Precision Roasting",          description: "Every batch is roasted to highlight the unique origin characteristics of the bean.",          tag: "Craft",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-drip-coffee-desk-table_197531-32459.jpg"},
+                { title: "Artisan Brewing", description: "We honor the preparation process.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-tattooed-caucasian-black-indian-men-drinking-craft-beer-microbrewery_613910-13584.jpg?w=600&q=75" },
-        {
+                { title: "Freshness", description: "Small batches for fresh coffee.", imageSrc: "http://img.b2bpic.net/free-photo/small-roasted-linen-cafe-italian_1172-347.jpg?w=600&q=75" },
-          id: "2",          title: "Artisan Brewing",          description: "From precise pour-overs to perfect shots of espresso, we honor the preparation process.",          tag: "Brew",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-tattooed-caucasian-black-indian-men-drinking-craft-beer-microbrewery_613910-13584.jpg"},
+              ]}
-        {
+              title="The Anthology Experience"
-          id: "3",          title: "Freshness Guaranteed",          description: "We roast in small batches, ensuring you receive the freshest coffee possible every visit.",          tag: "Fresh",          imageSrc: "http://img.b2bpic.net/free-photo/small-roasted-linen-cafe-italian_1172-347.jpg"},
+              description="More than just a caffeine fix—discover the intention behind every cup."
-      ]}
+            />
-      title="The Anthology Experience"
+          </div>
-      description="More than just a caffeine fix—discover the precision and intention behind every cup we serve."
-    />
-  </div>
 
-  <div id="products" data-section="products">
+          <div id="products" data-section="products">
-      <ProductCardFour
+            <ProductCardOne
-      animationType="slide-up"
+              animationType="slide-up"
-      textboxLayout="split"
+              textboxLayout="split"
-      gridVariant="four-items-2x2-equal-grid"
+              gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={true}
+              useInvertedBackground={true}
-      products={[
+              products={[
-        {
+                { id: "p1", name: "Latte", price: "$5.00", imageSrc: "http://img.b2bpic.net/free-photo/dark-coffee-mug-viewed-from_1232-1151.jpg?w=400&q=70", variant: "default" },
-          id: "p1",          name: "Latte",          price: "$5.00",          variant: "Popular",          imageSrc: "http://img.b2bpic.net/free-photo/dark-coffee-mug-viewed-from_1232-1151.jpg"},
+                { id: "p2", name: "Iced Coffee", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-cup-coffee-cafe_1150-4324.jpg?w=400&q=70", variant: "default" },
-        {
+                { id: "p3", name: "Cold Brew", price: "$4.75", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-delicious-iced-coffee_52683-91638.jpg?w=400&q=70", variant: "default" },
-          id: "p2",          name: "Iced Coffee",          price: "$4.50",          variant: "Seasonal",          imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-cup-coffee-cafe_1150-4324.jpg"},
+                { id: "p4", name: "Cortado", price: "$4.00", imageSrc: "http://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187528.jpg?w=400&q=70", variant: "default" },
-        {
+                { id: "p5", name: "Cappuccino", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/2-latte-wooden-table_501050-1095.jpg?w=400&q=70", variant: "default" },
-          id: "p3",          name: "Cold Brew",          price: "$4.75",          variant: "Smooth",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-delicious-iced-coffee_52683-91638.jpg"},
+                { id: "p6", name: "Whole Bean Roast", price: "$18.00", imageSrc: "http://img.b2bpic.net/free-photo/side-view-brown-coffee-beans-sack-rustic-table_141793-6964.jpg?w=400&q=70", variant: "default" },
-        {
+              ]}
-          id: "p4",          name: "Cortado",          price: "$4.00",          variant: "Balanced",          imageSrc: "http://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187528.jpg"},
+              title="The Coffee Menu"
-        {
+              description="Hand-crafted beverages using our own freshly roasted beans."
-          id: "p5",          name: "Cappuccino",          price: "$4.50",          variant: "Classic",          imageSrc: "http://img.b2bpic.net/free-photo/2-latte-wooden-table_501050-1095.jpg"},
+            />
-        {
+          </div>
-          id: "p6",          name: "Whole Bean Roast",          price: "$18.00",          variant: "Retail",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-brown-coffee-beans-sack-rustic-table_141793-6964.jpg"},
-      ]}
-      title="The Coffee Menu"
-      description="Hand-crafted beverages using our own freshly roasted beans. Taste the difference quality makes."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+          <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
+            <MetricCardFourteen
-      useInvertedBackground={false}
+              useInvertedBackground={false}
-      title="Impact & Growth"
+              title="Impact & Growth"
-      tag="Our Story"
+              tag="Our Story"
-      metrics={[
+              metrics={[
-        {
+                { id: "m1", value: "4.6", description: "Avg Star Rating" },
-          id: "m1",          value: "4.6",          description: "Avg Star Rating (450+ Reviews)"},
+                { id: "m2", value: "100%", description: "Direct Sourcing" },
-        {
+                { id: "m3", value: "12k+", description: "Cups Poured" },
-          id: "m2",          value: "100%",          description: "Direct Sourcing Transparency"},
+              ]}
-        {
+            />
-          id: "m3",          value: "12k+",          description: "Cups Poured Monthly"},
+          </div>
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+          <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+            <TestimonialCardThirteen
-      textboxLayout="split"
+              animationType="slide-up"
-      useInvertedBackground={true}
+              textboxLayout="split"
-      testimonials={[
+              useInvertedBackground={true}
-        {
+              showRating={true}
-          id: "1",          title: "Exceptional",          quote: "My favorite roaster in the entire Detroit area.",          name: "Yuji Tk",          role: "Local Guide",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-smiling-woman-holding-cup-coffee-posing-kitchen-enjoying_1258-198203.jpg"},
+              title="Testimonials"
-        {
+              description="What our coffee lovers say about us."
-          id: "2",          title: "Cozy Vibe",          quote: "The space felt cozy and toasty, with an open-air vibe.",          name: "Rosanna Ramos",          role: "Local Guide",          imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-using-laptop-cafe_23-2147785380.jpg"},
+              testimonials={[
-        {
+                { id: "t1", name: "Yuji Tk", handle: "@yujitk", testimonial: "My favorite roaster in the entire Detroit area.", rating: 5 }
-          id: "3",          title: "Third-wave perfection",          quote: "Consistently came up as one of the best.",          name: "Luke Salik",          role: "Local Guide",          imageSrc: "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg"},
+              ]}
-        {
+            />
-          id: "4",          title: "Phenomenal",          quote: "Great coffee with even better service and atmosphere.",          name: "Coffee Lover",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-coffee-break_23-2148756294.jpg"},
+          </div>
-        {
-          id: "5",          title: "Cool place",          quote: "Very cool place with a friendly staff.",          name: "Daily Drinker",          role: "Customer",          imageSrc: "http://img.b2bpic.net/free-photo/happy-mid-adult-barista-cleaning-drinking-glass-after-working-hours-pub_637285-2964.jpg"},
-      ]}
-      title="What Our Neighbors Say"
-      description="Join our community of coffee lovers who value craft, quality, and atmosphere."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+          <div id="faq" data-section="faq">
-      <FaqBase
+            <FaqSplitText
-      textboxLayout="split"
+              faqsAnimation="slide-up"
-      useInvertedBackground={false}
+              useInvertedBackground={false}
-      faqs={[
+              sideTitle="Common Questions"
-        {
+              faqs={[
-          id: "f1",          title: "Do you offer delivery?",          content: "Yes, we offer local delivery through our website and partnerships."},
+                { id: "f1", title: "Do you offer delivery?", content: "Yes, we offer local delivery." },
-        {
+                { id: "f2", title: "Is your space pet-friendly?", content: "We welcome well-behaved pets." },
-          id: "f2",          title: "Is your space pet-friendly?",          content: "We welcome well-behaved pets in our patio area during open hours."},
+                { id: "f3", title: "Are your beans gluten-free?", content: "Yes, our beans are gluten-free." },
-        {
+              ]}
-          id: "f3",          title: "Are your beans gluten-free?",          content: "Yes, all of our roasted coffee beans are gluten-free and allergen-friendly."},
+            />
-      ]}
+          </div>
-      title="Common Questions"
-      description="Answers to how we roast, serve, and welcome our community."
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+          <div id="contact" data-section="contact">
-      <ContactSplitForm
+            <ContactCTA
-      useInvertedBackground={true}
+              useInvertedBackground={true}
-      title="Visit Us in Detroit"
+              title="Visit Us in Detroit"
-      description="Stop by for a pour-over or order online for pickup. We're open until 5pm daily at 1948 Division St."
+              description="Stop by for a pour-over or order online."
-      inputs={[
+              tag="Visit"
-        {
+              buttons={[{ text: "Get Directions" }]}
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
+              background={{ variant: "plain" }}
-        },
+            />
-        {
+          </div>
-          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",        placeholder: "How can we help?"}}
-      imageSrc="http://img.b2bpic.net/free-photo/male-barista-holing-professional-coffee-machine_23-2148824383.jpg"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+          <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+            <FooterCard
-      columns={[
+              logoText="Anthology Coffee"
-        {
+            />
-          items: [
+          </div>
-            {
+        </Suspense>
-              label: "About",              href: "#about"},
-            {
-              label: "Menu",              href: "#products"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Location",              href: "https://maps.google.com"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",              href: "https://instagram.com"},
-            {
-              label: "Twitter",              href: "https://twitter.com"},
-          ],
-        },
-      ]}
-      logoText="Anthology Coffee"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #1a120d;
-  --card: #dad6cd;
+  --card: #2b1d14;
-  --foreground: #2a2928;
+  --foreground: #f5e6d3;
-  --primary-cta: #2a2928;
+  --primary-cta: #c8a97e;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #1a120d;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #c8a97e;
-  --background-accent: #c6b180;
+  --background-accent: #2b1d14;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);