Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-08 18:59:16 +00:00

View File

@@ -16,399 +16,161 @@ import TextAbout from '@/components/sections/about/TextAbout';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#hero",
},
{
name: "Ambiance",
id: "#about",
},
{
name: "Menu",
id: "#products",
},
{
name: "Experiences",
id: "#features",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="The Dera"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "#hero" },
{ name: "Ambiance", id: "#about" },
{ name: "Menu", id: "#products" },
{ name: "Experiences", id: "#features" },
{ name: "Contact", id: "#contact" },
]}
brandName="The Dera"
button={{ text: "Contact", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
background={{
variant: "gradient-bars",
}}
title="Where Nights Come Alive"
description="Premium sheesha, signature chai, and luxury café moments. The Dera is where peaceful evenings and meaningful connections unfold in an atmosphere designed for comfort and elegance."
testimonials={[
{
name: "Sarah A.",
handle: "@sarah_a",
testimonial: "The perfect escape from the city. Truly the most elegant sheesha lounge in town.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tz1ays",
},
{
name: "Mark R.",
handle: "@mark_r",
testimonial: "Signature chai is unmatched. Atmosphere is quiet and perfect for business meetings.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=44mp59",
},
{
name: "Layla K.",
handle: "@layla_k",
testimonial: "Finally a place where we can talk in peace. The privacy booths are a lifesaver.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=51sp4k",
},
{
name: "James L.",
handle: "@james_l",
testimonial: "Sophisticated environment and impeccable service. The go-to spot for late nights.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qde1b3",
},
{
name: "Sofia M.",
handle: "@sofia_m",
testimonial: "Exquisite attention to detail. Every moment here feels curated and luxurious.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xjcest",
},
]}
buttons={[
{
text: "Reserve Your Night",
href: "#contact",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvkkc8&_wi=1"
imageAlt="luxury lounge night atmosphere"
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvkkc8",
alt: "portrait adult professional happy",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xbp5tm",
alt: "elegant woman smiling portrait",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=icevk5",
alt: "man relaxing portrait cafe",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2mwe9m",
alt: "happy customer smiling photo",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v7lfah",
alt: "young professional portrait",
},
]}
marqueeItems={[
{
type: "text",
text: "Private Seating",
},
{
type: "text",
text: "Artisanal Chai",
},
{
type: "text",
text: "Premium Hookah",
},
{
type: "text",
text: "Late Night Vibes",
},
{
type: "text",
text: "Luxury Lounge",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
background={{ variant: "gradient-bars" }}
title="Where Nights Come Alive"
description="Premium sheesha, signature chai, and luxury café moments. The Dera is where peaceful evenings and meaningful connections unfold in an atmosphere designed for comfort and elegance."
testimonials={[
{ name: "Sarah A.", handle: "@sarah_a", testimonial: "The perfect escape from the city. Truly the most elegant sheesha lounge in town.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tz1ays" },
{ name: "Mark R.", handle: "@mark_r", testimonial: "Signature chai is unmatched. Atmosphere is quiet and perfect for business meetings.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=44mp59" },
{ name: "Layla K.", handle: "@layla_k", testimonial: "Finally a place where we can talk in peace. The privacy booths are a lifesaver.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=51sp4k" },
{ name: "James L.", handle: "@james_l", testimonial: "Sophisticated environment and impeccable service. The go-to spot for late nights.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qde1b3" },
{ name: "Sofia M.", handle: "@sofia_m", testimonial: "Exquisite attention to detail. Every moment here feels curated and luxurious.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xjcest" },
]}
buttons={[{ text: "Reserve Your Night", href: "#contact" }]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvkkc8"
imageAlt="luxury lounge night atmosphere"
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvkkc8", alt: "portrait adult professional happy" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xbp5tm", alt: "elegant woman smiling portrait" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=icevk5", alt: "man relaxing portrait cafe" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2mwe9m", alt: "happy customer smiling photo" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v7lfah", alt: "young professional portrait" },
]}
marqueeItems={[{ type: "text", text: "Private Seating" }, { type: "text", text: "Artisanal Chai" }, { type: "text", text: "Premium Hookah" }, { type: "text", text: "Late Night Vibes" }, { type: "text", text: "Luxury Lounge" }]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={true}
title="A Private Haven in the Heart of the City"
buttons={[
{
text: "Learn More",
href: "#features",
},
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout useInvertedBackground={true} title="A Private Haven in the Heart of the City" buttons={[{ text: "Learn More", href: "#features" }]} />
</div>
<div id="features" data-section="features">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Peaceful Ambiance",
description: "Soundproofed corners and hushed volumes ensure your conversations remain private and undisturbed.",
phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=icevk5",
},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=so02sh",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvkkc8&_wi=2",
imageAlt: "chai pouring luxury cafe",
},
{
title: "Premium Sheesha",
description: "Hand-selected blends served with refined tradition, focusing on quality and clean, aromatic clouds.",
phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2mwe9m",
},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rkm0ka",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xbp5tm",
imageAlt: "chai pouring luxury cafe",
},
{
title: "Signature Chai",
description: "Our signature chai is slow-brewed using organic spices and locally sourced milk for an authentic experience.",
phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v7lfah",
},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=chig6w",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=de4e79&_wi=1",
imageAlt: "chai pouring luxury cafe",
},
]}
showStepNumbers={false}
title="More Than Just a Café"
description="Experience our curated nighttime offerings designed for your peace of mind."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
showStepNumbers={false}
title="More Than Just a Café"
description="Experience our curated nighttime offerings designed for your peace of mind."
features={[
{ title: "Peaceful Ambiance", description: "Soundproofed corners and hushed volumes ensure your conversations remain private and undisturbed.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=icevk5" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=so02sh" } },
{ title: "Premium Sheesha", description: "Hand-selected blends served with refined tradition, focusing on quality and clean, aromatic clouds.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2mwe9m" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rkm0ka" } },
{ title: "Signature Chai", description: "Our signature chai is slow-brewed using organic spices and locally sourced milk for an authentic experience.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v7lfah" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=chig6w" } },
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Saffron Chai",
price: "$8",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=de4e79&_wi=2",
},
{
id: "2",
name: "Signature Sheesha",
price: "$35",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j5chxf",
},
{
id: "3",
name: "Espresso Shot",
price: "$5",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qtrpus",
},
{
id: "4",
name: "Gourmet Dessert",
price: "$12",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oel7y1",
},
{
id: "5",
name: "Cooling Mocktail",
price: "$9",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pfh644",
},
{
id: "6",
name: "Premium Nuts Mix",
price: "$7",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4bf6yx",
},
]}
title="Our Signature Menu"
description="A refined selection of beverages and light bites to enhance your evening."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
title="Our Signature Menu"
description="A refined selection of beverages and light bites to enhance your evening."
products={[
{ id: "1", name: "Saffron Chai", price: "$8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=de4e79" },
{ id: "2", name: "Signature Sheesha", price: "$35", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j5chxf" },
{ id: "3", name: "Espresso Shot", price: "$5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qtrpus" },
{ id: "4", name: "Gourmet Dessert", price: "$12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oel7y1" },
{ id: "5", name: "Cooling Mocktail", price: "$9", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pfh644" },
{ id: "6", name: "Premium Nuts Mix", price: "$7", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4bf6yx" },
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "10+",
title: "Private Booths",
items: [
"Privacy guaranteed",
"Comfort seating",
],
},
{
id: "2",
value: "24/7",
title: "Service Excellence",
items: [
"Always available",
"Expert servers",
],
},
{
id: "3",
value: "100%",
title: "Quality Assured",
items: [
"Handmade blends",
"Fresh ingredients",
],
},
]}
title="The Dera Standards"
description="Defined by privacy, quality, and community."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="The Dera Standards"
description="Defined by privacy, quality, and community."
metrics={[
{ id: "1", value: "10+", title: "Private Booths", items: ["Privacy guaranteed", "Comfort seating"] },
{ id: "2", value: "24/7", title: "Service Excellence", items: ["Always available", "Expert servers"] },
{ id: "3", value: "100%", title: "Quality Assured", items: ["Handmade blends", "Fresh ingredients"] },
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah A.",
role: "CEO",
testimonial: "A sanctuary. Perfect for my late evening wind-downs.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r901ij",
},
{
id: "2",
name: "Mark R.",
role: "Architect",
testimonial: "Space design here is impeccable. Truly world-class ambiance.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d4n4ws",
},
{
id: "3",
name: "Layla K.",
role: "Artist",
testimonial: "The chai and the quiet make it my favorite place.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ilpsvu",
},
{
id: "4",
name: "James L.",
role: "Developer",
testimonial: "Unbeatable service. They really respect your privacy.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xpkx10",
},
{
id: "5",
name: "Sofia M.",
role: "Manager",
testimonial: "Everything is curated to perfection. A beautiful experience.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lnjxdu",
},
]}
title="What Our Guests Say"
description="Join the circle of those who appreciate the fine art of relaxing."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="What Our Guests Say"
description="Join the circle of those who appreciate the fine art of relaxing."
testimonials={[
{ id: "1", name: "Sarah A.", role: "CEO", testimonial: "A sanctuary. Perfect for my late evening wind-downs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r901ij" },
{ id: "2", name: "Mark R.", role: "Architect", testimonial: "Space design here is impeccable. Truly world-class ambiance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d4n4ws" },
{ id: "3", name: "Layla K.", role: "Artist", testimonial: "The chai and the quiet make it my favorite place.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ilpsvu" },
{ id: "4", name: "James L.", role: "Developer", testimonial: "Unbeatable service. They really respect your privacy.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xpkx10" },
{ id: "5", name: "Sofia M.", role: "Manager", testimonial: "Everything is curated to perfection. A beautiful experience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lnjxdu" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Do I need a reservation?",
content: "Reservations are recommended for private booths but we welcome walk-ins based on availability.",
},
{
id: "2",
title: "Is the lounge open late?",
content: "Yes, we operate until the early hours to provide a perfect late-night social experience.",
},
{
id: "3",
title: "Is parking available?",
content: "Valet parking is available right outside the main entrance for all our guests.",
},
]}
sideTitle="Common Questions"
sideDescription="Everything you need to know about your next visit to The Dera."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
sideTitle="Common Questions"
sideDescription="Everything you need to know about your next visit to The Dera."
faqsAnimation="slide-up"
faqs={[
{ id: "1", title: "Do I need a reservation?", content: "Reservations are recommended for private booths but we welcome walk-ins based on availability." },
{ id: "2", title: "Is the lounge open late?", content: "Yes, we operate until the early hours to provide a perfect late-night social experience." },
{ id: "3", title: "Is parking available?", content: "Valet parking is available right outside the main entrance for all our guests." },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Visit Us"
title="Reserve Your Night"
description="Secure your private booth or contact us for group inquiries."
buttons={[
{
text: "Book Now",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Visit Us"
title="Reserve Your Night"
description="Secure your private booth or contact us for group inquiries."
buttons={[{ text: "Book Now", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="The Dera"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Terms of Service",
href: "#",
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="The Dera"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);