Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 453fb3cf8f | |||
| 22b04f6777 | |||
| b1306ae2dd | |||
| f0e11671d8 |
384
src/app/page.tsx
384
src/app/page.tsx
@@ -2,16 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Coffee, ShieldCheck, Leaf, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -31,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Roast & Bloom"
|
||||
/>
|
||||
@@ -54,21 +43,10 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="Roast & Bloom"
|
||||
description="Artisanal coffee, masterfully roasted for the discerning palate. Experience the essence of ethical, single-origin beans in every cup."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }, { text: "Our Story", href: "#about" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-with-blurred-effect_23-2148164705.jpg"
|
||||
imageAlt="Artisanal coffee experience"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -77,333 +55,111 @@ export default function LandingPage() {
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="From Origin to Cup"
|
||||
description="We partner directly with farmers to bring you the highest quality beans while ensuring fair wages and sustainable agricultural practices."
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Farm Partners",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
title: "Coffee Origins",
|
||||
},
|
||||
{
|
||||
value: "20K+",
|
||||
title: "Cups Served",
|
||||
},
|
||||
]}
|
||||
metrics={[{ value: "100+", title: "Farm Partners" }, { value: "50+", title: "Coffee Origins" }, { value: "20K+", title: "Cups Served" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-pile-coffee-beans-coffee-shop_23-2149458066.jpg"
|
||||
imageAlt="Coffee production process"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={true}
|
||||
<FeatureCardTwentySix
|
||||
title="The Roast & Bloom Difference"
|
||||
description="Elevate your daily ritual with features designed for coffee enthusiasts."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Ethical Sourcing",
|
||||
content: "100% fair trade and direct trade partnerships.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Micro-Lot Roasting",
|
||||
content: "Small batches to ensure peak flavor consistency.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Sustainable Packaging",
|
||||
content: "Fully compostable bags for a greener earth.",
|
||||
},
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Ethical Sourcing", description: "100% fair trade and direct trade partnerships.", buttonIcon: Leaf },
|
||||
{ title: "Micro-Lot Roasting", description: "Small batches to ensure peak flavor consistency.", buttonIcon: Coffee },
|
||||
{ title: "Sustainable Packaging", description: "Fully compostable bags for a greener earth.", buttonIcon: ShieldCheck },
|
||||
{ title: "Mastery in Brew", description: "Precision roasted for maximum flavor profile.", buttonIcon: Star }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-beans-arrangement-with-machine_23-2148865560.jpg"
|
||||
imageAlt="Premium coffee beans"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Roast & Bloom",
|
||||
name: "Morning Bloom Blend",
|
||||
price: "$18",
|
||||
rating: 5,
|
||||
reviewCount: "124",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-roasted-linen-cafe-italian_1172-347.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Roast & Bloom",
|
||||
name: "Midnight Roast",
|
||||
price: "$20",
|
||||
rating: 5,
|
||||
reviewCount: "89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-brown-leaves_116380-82.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Roast & Bloom",
|
||||
name: "Ethiopian Heirloom",
|
||||
price: "$22",
|
||||
rating: 4,
|
||||
reviewCount: "56",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/big-hermetic-metallic-package-filled-with-freshly-baked-roasted-coffee_346278-412.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Roast & Bloom",
|
||||
name: "Colombian Supremo",
|
||||
price: "$19",
|
||||
rating: 5,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-container-full-coffee-beans-wooden-surface_181624-58235.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Roast & Bloom",
|
||||
name: "Cold Brew Artisan",
|
||||
price: "$16",
|
||||
rating: 5,
|
||||
reviewCount: "72",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans_23-2148093842.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Roast & Bloom",
|
||||
name: "Decaf Essence",
|
||||
price: "$21",
|
||||
rating: 4,
|
||||
reviewCount: "34",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-freshly-ground-coffee-manual-grinder-bag-coffee-beans-nuts-cinnamonnd-pineapple-white_346278-1119.jpg",
|
||||
},
|
||||
]}
|
||||
<ProductCardOne
|
||||
title="Signature Roasts"
|
||||
description="Explore our curated selection of artisanal blends and single-origin specialties."
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
products={[
|
||||
{ id: "p1", name: "Morning Bloom Blend", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/small-roasted-linen-cafe-italian_1172-347.jpg" },
|
||||
{ id: "p2", name: "Midnight Roast", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-brown-leaves_116380-82.jpg" },
|
||||
{ id: "p3", name: "Ethiopian Heirloom", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/big-hermetic-metallic-package-filled-with-freshly-baked-roasted-coffee_346278-412.jpg" },
|
||||
{ id: "p4", name: "Colombian Supremo", price: "$19", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-container-full-coffee-beans-wooden-surface_181624-58235.jpg" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "b1",
|
||||
badge: "Essential",
|
||||
price: "$25/mo",
|
||||
subtitle: "Perfect for one person",
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"1 Bag Monthly",
|
||||
"Free Shipping",
|
||||
"Member Perks",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
badge: "Enthusiast",
|
||||
price: "$45/mo",
|
||||
subtitle: "For the daily drinker",
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"2 Bags Monthly",
|
||||
"Free Shipping",
|
||||
"Priority Roast",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
badge: "Connoisseur",
|
||||
price: "$80/mo",
|
||||
subtitle: "For the true coffee lover",
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"4 Bags Monthly",
|
||||
"Free Shipping",
|
||||
"Rare Bean Access",
|
||||
],
|
||||
},
|
||||
]}
|
||||
<PricingCardOne
|
||||
title="Coffee Subscriptions"
|
||||
description="Never run out of your favorite beans again."
|
||||
useInvertedBackground={true}
|
||||
animationType="depth-3d"
|
||||
plans={[
|
||||
{ id: "b1", badge: "Essential", price: "$25/mo", subtitle: "Perfect for one person", features: ["1 Bag Monthly", "Free Shipping"] },
|
||||
{ id: "b2", badge: "Enthusiast", price: "$45/mo", subtitle: "For the daily drinker", features: ["2 Bags Monthly", "Priority Roast"] },
|
||||
{ id: "b3", badge: "Connoisseur", price: "$80/mo", subtitle: "For the true coffee lover", features: ["4 Bags Monthly", "Rare Bean Access"] }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
role: "Designer",
|
||||
company: "Studio X",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-smiling-african-american-woman-with-coffee-pot-joyfully-looking-camera-modern-coworking-space_574295-3838.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus L.",
|
||||
role: "Developer",
|
||||
company: "TechBase",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-posing-apron-with-coffee-pot_23-2148366687.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena P.",
|
||||
role: "Barista",
|
||||
company: "Cafe Aura",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-male-making-coffee_23-2148366603.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David W.",
|
||||
role: "Architect",
|
||||
company: "UrbanBuild",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-coffee-cup_23-2149647827.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sophie K.",
|
||||
role: "Marketer",
|
||||
company: "GrowthCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-outside-portrait-happy-charming-young-lady_291650-642.jpg",
|
||||
},
|
||||
]}
|
||||
<TestimonialCardThirteen
|
||||
title="Community Voices"
|
||||
description="What our coffee lovers are saying about Roast & Bloom."
|
||||
showRating={true}
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", handle: "@sarahj", testimonial: "The coffee is amazing!", rating: 5 },
|
||||
{ id: "t2", name: "Marcus L.", handle: "@marcusl", testimonial: "Great quality beans.", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked"
|
||||
sideDescription="Have questions? We have answers."
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "How do you source beans?",
|
||||
content: "We work directly with farms globally to ensure quality.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "Is your shipping fast?",
|
||||
content: "Orders are shipped within 24 hours of roasting.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "Can I cancel subscription?",
|
||||
content: "Yes, you can manage or cancel anytime online.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-small-business_23-2149196203.jpg"
|
||||
imageAlt="Coffee beans background"
|
||||
title="Frequently Asked"
|
||||
description="Have questions? We have answers to help you enjoy the best coffee experience."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "faq1", title: "How do you source beans?", content: "We work directly with farms globally." },
|
||||
{ id: "faq2", title: "Is your shipping fast?", content: "Orders are shipped within 24 hours." },
|
||||
{ id: "faq3", title: "Can I cancel subscription?", content: "Yes, anytime online." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
<ContactSplit
|
||||
tag="Contact"
|
||||
title="Get In Touch"
|
||||
description="Questions? Suggestions? We'd love to hear from you."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help?",
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/breakfast-table-with-coffee-cake-milk_23-2151982929.jpg"
|
||||
imageAlt="Coffee contact setup"
|
||||
mediaPosition="right"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Products",
|
||||
items: [
|
||||
{
|
||||
label: "All Roasts",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Subscriptions",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterCard
|
||||
logoText="Roast & Bloom"
|
||||
copyrightText="© 2025 | Roast & Bloom"
|
||||
socialLinks={[]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user