Merge version_1 into main #2
564
src/app/page.tsx
564
src/app/page.tsx
@@ -27,435 +27,159 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Demo",
|
||||
id: "demo",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Pour-Over AI"
|
||||
button={{
|
||||
text: "Start Free Trial",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Demo", id: "demo" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Pour-Over AI"
|
||||
button={{ text: "Start Free Trial" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Master Latte Art Beyond Gravity"
|
||||
description="Use AI-powered video analysis and live coaching to perfect hearts, tulips, rosettas, and advanced pours with futuristic precision."
|
||||
kpis={[
|
||||
{
|
||||
value: "99.8%",
|
||||
label: "Accuracy",
|
||||
},
|
||||
{
|
||||
value: "15k+",
|
||||
label: "Pours Analyzed",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Active Baristas",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Try Demo",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Watch Preview",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232854.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bearded-male-with-long-hair-preparing-tea-asian-style_613910-8122.jpg",
|
||||
alt: "Bearded male barista",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/astronaut-diving-digital-art_23-2151198145.jpg",
|
||||
alt: "Astronaut barista",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-pours-from-one-cup-coffee-into-another-full-cup-coffee-spills-from-edges_140725-9169.jpg",
|
||||
alt: "Pouring enthusiast",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/shop-portrait-beautiful-beauty-people_1150-1574.jpg",
|
||||
alt: "Coffee shop owner",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/delicious-organic-coffee-still-life_23-2151762351.jpg",
|
||||
alt: "Latte art artist",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ baristas worldwide"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "AI Precision",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Zero-Gravity Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Feedback",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Pro-level Coaching",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Cafe Community",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="Master Latte Art Beyond Gravity"
|
||||
description="Use AI-powered video analysis and live coaching to perfect hearts, tulips, rosettas, and advanced pours with futuristic precision."
|
||||
kpis={[
|
||||
{ value: "99.8%", label: "Accuracy" },
|
||||
{ value: "15k+", label: "Pours Analyzed" },
|
||||
{ value: "5k+", label: "Active Baristas" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Try Demo", href: "#" }, { text: "Watch Preview", href: "#" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232854.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/bearded-male-with-long-hair-preparing-tea-asian-style_613910-8122.jpg", alt: "Bearded male barista" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/astronaut-diving-digital-art_23-2151198145.jpg", alt: "Astronaut barista" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-pours-from-one-cup-coffee-into-another-full-cup-coffee-spills-from-edges_140725-9169.jpg", alt: "Pouring enthusiast" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/shop-portrait-beautiful-beauty-people_1150-1574.jpg", alt: "Coffee shop owner" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/delicious-organic-coffee-still-life_23-2151762351.jpg", alt: "Latte art artist" },
|
||||
]}
|
||||
avatarText="Join 5,000+ baristas worldwide"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "AI Precision" },
|
||||
{ type: "text", text: "Zero-Gravity Design" },
|
||||
{ type: "text", text: "Real-time Feedback" },
|
||||
{ type: "text", text: "Pro-level Coaching" },
|
||||
{ type: "text", text: "Global Cafe Community" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Blue Bottle",
|
||||
"Intelligentsia",
|
||||
"Stumptown",
|
||||
"Counter Culture",
|
||||
"Verve",
|
||||
"Square One",
|
||||
"La Colombe",
|
||||
]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Leading cafes worldwide choose Pour-Over AI."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Blue Bottle", "Intelligentsia", "Stumptown", "Counter Culture", "Verve", "Square One", "La Colombe"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Leading cafes worldwide choose Pour-Over AI."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "AI",
|
||||
title: "Real-Time Pour Feedback",
|
||||
items: [
|
||||
"Instant audio cues",
|
||||
"Motion tracking",
|
||||
"Visual overlays",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "AI",
|
||||
title: "Pattern Recognition",
|
||||
items: [
|
||||
"Rosetta detection",
|
||||
"Tulip analysis",
|
||||
"Advanced heart scoring",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "COACH",
|
||||
title: "Personalized Coaching",
|
||||
items: [
|
||||
"Skill gap analysis",
|
||||
"Tailored practice plans",
|
||||
"Milestone tracking",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Innovative Features"
|
||||
description="Powerful tools designed to elevate your craft."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", label: "AI", title: "Real-Time Pour Feedback", items: ["Instant audio cues", "Motion tracking", "Visual overlays"] },
|
||||
{ id: "f2", label: "AI", title: "Pattern Recognition", items: ["Rosetta detection", "Tulip analysis", "Advanced heart scoring"] },
|
||||
{ id: "f3", label: "COACH", title: "Personalized Coaching", items: ["Skill gap analysis", "Tailored practice plans", "Milestone tracking"] },
|
||||
]}
|
||||
title="Innovative Features"
|
||||
description="Powerful tools designed to elevate your craft."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureCardTwelve
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "w1",
|
||||
label: "1",
|
||||
title: "Upload Video",
|
||||
items: [
|
||||
"Record your pour",
|
||||
"Analyze lighting",
|
||||
"High-res upload",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "w2",
|
||||
label: "2",
|
||||
title: "AI Detection",
|
||||
items: [
|
||||
"Motion tracking",
|
||||
"Pattern scan",
|
||||
"Expert validation",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "w3",
|
||||
label: "3",
|
||||
title: "Improve Technique",
|
||||
items: [
|
||||
"Review insights",
|
||||
"Refine approach",
|
||||
"Perfect results",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Seamless Workflow"
|
||||
description="From amateur to master in three steps."
|
||||
/>
|
||||
</div>
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "w1", label: "1", title: "Upload Video", items: ["Record your pour", "Analyze lighting", "High-res upload"] },
|
||||
{ id: "w2", label: "2", title: "AI Detection", items: ["Motion tracking", "Pattern scan", "Expert validation"] },
|
||||
{ id: "w3", label: "3", title: "Improve Technique", items: ["Review insights", "Refine approach", "Perfect results"] },
|
||||
]}
|
||||
title="Seamless Workflow"
|
||||
description="From amateur to master in three steps."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="analytics" data-section="analytics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Dashboard Insights"
|
||||
tag="Advanced Analytics"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "92%",
|
||||
description: "Average Pour Score",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "High",
|
||||
description: "Foam Consistency",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "0.1s",
|
||||
description: "Tilt Latency",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="analytics" data-section="analytics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Dashboard Insights"
|
||||
tag="Advanced Analytics"
|
||||
metrics={[
|
||||
{ id: "m1", value: "92%", description: "Average Pour Score" },
|
||||
{ id: "m2", value: "High", description: "Foam Consistency" },
|
||||
{ id: "m3", value: "0.1s", description: "Tilt Latency" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
title: "Starter",
|
||||
price: "$19",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Basic AI analysis",
|
||||
"Heart pattern training",
|
||||
"Community access",
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/coffee-house-logo_779267-3021.jpg",
|
||||
imageAlt: "luxury coffee brand logo minimalist",
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
title: "Pro",
|
||||
price: "$49",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Advanced patterns",
|
||||
"Live feedback",
|
||||
"Priority coaching",
|
||||
],
|
||||
button: {
|
||||
text: "Upgrade Pro",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232854.jpg?_wi=2",
|
||||
imageAlt: "luxury coffee brand logo minimalist",
|
||||
},
|
||||
{
|
||||
id: "team",
|
||||
title: "Cafe Team",
|
||||
price: "$199",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Team dashboards",
|
||||
"Staff progress",
|
||||
"Cafe branding",
|
||||
],
|
||||
button: {
|
||||
text: "Contact Sales",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=coj1sg",
|
||||
imageAlt: "luxury coffee brand logo minimalist",
|
||||
},
|
||||
]}
|
||||
title="Choose Your Path"
|
||||
description="Pricing plans for every skill level."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "starter", title: "Starter", price: "$19", period: "/mo", features: ["Basic AI analysis", "Heart pattern training", "Community access"], button: { text: "Get Started" }, imageSrc: "http://img.b2bpic.net/free-vector/coffee-house-logo_779267-3021.jpg", imageAlt: "luxury coffee brand logo minimalist" },
|
||||
{ id: "pro", title: "Pro", price: "$49", period: "/mo", features: ["Advanced patterns", "Live feedback", "Priority coaching"], button: { text: "Upgrade Pro" }, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232854.jpg", imageAlt: "luxury coffee brand logo minimalist" },
|
||||
{ id: "team", title: "Cafe Team", price: "$199", period: "/mo", features: ["Team dashboards", "Staff progress", "Cafe branding"], button: { text: "Contact Sales" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=coj1sg", imageAlt: "luxury coffee brand logo minimalist" },
|
||||
]}
|
||||
title="Choose Your Path"
|
||||
description="Pricing plans for every skill level."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Lead Barista",
|
||||
company: "Espresso Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-484.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark Chen",
|
||||
role: "Cafe Owner",
|
||||
company: "Third Wave",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-female-barista-small-coffee-shop_613910-10446.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Head Coffee Trainer",
|
||||
company: "Brew Masters",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-coffee-coffee-maker_23-2148366573.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Barista",
|
||||
company: "Urban Grind",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-cute-barista-girl-pouring-filter-coffee-making-order-cafe-client_1258-203375.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Nina Patel",
|
||||
role: "Coffee Blogger",
|
||||
company: "Brew Daily",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-standing-bakery-shop_1170-2075.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Rating",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Satisfied",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Reviews",
|
||||
},
|
||||
]}
|
||||
title="Barista Voices"
|
||||
description="What our users are saying about Pour-Over AI."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "Lead Barista", company: "Espresso Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-redhead-female-barista-drinks-coffee_613910-484.jpg" },
|
||||
{ id: "2", name: "Mark Chen", role: "Cafe Owner", company: "Third Wave", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-female-barista-small-coffee-shop_613910-10446.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", role: "Head Coffee Trainer", company: "Brew Masters", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-preparing-coffee-coffee-maker_23-2148366573.jpg" },
|
||||
{ id: "4", name: "David Kim", role: "Barista", company: "Urban Grind", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-cute-barista-girl-pouring-filter-coffee-making-order-cafe-client_1258-203375.jpg" },
|
||||
{ id: "5", name: "Nina Patel", role: "Coffee Blogger", company: "Brew Daily", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-standing-bakery-shop_1170-2075.jpg" },
|
||||
]}
|
||||
kpiItems={[{ value: "4.9", label: "Rating" }, { value: "100%", label: "Satisfied" }, { value: "500+", label: "Reviews" }]}
|
||||
title="Barista Voices"
|
||||
description="What our users are saying about Pour-Over AI."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Stay Connected"
|
||||
title="Ready to Pour Like a Pro?"
|
||||
description="Join our newsletter and never miss an update on latte art."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Stay Connected"
|
||||
title="Ready to Pour Like a Pro?"
|
||||
description="Join our newsletter and never miss an update on latte art."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Pour-Over AI"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Help",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Status",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Pour-Over AI"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "About", href: "#about" }] },
|
||||
{ title: "Support", items: [{ label: "Help", href: "#" }, { label: "Contact", href: "#contact" }, { label: "Status", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user