bender/d8d34de9-018a-4bdf-b3da-202a8e70dde2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_3
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1

5 Commits
version_1 ... version_3

Author SHA1 Message Date
bender
ed5508a46f Update src/app/page.tsx 2026-04-24 12:20:39 +00:00
bender
75d58429d7 Merge version_2 into main 
Merge version_2 into main
 2026-04-24 12:15:40 +00:00
bender
cb690afe6f Update src/app/styles/variables.css 2026-04-24 12:15:37 +00:00
bender
8eda7f9ff2 Update src/app/page.tsx 2026-04-24 12:15:37 +00:00
bender
c4b7442f74 Merge version_1 into main 
Merge version_1 into main
 2026-04-24 12:05:27 +00:00
2 changed files with 143 additions and 198 deletions
Expand all files Collapse all files

325
src/app/page.tsx
View File

@@ -2,16 +2,18 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import { lazy, Suspense } from "react";
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia'; const ContactSplitForm = lazy(() => import('@/components/sections/contact/ContactSplitForm'));
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; const FaqBase = lazy(() => import('@/components/sections/faq/FaqBase'));
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'; const FeatureCardMedia = lazy(() => import('@/components/sections/feature/FeatureCardMedia'));
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen'; const FooterLogoReveal = lazy(() => import('@/components/sections/footer/FooterLogoReveal'));
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; const HeroBillboardScroll = lazy(() => import('@/components/sections/hero/HeroBillboardScroll'));
import ProductCardFour from '@/components/sections/product/ProductCardFour'; const MetricCardFourteen = lazy(() => import('@/components/sections/metrics/MetricCardFourteen'));
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen'; const NavbarStyleCentered = lazy(() => import('@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'));
import TextSplitAbout from '@/components/sections/about/TextSplitAbout'; 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() { export default function LandingPage() {
return ( return (
@@ -22,200 +24,143 @@ export default function LandingPage() {
contentWidth="mediumSmall" contentWidth="mediumSmall"
sizing="largeSmallSizeLargeTitles" sizing="largeSmallSizeLargeTitles"
background="noise" background="noise"
cardStyle="solid" cardStyle="glass-depth"
primaryButtonStyle="flat" primaryButtonStyle="flat"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="bold" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <Suspense fallback={<div className="h-20" />}>
<NavbarStyleCentered <div id="nav" data-section="nav">
navItems={[ <NavbarStyleCentered
{ navItems={[
name: "About", id: "about"}, { name: "About", id: "about" },
{ { name: "Menu", id: "products" },
name: "Menu", id: "products"}, { name: "Experience", id: "features" },
{ { name: "Contact", id: "contact" },
name: "Experience", id: "features"}, ]}
{ brandName="Anthology Coffee"
name: "Contact", id: "contact"}, />
]} </div>
brandName="Anthology Coffee"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardScroll <HeroBillboardScroll
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars"}} title="Craft roasted coffee, thoughtfully served daily"
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."
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" }]}
buttons={[ imageSrc="http://img.b2bpic.net/free-photo/modern-cafe-interior-design_23-2151945689.jpg?w=1200&q=80"
{ />
text: "Visit us or order online", href: "#contact"}, </div>
]}
imageSrc="http://img.b2bpic.net/free-photo/modern-cafe-interior-design_23-2151945689.jpg"
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<TextSplitAbout <TextSplitAbout
useInvertedBackground={true} useInvertedBackground={true}
title="Our Craft in Detroit" title="Our Craft in Detroit"
description={[ 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."]} "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>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardMedia <FeatureCardMedia
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[ 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: "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?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" },
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"}, ]}
{ title="The Anthology Experience"
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"}, description="More than just a caffeine fix—discover the precision and intention behind every cup we serve."
]} />
title="The Anthology Experience" </div>
description="More than just a caffeine fix—discover the precision and intention behind every cup we serve."
/>
</div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<ProductCardFour <ProductCardFour
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
gridVariant="four-items-2x2-equal-grid" gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true} useInvertedBackground={true}
products={[ 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: "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?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: "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: "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: "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: "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" },
{ ]}
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"}, title="The Coffee Menu"
{ description="Hand-crafted beverages using our own freshly roasted beans. Taste the difference quality makes."
id: "p5", name: "Cappuccino", price: "$4.50", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/2-latte-wooden-table_501050-1095.jpg"}, />
{ </div>
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="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardFourteen <MetricCardFourteen
useInvertedBackground={false} useInvertedBackground={false}
title="Impact & Growth" title="Impact & Growth"
tag="Our Story" tag="Our Story"
metrics={[ metrics={[
{ { id: "m1", value: "4.6", description: "Avg Star Rating (450+ Reviews)" },
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" },
id: "m2", value: "100%", description: "Direct Sourcing Transparency"}, ]}
{ metricsAnimation="slide-up"
id: "m3", value: "12k+", description: "Cups Poured Monthly"}, />
]} </div>
metricsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardTen <TestimonialCardSix
textboxLayout="split" animationType="slide-up"
useInvertedBackground={true} textboxLayout="split"
testimonials={[ useInvertedBackground={true}
{ title="What Our Neighbors Say"
id: "1", title: "Exceptional", quote: "My favorite roaster in the entire Detroit area.", name: "Yuji Tk", role: "Local Guide", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-smiling-woman-holding-cup-coffee-posing-kitchen-enjoying_1258-198203.jpg"}, description="Join our community of coffee lovers who value craft, quality, and atmosphere."
{ testimonials={[
id: "2", title: "Cozy Vibe", quote: "The space felt cozy and toasty, with an open-air vibe.", name: "Rosanna Ramos", role: "Local Guide", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-using-laptop-cafe_23-2147785380.jpg"}, { 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", title: "Third-wave perfection", quote: "Consistently came up as one of the best.", name: "Luke Salik", role: "Local Guide", imageSrc: "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.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?w=100&q=60" }
{ ]}
id: "4", title: "Phenomenal", quote: "Great coffee with even better service and atmosphere.", name: "Coffee Lover", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-coffee-break_23-2148756294.jpg"}, />
{ </div>
id: "5", title: "Cool place", quote: "Very cool place with a friendly staff.", name: "Daily Drinker", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/happy-mid-adult-barista-cleaning-drinking-glass-after-working-hours-pub_637285-2964.jpg"},
]}
title="What Our Neighbors Say"
description="Join our community of coffee lovers who value craft, quality, and atmosphere."
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqBase <FaqBase
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ { id: "f1", title: "Do you offer delivery?", content: "Yes, we offer local delivery through our website and partnerships." },
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." },
id: "f2", title: "Is your space pet-friendly?", content: "We welcome well-behaved pets in our patio area during open hours."}, ]}
{ title="Common Questions"
id: "f3", title: "Are your beans gluten-free?", content: "Yes, all of our roasted coffee beans are gluten-free and allergen-friendly."}, description="Answers to how we roast, serve, and welcome our community."
]} faqsAnimation="slide-up"
title="Common Questions" />
description="Answers to how we roast, serve, and welcome our community." </div>
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactSplitForm <ContactSplitForm
useInvertedBackground={true} useInvertedBackground={true}
title="Visit Us in Detroit" title="Visit Us in Detroit"
description="Stop by for a pour-over or order online for pickup. We're open until 5pm daily at 1948 Division St." description="Stop by for a pour-over or order online for pickup. Visit us: https://maps.google.com/?q=1948+Division+St+Detroit"
inputs={[ 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?" }}
name: "name", type: "text", placeholder: "Your Name", required: true, imageSrc="http://img.b2bpic.net/free-photo/male-barista-holing-professional-coffee-machine_23-2148824383.jpg?w=800&q=80"
}, />
{ </div>
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="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoEmphasis <FooterLogoReveal
columns={[ logoText="Anthology Coffee"
{ leftLink={{ text: "Privacy", href: "#" }}
items: [ rightLink={{ text: "Terms", href: "#" }}
{ />
label: "About", href: "#about"}, </div>
{ </Suspense>
label: "Menu", href: "#products"},
],
},
{
items: [
{
label: "Location", href: "https://maps.google.com"},
{
label: "Contact", href: "#contact"},
],
},
{
items: [
{
label: "Instagram", href: "https://instagram.com"},
{
label: "Twitter", href: "https://twitter.com"},
],
},
]}
logoText="Anthology Coffee"
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #f5f4ef; --background: #1a120d;
--card: #dad6cd; --card: #2b1d14;
--foreground: #2a2928; --foreground: #f5e6d3;
--primary-cta: #2a2928; --primary-cta: #c8a97e;
--primary-cta-text: #f5f4ef; --primary-cta-text: #f5f4ef;
--secondary-cta: #ecebea; --secondary-cta: #1a120d;
--secondary-cta-text: #2a2928; --secondary-cta-text: #2a2928;
--accent: #ffffff; --accent: #c8a97e;
--background-accent: #c6b180; --background-accent: #2b1d14;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);