Files
fb1d6f5c-b7cf-4e56-b032-d53…/src/app/page.tsx
2026-04-16 17:37:51 +00:00

247 lines
11 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, Coffee, Instagram, Leaf, Sun, Twitter, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "About", id: "about"},
{
name: "Shop", id: "shop"},
{
name: "Journal", id: "blog"},
{
name: "Contact", id: "contact"},
]}
brandName="THE COFFEE GANG"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "gradient-bars"}}
title="Brewed for the Real Ones."
description="Experience premium coffee sourced with passion and crafted for community. THE COFFEE GANG is more than a brand; it's a movement for those who truly appreciate the art of the perfect cup."
buttons={[
{
text: "Shop Now", href: "#shop"},
{
text: "Join the Gang", href: "#contact"},
]}
imageSrc="http://img.b2bpic.net/free-photo/coffee-beans_1388-619.jpg"
imageAlt="Premium artisan coffee culture"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/roasted-coffee-beans-table-closeup_250435-1137.jpg", alt: "Member 1"},
{
src: "http://img.b2bpic.net/free-photo/closeup-view-cookies-with-coffee-beans_185193-165605.jpg", alt: "Member 2"},
{
src: "http://img.b2bpic.net/free-photo/roasted-coffee-beans-background_23-2148254975.jpg", alt: "Member 3"},
{
src: "http://img.b2bpic.net/free-photo/close-up-coffee-beans-jar_23-2147775882.jpg", alt: "Member 4"},
{
src: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-indoor_344912-743.jpg", alt: "Member 5"},
]}
marqueeItems={[
{
type: "text-icon", text: "Small-batch roasted", icon: Coffee,
},
{
type: "text-icon", text: "Ethically sourced", icon: Leaf,
},
{
type: "text-icon", text: "Community driven", icon: Users,
},
{
type: "text-icon", text: "Premium quality", icon: Award,
},
{
type: "text-icon", text: "Fresh daily", icon: Sun,
},
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="Our Story"
title="Passion in Every Pour"
description="Born from a love for authenticity and community, THE COFFEE GANG bridges the gap between expert roasting and daily lifestyle."
subdescription="We believe coffee is a catalyst for conversation, creativity, and connection."
icon={Coffee}
imageSrc="http://img.b2bpic.net/free-photo/young-girl-works-cafe-bar_1321-4330.jpg"
imageAlt="Our coffee brand mission"
mediaAnimation="blur-reveal"
/>
</div>
<div id="shop" data-section="shop">
<ProductCardOne
animationType="slide-up"
textboxLayout="split-description"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1", name: "Classic Espresso", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-barista-checks-raw-green-coffee-beans-from-white-plastic-basket-sitting-cotton-bags-warehouse_346278-885.jpg"},
{
id: "p2", name: "Morning Roast", price: "$16", imageSrc: "http://img.b2bpic.net/free-photo/black-coffee-bag-mockup_187299-47334.jpg"},
{
id: "p3", name: "Caramel Drizzle", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg"},
{
id: "p4", name: "Midnight Blend", price: "$19", imageSrc: "http://img.b2bpic.net/free-vector/simple-luke-s-coffee-shop-instagram-story_23-2149452340.jpg"},
{
id: "p5", name: "Origin Pack", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/man-pouring-coffee-him-his-girlfriend_23-2149369728.jpg"},
{
id: "p6", name: "Gang Merch Bag", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/close-up-couple-holding-cup-coffee_23-2147918181.jpg"},
]}
title="Fresh Drops"
description="Small-batch roasts delivered straight to your door."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={true}
title="The Gang's Promise"
description="Why we are different."
accordionItems={[
{
id: "a1", title: "Sustainable Sourcing", content: "We partner directly with farmers to ensure ethical and sustainable practices."},
{
id: "a2", title: "Artisan Roasting", content: "Roasted in small batches to preserve flavor profile and intensity."},
{
id: "a3", title: "Community Focus", content: "A portion of every sale goes back to local coffee communities."},
]}
imageSrc="http://img.b2bpic.net/free-photo/professional-baker-pours-grained-nuts-mold-filled-with-melted-chocolate-mass-preparation-tasty-cake-from-organic-chocolate-artisan-confectionery-sale_346278-668.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardTwo
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Coffee Journal"
description="Brewing tips and lifestyle stories."
blogs={[
{
id: "b1", title: "Mastering the Pour-Over", excerpt: "Learn how to get the perfect balance.", imageSrc: "http://img.b2bpic.net/free-photo/man-barista-working-counter_23-2148326725.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-female-drinking-coffee_1153-5415.jpg", date: "Oct 12, 2024", category: "Brewing"},
{
id: "b2", title: "Morning Routine Tips", excerpt: "Start your day the Gang way.", imageSrc: "http://img.b2bpic.net/free-photo/cloths-made-with-different-natural-pigments-composition_23-2148734252.jpg", authorName: "John Smith", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-smiling-asian-woman-apron-barista-giving-you-cup-coffee-working-cafe-serving-dr_1258-138287.jpg", date: "Oct 05, 2024", category: "Lifestyle"},
{
id: "b3", title: "Choosing Your Beans", excerpt: "Light vs dark: how to decide.", imageSrc: "http://img.b2bpic.net/free-photo/male-hand-holding-glass-jar-aromatic-coffee-beans-marble-background_114579-65633.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/good-day-only-with-good-coffee_329181-2927.jpg", date: "Sep 28, 2024", category: "Guides"},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1", icon: Users,
title: "Active Gang Members", value: "15,000+"},
{
id: "m2", icon: Coffee,
title: "Cups Brewed", value: "1.2M"},
{
id: "m3", icon: Award,
title: "Farmers Supported", value: "240"},
]}
title="Impact In Numbers"
description="Real results, one cup at a time."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="The best coffee I've ever had. Truly makes my mornings better and feels good to support an ethical brand."
rating={5}
author="Sarah Miller"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/cheerful-girl-offering-coffee_1262-16887.jpg", alt: "Customer 1"},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-dreamy-smiling-young-woman-drinks-coffee-looks-thoughtful-stands-kitchen_1258-198166.jpg", alt: "Customer 2"},
{
src: "http://img.b2bpic.net/free-photo/portrait-stylish-modern-woman-sitting-outdoor-cafe-smiling-drinking-coffee-from_1258-206064.jpg", alt: "Customer 3"},
{
src: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-mobile-phone_1157-32291.jpg", alt: "Customer 4"},
{
src: "http://img.b2bpic.net/free-photo/portrait-asian-woman-smiling-relax-coffee-shop-cafe_1150-12189.jpg", alt: "Customer 5"},
]}
ratingAnimation="slide-up"
avatarsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Join the Gang"
description="Sign up for updates, news, and exclusive drops."
inputs={[
{
name: "name", type: "text", placeholder: "Name"},
{
name: "email", type: "email", placeholder: "Email Address"},
]}
imageSrc="http://img.b2bpic.net/free-photo/modern-restaurant_1127-2154.jpg"
buttonText="Join the Community"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="THE COFFEE GANG"
copyrightText="© 2025 THE COFFEE GANG. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "#", ariaLabel: "Instagram"},
{
icon: Twitter,
href: "#", ariaLabel: "Twitter"},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}