Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 85a3d08a80 |
265
src/app/page.tsx
265
src/app/page.tsx
@@ -33,21 +33,13 @@ export default function LandingPage() {
|
|||||||
<NavbarStyleApple
|
<NavbarStyleApple
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{
|
||||||
name: "About",
|
name: "About", id: "about"},
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Menu",
|
name: "Menu", id: "menu"},
|
||||||
id: "menu",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Testimonials",
|
name: "Testimonials", id: "testimonials"},
|
||||||
id: "testimonials",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Contact",
|
name: "Contact", id: "contact"},
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="Cuppio Coffee"
|
brandName="Cuppio Coffee"
|
||||||
/>
|
/>
|
||||||
@@ -56,75 +48,53 @@ export default function LandingPage() {
|
|||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitKpi
|
<HeroSplitKpi
|
||||||
background={{
|
background={{
|
||||||
variant: "gradient-bars",
|
variant: "gradient-bars"}}
|
||||||
}}
|
|
||||||
title="Experience Artisanal Perfection"
|
title="Experience Artisanal Perfection"
|
||||||
description="At Cuppio, we source only the finest beans to craft coffee that warms your soul and awakens your spirit."
|
description="At Cuppio, we source only the finest beans to craft coffee that warms your soul and awakens your spirit."
|
||||||
|
buttons={[
|
||||||
|
{
|
||||||
|
text: "Shop Now", href: "#menu"
|
||||||
|
}
|
||||||
|
]}
|
||||||
kpis={[
|
kpis={[
|
||||||
{
|
{
|
||||||
value: "12+",
|
value: "12+", label: "Origin Sourced"},
|
||||||
label: "Origin Sourced",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
value: "5k+",
|
value: "5k+", label: "Cups Served"},
|
||||||
label: "Cups Served",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
value: "99%",
|
value: "99%", label: "Satisfaction"},
|
||||||
label: "Satisfaction",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
enableKpiAnimation={true}
|
enableKpiAnimation={true}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-pouring-milk-cup_23-2148865583.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-pouring-milk-cup_23-2148865583.jpg"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
avatars={[
|
avatars={[
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458092.jpg",
|
src: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458092.jpg", alt: "Barista preparing beverage"},
|
||||||
alt: "Barista preparing beverage",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/barista-making-cappuccino_1150-8043.jpg",
|
src: "http://img.b2bpic.net/free-photo/barista-making-cappuccino_1150-8043.jpg", alt: "Barista making cappuccino."},
|
||||||
alt: "Barista making cappuccino.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/close-up-hands-preparing-drink-with-milk_23-2148865605.jpg",
|
src: "http://img.b2bpic.net/free-photo/close-up-hands-preparing-drink-with-milk_23-2148865605.jpg", alt: "Close-up hands preparing drink with milk"},
|
||||||
alt: "Close-up hands preparing drink with milk",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/barista-is-preparing-coffee-with-milk_140725-8113.jpg",
|
src: "http://img.b2bpic.net/free-photo/barista-is-preparing-coffee-with-milk_140725-8113.jpg", alt: "Barista is preparing coffee with milk"},
|
||||||
alt: "Barista is preparing coffee with milk",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458072.jpg",
|
src: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458072.jpg", alt: "Barista preparing beverage"},
|
||||||
alt: "Barista preparing beverage",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
avatarText="Join 5,000+ coffee enthusiasts"
|
avatarText="Join 5,000+ coffee enthusiasts"
|
||||||
marqueeItems={[
|
marqueeItems={[
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Ethically Sourced", icon: Leaf,
|
||||||
text: "Ethically Sourced",
|
|
||||||
icon: Leaf,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Small-Batch Roasts", icon: Coffee,
|
||||||
text: "Small-Batch Roasts",
|
|
||||||
icon: Coffee,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Expertly Crafted", icon: Award,
|
||||||
text: "Expertly Crafted",
|
|
||||||
icon: Award,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Carbon Neutral", icon: Recycle,
|
||||||
text: "Carbon Neutral",
|
|
||||||
icon: Recycle,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Global Partners", icon: Globe,
|
||||||
text: "Global Partners",
|
|
||||||
icon: Globe,
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
@@ -145,47 +115,17 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "p1",
|
id: "p1", name: "V60 Dripper", price: "$25", variant: "Ceramic", imageSrc: "http://img.b2bpic.net/free-photo/female-barista-holding-coffee-filter-jug_23-2148824462.jpg"},
|
||||||
name: "V60 Dripper",
|
|
||||||
price: "$25",
|
|
||||||
variant: "Ceramic",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/female-barista-holding-coffee-filter-jug_23-2148824462.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "p2",
|
id: "p2", name: "French Press", price: "$45", variant: "Steel", imageSrc: "http://img.b2bpic.net/free-photo/close-up-ready-be-served-coffee-with-sugar_23-2148464004.jpg"},
|
||||||
name: "French Press",
|
|
||||||
price: "$45",
|
|
||||||
variant: "Steel",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-ready-be-served-coffee-with-sugar_23-2148464004.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "p3",
|
id: "p3", name: "Handmade Mug", price: "$18", variant: "Stoneware", imageSrc: "http://img.b2bpic.net/free-photo/handmade-cup-books-closeup-wooden-surface-copy-space_169016-46354.jpg"},
|
||||||
name: "Handmade Mug",
|
|
||||||
price: "$18",
|
|
||||||
variant: "Stoneware",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/handmade-cup-books-closeup-wooden-surface-copy-space_169016-46354.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "p4",
|
id: "p4", name: "Ethiopian Blend", price: "$22", variant: "250g", imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-container_23-2148173321.jpg"},
|
||||||
name: "Ethiopian Blend",
|
|
||||||
price: "$22",
|
|
||||||
variant: "250g",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-container_23-2148173321.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "p5",
|
id: "p5", name: "Burr Grinder", price: "$120", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/coffee-pot-cup_23-2147693944.jpg"},
|
||||||
name: "Burr Grinder",
|
|
||||||
price: "$120",
|
|
||||||
variant: "Professional",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-pot-cup_23-2147693944.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "p6",
|
id: "p6", name: "Wooden Scoop", price: "$12", variant: "Walnut", imageSrc: "http://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187518.jpg"},
|
||||||
name: "Wooden Scoop",
|
|
||||||
price: "$12",
|
|
||||||
variant: "Walnut",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187518.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Our Signature Selection"
|
title="Our Signature Selection"
|
||||||
description="Hand-picked equipment and beans to elevate your home brewing ritual."
|
description="Hand-picked equipment and beans to elevate your home brewing ritual."
|
||||||
@@ -199,50 +139,27 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
plans={[
|
plans={[
|
||||||
{
|
{
|
||||||
id: "basic",
|
id: "basic", badge: "Weekly", price: "$15/mo", subtitle: "For daily coffee lovers", features: [
|
||||||
badge: "Weekly",
|
"Fresh Roast", "Standard Shipping"],
|
||||||
price: "$15/mo",
|
|
||||||
subtitle: "For daily coffee lovers",
|
|
||||||
features: [
|
|
||||||
"Fresh Roast",
|
|
||||||
"Standard Shipping",
|
|
||||||
],
|
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: "Select Plan",
|
text: "Select Plan"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "pro",
|
id: "pro", badge: "Monthly", price: "$40/mo", subtitle: "Curated selection", features: [
|
||||||
badge: "Monthly",
|
"Exotic Beans", "Priority Shipping", "Brew Guide"],
|
||||||
price: "$40/mo",
|
|
||||||
subtitle: "Curated selection",
|
|
||||||
features: [
|
|
||||||
"Exotic Beans",
|
|
||||||
"Priority Shipping",
|
|
||||||
"Brew Guide",
|
|
||||||
],
|
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: "Select Plan",
|
text: "Select Plan"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "master",
|
id: "master", badge: "Annual", price: "$400/yr", subtitle: "Complete experience", features: [
|
||||||
badge: "Annual",
|
"Limited Batches", "Exclusive Gadgets", "Free Shipping"],
|
||||||
price: "$400/yr",
|
|
||||||
subtitle: "Complete experience",
|
|
||||||
features: [
|
|
||||||
"Limited Batches",
|
|
||||||
"Exclusive Gadgets",
|
|
||||||
"Free Shipping",
|
|
||||||
],
|
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: "Select Plan",
|
text: "Select Plan"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -259,45 +176,20 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
id: "t1",
|
id: "t1", name: "Alice M.", role: "Designer", company: "Studio", rating: 5,
|
||||||
name: "Alice M.",
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-fairskinned-adult-woman-smiling-looking-camera-while-drinking-coffee-morning-standing-by-window-concept-rest-recovery_197531-31124.jpg"},
|
||||||
role: "Designer",
|
|
||||||
company: "Studio",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-fairskinned-adult-woman-smiling-looking-camera-while-drinking-coffee-morning-standing-by-window-concept-rest-recovery_197531-31124.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "t2",
|
id: "t2", name: "Bob K.", role: "Engineer", company: "Tech", rating: 5,
|
||||||
name: "Bob K.",
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-bearded-man-earphones_171337-4772.jpg"},
|
||||||
role: "Engineer",
|
|
||||||
company: "Tech",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-bearded-man-earphones_171337-4772.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "t3",
|
id: "t3", name: "Chloe L.", role: "Writer", company: "Media", rating: 5,
|
||||||
name: "Chloe L.",
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-women-reading-menu-cafe_23-2147785423.jpg"},
|
||||||
role: "Writer",
|
|
||||||
company: "Media",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-women-reading-menu-cafe_23-2147785423.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "t4",
|
id: "t4", name: "David S.", role: "Manager", company: "Retail", rating: 5,
|
||||||
name: "David S.",
|
imageSrc: "http://img.b2bpic.net/free-photo/transparent-word-coffee-background-coffee-beans-mockup-advertising_169016-53812.jpg"},
|
||||||
role: "Manager",
|
|
||||||
company: "Retail",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/transparent-word-coffee-background-coffee-beans-mockup-advertising_169016-53812.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "t5",
|
id: "t5", name: "Elena R.", role: "Architect", company: "Build", rating: 5,
|
||||||
name: "Elena R.",
|
imageSrc: "http://img.b2bpic.net/free-photo/waitress-serving-cup-coffee-customers_1170-652.jpg"},
|
||||||
role: "Architect",
|
|
||||||
company: "Build",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/waitress-serving-cup-coffee-customers_1170-652.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Customer Stories"
|
title="Customer Stories"
|
||||||
description="We are proud to serve our community of coffee lovers."
|
description="We are proud to serve our community of coffee lovers."
|
||||||
@@ -311,23 +203,14 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
metrics={[
|
metrics={[
|
||||||
{
|
{
|
||||||
id: "m1",
|
id: "m1", icon: Coffee,
|
||||||
icon: Coffee,
|
title: "Roasts", value: "150"},
|
||||||
title: "Roasts",
|
|
||||||
value: "150",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "m2",
|
id: "m2", icon: Users,
|
||||||
icon: Users,
|
title: "Farmers", value: "20"},
|
||||||
title: "Farmers",
|
|
||||||
value: "20",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "m3",
|
id: "m3", icon: Leaf,
|
||||||
icon: Leaf,
|
title: "Bio-degradable", value: "100%"},
|
||||||
title: "Bio-degradable",
|
|
||||||
value: "100%",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Our Impact"
|
title="Our Impact"
|
||||||
description="Quality meets sustainability at every step of our process."
|
description="Quality meets sustainability at every step of our process."
|
||||||
@@ -339,20 +222,11 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
faqs={[
|
faqs={[
|
||||||
{
|
{
|
||||||
id: "f1",
|
id: "f1", title: "How is coffee sourced?", content: "Ethically and directly from partner farms."},
|
||||||
title: "How is coffee sourced?",
|
|
||||||
content: "Ethically and directly from partner farms.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "f2",
|
id: "f2", title: "Can I cancel my subscription?", content: "Yes, you can pause or cancel anytime."},
|
||||||
title: "Can I cancel my subscription?",
|
|
||||||
content: "Yes, you can pause or cancel anytime.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "f3",
|
id: "f3", title: "Shipping times?", content: "3-5 business days for standard orders."},
|
||||||
title: "Shipping times?",
|
|
||||||
content: "3-5 business days for standard orders.",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
sideTitle="Common Questions"
|
sideTitle="Common Questions"
|
||||||
sideDescription="Everything you need to know about our beans and brewing gear."
|
sideDescription="Everything you need to know about our beans and brewing gear."
|
||||||
@@ -364,8 +238,7 @@ export default function LandingPage() {
|
|||||||
<ContactCenter
|
<ContactCenter
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
background={{
|
background={{
|
||||||
variant: "plain",
|
variant: "plain"}}
|
||||||
}}
|
|
||||||
tag="Newsletter"
|
tag="Newsletter"
|
||||||
title="Stay Connected"
|
title="Stay Connected"
|
||||||
description="Sign up for coffee tips and roast updates."
|
description="Sign up for coffee tips and roast updates."
|
||||||
@@ -377,29 +250,19 @@ export default function LandingPage() {
|
|||||||
logoText="Cuppio"
|
logoText="Cuppio"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Shop",
|
title: "Shop", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "Beans",
|
label: "Beans", href: "#menu"},
|
||||||
href: "#menu",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Gear",
|
label: "Gear", href: "#menu"},
|
||||||
href: "#menu",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company",
|
title: "Company", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "About",
|
label: "About", href: "#about"},
|
||||||
href: "#about",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "FAQ",
|
label: "FAQ", href: "#faq"},
|
||||||
href: "#faq",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|||||||
Reference in New Issue
Block a user