Merge version_1 into main #2
268
src/app/page.tsx
268
src/app/page.tsx
@@ -25,184 +25,108 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Gramios"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Gramios"
|
||||
button={{ text: "Order Now", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
logoText="Gramios"
|
||||
description="Experience interactive 3D café ambiance from your screen. Explore our curated menu, meet us, and taste the difference."
|
||||
buttons={[
|
||||
{
|
||||
text: "Enter Gramios",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-sunlight_23-2151961378.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
videoSrc="https://www.w3schools.com/howto/rain.mp4?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "radial-gradient" }}
|
||||
logoText="Gramios"
|
||||
description="Experience interactive 3D café ambiance from your screen. Explore our curated menu, meet us, and taste the difference."
|
||||
buttons={[{ text: "Enter Gramios", href: "#about" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/coffee-sunlight_23-2151961378.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
videoSrc="https://www.w3schools.com/howto/rain.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Coffee Culture"
|
||||
description="At Gramios, we believe coffee is an experience. Combining high-quality beans with a warm, ambient space, we create the perfect backdrop for your daily moments."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-portrait-smiling-curly-redhead-bearded-man-tasting-coffee-cup_171337-9999.jpg"
|
||||
videoSrc="https://www.w3schools.com/howto/rain.mp4?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Coffee Culture"
|
||||
description="At Gramios, we believe coffee is an experience. Combining high-quality beans with a warm, ambient space, we create the perfect backdrop for your daily moments."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-portrait-smiling-curly-redhead-bearded-man-tasting-coffee-cup_171337-9999.jpg"
|
||||
videoSrc="https://www.w3schools.com/howto/rain.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Gramios",
|
||||
name: "Signature Latte",
|
||||
price: "INR 250",
|
||||
rating: 5,
|
||||
reviewCount: "124",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-glasses-tasty-coffee_23-2148254964.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Gramios",
|
||||
name: "Drip Special",
|
||||
price: "INR 180",
|
||||
rating: 4,
|
||||
reviewCount: "89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-glass-with-delicious-coffee_23-2149703761.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Gramios",
|
||||
name: "Butter Croissant",
|
||||
price: "INR 150",
|
||||
rating: 5,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shop-assistant-preparing-croissant-bag_23-2147985156.jpg",
|
||||
},
|
||||
]}
|
||||
title="Curated Menu"
|
||||
description="Explore our premium selection of specialty coffees and artisan pastries."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Gramios", name: "Signature Latte", price: "INR 250", rating: 5, reviewCount: "124", imageSrc: "http://img.b2bpic.net/free-photo/front-view-glasses-tasty-coffee_23-2148254964.jpg" },
|
||||
{ id: "p2", brand: "Gramios", name: "Drip Special", price: "INR 180", rating: 4, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-glass-with-delicious-coffee_23-2149703761.jpg" },
|
||||
{ id: "p3", brand: "Gramios", name: "Butter Croissant", price: "INR 150", rating: 5, reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/shop-assistant-preparing-croissant-bag_23-2147985156.jpg" }
|
||||
]}
|
||||
title="Curated Menu"
|
||||
description="Explore our premium selection of specialty coffees and artisan pastries."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The best atmosphere for remote work in the city! The coffee is consistently excellent and the space is so aesthetic."
|
||||
rating={5}
|
||||
author="Sarah M."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-latin-girl-smiling-happy-standing-city_839833-16273.jpg",
|
||||
alt: "Sarah M.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/artist-thinking_23-2147781630.jpg",
|
||||
alt: "John D.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-dressed-summer-clothes-trendy-girl-posing-street-funny-positive-woman-having-fun_158538-6274.jpg",
|
||||
alt: "Lisa K.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3575.jpg",
|
||||
alt: "Mark R.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-latin-girl-smiling-happy-standing-city_839833-16273.jpg",
|
||||
alt: "Elena R.",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The best atmosphere for remote work in the city! The coffee is consistently excellent and the space is so aesthetic."
|
||||
rating={5}
|
||||
author="Sarah M."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-latin-girl-smiling-happy-standing-city_839833-16273.jpg", alt: "Sarah M." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/artist-thinking_23-2147781630.jpg", alt: "John D." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-dressed-summer-clothes-trendy-girl-posing-street-funny-positive-woman-having-fun_158538-6274.jpg", alt: "Lisa K." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3575.jpg", alt: "Mark R." },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-latin-girl-smiling-happy-standing-city_839833-16273.jpg", alt: "Elena R." }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Stay Connected"
|
||||
description="Join our newsletter for updates on events, seasonal brews, and exclusive café happenings."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Visit Us"
|
||||
title="Stay Connected"
|
||||
description="Join our newsletter for updates on events, seasonal brews, and exclusive café happenings."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Gramios"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Gramios Café"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Gramios"
|
||||
columns={[
|
||||
{
|
||||
title: "Links", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Menu", href: "#products" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Social", items: [
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "Twitter", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Gramios Café"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user