Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
493
src/app/page.tsx
493
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { CheckCircle, Zap, Shield, Award } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
@@ -29,369 +30,155 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Roasts",
|
||||
id: "roasts",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "process",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Outset Coffee"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Roasts", id: "roasts" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Process", id: "process" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Outset Coffee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
logoText="Outset Coffee"
|
||||
description="Exceptional Coffee, Thoughtfully Roasted. Discover single-origin, small-batch roasts sourced directly from sustainable farms. From bean to cup, we obsess over every detail so you experience coffee at its finest."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Our Roasts",
|
||||
href: "#roasts",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-container-full-coffee-beans-wooden-surface_181624-58235.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "plain" }}
|
||||
logoText="Outset Coffee"
|
||||
description="Exceptional Coffee, Thoughtfully Roasted. Discover single-origin, small-batch roasts sourced directly from sustainable farms. From bean to cup, we obsess over every detail so you experience coffee at its finest."
|
||||
buttons={[{ text: "Explore Our Roasts", href: "#roasts" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-container-full-coffee-beans-wooden-surface_181624-58235.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Philosophy",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/assortment-coffee-beans_53876-41429.jpg",
|
||||
alt: "Roasting coffee",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Philosophy" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/assortment-coffee-beans_53876-41429.jpg", alt: "Roasting coffee" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="roasts" data-section="roasts">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Sourced Directly",
|
||||
description: "Working with farmers who care about earth.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-bowl-with-coffee-beans_23-2148937293.jpg",
|
||||
buttonIcon: "CheckCircle",
|
||||
},
|
||||
{
|
||||
title: "Precision Roasting",
|
||||
description: "Small batches for maximum flavor profile.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sauce-bottle-table-restaurant_1339-5066.jpg",
|
||||
buttonIcon: "Zap",
|
||||
},
|
||||
{
|
||||
title: "Sustainable Practices",
|
||||
description: "Environmentally conscious from crop to cup.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mexican-sunflower-field_1388-259.jpg",
|
||||
buttonIcon: "Shield",
|
||||
},
|
||||
{
|
||||
title: "Expert Knowledge",
|
||||
description: "Decades of roasting experience combined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-working-beer-factory_23-2150573909.jpg",
|
||||
buttonIcon: "Award",
|
||||
},
|
||||
]}
|
||||
title="Crafting the Perfect Roast"
|
||||
description="Every bean tells a story of its origin. We prioritize transparency, sustainability, and quality at every stage."
|
||||
/>
|
||||
</div>
|
||||
<div id="roasts" data-section="roasts">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Sourced Directly", description: "Working with farmers who care about earth.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bowl-with-coffee-beans_23-2148937293.jpg", buttonIcon: CheckCircle },
|
||||
{ title: "Precision Roasting", description: "Small batches for maximum flavor profile.", imageSrc: "http://img.b2bpic.net/free-photo/sauce-bottle-table-restaurant_1339-5066.jpg", buttonIcon: Zap },
|
||||
{ title: "Sustainable Practices", description: "Environmentally conscious from crop to cup.", imageSrc: "http://img.b2bpic.net/free-photo/mexican-sunflower-field_1388-259.jpg", buttonIcon: Shield },
|
||||
{ title: "Expert Knowledge", description: "Decades of roasting experience combined.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-working-beer-factory_23-2150573909.jpg", buttonIcon: Award },
|
||||
]}
|
||||
title="Crafting the Perfect Roast"
|
||||
description="Every bean tells a story of its origin. We prioritize transparency, sustainability, and quality at every stage."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Regions Sourced",
|
||||
items: [
|
||||
"Highland origins",
|
||||
"Direct partnerships",
|
||||
"Sustainable farms",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Sustainable",
|
||||
items: [
|
||||
"Fair trade practices",
|
||||
"Carbon neutral",
|
||||
"Recyclable packaging",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "50+",
|
||||
title: "Small Batches",
|
||||
items: [
|
||||
"Weekly fresh roasts",
|
||||
"Custom profiles",
|
||||
"Quality controlled",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Measurable progress in quality and sustainability."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15+", title: "Regions Sourced", items: ["Highland origins", "Direct partnerships", "Sustainable farms"] },
|
||||
{ id: "m2", value: "100%", title: "Sustainable", items: ["Fair trade practices", "Carbon neutral", "Recyclable packaging"] },
|
||||
{ id: "m3", value: "50+", title: "Small Batches", items: ["Weekly fresh roasts", "Custom profiles", "Quality controlled"] },
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Measurable progress in quality and sustainability."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Ethiopia Yirgacheffe",
|
||||
price: "$22",
|
||||
variant: "Light Roast",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-bags-indoors-branding-concept_23-2151881016.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Colombia Huila",
|
||||
price: "$20",
|
||||
variant: "Medium Roast",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-morning-textile-scoop-wood_1172-342.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Sumatra Mandheling",
|
||||
price: "$24",
|
||||
variant: "Dark Roast",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roasted-beans-tasteful-coffee-shopping-paper-bag_23-2148441159.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Guatemala Antigua",
|
||||
price: "$21",
|
||||
variant: "Medium-Dark",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-black-background-with-powder_114579-16635.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Brazil Santos",
|
||||
price: "$19",
|
||||
variant: "Medium Roast",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/symbol-plus-minus-made-from-coffee-beans-isolated-white-background_169016-52946.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Kenya AA",
|
||||
price: "$23",
|
||||
variant: "Light-Medium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-roasted-coffee-beans_23-2150698707.jpg",
|
||||
},
|
||||
]}
|
||||
title="Shop Our Roasts"
|
||||
description="Fresh, small-batch coffee delivered to your door."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Ethiopia Yirgacheffe", price: "$22", variant: "Light Roast", imageSrc: "http://img.b2bpic.net/free-photo/coffee-bags-indoors-branding-concept_23-2151881016.jpg" },
|
||||
{ id: "p2", name: "Colombia Huila", price: "$20", variant: "Medium Roast", imageSrc: "http://img.b2bpic.net/free-photo/coffee-morning-textile-scoop-wood_1172-342.jpg" },
|
||||
{ id: "p3", name: "Sumatra Mandheling", price: "$24", variant: "Dark Roast", imageSrc: "http://img.b2bpic.net/free-photo/roasted-beans-tasteful-coffee-shopping-paper-bag_23-2148441159.jpg" },
|
||||
{ id: "p4", name: "Guatemala Antigua", price: "$21", variant: "Medium-Dark", imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-black-background-with-powder_114579-16635.jpg" },
|
||||
{ id: "p5", name: "Brazil Santos", price: "$19", variant: "Medium Roast", imageSrc: "http://img.b2bpic.net/free-photo/symbol-plus-minus-made-from-coffee-beans-isolated-white-background_169016-52946.jpg" },
|
||||
{ id: "p6", name: "Kenya AA", price: "$23", variant: "Light-Medium", imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-roasted-coffee-beans_23-2150698707.jpg" },
|
||||
]}
|
||||
title="Shop Our Roasts"
|
||||
description="Fresh, small-batch coffee delivered to your door."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Fair Trade",
|
||||
"Organic Certified",
|
||||
"Shade Grown",
|
||||
"Direct Trade",
|
||||
"Artisan Roast",
|
||||
"Sustainable Crop",
|
||||
"Global Sourced",
|
||||
]}
|
||||
title="Trusted Standards"
|
||||
description="Our certifications reflect our commitment to ethics and quality."
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Fair Trade", "Organic Certified", "Shade Grown", "Direct Trade", "Artisan Roast", "Sustainable Crop", "Global Sourced"]}
|
||||
title="Trusted Standards"
|
||||
description="Our certifications reflect our commitment to ethics and quality."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
role: "Journalist",
|
||||
company: "Daily Brew",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-enjoying-coffee_23-2148756284.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James Chen",
|
||||
role: "Tech Lead",
|
||||
company: "Dev Coffee",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-christmas_140725-128209.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Creative",
|
||||
company: "Art Space",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-redhead-female-barista-drinks-coffee-coffee-shop_613910-18857.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark Watson",
|
||||
role: "Teacher",
|
||||
company: "Learning Coffee",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-sitting-cafe-smiling-drinking-coffee_176420-12326.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sophie Kim",
|
||||
role: "Architect",
|
||||
company: "Studio Brew",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-caucasian-woman-holding-mobile-phone-near-ear-takeaway-coffee-cup-looking-camera-laughing-isolated-blue-background_141793-134551.jpg",
|
||||
},
|
||||
]}
|
||||
title="Coffee Lover Reviews"
|
||||
description="Hear from our passionate community of coffee enthusiasts."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Miller", role: "Journalist", company: "Daily Brew", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-enjoying-coffee_23-2148756284.jpg" },
|
||||
{ id: "t2", name: "James Chen", role: "Tech Lead", company: "Dev Coffee", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-christmas_140725-128209.jpg" },
|
||||
{ id: "t3", name: "Elena Rodriguez", role: "Creative", company: "Art Space", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beauty-redhead-female-barista-drinks-coffee-coffee-shop_613910-18857.jpg" },
|
||||
{ id: "t4", name: "Mark Watson", role: "Teacher", company: "Learning Coffee", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-student-sitting-cafe-smiling-drinking-coffee_176420-12326.jpg" },
|
||||
{ id: "t5", name: "Sophie Kim", role: "Architect", company: "Studio Brew", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-caucasian-woman-holding-mobile-phone-near-ear-takeaway-coffee-cup-looking-camera-laughing-isolated-blue-background_141793-134551.jpg" },
|
||||
]}
|
||||
title="Coffee Lover Reviews"
|
||||
description="Hear from our passionate community of coffee enthusiasts."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do you source beans?",
|
||||
content: "We work directly with farmers to ensure fair trade and high quality.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are your roasts fresh?",
|
||||
content: "Every roast is performed in small batches per order.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you offer subscriptions?",
|
||||
content: "Yes, subscribe and save on your weekly delivery.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about our sourcing and roasting."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do you source beans?", content: "We work directly with farmers to ensure fair trade and high quality." },
|
||||
{ id: "f2", title: "Are your roasts fresh?", content: "Every roast is performed in small batches per order." },
|
||||
{ id: "f3", title: "Do you offer subscriptions?", content: "Yes, subscribe and save on your weekly delivery." },
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about our sourcing and roasting."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get in Touch"
|
||||
description="Have questions? We'd love to chat about coffee."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message...",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/wide-shot-barista-preparing-milk-foam-steamer-espresso-machine-summer-job-concept_197531-31061.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get in Touch"
|
||||
description="Have questions? We'd love to chat about coffee."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your message...", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/wide-shot-barista-preparing-milk-foam-steamer-espresso-machine-summer-job-concept_197531-31061.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Outset Coffee"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Roasts",
|
||||
href: "#roasts",
|
||||
},
|
||||
{
|
||||
label: "Subscription",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Outset Coffee"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "All Roasts", href: "#roasts" }, { label: "Subscription", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user