Merge version_3 into main #3
263
src/app/page.tsx
263
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 FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { lazy, Suspense } from "react";
|
||||
|
||||
const ContactSplitForm = lazy(() => import('@/components/sections/contact/ContactSplitForm'));
|
||||
const FaqBase = lazy(() => import('@/components/sections/faq/FaqBase'));
|
||||
const FeatureCardMedia = lazy(() => import('@/components/sections/feature/FeatureCardMedia'));
|
||||
const FooterLogoReveal = lazy(() => import('@/components/sections/footer/FooterLogoReveal'));
|
||||
const HeroBillboardScroll = lazy(() => import('@/components/sections/hero/HeroBillboardScroll'));
|
||||
const MetricCardFourteen = lazy(() => import('@/components/sections/metrics/MetricCardFourteen'));
|
||||
const NavbarStyleCentered = lazy(() => import('@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'));
|
||||
const ProductCardFour = lazy(() => import('@/components/sections/product/ProductCardFour'));
|
||||
const TestimonialCardSix = lazy(() => import('@/components/sections/testimonial/TestimonialCardSix'));
|
||||
const TextSplitAbout = lazy(() => import('@/components/sections/about/TextSplitAbout'));
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,134 +30,137 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Experience", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Anthology Coffee"
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={<div className="h-20" />}>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Experience", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Anthology Coffee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Craft roasted coffee, thoughtfully served daily"
|
||||
description="Explore our house-roasted beans and industrial minimalist space. From espresso to cold brew, experience specialty coffee crafted with genuine care."
|
||||
buttons={[{ text: "Visit us or order online", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-cafe-interior-design_23-2151945689.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Craft roasted coffee, thoughtfully served daily"
|
||||
description="Explore our house-roasted beans and industrial minimalist space. From espresso to cold brew, experience specialty coffee crafted with genuine care."
|
||||
buttons={[{ text: "Visit us or order online", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-cafe-interior-design_23-2151945689.jpg?w=1200&q=80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Craft in Detroit"
|
||||
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.", "Our space reflects this honesty—an industrial, minimalist environment designed to celebrate the purity of the roast and the richness of the community."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Craft in Detroit"
|
||||
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.",
|
||||
"Our space reflects this honesty—an industrial, minimalist environment designed to celebrate the purity of the roast and the richness of the community."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
]}
|
||||
title="The Anthology Experience"
|
||||
description="More than just a caffeine fix—discover the precision and intention behind every cup we serve."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ 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?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?w=600&q=75" },
|
||||
{ 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?w=600&q=75" },
|
||||
]}
|
||||
title="The Anthology Experience"
|
||||
description="More than just a caffeine fix—discover the precision and intention behind every cup we serve."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ 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", variant: "Seasonal", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-cup-coffee-cafe_1150-4324.jpg" },
|
||||
{ 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: "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" },
|
||||
{ id: "p5", name: "Cappuccino", price: "$4.50", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/2-latte-wooden-table_501050-1095.jpg" },
|
||||
{ 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="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Latte", price: "$5.00", variant: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/dark-coffee-mug-viewed-from_1232-1151.jpg?w=400&q=70" },
|
||||
{ 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?w=400&q=70" },
|
||||
{ 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?w=400&q=70" },
|
||||
{ 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?w=400&q=70" },
|
||||
{ id: "p5", name: "Cappuccino", price: "$4.50", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/2-latte-wooden-table_501050-1095.jpg?w=400&q=70" },
|
||||
{ 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?w=400&q=70" },
|
||||
]}
|
||||
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">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Impact & Growth"
|
||||
tag="Our Story"
|
||||
metrics={[
|
||||
{ id: "m1", value: "4.6", description: "Avg Star Rating (450+ Reviews)" },
|
||||
{ id: "m2", value: "100%", description: "Direct Sourcing Transparency" },
|
||||
{ id: "m3", value: "12k+", description: "Cups Poured Monthly" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Impact & Growth"
|
||||
tag="Our Story"
|
||||
metrics={[
|
||||
{ id: "m1", value: "4.6", description: "Avg Star Rating (450+ Reviews)" },
|
||||
{ id: "m2", value: "100%", description: "Direct Sourcing Transparency" },
|
||||
{ id: "m3", value: "12k+", description: "Cups Poured Monthly" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="What Our Neighbors Say"
|
||||
description="Join our community of coffee lovers who value craft, quality, and atmosphere."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Yuji Tk", handle: "@yuji_tk", testimonial: "My favorite roaster in the entire Detroit area.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-smiling-woman-holding-cup-coffee-posing-kitchen-enjoying_1258-198203.jpg" },
|
||||
{ id: "2", name: "Rosanna Ramos", handle: "@rosanna", testimonial: "The space felt cozy and toasty, with an open-air vibe.", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-using-laptop-cafe_23-2147785380.jpg" },
|
||||
{ id: "3", name: "Luke Salik", handle: "@lukes", testimonial: "Consistently came up as one of the best.", imageSrc: "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="What Our Neighbors Say"
|
||||
description="Join our community of coffee lovers who value craft, quality, and atmosphere."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Yuji Tk", handle: "@yuji_tk", testimonial: "My favorite roaster in the entire Detroit area.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-smiling-woman-holding-cup-coffee-posing-kitchen-enjoying_1258-198203.jpg?w=100&q=60" },
|
||||
{ id: "2", name: "Rosanna Ramos", handle: "@rosanna", testimonial: "The space felt cozy and toasty, with an open-air vibe.", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-using-laptop-cafe_23-2147785380.jpg?w=100&q=60" },
|
||||
{ id: "3", name: "Luke Salik", handle: "@lukes", testimonial: "Consistently came up as one of the best.", imageSrc: "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg?w=100&q=60" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer delivery?", content: "Yes, we offer local delivery through our website and partnerships." },
|
||||
{ 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, all of our roasted coffee beans are gluten-free and allergen-friendly." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to how we roast, serve, and welcome our community."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer delivery?", content: "Yes, we offer local delivery through our website and partnerships." },
|
||||
{ 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, all of our roasted coffee beans are gluten-free and allergen-friendly." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to how we roast, serve, and welcome our community."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Visit Us in Detroit"
|
||||
description="Stop by for a pour-over or order online for pickup. Visit us: https://maps.google.com/?q=1948+Division+St+Detroit"
|
||||
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { 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="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Visit Us in Detroit"
|
||||
description="Stop by for a pour-over or order online for pickup. Visit us: https://maps.google.com/?q=1948+Division+St+Detroit"
|
||||
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { 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?w=800&q=80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Anthology Coffee"
|
||||
leftLink={{ text: "Privacy", href: "#" }}
|
||||
rightLink={{ text: "Terms", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Anthology Coffee"
|
||||
leftLink={{ text: "Privacy", href: "#" }}
|
||||
rightLink={{ text: "Terms", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</Suspense>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user