189 lines
7.2 KiB
TypeScript
189 lines
7.2 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="compact"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="medium"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Experience", id: "experience"},
|
||
{
|
||
name: "Signature", id: "signature"},
|
||
{
|
||
name: "Menu", id: "menu"},
|
||
{
|
||
name: "Find Us", id: "contact"},
|
||
]}
|
||
brandName="Caffè Paradiso"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardScroll
|
||
background={{
|
||
variant: "gradient-bars"}}
|
||
title="Worth Every Second."
|
||
description="The viral slow-pour latte everyone’s talking about — crafted, not rushed."
|
||
buttons={[
|
||
{
|
||
text: "View Menu", href: "#menu"},
|
||
{
|
||
text: "Find Us", href: "#contact"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-with-coffee-sitting-outside-cafe_1303-5488.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="proof" data-section="proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
names={[
|
||
"“Absolutely worth the hype.”", "“One of the best lattes I’ve ever had.”", "“Rich, smooth, perfectly balanced.”", "“We kept coming back every day.”", "“The line moves fast — and it’s worth it.”"]}
|
||
title="A Cult Following"
|
||
description="Don't take our word for it."
|
||
/>
|
||
</div>
|
||
|
||
<div id="signature" data-section="signature">
|
||
<FeatureCardTwentyEight
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "s1", title: "Salted Brown Butter Oat Latte", subtitle: "Our signature pour.", category: "Signature", value: "Iconic"},
|
||
{
|
||
id: "s2", title: "Oak Latte", subtitle: "Deep earth tones.", category: "Classic", value: "Balanced"},
|
||
{
|
||
id: "s3", title: "Strawberry Matcha", subtitle: "A vibrant ritual.", category: "Specialty", value: "Refreshing"},
|
||
]}
|
||
title="The Drink That Started the Line"
|
||
description="Rich. Nutty. Silky. Finished with a cloud of cream that melts into every sip."
|
||
/>
|
||
</div>
|
||
|
||
<div id="pour" data-section="pour">
|
||
<TextAbout
|
||
useInvertedBackground={true}
|
||
title="This Isn’t Coffee. It’s a Performance."
|
||
buttons={[
|
||
{
|
||
text: "The Ritual", href: "#"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="experience" data-section="experience">
|
||
<FeatureCardTwentyEight
|
||
animationType="slide-up"
|
||
textboxLayout="split-description"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "w1", title: "Efficient Service", subtitle: "Our line moves fast.", category: "Staff", value: "Swift"},
|
||
{
|
||
id: "w2", title: "Consistent Craft", subtitle: "Every pour is perfect.", category: "Standard", value: "Always"},
|
||
{
|
||
id: "w3", title: "Intimate Soho", subtitle: "Designed for sipping.", category: "Atmosphere", value: "Alive"},
|
||
]}
|
||
title="People Don’t Wait for Coffee. They Wait for This."
|
||
description="In the cold. In the snow. Around the corner. Because some things aren't meant to be rushed."
|
||
/>
|
||
</div>
|
||
|
||
<div id="menu" data-section="menu">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "p1", name: "Brown Butter Oat Latte", price: "$8", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg"},
|
||
{
|
||
id: "p2", name: "Oak Latte", price: "$7", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg"},
|
||
{
|
||
id: "p3", name: "Strawberry Matcha", price: "$7.50", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg"},
|
||
{
|
||
id: "p4", name: "Hot Chocolate", price: "$6", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg"},
|
||
{
|
||
id: "p5", name: "Classic Espresso", price: "$4", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg"},
|
||
{
|
||
id: "p6", name: "Paradiso Blend Bag", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg"},
|
||
]}
|
||
title="Signature Menu"
|
||
description="Crafted slowly. Served intentionally. Gone too quickly."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "rotated-rays-animated"}}
|
||
tag="Visit Today"
|
||
title="Find Your Moment"
|
||
description="Current wait: ~10–15 minutes."
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-portrait_1296-433.jpg"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="left"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoText="CAFFÈ PARADISO"
|
||
columns={[
|
||
{
|
||
title: "Location", items: [
|
||
{
|
||
label: "Soho, NYC", href: "#contact"},
|
||
],
|
||
},
|
||
{
|
||
title: "Social", items: [
|
||
{
|
||
label: "Instagram", href: "#"},
|
||
{
|
||
label: "TikTok", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Support", items: [
|
||
{
|
||
label: "Privacy Policy", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|