Update src/app/page.tsx

This commit is contained in:
2026-05-23 12:16:43 +00:00
parent 48688570c3
commit cad326a4fd

View File

@@ -19,301 +19,143 @@ export default function LandingPage() {
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Suites",
id: "suites",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Tarifa Lodge"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Suites", id: "suites" },
{ name: "Contact", id: "contact" },
]}
brandName="Tarifa Lodge"
button={{ text: "Book Now", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
background={{
variant: "gradient-bars",
}}
title="Where Mediterranean Calm Meets Wild Atlantic"
description="Luxury ecoretreats in Tarifa designed for slow mornings, sea air, and unforgettable sunsets. Hidden between pine forests and the Atlantic coastline, Tarifa Lodge is an intimate sanctuary for travelers seeking privacy, design, and connection with nature."
buttons={[
{
text: "Reserve Your Escape",
href: "#contact",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-rocky-shore-with-sea-views_181624-26481.jpg",
imageAlt: "Lodge exterior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-tropical-beach-sea-around-samui-island-with-coconut-palm-tree-other-sunset-time_74190-9032.jpg",
imageAlt: "Terrace view",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-santorini-garden_23-2151977287.jpg",
imageAlt: "Suite interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/resort-relax-lifestyle-blue-chair_1203-4634.jpg",
imageAlt: "Pool at sunrise",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/etro-pics-flowers-fauna_52683-95207.jpg",
imageAlt: "Atlantic coastline",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-calm-happy-caucasian-fit-slim-woman-crop-cami-top-pants-set-alone-rocky-tropical-beach-sunset_343596-742.jpg",
imageAlt: "Forest retreat",
},
]}
mediaAnimation="slide-up"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
background={{ variant: "gradient-bars" }}
title="Where Mediterranean Calm Meets Wild Atlantic"
description="Luxury ecoretreats in Tarifa designed for slow mornings, sea air, and unforgettable sunsets. Hidden between pine forests and the Atlantic coastline, Tarifa Lodge is an intimate sanctuary for travelers seeking privacy, design, and connection with nature."
buttons={[{ text: "Reserve Your Escape", href: "#contact" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-rocky-shore-with-sea-views_181624-26481.jpg", imageAlt: "Lodge exterior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-tropical-beach-sea-around-samui-island-with-coconut-palm-tree-other-sunset-time_74190-9032.jpg", imageAlt: "Terrace view" },
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-santorini-garden_23-2151977287.jpg", imageAlt: "Suite interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/resort-relax-lifestyle-blue-chair_1203-4634.jpg", imageAlt: "Pool at sunrise" },
{ imageSrc: "http://img.b2bpic.net/free-photo/etro-pics-flowers-fauna_52683-95207.jpg", imageAlt: "Atlantic coastline" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-calm-happy-caucasian-fit-slim-woman-crop-cami-top-pants-set-alone-rocky-tropical-beach-sunset_343596-742.jpg", imageAlt: "Forest retreat" }
]}
mediaAnimation="slide-up"
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Travel & Leisure",
"Condé Nast",
"Architectural Digest",
"Vogue Living",
"Boutique Hotelier",
"Luxury Retreats",
"Global Explorer",
]}
title="Featured In"
description="Trusted by the world's leading travel and design publications."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["Travel & Leisure", "Condé Nast", "Architectural Digest", "Vogue Living", "Boutique Hotelier", "Luxury Retreats", "Global Explorer"]}
title="Featured In"
description="Trusted by the world's leading travel and design publications."
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="An Intimate Sanctuary for Conscious Travelers"
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="An Intimate Sanctuary for Conscious Travelers"
/>
</div>
<div id="suites" data-section="suites">
<ProductCardFour
animationType="slide-up"
textboxLayout="split"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Forest View Suite",
price: "From €450",
variant: "Minimalist",
imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-with-home-items-coziness-comfort-home_169016-6341.jpg",
},
{
id: "p2",
name: "Atlantic Panorama",
price: "From €550",
variant: "Premium",
imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929508.jpg",
},
{
id: "p3",
name: "Garden Private Oasis",
price: "From €400",
variant: "Classic",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-laptop-vacation_1303-14400.jpg",
},
{
id: "p4",
name: "Pine Haven Studio",
price: "From €350",
variant: "Compact",
imageSrc: "http://img.b2bpic.net/free-photo/luxury-hotel-suite-with-modern-elegance-comfort-generated-by-ai_188544-21265.jpg",
},
{
id: "p5",
name: "Sunset Terrace Villa",
price: "From €650",
variant: "Exclusive",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-swim-wear-by-ocean_1303-15363.jpg",
},
{
id: "p6",
name: "Ocean Breath Suite",
price: "From €500",
variant: "Deluxe",
imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263566.jpg",
},
]}
title="Signature Accommodations"
description="Four unique suites designed for total privacy, restorative rest, and breathtaking views."
/>
</div>
<div id="suites" data-section="suites">
<ProductCardFour
animationType="slide-up"
textboxLayout="split"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Forest View Suite", price: "From €450", variant: "Minimalist", imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-with-home-items-coziness-comfort-home_169016-6341.jpg" },
{ id: "p2", name: "Atlantic Panorama", price: "From €550", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929508.jpg" },
{ id: "p3", name: "Garden Private Oasis", price: "From €400", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-laptop-vacation_1303-14400.jpg" },
{ id: "p4", name: "Pine Haven Studio", price: "From €350", variant: "Compact", imageSrc: "http://img.b2bpic.net/free-photo/luxury-hotel-suite-with-modern-elegance-comfort-generated-by-ai_188544-21265.jpg" },
{ id: "p5", name: "Sunset Terrace Villa", price: "From €650", variant: "Exclusive", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-swim-wear-by-ocean_1303-15363.jpg" },
{ id: "p6", name: "Ocean Breath Suite", price: "From €500", variant: "Deluxe", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263566.jpg" }
]}
title="Signature Accommodations"
description="Four unique suites designed for total privacy, restorative rest, and breathtaking views."
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
negativeCard={{
items: [
"No television distraction",
"No city noise interference",
"No generic resort crowds",
"No artificial light pollution",
],
}}
positiveCard={{
items: [
"High-speed fiber connectivity",
"In-room wellness kits",
"Curated local guides",
"Personal concierge service",
],
}}
title="Designed for Connection"
description="Experience balance in the wild Atlantic landscape."
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
negativeCard={{ items: ["No television distraction", "No city noise interference", "No generic resort crowds", "No artificial light pollution"] }}
positiveCard={{ items: ["High-speed fiber connectivity", "In-room wellness kits", "Curated local guides", "Personal concierge service"] }}
title="Designed for Connection"
description="Experience balance in the wild Atlantic landscape."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Elena Rossi",
handle: "@elena_travels",
testimonial: "The perfect balance of design and nature.",
imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-touches-her-silk-brown-scarf-attractive-young-girl-eyeglasses-white-blouse-smiles-outside_197531-27109.jpg",
},
{
id: "t2",
name: "Marc Chen",
handle: "@marc_works",
testimonial: "Inspired work and absolute tranquility.",
imageSrc: "http://img.b2bpic.net/free-photo/scene-with-diverse-young-people-being-digital-nomads-working-remotely-from-dreamy-locations_23-2151187844.jpg",
},
{
id: "t3",
name: "Sarah Jenkins",
handle: "@sarahj",
testimonial: "Unforgettable sunsets and total privacy.",
imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-grey-jacket-sunglasses-showing-peace-signs-outside-cheerful-darkhaired-girl-suit-widely-siles-walks-around-city_197531-29870.jpg",
},
{
id: "t4",
name: "Tom Baker",
handle: "@tombaker",
testimonial: "A sanctuary for soul searching.",
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-african-man-early-morning-with-bicycle_171337-12956.jpg",
},
{
id: "t5",
name: "Chloe Vance",
handle: "@chloev",
testimonial: "Luxury redefined. Simply beautiful.",
imageSrc: "http://img.b2bpic.net/free-photo/attractive-lovely-girl-black-top-blue-shirt-wearing-sunglasses-looking-aside-with-smile-enjoying-walking-outside-sunny-warm-day_291650-2659.jpg",
},
]}
title="Stories from the Lodge"
description="What our guests say about their retreat."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Elena Rossi", handle: "@elena_travels", testimonial: "The perfect balance of design and nature.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-touches-her-silk-brown-scarf-attractive-young-girl-eyeglasses-white-blouse-smiles-outside_197531-27109.jpg" },
{ id: "t2", name: "Marc Chen", handle: "@marc_works", testimonial: "Inspired work and absolute tranquility.", imageSrc: "http://img.b2bpic.net/free-photo/scene-with-diverse-young-people-being-digital-nomads-working-remotely-from-dreamy-locations_23-2151187844.jpg" },
{ id: "t3", name: "Sarah Jenkins", handle: "@sarahj", testimonial: "Unforgettable sunsets and total privacy.", imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-grey-jacket-sunglasses-showing-peace-signs-outside-cheerful-darkhaired-girl-suit-widely-siles-walks-around-city_197531-29870.jpg" },
{ id: "t4", name: "Tom Baker", handle: "@tombaker", testimonial: "A sanctuary for soul searching.", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-african-man-early-morning-with-bicycle_171337-12956.jpg" },
{ id: "t5", name: "Chloe Vance", handle: "@chloev", testimonial: "Luxury redefined. Simply beautiful.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-lovely-girl-black-top-blue-shirt-wearing-sunglasses-looking-aside-with-smile-enjoying-walking-outside-sunny-warm-day_291650-2659.jpg" }
]}
title="Stories from the Lodge"
description="What our guests say about their retreat."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "What is the best way to travel?",
content: "We recommend flying into Malaga or Gibraltar.",
},
{
id: "f2",
title: "Is WiFi reliable for work?",
content: "Yes, we provide dedicated high-speed fiber.",
},
{
id: "f3",
title: "Are meals included?",
content: "Breakfast is included in all suite rates.",
},
]}
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about your escape."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "What is the best way to travel?", content: "We recommend flying into Malaga or Gibraltar." },
{ id: "f2", title: "Is WiFi reliable for work?", content: "Yes, we provide dedicated high-speed fiber." },
{ id: "f3", title: "Are meals included?", content: "Breakfast is included in all suite rates." }
]}
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about your escape."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
text="Your Mediterranean escape awaits. Let us curate your perfect Tarifa Lodge experience."
buttons={[
{
text: "Contact Concierge",
href: "mailto:hello@tarifalodge.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
text="Your Mediterranean escape awaits. Let us curate your perfect Tarifa Lodge experience."
buttons={[{ text: "Contact Concierge", href: "mailto:hello@tarifalodge.com" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Suites",
href: "#suites",
},
{
label: "About",
href: "#about",
},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="Tarifa Lodge"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Tarifa Lodge"
columns={[
{ items: [{ label: "Suites", href: "#suites" }, { label: "About", href: "#about" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);