bender/eac6902c-bcd6-4270-a142-83f7fda67b98
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-04-17 02:16:28 +00:00
parent c55c535b8c
commit e9e6fe4486
1 changed files with 160 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

511
src/app/page.tsx
View File

@@ -17,368 +17,177 @@ import { Bell, Waves, Wifi } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
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">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "About",
id: "about",
},
{
name: "Features",
id: "features",
},
{
name: "Rooms",
id: "rooms",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Bird Rock"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Rooms", id: "rooms" },
{ name: "Pricing", id: "pricing" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
brandName="Bird Rock"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Bird Rock Hotels: Luxury & Comfort in Cape Coast"
description="Experience unparalleled hospitality and serene coastal views. Your sanctuary away from home."
imageSrc="http://img.b2bpic.net/free-photo/positive-calm-woman-light-summer-dress-straw-hat-tropical-location_343596-3151.jpg?_wi=1"
imageAlt="Bird Rock Hotels Exterior"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/aegean-sea-coast-greece-loutra-buildings-located-near-rocky-cliffs-greenery-blue-water-view-from-drone_1268-16375.jpg",
alt: "Guest 1",
},
{
src: "http://img.b2bpic.net/free-photo/beautiful-embankment-walking-sport-amara-dolce-vita-luxury-hotel-alanya-turkey_146671-18884.jpg",
alt: "Guest 2",
},
{
src: "http://img.b2bpic.net/free-photo/woman-white-dress-summer-resort-hotel-wearing-sunglasses-stylish-accessories_285396-199.jpg",
alt: "Guest 3",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-girl-have-morning-near-sea-get-up-stay-luxury-terrace_496169-1950.jpg",
alt: "Guest 4",
},
{
src: "http://img.b2bpic.net/free-photo/tourist-with-binoculars_1385-2747.jpg",
alt: "Guest 5",
},
]}
avatarText="Trusted by 5,000+ satisfied guests"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Bird Rock Hotels: Luxury & Comfort in Cape Coast"
description="Experience unparalleled hospitality and serene coastal views. Your sanctuary away from home."
imageSrc="http://img.b2bpic.net/free-photo/positive-calm-woman-light-summer-dress-straw-hat-tropical-location_343596-3151.jpg"
imageAlt="Bird Rock Hotels Exterior"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/aegean-sea-coast-greece-loutra-buildings-located-near-rocky-cliffs-greenery-blue-water-view-from-drone_1268-16375.jpg", alt: "Guest 1" },
{ src: "http://img.b2bpic.net/free-photo/beautiful-embankment-walking-sport-amara-dolce-vita-luxury-hotel-alanya-turkey_146671-18884.jpg", alt: "Guest 2" },
{ src: "http://img.b2bpic.net/free-photo/woman-white-dress-summer-resort-hotel-wearing-sunglasses-stylish-accessories_285396-199.jpg", alt: "Guest 3" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-girl-have-morning-near-sea-get-up-stay-luxury-terrace_496169-1950.jpg", alt: "Guest 4" },
{ src: "http://img.b2bpic.net/free-photo/tourist-with-binoculars_1385-2747.jpg", alt: "Guest 5" },
]}
avatarText="Trusted by 5,000+ satisfied guests"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "Welcome to Bird Rock Hotels",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/sofa-decoration-livingroom-interior_74190-7313.jpg",
alt: "Hotel Lobby",
},
{
type: "text",
content: "Our mission is to provide an unforgettable stay where luxury meets tranquility. We blend contemporary design with the raw beauty of the Cape Coast to create a truly restorative experience.",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "Welcome to Bird Rock Hotels" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/sofa-decoration-livingroom-interior_74190-7313.jpg", alt: "Hotel Lobby" },
{ type: "text", content: "Our mission is to provide an unforgettable stay where luxury meets tranquility. We blend contemporary design with the raw beauty of the Cape Coast to create a truly restorative experience." },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
icon: Waves,
title: "Infinity Pool",
description: "Relax in our crystal clear infinity pool overlooking the ocean.",
},
{
icon: Bell,
title: "Concierge Service",
description: "24/7 personal assistance to ensure your needs are met.",
},
{
icon: Wifi,
title: "High Speed WiFi",
description: "Stay connected with premium fiber optic internet.",
},
]}
title="Premium Hotel Services"
description="Indulge in amenities designed for ultimate guest satisfaction."
/>
</div>
<div id="features" data-section="features">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ icon: Waves, title: "Infinity Pool", description: "Relax in our crystal clear infinity pool overlooking the ocean." },
{ icon: Bell, title: "Concierge Service", description: "24/7 personal assistance to ensure your needs are met." },
{ icon: Wifi, title: "High Speed WiFi", description: "Stay connected with premium fiber optic internet." },
]}
title="Premium Hotel Services"
description="Indulge in amenities designed for ultimate guest satisfaction."
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Deluxe Ocean View",
price: "$300/night",
imageSrc: "http://img.b2bpic.net/free-photo/nice-lit-lamp-table_1203-546.jpg",
},
{
id: "2",
name: "Family Suite",
price: "$450/night",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-luxury-bedroom-suite-bathroom_105762-1945.jpg",
},
{
id: "3",
name: "Presidential Suite",
price: "$800/night",
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-sitting-yard-drinking-whiskey_1157-13374.jpg",
},
{
id: "4",
name: "Standard Room",
price: "$180/night",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2065.jpg",
},
{
id: "5",
name: "Ocean King Suite",
price: "$350/night",
imageSrc: "http://img.b2bpic.net/free-photo/bedroom-background-luxury-hotel-nobody_1203-4488.jpg",
},
{
id: "6",
name: "Classic Queen Room",
price: "$220/night",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2058.jpg",
},
]}
title="Our Luxurious Rooms"
description="Choose from our premium suites crafted for your comfort."
/>
</div>
<div id="rooms" data-section="rooms">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "1", name: "Deluxe Ocean View", price: "$300/night", imageSrc: "http://img.b2bpic.net/free-photo/nice-lit-lamp-table_1203-546.jpg" },
{ id: "2", name: "Family Suite", price: "$450/night", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-luxury-bedroom-suite-bathroom_105762-1945.jpg" },
{ id: "3", name: "Presidential Suite", price: "$800/night", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-sitting-yard-drinking-whiskey_1157-13374.jpg" },
{ id: "4", name: "Standard Room", price: "$180/night", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2065.jpg" },
{ id: "5", name: "Ocean King Suite", price: "$350/night", imageSrc: "http://img.b2bpic.net/free-photo/bedroom-background-luxury-hotel-nobody_1203-4488.jpg" },
{ id: "6", name: "Classic Queen Room", price: "$220/night", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2058.jpg" },
]}
title="Our Luxurious Rooms"
description="Choose from our premium suites crafted for your comfort."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{
id: "basic",
title: "Frequent Guest",
price: "$150",
period: "yearly",
features: [
"10% off bookings",
"Free Breakfast",
],
button: {
text: "Join Now",
},
imageSrc: "http://img.b2bpic.net/free-photo/elegant-dessert-with-ice-cream-flowers-blue-plate_23-2151973733.jpg",
imageAlt: "hotel infinity pool ocean sunset",
},
{
id: "pro",
title: "Loyal Member",
price: "$350",
period: "yearly",
features: [
"20% off bookings",
"Suite Upgrades",
"Late Checkout",
],
button: {
text: "Join Now",
},
imageSrc: "http://img.b2bpic.net/free-photo/positive-calm-woman-light-summer-dress-straw-hat-tropical-location_343596-3151.jpg?_wi=2",
imageAlt: "hotel infinity pool ocean sunset",
},
{
id: "elite",
title: "Elite Platinum",
price: "$600",
period: "yearly",
features: [
"30% off bookings",
"Concierge Perks",
"Airport Transfer",
],
button: {
text: "Join Now",
},
imageSrc: "http://img.b2bpic.net/free-photo/sofa-decoration-livingroom-interior_74190-7313.jpg",
imageAlt: "hotel infinity pool ocean sunset",
},
]}
title="Membership Plans"
description="Join our rewards program for exclusive rates and perks."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{ id: "basic", title: "Frequent Guest", price: "$150", period: "yearly", features: ["10% off bookings", "Free Breakfast"], button: { text: "Join Now" }, imageSrc: "http://img.b2bpic.net/free-photo/elegant-dessert-with-ice-cream-flowers-blue-plate_23-2151973733.jpg", imageAlt: "hotel infinity pool ocean sunset" },
{ id: "pro", title: "Loyal Member", price: "$350", period: "yearly", features: ["20% off bookings", "Suite Upgrades", "Late Checkout"], button: { text: "Join Now" }, imageSrc: "http://img.b2bpic.net/free-photo/positive-calm-woman-light-summer-dress-straw-hat-tropical-location_343596-3151.jpg", imageAlt: "hotel infinity pool ocean sunset" },
{ id: "elite", title: "Elite Platinum", price: "$600", period: "yearly", features: ["30% off bookings", "Concierge Perks", "Airport Transfer"], button: { text: "Join Now" }, imageSrc: "http://img.b2bpic.net/free-photo/sofa-decoration-livingroom-interior_74190-7313.jpg", imageAlt: "hotel infinity pool ocean sunset" },
]}
title="Membership Plans"
description="Join our rewards program for exclusive rates and perks."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Miller",
handle: "@smiller",
testimonial: "An incredible experience. The view was breathtaking.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-lying-bed_1150-8836.jpg",
},
{
id: "2",
name: "James Bond",
handle: "@jbond",
testimonial: "Top tier service and luxury. Highly recommended.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-bathrobes-drinking-champagne-while-relaxing-bed-hotel-room_637285-7668.jpg",
},
{
id: "3",
name: "Emma Watson",
handle: "@ewatson",
testimonial: "Perfect location and very clean rooms. I will be back.",
imageSrc: "http://img.b2bpic.net/free-photo/girl-skates-skateboard_1321-1104.jpg",
},
{
id: "4",
name: "David Clark",
handle: "@dclark",
testimonial: "The staff were so attentive. Truly a 5-star experience.",
imageSrc: "http://img.b2bpic.net/free-photo/girl-skates-skateboard_1321-1103.jpg",
},
{
id: "5",
name: "Lucy Liu",
handle: "@lliu",
testimonial: "Peaceful atmosphere. Exactly what I needed for my vacation.",
imageSrc: "http://img.b2bpic.net/free-photo/confident-outline-business-side-face-male_1194-3839.jpg",
},
]}
title="Guest Reviews"
description="What our guests say about their stay at Bird Rock Hotels."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah Miller", handle: "@smiller", testimonial: "An incredible experience. The view was breathtaking.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-lying-bed_1150-8836.jpg" },
{ id: "2", name: "James Bond", handle: "@jbond", testimonial: "Top tier service and luxury. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-bathrobes-drinking-champagne-while-relaxing-bed-hotel-room_637285-7668.jpg" },
{ id: "3", name: "Emma Watson", handle: "@ewatson", testimonial: "Perfect location and very clean rooms. I will be back.", imageSrc: "http://img.b2bpic.net/free-photo/girl-skates-skateboard_1321-1104.jpg" },
{ id: "4", name: "David Clark", handle: "@dclark", testimonial: "The staff were so attentive. Truly a 5-star experience.", imageSrc: "http://img.b2bpic.net/free-photo/girl-skates-skateboard_1321-1103.jpg" },
{ id: "5", name: "Lucy Liu", handle: "@lliu", testimonial: "Peaceful atmosphere. Exactly what I needed for my vacation.", imageSrc: "http://img.b2bpic.net/free-photo/confident-outline-business-side-face-male_1194-3839.jpg" },
]}
title="Guest Reviews"
description="What our guests say about their stay at Bird Rock Hotels."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Is breakfast included?",
content: "Yes, breakfast is included in all room bookings.",
},
{
id: "2",
title: "Is parking available?",
content: "Free guest parking is provided on-site.",
},
{
id: "3",
title: "Are pets allowed?",
content: "We are a pet-friendly hotel. Please notify us upon booking.",
},
]}
mediaAnimation="slide-up"
title="Common Questions"
description="Find answers to our frequently asked questions."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/large-room-with-large-window-couch-with-pillows-it_188544-27425.jpg"
imageAlt="Relaxing lounge area"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "Is breakfast included?", content: "Yes, breakfast is included in all room bookings." },
{ id: "2", title: "Is parking available?", content: "Free guest parking is provided on-site." },
{ id: "3", title: "Are pets allowed?", content: "We are a pet-friendly hotel. Please notify us upon booking." },
]}
mediaAnimation="slide-up"
title="Common Questions"
description="Find answers to our frequently asked questions."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/large-room-with-large-window-couch-with-pillows-it_188544-27425.jpg"
imageAlt="Relaxing lounge area"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Contact Us"
description="Reach out to us for bookings or inquiries."
inputs={[
{
name: "name",
type: "text",
placeholder: "Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
]}
imageSrc="http://img.b2bpic.net/free-photo/coffee-break-spacious-office-lobby_1098-13052.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Contact Us"
description="Reach out to us for bookings or inquiries."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
]}
imageSrc="http://img.b2bpic.net/free-photo/coffee-break-spacious-office-lobby_1098-13052.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Resources",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="Bird Rock Hotels"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Resources", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
],
},
]}
logoText="Bird Rock Hotels"
/>
</div>
</ReactLenis>
</ThemeProvider>
);