Files
a447c4fc-853e-47bf-8fec-3fb…/src/app/page.tsx
2026-05-06 16:41:51 +00:00

385 lines
12 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="blurBottom"
cardStyle="gradient-radial"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Rooms",
id: "rooms",
},
{
name: "About",
id: "about",
},
{
name: "Amenities",
id: "features",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="IronHostel"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "plain",
}}
title="Urban Grit, Modern Comfort"
description="Experience the pulse of the city in our hand-crafted industrial sanctuary designed for travelers, digital nomads, and urban explorers."
buttons={[
{
text: "Book Your Stay",
href: "#pricing",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/hotel-guest-having-fun-with-tablet_482257-81606.jpg?_wi=1"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/empty-cold-season-ski-resorts_482257-76518.jpg",
alt: "Guest profile",
},
{
src: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg",
alt: "Guest profile",
},
{
src: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg",
alt: "Guest profile",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-teens-table_23-2147678822.jpg",
alt: "Guest profile",
},
{
src: "http://img.b2bpic.net/free-photo/blond-man-angry-expression_1194-1881.jpg",
alt: "Guest profile",
},
]}
avatarText="Join 5,000+ happy travelers"
marqueeItems={[
{
type: "text",
text: "24/7 Reception",
},
{
type: "text",
text: "High-speed Wi-Fi",
},
{
type: "text",
text: "Central Location",
},
{
type: "text",
text: "Industrial Style",
},
{
type: "text",
text: "Community Events",
},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="A Sanctuary in the City"
description="Born from a repurposed warehouse, our hostel blends history with contemporary design to create a unique living experience."
bulletPoints={[
{
title: "Historical Vibe",
description: "Authentic brick walls and original steel beams.",
},
{
title: "Community Focus",
description: "Lounge areas meant for connection.",
},
{
title: "Modern Amenities",
description: "High-speed Wi-Fi and ergonomic workspaces.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/teen-receiving-psychotherapy-advice-support-emotional-issues_482257-117668.jpg?_wi=1"
mediaAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "1",
title: "24/7 Access",
tags: [
"Safety",
"Comfort",
],
imageSrc: "http://img.b2bpic.net/free-photo/older-couple-ringing-service-bell_482257-81644.jpg",
},
{
id: "2",
title: "Kitchen Lounge",
tags: [
"Social",
"Kitchen",
],
imageSrc: "http://img.b2bpic.net/free-photo/self-service-restaurant_93675-130913.jpg",
},
{
id: "3",
title: "Co-working Hub",
tags: [
"Work",
"Fast Wi-Fi",
],
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-laptop-table_23-2147689208.jpg",
},
]}
title="Everything You Need"
description="Thoughtfully designed spaces that cater to every type of traveler."
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Private Loft",
price: "$90/night",
variant: "Loft",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-modern-bedroom-interior-design_23-2151978961.jpg",
},
{
id: "2",
name: "4-Bed Dorm",
price: "$35/night",
variant: "Shared",
imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-laptop-relaxing-bed_23-2148304962.jpg",
},
{
id: "3",
name: "6-Bed Dorm",
price: "$28/night",
variant: "Shared",
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-hostel_52683-121729.jpg",
},
{
id: "4",
name: "Deluxe Suite",
price: "$120/night",
variant: "Private",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-pregnant-woman-laying-bed_23-2149072928.jpg",
},
{
id: "5",
name: "Standard Bed",
price: "$25/night",
variant: "Shared",
imageSrc: "http://img.b2bpic.net/free-photo/daylight-shining-through-unmade-bed_53876-65502.jpg",
},
{
id: "6",
name: "Female Dorm",
price: "$30/night",
variant: "Shared",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cozy-bed-arrangement-with-coffee-cup_23-2150326113.jpg",
},
]}
title="Our Lodging Options"
description="Choose between private sanctuaries or shared social dorms."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "1",
title: "Weekly Pass",
price: "$200",
period: "/week",
features: [
"Kitchen access",
"Laundry included",
],
button: {
text: "Select",
},
imageSrc: "http://img.b2bpic.net/free-photo/teenage-boys-sitting-together-empty-canteen_53876-13468.jpg",
imageAlt: "Teenage boys sitting together in a empty canteen",
},
{
id: "2",
title: "Monthly Pass",
price: "$750",
period: "/month",
features: [
"Priority check-in",
"Free workspace access",
],
button: {
text: "Select",
},
imageSrc: "http://img.b2bpic.net/free-photo/hotel-guest-having-fun-with-tablet_482257-81606.jpg?_wi=2",
imageAlt: "Teenage boys sitting together in a empty canteen",
},
{
id: "3",
title: "Nomad Package",
price: "$50",
period: "/day",
features: [
"Coffee daily",
"High-speed internet",
],
button: {
text: "Select",
},
imageSrc: "http://img.b2bpic.net/free-photo/teen-receiving-psychotherapy-advice-support-emotional-issues_482257-117668.jpg?_wi=2",
imageAlt: "Teenage boys sitting together in a empty canteen",
},
]}
title="Flexible Stays"
description="Simple rates, no hidden fees."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="This place redefined my hostel experience. Industrial design combined with super cozy vibes. Will be coming back!"
rating={5}
author="Marcus Thorne"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/blond-man-angry-expression_1194-1881.jpg",
alt: "Marcus",
},
{
src: "http://img.b2bpic.net/free-photo/sunlight-falling-serious-young-man-standing-against-concrete-wall_23-2148130271.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-handsome-hipster-guy-dressed-jeans-jacket-posing-with-crossed-arms-isolated-dark-background_613910-21322.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
alt: "User",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Is parking available?",
content: "Yes, public parking is nearby.",
},
{
id: "2",
title: "Are linens provided?",
content: "Yes, we provide fresh linens and towels.",
},
{
id: "3",
title: "Can I check in late?",
content: "Yes, our keyless system is 24/7.",
},
]}
sideTitle="Common Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Reach Out"
description="Have questions about your stay? Drop us a line."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
]}
imageSrc="http://img.b2bpic.net/free-photo/minimalist-hallways-background_23-2149745326.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="IronHostel"
copyrightText="© 2025 IronHostel. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}