Files
768f23fb-7066-4366-afa7-995…/src/app/page.tsx
2025-12-31 21:38:18 +02:00

241 lines
9.0 KiB
TypeScript

"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Building2, Headset, Heart, Star, UtensilsCrossed, Users, Wifi } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="grid"
cardStyle="gradient-radial"
primaryButtonStyle="layered-depth"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Luxe Haven"
navItems={[
{ name: "Home", id: "hero" },
{ name: "Rooms", id: "feature" },
{ name: "About", id: "about" },
{ name: "Guest Reviews", id: "testimonial" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Luxe Haven"
description="Experience unparalleled luxury and comfort at our five-star hotel. Discover elegantly appointed rooms, world-class amenities, and exceptional hospitality."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg"
imageAlt="Luxury hotel lobby entrance"
frameStyle="card"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
title="Where Elegance Meets Hospitality. Over two decades of creating unforgettable memories for our guests."
useInvertedBackground="noInvert"
metrics={[
{ icon: Building2, label: "Rooms Available", value: "250+" },
{ icon: Star, label: "Guest Rating", value: "4.9/5" },
{ icon: Users, label: "Satisfied Guests", value: "50K+" },
{ icon: Award, label: "Years Excellence", value: "20+" }
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardSeven
title="Our Room Categories"
description="Choose from a selection of beautifully designed rooms tailored to your needs"
tag="Accommodations"
features={[
{
id: 1,
title: "Deluxe Rooms",
description: "Spacious rooms with premium furnishings, city views, and modern amenities for the discerning traveler.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
},
{
id: 2,
title: "Standard Rooms",
description: "Comfortable and well-appointed rooms perfect for business travelers and families seeking quality accommodation.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
},
{
id: 3,
title: "Executive Suites",
description: "Luxurious suites with separate living areas, premium bedding, and exclusive access to our lounge facilities.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg"
}
]}
textboxLayout="default"
animationType="blur-reveal"
useInvertedBackground="noInvert"
/>
</div>
<div id="metric" data-section="metric">
<MetricCardSix
title="Premium Amenities & Services"
description="World-class facilities designed for your comfort and relaxation"
tag="Services"
metrics={[
{
id: "1",
value: "24/7",
tag: "Concierge",
tagIcon: Headset,
title: "Round-the-Clock Concierge Service"
},
{
id: "2",
value: "5★",
tag: "Dining",
tagIcon: UtensilsCrossed,
title: "Award-Winning Restaurants"
},
{
id: "3",
value: "∞",
tag: "Wellness",
title: "Full-Service Spa & Wellness Center"
},
{
id: "4",
value: "100%",
tag: "WiFi",
tagIcon: Wifi,
title: "High-Speed Internet Throughout"
}
]}
gridVariant="four-items-2x2-equal-grid"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardTwelve
cardTitle="Join thousands of delighted guests who have experienced the Luxe Haven difference"
cardTag="Guest Testimonials"
cardTagIcon={Heart}
testimonials={[
{
id: "1",
name: "Sarah Mitchell",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
imageAlt: "Sarah Mitchell"
},
{
id: "2",
name: "James Richardson",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
imageAlt: "James Richardson"
},
{
id: "3",
name: "Emma Watson",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
imageAlt: "Emma Watson"
},
{
id: "4",
name: "Michael Chen",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
imageAlt: "Michael Chen"
},
{
id: "5",
name: "Victoria Brooks",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
imageAlt: "Victoria Brooks"
},
{
id: "6",
name: "Daniel Foster",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
imageAlt: "Daniel Foster"
}
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to book your perfect getaway? Contact our reservations team today and let us create an unforgettable experience for you."
animationType="entrance-slide"
buttons={[
{ text: "Book Now", href: "#" },
{ text: "Request Information", href: "#" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Luxe Haven"
columns={[
{
title: "Hotel",
items: [
{ label: "Rooms & Suites", href: "#" },
{ label: "Amenities", href: "#" },
{ label: "Dining", href: "#" },
{ label: "Spa & Wellness", href: "#" }
]
},
{
title: "Guest Services",
items: [
{ label: "Reservations", href: "#" },
{ label: "Group Bookings", href: "#" },
{ label: "Corporate Events", href: "#" },
{ label: "Travel Packages", href: "#" }
]
},
{
title: "About",
items: [
{ label: "Our Story", href: "#" },
{ label: "Awards", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Contact",
items: [
{ label: "Phone: +1 (555) 123-4567", href: "#" },
{ label: "Email: info@luxehaven.com", href: "#" },
{ label: "Address: 123 Luxury Lane", href: "#" },
{ label: "Check Availability", href: "#" }
]
}
]}
copyrightText="© 2025 Luxe Haven Hotel. All rights reserved."
/>
</div>
</ThemeProvider>
);
}