7473f2ce-641e-4883-b2da-35cbfdb9774e/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Coffee, ShieldCheck, Leaf, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="medium"
        background="floatingGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Products", id: "products" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Roast & Bloom"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{ variant: "gradient-bars" }}
      logoText="Roast & Bloom"
      description="Artisanal coffee, masterfully roasted for the discerning palate. Experience the essence of ethical, single-origin beans in every cup."
      buttons={[{ text: "Shop Now", href: "#products" }, { text: "Our Story", href: "#about" }]}
      imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-with-blurred-effect_23-2148164705.jpg"
      imageAlt="Artisanal coffee experience"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      title="From Origin to Cup"
      description="We partner directly with farmers to bring you the highest quality beans while ensuring fair wages and sustainable agricultural practices."
      metrics={[{ value: "100+", title: "Farm Partners" }, { value: "50+", title: "Coffee Origins" }, { value: "20K+", title: "Cups Served" }]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-pile-coffee-beans-coffee-shop_23-2149458066.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySix
      title="The Roast & Bloom Difference"
      description="Elevate your daily ritual with features designed for coffee enthusiasts."
      useInvertedBackground={true}
      features={[
        { title: "Ethical Sourcing", description: "100% fair trade and direct trade partnerships.", buttonIcon: Leaf },
        { title: "Micro-Lot Roasting", description: "Small batches to ensure peak flavor consistency.", buttonIcon: Coffee },
        { title: "Sustainable Packaging", description: "Fully compostable bags for a greener earth.", buttonIcon: ShieldCheck },
        { title: "Mastery in Brew", description: "Precision roasted for maximum flavor profile.", buttonIcon: Star }
      ]}
      textboxLayout="default"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      title="Signature Roasts"
      description="Explore our curated selection of artisanal blends and single-origin specialties."
      gridVariant="bento-grid"
      animationType="blur-reveal"
      products={[
        { id: "p1", name: "Morning Bloom Blend", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/small-roasted-linen-cafe-italian_1172-347.jpg" },
        { id: "p2", name: "Midnight Roast", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-brown-leaves_116380-82.jpg" },
        { id: "p3", name: "Ethiopian Heirloom", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/big-hermetic-metallic-package-filled-with-freshly-baked-roasted-coffee_346278-412.jpg" },
        { id: "p4", name: "Colombian Supremo", price: "$19", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-container-full-coffee-beans-wooden-surface_181624-58235.jpg" }
      ]}
      textboxLayout="default"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      title="Coffee Subscriptions"
      description="Never run out of your favorite beans again."
      useInvertedBackground={true}
      animationType="depth-3d"
      plans={[
        { id: "b1", badge: "Essential", price: "$25/mo", subtitle: "Perfect for one person", features: ["1 Bag Monthly", "Free Shipping"] },
        { id: "b2", badge: "Enthusiast", price: "$45/mo", subtitle: "For the daily drinker", features: ["2 Bags Monthly", "Priority Roast"] },
        { id: "b3", badge: "Connoisseur", price: "$80/mo", subtitle: "For the true coffee lover", features: ["4 Bags Monthly", "Rare Bean Access"] }
      ]}
      textboxLayout="default"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      title="Community Voices"
      description="What our coffee lovers are saying about Roast & Bloom."
      showRating={true}
      animationType="depth-3d"
      textboxLayout="default"
      testimonials={[
        { id: "t1", name: "Sarah J.", handle: "@sarahj", testimonial: "The coffee is amazing!", rating: 5 },
        { id: "t2", name: "Marcus L.", handle: "@marcusl", testimonial: "Great quality beans.", rating: 5 }
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      sideTitle="Frequently Asked"
      sideDescription="Have questions? We have answers."
      useInvertedBackground={true}
      faqsAnimation="slide-up"
      faqs={[
        { id: "faq1", title: "How do you source beans?", content: "We work directly with farms globally." },
        { id: "faq2", title: "Is your shipping fast?", content: "Orders are shipped within 24 hours." },
        { id: "faq3", title: "Can I cancel subscription?", content: "Yes, anytime online." }
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      tag="Contact"
      title="Get In Touch"
      description="Questions? Suggestions? We'd love to hear from you."
      imageSrc="http://img.b2bpic.net/free-photo/breakfast-table-with-coffee-cake-milk_23-2151982929.jpg"
      mediaPosition="right"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Roast & Bloom"
      copyrightText="© 2025 | Roast & Bloom"
      socialLinks={[]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}