295 lines
10 KiB
TypeScript
295 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Rooms",
|
|
id: "rooms",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Serene Stay"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Welcome to Serene Stay"
|
|
description="Experience unparalleled comfort and luxury in the heart of the city. Your ultimate sanctuary awaits."
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://pixabay.com/get/g9d9f8cef82abe847e7d58358abc98d8dbabdb56eecf01cff16887b138a0a1c5d75cb0b527de1390f1ff6bf3d0381e81b3e8e9fe655cafc7a24bbb2e5a2dff686_1280.jpg",
|
|
imageAlt: "Luxurious Suite",
|
|
},
|
|
{
|
|
imageSrc: "https://pixabay.com/get/ge5ca20c38c11ef25c4c0e471eb40256b1cda2fc8fb9e1205f608525ef7894a9d64ba3305cc9b28e21efcfe2664ea6f92c1706cb06d7b79abe5521a18db2742a0_1280.jpg",
|
|
imageAlt: "Grand Lobby",
|
|
},
|
|
{
|
|
imageSrc: "https://pixabay.com/get/g1e7f3c84db2bc60b89a425b15684783a0092103472364b169cb91ba5b8aca4fbab30181d8c3eaad37589a582289802dc76aa91714ccf38545576c80483059d9d_1280.jpg",
|
|
imageAlt: "Resort Pool",
|
|
},
|
|
{
|
|
imageSrc: "https://pixabay.com/get/g9d9f8cef82abe847e7d58358abc98d8dbabdb56eecf01cff16887b138a0a1c5d75cb0b527de1390f1ff6bf3d0381e81b3e8e9fe655cafc7a24bbb2e5a2dff686_1280.jpg",
|
|
imageAlt: "Comfortable Room",
|
|
},
|
|
{
|
|
imageSrc: "https://pixabay.com/get/ge5ca20c38c11ef25c4c0e471eb40256b1cda2fc8fb9e1205f608525ef7894a9d64ba3305cc9b28e21efcfe2664ea6f92c1706cb06d7b79abe5521a18db2742a0_1280.jpg",
|
|
imageAlt: "Lobby View",
|
|
},
|
|
{
|
|
imageSrc: "https://pixabay.com/get/g1e7f3c84db2bc60b89a425b15684783a0092103472364b169cb91ba5b8aca4fbab30181d8c3eaad37589a582289802dc76aa91714ccf38545576c80483059d9d_1280.jpg",
|
|
imageAlt: "Pool at Sunset",
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "Discover the art of hospitality.",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "https://pixabay.com/get/g4509b2c3e61a9d0556250b74b876ba3309c024235fae3df823864bbcf8df1a5ac1a5cf80640ff1e1ac4e4f5fef6bf6d393b1642c00a20e20f326f701db6c57d0_1280.jpg",
|
|
alt: "Hotel Exterior",
|
|
},
|
|
{
|
|
type: "text",
|
|
content: "Built for discerning travelers, Serene Stay offers a blend of timeless elegance and modern convenience.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="rooms" data-section="rooms">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "r1",
|
|
name: "Deluxe Double",
|
|
price: "$299/night",
|
|
variant: "Mountain View",
|
|
imageSrc: "https://pixabay.com/get/g8ef9ad614b2219bf3417157a390f8df4af898e06333aefaac99ff88372a262abad02293b65b6645612e89ddcbb6deba172f06f66168b693e35cc9eeb91e93b89_1280.jpg",
|
|
},
|
|
{
|
|
id: "r2",
|
|
name: "Luxury King Suite",
|
|
price: "$499/night",
|
|
variant: "City View",
|
|
imageSrc: "https://pixabay.com/get/g57486aca25fc93f1e1695fee19c67f101cdab67fd00f7ddfc19d4aeb608ffa8b743326177f31b7f24637e4607cae753ad267a8b0bc929699d53a88f004a6ff93_1280.jpg",
|
|
},
|
|
{
|
|
id: "r3",
|
|
name: "Premium Queen Room",
|
|
price: "$349/night",
|
|
variant: "Garden View",
|
|
imageSrc: "https://pixabay.com/get/g9fed10589232b00b3d2fca87dac691658136ffdb8f190ec2a8cde3ccff8a3a8f0a10778a4fec9b32e36e7bc6120c29923e42dc0f248885daaa18852a2af9a0ff_1280.jpg",
|
|
},
|
|
{
|
|
id: "r4",
|
|
name: "Family Suite",
|
|
price: "$699/night",
|
|
variant: "City View",
|
|
imageSrc: "https://pixabay.com/get/g191c2a2f372cd79ee63b62aa31955dc8c88875d79cc47ea4620bb46d824f6b3351151b16d0b82a2b348e49ba2158e819eca826c25ca81b88330334c6d805d8ba_1280.jpg",
|
|
},
|
|
{
|
|
id: "r5",
|
|
name: "Boutique Single",
|
|
price: "$199/night",
|
|
variant: "Standard",
|
|
imageSrc: "https://pixabay.com/get/ga90400bc4eee453b4b3377fd7f550a777d3b493a272a4b0cdebb1c73f9094362c6774782f5e482a65102b9b989938110995685653516aaeb752db1db45d12f80_1280.jpg",
|
|
},
|
|
{
|
|
id: "r6",
|
|
name: "Grand Penthouse",
|
|
price: "$999/night",
|
|
variant: "Ocean View",
|
|
imageSrc: "https://pixabay.com/get/g5f3ca98724239ac510f0233d9c5a61c2b2c40cd1cb6fcdfbd74e7e87e9a764f9e1139244a01e7a2ba19e325ddd86cc40a7af876c8f3b38a9a7dc5e7bb46cd97c_1280.jpg",
|
|
},
|
|
]}
|
|
title="Our Accommodations"
|
|
description="Choose from our exquisitely designed rooms and suites for the perfect getaway."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah Miller",
|
|
role: "Traveler",
|
|
company: "UK",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/gf73d4f4460230057dd3ab1059b1e5dedf60a65893e0de367c1934cce3cef4983798359625d41b9b6af527b06fee5c3856f46fe70167c7dc4c5a61c001e8094d8_1280.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "James Wilson",
|
|
role: "Business Guest",
|
|
company: "USA",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/gfedf04869b2967506d74928419da5458ff6aa565fec97d1b89177a5977ad94466cd8c5ed9c04c3f297079b3e7c855631d9eb7c324927d99c5aeec42207d3ae2b_1280.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Emily Chen",
|
|
role: "Vacationer",
|
|
company: "Singapore",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/g5c6c19967876b49256cad073a5a29e27439fc3bdc1b64a92513dff0dc876f577d429bb70859290799ef9fe9371ee80fa4f8542fc18a7619880ae20b87cc3409a_1280.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Mark Johnson",
|
|
role: "Guest",
|
|
company: "Canada",
|
|
rating: 4,
|
|
imageSrc: "https://pixabay.com/get/g99bc42963afabeca3ae5f661da0ab6f2d70a84df6ed4f3b5655a77206bef9e2f77155336097d3b052827bc57a645c9247ed477a3205eed0fdde80097fdfb5efc_1280.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Lisa Schmidt",
|
|
role: "Traveler",
|
|
company: "Germany",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/gb294799ac3f10fecf5dd98d5615748aee654ee1564f6f97c3157696221fc9e37a13b1601136d6bb2ba2a295027507f667fa0048eec8ef129746dc6c39805f61f_1280.jpg",
|
|
},
|
|
]}
|
|
title="Guest Experiences"
|
|
description="What our guests say about their stay at Serene Stay."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "What is the check-in time?",
|
|
content: "Check-in time is 3:00 PM.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Is breakfast included?",
|
|
content: "Yes, breakfast is included in all room bookings.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Do you offer parking?",
|
|
content: "Yes, we provide secure on-site parking for all guests.",
|
|
},
|
|
]}
|
|
title="Frequent Questions"
|
|
description="Common questions regarding your stay."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
text="Ready to book your stay? Contact us today to secure the best rates."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Rooms",
|
|
href: "#rooms",
|
|
},
|
|
{
|
|
label: "Amenities",
|
|
href: "#about",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Policies",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Serene Stay"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|