Merge version_1 into main #2
442
src/app/page.tsx
442
src/app/page.tsx
@@ -29,330 +29,142 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Our Coffee",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="American Brew"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Our Coffee", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="American Brew"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Authentic American Brew"
|
||||
description="Crafting the perfect cup, one bean at a time. Join us for a truly American coffee experience that wakes up the soul."
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mocca-coffee-shop_1339-4903.jpg?_wi=1",
|
||||
imageAlt: "Fresh Brew",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hot-coffee-mug_1323-172.jpg",
|
||||
imageAlt: "Morning Roast",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-beer-with-green-cheese-table_140725-320.jpg",
|
||||
imageAlt: "Artisan Latte",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-coffee-machine-cup_23-2148892895.jpg",
|
||||
imageAlt: "Pour Over",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-cup-front-defocus-woman-looking-away_23-2148209215.jpg",
|
||||
imageAlt: "Double Espresso",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-hot-herbal-tea_23-2148786648.jpg",
|
||||
imageAlt: "Cappuccino",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Authentic American Brew"
|
||||
description="Crafting the perfect cup, one bean at a time. Join us for a truly American coffee experience that wakes up the soul."
|
||||
buttons={[{ text: "Visit Us", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/mocca-coffee-shop_1339-4903.jpg", imageAlt: "Fresh Brew" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hot-coffee-mug_1323-172.jpg", imageAlt: "Morning Roast" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-beer-with-green-cheese-table_140725-320.jpg", imageAlt: "Artisan Latte" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-coffee-machine-cup_23-2148892895.jpg", imageAlt: "Pour Over" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-cup-front-defocus-woman-looking-away_23-2148209215.jpg", imageAlt: "Double Espresso" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/delicious-hot-herbal-tea_23-2148786648.jpg", imageAlt: "Cappuccino" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Our Coffee Journey"
|
||||
metrics={[
|
||||
{
|
||||
icon: Coffee,
|
||||
label: "Coffee Varieties",
|
||||
value: "20+",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
label: "Shops Nationwide",
|
||||
value: "50+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Years Experience",
|
||||
value: "15",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Our Coffee Journey"
|
||||
metrics={[
|
||||
{ icon: Coffee, label: "Coffee Varieties", value: "20+" },
|
||||
{ icon: Building2, label: "Shops Nationwide", value: "50+" },
|
||||
{ icon: Award, label: "Years Experience", value: "15" }
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Precision Roasted",
|
||||
description: "Small-batch roasting for optimal freshness.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Ethically Sourced",
|
||||
description: "Supporting fair practices from farm to cup.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Artisan Blends",
|
||||
description: "Exclusive recipes created by our master baristas.",
|
||||
},
|
||||
]}
|
||||
title="Why Our Brews Shine"
|
||||
description="We take quality to the next level, ensuring every cup delivers the finest American flavors."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ icon: Zap, title: "Precision Roasted", description: "Small-batch roasting for optimal freshness." },
|
||||
{ icon: Shield, title: "Ethically Sourced", description: "Supporting fair practices from farm to cup." },
|
||||
{ icon: Star, title: "Artisan Blends", description: "Exclusive recipes created by our master baristas." }
|
||||
]}
|
||||
title="Why Our Brews Shine"
|
||||
description="We take quality to the next level, ensuring every cup delivers the finest American flavors."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Americano",
|
||||
price: "$4.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-aromatic-coffee-plate_23-2148349623.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "House Espresso",
|
||||
price: "$3.75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hot-latte-with-heart-shape-glass-water-drop-surface_23-2148209239.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Roast Blend Bag",
|
||||
price: "$18.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag-concrete-block-with-palm-leaves_23-2151989736.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Cold Brew",
|
||||
price: "$5.25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag-with-roasted-beans_23-2151965919.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Mocha Latte",
|
||||
price: "$5.75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-coffee-cup-table_23-2151899252.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "French Press Roast",
|
||||
price: "$15.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-hot-coffee_53876-146524.jpg",
|
||||
},
|
||||
]}
|
||||
title="Signature Coffee Selection"
|
||||
description="Explore our favorite roasts and blends crafted for your perfect morning routine."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Americano", price: "$4.50", imageSrc: "http://img.b2bpic.net/free-photo/close-up-aromatic-coffee-plate_23-2148349623.jpg" },
|
||||
{ id: "p2", name: "House Espresso", price: "$3.75", imageSrc: "http://img.b2bpic.net/free-photo/hot-latte-with-heart-shape-glass-water-drop-surface_23-2148209239.jpg" },
|
||||
{ id: "p3", name: "Roast Blend Bag", price: "$18.00", imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag-concrete-block-with-palm-leaves_23-2151989736.jpg" },
|
||||
{ id: "p4", name: "Cold Brew", price: "$5.25", imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag-with-roasted-beans_23-2151965919.jpg" },
|
||||
{ id: "p5", name: "Mocha Latte", price: "$5.75", imageSrc: "http://img.b2bpic.net/free-photo/delicious-coffee-cup-table_23-2151899252.jpg" },
|
||||
{ id: "p6", name: "French Press Roast", price: "$15.50", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-hot-coffee_53876-146524.jpg" }
|
||||
]}
|
||||
title="Signature Coffee Selection"
|
||||
description="Explore our favorite roasts and blends crafted for your perfect morning routine."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Mark R.",
|
||||
date: "Oct 2023",
|
||||
title: "Regular Customer",
|
||||
quote: "The best Americano in the city. Truly consistent.",
|
||||
tag: "Coffee Lover",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-colleagues-chatting-break-time_23-2149308481.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mocca-coffee-shop_1339-4903.jpg?_wi=2",
|
||||
imageAlt: "happy coffee customer smiling",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah J.",
|
||||
date: "Sep 2023",
|
||||
title: "Barista Fan",
|
||||
quote: "Their beans are fresh, and the staff is amazing.",
|
||||
tag: "Loyal Fan",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-shy-pensive-woman-knitted-sweater-enjoying-coffee-looking-street-indoor-photo-romantic-young-woman-yellow-attire-dreaming-about-something-lunch-cafe_197531-1498.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barista-with-coffee-beans_23-2148865559.jpg",
|
||||
imageAlt: "happy coffee customer smiling",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "David W.",
|
||||
date: "Aug 2023",
|
||||
title: "Coffee Critic",
|
||||
quote: "Highly recommend the artisan roast. Exceptional.",
|
||||
tag: "Reviewer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-sitting-cafe-smiling-drinking-coffee_176420-12326.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-male-barista-with-apron-coffee-machine_23-2148824389.jpg",
|
||||
imageAlt: "happy coffee customer smiling",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Emily P.",
|
||||
date: "Jul 2023",
|
||||
title: "Regular Visitor",
|
||||
quote: "Perfect spot to work and enjoy a morning latte.",
|
||||
tag: "Daily Ritual",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-reading-book-drinking-coffee_1303-21574.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-aromatic-coffee-plate_23-2148349623.jpg?_wi=2",
|
||||
imageAlt: "happy coffee customer smiling",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Tom B.",
|
||||
date: "Jun 2023",
|
||||
title: "Casual Cafe Goer",
|
||||
quote: "Delicious options and friendly neighborhood vibe.",
|
||||
tag: "Fan",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/cafe-leisure-lifestyle-concept-portrait-handsome-young-man-sits-chair-with-glass-coffee-drinks-his-beverage-smiling_1258-314462.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/coffee-cup-icon-logo-design_474888-2472.jpg",
|
||||
imageAlt: "happy coffee customer smiling",
|
||||
},
|
||||
]}
|
||||
title="Loved by Coffee Enthusiasts"
|
||||
description="Hear what our loyal community says about their morning ritual."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Mark R.", date: "Oct 2023", title: "Regular Customer", quote: "The best Americano in the city. Truly consistent.", tag: "Coffee Lover", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-colleagues-chatting-break-time_23-2149308481.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mocca-coffee-shop_1339-4903.jpg", imageAlt: "happy coffee customer smiling" },
|
||||
{ id: "t2", name: "Sarah J.", date: "Sep 2023", title: "Barista Fan", quote: "Their beans are fresh, and the staff is amazing.", tag: "Loyal Fan", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-shy-pensive-woman-knitted-sweater-enjoying-coffee-looking-street-indoor-photo-romantic-young-woman-yellow-attire-dreaming-about-something-lunch-cafe_197531-1498.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-barista-with-coffee-beans_23-2148865559.jpg", imageAlt: "happy coffee customer smiling" },
|
||||
{ id: "t3", name: "David W.", date: "Aug 2023", title: "Coffee Critic", quote: "Highly recommend the artisan roast. Exceptional.", tag: "Reviewer", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-sitting-cafe-smiling-drinking-coffee_176420-12326.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-male-barista-with-apron-coffee-machine_23-2148824389.jpg", imageAlt: "happy coffee customer smiling" },
|
||||
{ id: "t4", name: "Emily P.", date: "Jul 2023", title: "Regular Visitor", quote: "Perfect spot to work and enjoy a morning latte.", tag: "Daily Ritual", avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-reading-book-drinking-coffee_1303-21574.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-aromatic-coffee-plate_23-2148349623.jpg", imageAlt: "happy coffee customer smiling" },
|
||||
{ id: "t5", name: "Tom B.", date: "Jun 2023", title: "Casual Cafe Goer", quote: "Delicious options and friendly neighborhood vibe.", tag: "Fan", avatarSrc: "http://img.b2bpic.net/free-photo/cafe-leisure-lifestyle-concept-portrait-handsome-young-man-sits-chair-with-glass-coffee-drinks-his-beverage-smiling_1258-314462.jpg", imageSrc: "http://img.b2bpic.net/free-vector/coffee-cup-icon-logo-design_474888-2472.jpg", imageAlt: "happy coffee customer smiling" }
|
||||
]}
|
||||
title="Loved by Coffee Enthusiasts"
|
||||
description="Hear what our loyal community says about their morning ritual."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Bean & Co",
|
||||
"American Beans",
|
||||
"Roast Master",
|
||||
"Cafe Life",
|
||||
"Brewing Labs",
|
||||
"The Coffee Hub",
|
||||
"Artisan Roast",
|
||||
]}
|
||||
title="Partnered with Local Excellence"
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Bean & Co", "American Beans", "Roast Master", "Cafe Life", "Brewing Labs", "The Coffee Hub", "Artisan Roast"]}
|
||||
title="Partnered with Local Excellence"
|
||||
description="Our network of partners ensures quality at every level."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "What kind of beans do you use?",
|
||||
content: "We exclusively use ethically sourced Arabica beans.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you offer delivery?",
|
||||
content: "Yes, delivery is available through major apps.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I buy beans online?",
|
||||
content: "Yes, our roasts are available via our online shop.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Need help or want to know more about our coffee selection?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "What kind of beans do you use?", content: "We exclusively use ethically sourced Arabica beans." },
|
||||
{ id: "f2", title: "Do you offer delivery?", content: "Yes, delivery is available through major apps." },
|
||||
{ id: "f3", title: "Can I buy beans online?", content: "Yes, our roasts are available via our online shop." }
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Need help or want to know more about our coffee selection?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get in Touch"
|
||||
title="Start Your Morning Right"
|
||||
description="Questions about our blends or locations? Let's talk."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get in Touch"
|
||||
title="Start Your Morning Right"
|
||||
description="Questions about our blends or locations? Let's talk."
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Locations",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="American Brew"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Locations", href: "#" }, { label: "Menu", href: "#products" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
logoText="American Brew"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user