Merge version_1 into main #2
443
src/app/page.tsx
443
src/app/page.tsx
@@ -16,318 +16,157 @@ import { Heart, Shield, Sun } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Spaces",
|
||||
id: "spaces",
|
||||
},
|
||||
{
|
||||
name: "Book Now",
|
||||
id: "booking",
|
||||
},
|
||||
]}
|
||||
brandName="Bali Villa"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Spaces", id: "spaces" },
|
||||
{ name: "Book Now", id: "booking" },
|
||||
]}
|
||||
brandName="Bali Villa"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Your Private Luxury Escape"
|
||||
description="A modern villa designed for unforgettable family moments and peaceful summer stays."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now via WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-house-lamp-with-futuristic-design_23-2151037462.jpg?_wi=1"
|
||||
imageAlt="Luxury villa interior"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-relaxing-their-wooden-home_23-2151335847.jpg",
|
||||
alt: "Happy guest profile 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-sisters-sitting-bed-near-window_8353-7596.jpg",
|
||||
alt: "Happy guest profile 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-woman-playing-piano_52683-98044.jpg",
|
||||
alt: "Happy guest profile 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/country-musicians-lifestyle-indoors_23-2151169628.jpg",
|
||||
alt: "Happy guest profile 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151119035.jpg",
|
||||
alt: "Happy guest profile 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by families worldwide"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Your Private Luxury Escape"
|
||||
description="A modern villa designed for unforgettable family moments and peaceful summer stays."
|
||||
buttons={[{ text: "Book Now via WhatsApp", href: "https://wa.me/yournumber" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-house-lamp-with-futuristic-design_23-2151037462.jpg"
|
||||
imageAlt="Luxury villa interior"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/people-relaxing-their-wooden-home_23-2151335847.jpg", alt: "Happy guest profile 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-sisters-sitting-bed-near-window_8353-7596.jpg", alt: "Happy guest profile 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-woman-playing-piano_52683-98044.jpg", alt: "Happy guest profile 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/country-musicians-lifestyle-indoors_23-2151169628.jpg", alt: "Happy guest profile 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151119035.jpg", alt: "Happy guest profile 5" },
|
||||
]}
|
||||
avatarText="Trusted by families worldwide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Authentic Privacy"
|
||||
description={[
|
||||
"Experience the perfect harmony of modern minimalism and cozy luxury. Our villa is designed for families seeking complete privacy in a peaceful, sun-drenched environment.",
|
||||
"Every corner reflects sophisticated comfort, ensuring your stay is nothing short of extraordinary.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Authentic Privacy"
|
||||
description={[
|
||||
"Experience the perfect harmony of modern minimalism and cozy luxury. Our villa is designed for families seeking complete privacy in a peaceful, sun-drenched environment.", "Every corner reflects sophisticated comfort, ensuring your stay is nothing short of extraordinary."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="spaces" data-section="spaces">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Modern Kitchen",
|
||||
description: "Fully equipped open kitchen for gourmet moments.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-breakfast-with-mobile-phone_657883-345.jpg",
|
||||
imageAlt: "Kitchen View 1",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-black-toddler-eating_23-2149310677.jpg",
|
||||
imageAlt: "Kitchen View 2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-house-lamp-with-futuristic-design_23-2151037462.jpg?_wi=2",
|
||||
imageAlt: "modern open kitchen luxury home",
|
||||
},
|
||||
{
|
||||
title: "Elegant Lounge",
|
||||
description: "Comfortable seating designed for quality family time.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pillow-sofa_74190-4565.jpg",
|
||||
imageAlt: "Lounge View 1",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-interior-anime-style_23-2151176358.jpg",
|
||||
imageAlt: "Lounge View 2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-chandelier-couch-with-number-pillows-large-chandelier_188544-27064.jpg",
|
||||
imageAlt: "modern open kitchen luxury home",
|
||||
},
|
||||
{
|
||||
title: "Natural Light",
|
||||
description: "Bright, airy spaces with warm neutral textures.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-modern-house-kitchen-dining-room_181624-2870.jpg",
|
||||
imageAlt: "Space View 1",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/living-room-without-electric-light-inside-modern-house-blackout_123827-35881.jpg",
|
||||
imageAlt: "Space View 2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151118971.jpg?_wi=1",
|
||||
imageAlt: "modern open kitchen luxury home",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Living Spaces"
|
||||
description="Thoughtfully designed areas for relaxation and connection."
|
||||
/>
|
||||
</div>
|
||||
<div id="spaces" data-section="spaces">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Modern Kitchen", description: "Fully equipped open kitchen for gourmet moments.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/woman-having-breakfast-with-mobile-phone_657883-345.jpg", imageAlt: "Kitchen View 1" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-black-toddler-eating_23-2149310677.jpg", imageAlt: "Kitchen View 2" },
|
||||
},
|
||||
{
|
||||
title: "Elegant Lounge", description: "Comfortable seating designed for quality family time.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/pillow-sofa_74190-4565.jpg", imageAlt: "Lounge View 1" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-interior-anime-style_23-2151176358.jpg", imageAlt: "Lounge View 2" },
|
||||
},
|
||||
{
|
||||
title: "Natural Light", description: "Bright, airy spaces with warm neutral textures.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-modern-house-kitchen-dining-room_181624-2870.jpg", imageAlt: "Space View 1" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/living-room-without-electric-light-inside-modern-house-blackout_123827-35881.jpg", imageAlt: "Space View 2" },
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Living Spaces"
|
||||
description="Thoughtfully designed areas for relaxation and connection."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
title: "Private",
|
||||
description: "Total seclusion for your family group.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Summer",
|
||||
title: "Atmosphere",
|
||||
description: "Calm, relaxing, and ready for you.",
|
||||
icon: Sun,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Gather",
|
||||
title: "Gathering",
|
||||
description: "Perfect for meaningful celebrations.",
|
||||
icon: Heart,
|
||||
},
|
||||
]}
|
||||
title="The Bali Villa Experience"
|
||||
description="Everything we do is focused on your comfort and peace."
|
||||
/>
|
||||
</div>
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "Private", description: "Total seclusion for your family group.", icon: Shield },
|
||||
{ id: "m2", value: "Summer", title: "Atmosphere", description: "Calm, relaxing, and ready for you.", icon: Sun },
|
||||
{ id: "m3", value: "Gather", title: "Gathering", description: "Perfect for meaningful celebrations.", icon: Heart },
|
||||
]}
|
||||
title="The Bali Villa Experience"
|
||||
description="Everything we do is focused on your comfort and peace."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Master Suite",
|
||||
price: "Luxury",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151118971.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Bath & Wellness",
|
||||
price: "Modern",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-bathroom-background-zoom-calls_23-2149684467.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Private Pool",
|
||||
price: "Refresh",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hotel-pool-resort_74190-1618.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Terrace",
|
||||
price: "Calm",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rustic-deck-with-patio-furniture-vegetation_23-2150698400.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Balcony View",
|
||||
price: "Scenery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beaujtiful-woman-luxury-travcel-house_23-2149140843.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Dining Space",
|
||||
price: "Gather",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dining-table-with-plates-interior-design_23-2148848671.jpg",
|
||||
},
|
||||
]}
|
||||
title="Cinematic Gallery"
|
||||
description="A glimpse of your next summer destination."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Master Suite", price: "Luxury", imageSrc: "http://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151118971.jpg" },
|
||||
{ id: "p2", name: "Bath & Wellness", price: "Modern", imageSrc: "http://img.b2bpic.net/free-photo/elegant-bathroom-background-zoom-calls_23-2149684467.jpg" },
|
||||
{ id: "p3", name: "Private Pool", price: "Refresh", imageSrc: "http://img.b2bpic.net/free-photo/hotel-pool-resort_74190-1618.jpg" },
|
||||
]}
|
||||
title="Cinematic Gallery"
|
||||
description="A glimpse of your next summer destination."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking" data-section="booking">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "full-villa",
|
||||
title: "Full Villa Rental",
|
||||
price: "Custom",
|
||||
period: "per stay",
|
||||
features: [
|
||||
"Full Kitchen",
|
||||
"Private Grounds",
|
||||
"Family Seating",
|
||||
"High-speed WiFi",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now via WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-summer-holidays_23-2151982718.jpg",
|
||||
},
|
||||
]}
|
||||
title="Book Your Stay"
|
||||
description="Secure your dates and experience luxury."
|
||||
/>
|
||||
</div>
|
||||
<div id="booking" data-section="booking">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "full-villa", title: "Full Villa Rental", price: "Custom", period: "per stay", features: ["Full Kitchen", "Private Grounds", "Family Seating", "High-speed WiFi"],
|
||||
button: { text: "Book Now via WhatsApp", href: "https://wa.me/yournumber" },
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-summer-holidays_23-2151982718.jpg"},
|
||||
]}
|
||||
title="Book Your Stay"
|
||||
description="Secure your dates and experience luxury."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is the location private?",
|
||||
content: "Yes, the villa is fully secluded for your group.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How do I get there?",
|
||||
content: "Detailed map and navigation links are shared upon booking confirmation.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is parking available?",
|
||||
content: "Yes, we provide secure on-site parking for all guests.",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="Location Details"
|
||||
description="Nestled in a peaceful area of Palestine."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-house-lamp-with-futuristic-design_23-2151037462.jpg?_wi=3"
|
||||
imageAlt="Area view"
|
||||
/>
|
||||
</div>
|
||||
<div id="location" data-section="location">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is the location private?", content: "Yes, the villa is fully secluded for your group." },
|
||||
{ id: "q2", title: "How do I get there?", content: "Detailed map and navigation links are shared upon booking confirmation." },
|
||||
{ id: "q3", title: "Is parking available?", content: "Yes, we provide secure on-site parking for all guests." },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="Location Details"
|
||||
description="Nestled in a peaceful area of Palestine."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-house-lamp-with-futuristic-design_23-2151037462.jpg"
|
||||
imageAlt="Area view"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#booking",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Bali Villa"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About Us", href: "#about" }, { label: "Book Now", href: "#booking" }] },
|
||||
{ items: [{ label: "WhatsApp", href: "https://wa.me/yournumber" }, { label: "Instagram", href: "#" }] },
|
||||
]}
|
||||
logoText="Bali Villa"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user