Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
463
src/app/page.tsx
463
src/app/page.tsx
@@ -28,344 +28,147 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Skyline"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Experience", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Skyline"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Elevate Your Evening"
|
||||
description="Experience premium dining and handcrafted cocktails at Pretoria's most iconic rooftop lounge. Breathtaking views, sophisticated atmosphere, and unforgettable moments."
|
||||
tag="PREMIUM ROOFTOP DINING"
|
||||
buttons={[
|
||||
{
|
||||
text: "Reserve a Table",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-mystical-other-worldly-sky_23-2150946944.jpg",
|
||||
imageAlt: "Skyline rooftop restaurant view",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-with-apple-cider-slices-apples-white-background-top-view_185193-165844.jpg",
|
||||
imageAlt: "Signature cocktails",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/scene-with-diverse-young-people-being-digital-nomads-working-remotely-from-dreamy-locations_23-2151187855.jpg",
|
||||
imageAlt: "Scene with diverse young people being digital nomads and working remotely from dreamy locations",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/miami-bayside-landscape_23-2151636354.jpg",
|
||||
imageAlt: "Miami bayside landscape",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-admiring-city-view_23-2149444939.jpg",
|
||||
imageAlt: "Full shot people admiring city view",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Rated 4.3/5 by over 1,700 guests"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Elevate Your Evening"
|
||||
description="Experience premium dining and handcrafted cocktails at Pretoria's most iconic rooftop lounge. Breathtaking views, sophisticated atmosphere, and unforgettable moments."
|
||||
tag="PREMIUM ROOFTOP DINING"
|
||||
buttons={[{ text: "Reserve a Table", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-mystical-other-worldly-sky_23-2150946944.jpg", imageAlt: "Skyline rooftop restaurant view" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/glasses-with-apple-cider-slices-apples-white-background-top-view_185193-165844.jpg", imageAlt: "Signature cocktails" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Rated 4.3/5 by over 1,700 guests"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Unmatched Skyline Experience"
|
||||
metrics={[
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Location",
|
||||
value: "Loftus Park",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Hours",
|
||||
value: "12pm - 10:30pm",
|
||||
},
|
||||
{
|
||||
icon: Wine,
|
||||
label: "Vibe",
|
||||
value: "Refined Lounge",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Unmatched Skyline Experience"
|
||||
metrics={[
|
||||
{ icon: MapPin, label: "Location", value: "Loftus Park" },
|
||||
{ icon: Clock, label: "Hours", value: "12pm - 10:30pm" },
|
||||
{ icon: Wine, label: "Vibe", value: "Refined Lounge" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Artisan Cocktail A",
|
||||
price: "R120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/alcoholic-cocktail-with-fused-sugar-bronze-glass-bar-table_627829-6439.jpg",
|
||||
imageAlt: "Signature artisan drink",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Handcrafted Mojito",
|
||||
price: "R95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-wooden-board-with-baileys-cocktail-it_141793-4194.jpg",
|
||||
imageAlt: "Fresh mojito",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Gourmet Tapas Platter",
|
||||
price: "R280",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-canape-with-chicken-fish-with-herbs-it_181624-41727.jpg",
|
||||
imageAlt: "Gourmet tapas",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Truffle Fries",
|
||||
price: "R75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fried-salmon-fillet-with-sauce-top_140725-6436.jpg",
|
||||
imageAlt: "Truffle fries",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Premium Gin Tonic",
|
||||
price: "R110",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337732.jpg",
|
||||
imageAlt: "Gin and tonic",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Decadent Chocolate Lava",
|
||||
price: "R150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profiteroles-chocolate-sauce-inside-white-plate_114579-2550.jpg",
|
||||
imageAlt: "Chocolate dessert",
|
||||
},
|
||||
]}
|
||||
title="Signature Flavors"
|
||||
description="Explore our chef-curated menu and mixologist's selection."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Artisan Cocktail A", price: "R120", imageSrc: "http://img.b2bpic.net/free-photo/alcoholic-cocktail-with-fused-sugar-bronze-glass-bar-table_627829-6439.jpg", imageAlt: "Signature artisan drink" },
|
||||
{ id: "p2", name: "Handcrafted Mojito", price: "R95", imageSrc: "http://img.b2bpic.net/free-photo/man-holding-wooden-board-with-baileys-cocktail-it_141793-4194.jpg", imageAlt: "Fresh mojito" },
|
||||
{ id: "p3", name: "Gourmet Tapas Platter", price: "R280", imageSrc: "http://img.b2bpic.net/free-photo/closeup-canape-with-chicken-fish-with-herbs-it_181624-41727.jpg", imageAlt: "Gourmet tapas" },
|
||||
{ id: "p4", name: "Truffle Fries", price: "R75", imageSrc: "http://img.b2bpic.net/free-photo/fried-salmon-fillet-with-sauce-top_140725-6436.jpg", imageAlt: "Truffle fries" },
|
||||
{ id: "p5", name: "Premium Gin Tonic", price: "R110", imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337732.jpg", imageAlt: "Gin and tonic" },
|
||||
{ id: "p6", name: "Decadent Chocolate Lava", price: "R150", imageSrc: "http://img.b2bpic.net/free-photo/profiteroles-chocolate-sauce-inside-white-plate_114579-2550.jpg", imageAlt: "Chocolate dessert" },
|
||||
]}
|
||||
title="Signature Flavors"
|
||||
description="Explore our chef-curated menu and mixologist's selection."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1.7K+",
|
||||
description: "Happy Reviews",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "4.3",
|
||||
description: "Star Rating",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Daily",
|
||||
description: "Fresh Ingredients",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Skyline"
|
||||
description="Join thousands of satisfied guests who choose us for their nights out."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1.7K+", description: "Happy Reviews" },
|
||||
{ id: "m2", value: "4.3", description: "Star Rating" },
|
||||
{ id: "m3", value: "Daily", description: "Fresh Ingredients" },
|
||||
]}
|
||||
title="Why Choose Skyline"
|
||||
description="Join thousands of satisfied guests who choose us for their nights out."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah",
|
||||
role: "Foodie",
|
||||
company: "Pretoria Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spectacular-woman-with-dark-long-hair-smiling-coffee-break_291650-641.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark",
|
||||
role: "Corporate",
|
||||
company: "Regular Guest",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-guy-sitting-bar-counter_23-2148016837.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena",
|
||||
role: "Tourist",
|
||||
company: "Frequent Visitor",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-668.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David",
|
||||
role: "Professional",
|
||||
company: "Pretoria Hub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-male-with-tattoos-arms-dressed-red-christmas-pants-using-tablet-pc-room-with-loft-interior_613910-14658.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Chloe",
|
||||
role: "Designer",
|
||||
company: "Creative Class",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-drink_23-2150124828.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.8",
|
||||
label: "Cocktail Quality",
|
||||
},
|
||||
{
|
||||
value: "4.7",
|
||||
label: "Service Excellence",
|
||||
},
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Ambiance Rating",
|
||||
},
|
||||
]}
|
||||
title="Guest Stories"
|
||||
description="See what our regulars have to say about the Skyline atmosphere."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah", role: "Foodie", company: "Pretoria Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/spectacular-woman-with-dark-long-hair-smiling-coffee-break_291650-641.jpg" },
|
||||
{ id: "t2", name: "Mark", role: "Corporate", company: "Regular Guest", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pensive-guy-sitting-bar-counter_23-2148016837.jpg" },
|
||||
{ id: "t3", name: "Elena", role: "Tourist", company: "Frequent Visitor", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-668.jpg" },
|
||||
{ id: "t4", name: "David", role: "Professional", company: "Pretoria Hub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-male-with-tattoos-arms-dressed-red-christmas-pants-using-tablet-pc-room-with-loft-interior_613910-14658.jpg" },
|
||||
{ id: "t5", name: "Chloe", role: "Designer", company: "Creative Class", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-drink_23-2150124828.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.8", label: "Cocktail Quality" },
|
||||
{ value: "4.7", label: "Service Excellence" },
|
||||
{ value: "4.9", label: "Ambiance Rating" },
|
||||
]}
|
||||
title="Guest Stories"
|
||||
description="See what our regulars have to say about the Skyline atmosphere."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Are reservations required?",
|
||||
content: "Yes, we highly recommend booking in advance to secure your table.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is there outdoor seating?",
|
||||
content: "We offer beautiful outdoor terrace seating with amazing skyline views.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you serve cocktails?",
|
||||
content: "Our professional mixologists craft exceptional signature cocktails daily.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Are reservations required?", content: "Yes, we highly recommend booking in advance to secure your table." },
|
||||
{ id: "f2", title: "Is there outdoor seating?", content: "We offer beautiful outdoor terrace seating with amazing skyline views." },
|
||||
{ id: "f3", title: "Do you serve cocktails?", content: "Our professional mixologists craft exceptional signature cocktails daily." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Spot"
|
||||
description="Secure your table for an unforgettable evening at Skyline Rooftop."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
type: "date",
|
||||
placeholder: "Preferred Date",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "notes",
|
||||
placeholder: "Number of guests or special requests...",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-table-with-elegant-setting-restaurant-evening_181624-24647.jpg"
|
||||
buttonText="Confirm Reservation"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Spot"
|
||||
description="Secure your table for an unforgettable evening at Skyline Rooftop."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "date", type: "date", placeholder: "Preferred Date", required: true },
|
||||
]}
|
||||
textarea={{ name: "notes", placeholder: "Number of guests or special requests..." }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-table-with-elegant-setting-restaurant-evening_181624-24647.jpg"
|
||||
buttonText="Confirm Reservation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/terrace-hotel-stuffed-with-soft-furnitures-green-space_114579-2724.jpg"
|
||||
logoText="SKYLINE"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigate",
|
||||
items: [
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "012 030 0420",
|
||||
href: "tel:0120300420",
|
||||
},
|
||||
{
|
||||
label: "Arcadia, Pretoria",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Skyline Rooftop"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/terrace-hotel-stuffed-with-soft-furnitures-green-space_114579-2724.jpg"
|
||||
logoText="SKYLINE"
|
||||
columns={[
|
||||
{ title: "Navigate", items: [{ label: "Menu", href: "#products" }, { label: "Book Now", href: "#contact" }] },
|
||||
{ title: "Contact", items: [{ label: "012 030 0420", href: "tel:0120300420" }, { label: "Arcadia, Pretoria", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2025 Skyline Rooftop"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user