289 lines
8.6 KiB
TypeScript
289 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "#hero",
|
|
},
|
|
{
|
|
name: "Story",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Menu",
|
|
id: "#menu",
|
|
},
|
|
{
|
|
name: "Gallery",
|
|
id: "#gallery",
|
|
},
|
|
{
|
|
name: "Visit",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Beanthere Cafe"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Hidden in the heart of Saigon."
|
|
description="Coffee, nature, and quiet moments in a lush urban sanctuary."
|
|
buttons={[
|
|
{
|
|
text: "Explore Menu",
|
|
href: "#menu",
|
|
},
|
|
{
|
|
text: "Visit Us",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6fjIGO3F887PD5twGMiqUPxz0/uploaded-1779504333144-wvjap62y.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
title="A hidden urban sanctuary designed for slow mornings and meaningful conversations."
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Artisan Espresso",
|
|
price: "65k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-hot-coffee_53876-146517.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Cappucino",
|
|
price: "85k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pink-juice-glass-cup-with-yellow-pipes-blue-background-high-quality-photo_114579-53150.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Matcha Garden",
|
|
price: "75k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-male-barista-putting-coffee-filter_23-2148824413.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Tropical tea",
|
|
price: "55k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hot-matcha-latte_1339-4130.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Signature Cold Brew",
|
|
price: "70k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fruit-cocktail-table_140725-8200.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Creamy milk cafe",
|
|
price: "120k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-close-up-view-appetizing-cake-blue-plate-cake-table_140725-123517.jpg",
|
|
},
|
|
]}
|
|
title="Signature Coffee"
|
|
description="Handcrafted brews and seasonal delights."
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<FeatureCardSix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Rooftop Calm",
|
|
description: "Zen seating high above the busy street.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-wearing-total-denim-outfit_23-2150105183.jpg",
|
|
},
|
|
{
|
|
title: "Indoor Art",
|
|
description: "Curated decor in every corner.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/busy-attractive-young-modern-businesswoman-prepare-project-reading-article-sit-near-window-cafe-table-drink-coffee-thinking-look-laptop-display-female-student-tutor-make-arrangements-future-lesson_197531-30632.jpg",
|
|
},
|
|
{
|
|
title: "Garden Light",
|
|
description: "Natural sun filtering through lush foliage.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-city-building-with-daylight-shadows_23-2149080232.jpg",
|
|
},
|
|
]}
|
|
title="A Garden Experience"
|
|
description="Peaceful escapes from city chaos."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureCardSix
|
|
textboxLayout="inline-image"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Morning Brew",
|
|
description: "The perfect cup.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-delicious-iced-coffee_52683-91641.jpg",
|
|
},
|
|
{
|
|
title: "Tropical Lush",
|
|
description: "Greenery everywhere.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-reading-sitting-cafe_176420-5935.jpg",
|
|
},
|
|
{
|
|
title: "Architectural Texture",
|
|
description: "Refined urban materials.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-empty-table-chair_1339-6719.jpg",
|
|
},
|
|
]}
|
|
title="The Visual Escape"
|
|
description="Moments of stillness in District 1."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Anna Nguyen",
|
|
role: "Creative",
|
|
company: "Saigon Design",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-talking-phone_158595-1007.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "David Tran",
|
|
role: "Architect",
|
|
company: "Urban Lab",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-coffee-urban-cafe_158595-686.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Sarah Vo",
|
|
role: "Writer",
|
|
company: "Freelance",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/start-day-with-coffee-newspaper_329181-11562.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Minh Pham",
|
|
role: "Developer",
|
|
company: "Tech Corp",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businessman-coffee-shop_1150-6316.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Chloe Le",
|
|
role: "Designer",
|
|
company: "Studio X",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-daughter-porch_23-2147663772.jpg",
|
|
},
|
|
]}
|
|
title="Stories from the Garden"
|
|
description="Voices of our community."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "rotated-rays-static",
|
|
}}
|
|
text="Visit us in the heart of District 1."
|
|
buttons={[
|
|
{
|
|
text: "Reserve Now",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Beanthere Cafe",
|
|
items: [
|
|
{
|
|
label: "District 1, Ho Chi Minh",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Navigation",
|
|
items: [
|
|
{
|
|
label: "Story",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Menu",
|
|
href: "#menu",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Beanthere Cafe"
|
|
bottomRightText="Built with love in Saigon"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|