247 lines
11 KiB
TypeScript
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>
|
|
);
|
|
} |