Update src/app/page.tsx
This commit is contained in:
430
src/app/page.tsx
430
src/app/page.tsx
@@ -29,314 +29,146 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "#menu",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Ocean Garden"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Menu", id: "#menu" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Ocean Garden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Ocean Garden Soekarno Hatta"
|
||||
description="Experience the freshest catch from the deep, served in the heart of the city with elegance and unparalleled taste."
|
||||
buttons={[
|
||||
{
|
||||
text: "Reserve Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glass-plate-delicious-shrimps-with-sliced-lemon-onion-stone-surface_114579-57067.jpg",
|
||||
imageAlt: "Seafood platter",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199326.jpg",
|
||||
imageAlt: "Dining ambiance",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-crawfish-plates_23-2150346614.jpg",
|
||||
imageAlt: "Fresh lobster",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-barman-making-margaritas-with-five-glasses-set-line_181624-23711.jpg",
|
||||
imageAlt: "Cocktail bar",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiter-bringing-fruit-dessert_1262-20486.jpg",
|
||||
imageAlt: "Exquisite dessert",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-interior-design_23-2150794682.jpg",
|
||||
imageAlt: "Restaurant interior",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Ocean Garden Soekarno Hatta"
|
||||
description="Experience the freshest catch from the deep, served in the heart of the city with elegance and unparalleled taste."
|
||||
buttons={[{ text: "Reserve Now", href: "#contact" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/glass-plate-delicious-shrimps-with-sliced-lemon-onion-stone-surface_114579-57067.jpg", imageAlt: "Seafood platter" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199326.jpg", imageAlt: "Dining ambiance" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-crawfish-plates_23-2150346614.jpg", imageAlt: "Fresh lobster" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-barman-making-margaritas-with-five-glasses-set-line_181624-23711.jpg", imageAlt: "Cocktail bar" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/waiter-bringing-fruit-dessert_1262-20486.jpg", imageAlt: "Exquisite dessert" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-interior-design_23-2150794682.jpg", imageAlt: "Restaurant interior" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Taste"
|
||||
description="Ocean Garden Soekarno Hatta combines traditional culinary mastery with modern dining sensibilities, creating a haven for seafood enthusiasts. Our commitment to quality ensures every visit is memorable."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-working-together-professional-kitchen_23-2149728004.jpg"
|
||||
imageAlt="Restaurant story"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Taste"
|
||||
description="Ocean Garden Soekarno Hatta combines traditional culinary mastery with modern dining sensibilities, creating a haven for seafood enthusiasts. Our commitment to quality ensures every visit is memorable."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-working-together-professional-kitchen_23-2149728004.jpg"
|
||||
imageAlt="Restaurant story"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Fish,
|
||||
title: "Grilled Snapper",
|
||||
description: "Freshly caught snapper char-grilled with local herbs.",
|
||||
},
|
||||
{
|
||||
icon: Utensils,
|
||||
title: "Lobster Thermidor",
|
||||
description: "Succulent lobster baked in a creamy, cheesy sauce.",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Chef's Special",
|
||||
description: "Our unique fusion dishes that redefine coastal dining.",
|
||||
},
|
||||
]}
|
||||
title="Our Specialties"
|
||||
description="Discover our signature dishes prepared with passion and the finest oceanic ingredients."
|
||||
/>
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Fish, title: "Grilled Snapper", description: "Freshly caught snapper char-grilled with local herbs." },
|
||||
{ icon: Utensils, title: "Lobster Thermidor", description: "Succulent lobster baked in a creamy, cheesy sauce." },
|
||||
{ icon: Award, title: "Chef's Special", description: "Our unique fusion dishes that redefine coastal dining." },
|
||||
]}
|
||||
title="Our Specialties"
|
||||
description="Discover our signature dishes prepared with passion and the finest oceanic ingredients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Oyster Platter",
|
||||
price: "IDR 250k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dish-made-oysters-with-citrus-ice-cubes_23-2150320482.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Salmon Steak",
|
||||
price: "IDR 300k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/surf-turf_74190-6937.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Prawn Curry",
|
||||
price: "IDR 180k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/kaeng-luang-yellow-curry-with-shrimp-coconut-shoots-southern-thai-traditional-food_640221-266.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Grilled Squid",
|
||||
price: "IDR 150k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spicy-shrimp-grilled-with-garlic_1339-5002.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Seafood Soup",
|
||||
price: "IDR 120k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-food-arrangement_23-2148847468.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Crab Cakes",
|
||||
price: "IDR 200k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cooked-cauliflower-inside-peach-plate-with-beans-white-light-surface_140725-43882.jpg",
|
||||
},
|
||||
]}
|
||||
title="Chef Selection"
|
||||
description="Signature items recommended by our executive chef."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Oyster Platter", price: "IDR 250k", imageSrc: "http://img.b2bpic.net/free-photo/dish-made-oysters-with-citrus-ice-cubes_23-2150320482.jpg" },
|
||||
{ id: "2", name: "Salmon Steak", price: "IDR 300k", imageSrc: "http://img.b2bpic.net/free-photo/surf-turf_74190-6937.jpg" },
|
||||
{ id: "3", name: "Prawn Curry", price: "IDR 180k", imageSrc: "http://img.b2bpic.net/free-photo/kaeng-luang-yellow-curry-with-shrimp-coconut-shoots-southern-thai-traditional-food_640221-266.jpg" },
|
||||
{ id: "4", name: "Grilled Squid", price: "IDR 150k", imageSrc: "http://img.b2bpic.net/free-photo/spicy-shrimp-grilled-with-garlic_1339-5002.jpg" },
|
||||
{ id: "5", name: "Seafood Soup", price: "IDR 120k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-food-arrangement_23-2148847468.jpg" },
|
||||
{ id: "6", name: "Crab Cakes", price: "IDR 200k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cooked-cauliflower-inside-peach-plate-with-beans-white-light-surface_140725-43882.jpg" },
|
||||
]}
|
||||
title="Chef Selection"
|
||||
description="Signature items recommended by our executive chef."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah A.",
|
||||
handle: "@sarah_foodie",
|
||||
testimonial: "Amazing seafood! The atmosphere is perfect for dates.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-laugh-together_23-2148395336.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Budi K.",
|
||||
handle: "@budikul",
|
||||
testimonial: "Best place to enjoy grilled fish in town.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-pretty-stylish-smiling-woman-colorful-retro-vintage-american-50s-cafe-sitting-table-drinking-milk-shake-cocktail-wearing-pink-sunglasses-having-fun_285396-10740.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
handle: "@emilytravels",
|
||||
testimonial: "Exquisite dining experience and great hospitality.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517424.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
handle: "@david_eat",
|
||||
testimonial: "Fresh and flavorful dishes every time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-asian-man-friends-reunion_23-2149244688.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Maria S.",
|
||||
handle: "@mariasin",
|
||||
testimonial: "Truly a hidden gem for seafood lovers.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-rich-stylish-man-dressed-modern-elegant-clothes-holds-cup-coffee-outdoor-restaurant_613910-3978.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Guest Experiences"
|
||||
description="Heartwarming feedback from our lovely customers."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah A.", handle: "@sarah_foodie", testimonial: "Amazing seafood! The atmosphere is perfect for dates.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-laugh-together_23-2148395336.jpg" },
|
||||
{ id: "2", name: "Budi K.", handle: "@budikul", testimonial: "Best place to enjoy grilled fish in town.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-pretty-stylish-smiling-woman-colorful-retro-vintage-american-50s-cafe-sitting-table-drinking-milk-shake-cocktail-wearing-pink-sunglasses-having-fun_285396-10740.jpg" },
|
||||
{ id: "3", name: "Emily R.", handle: "@emilytravels", testimonial: "Exquisite dining experience and great hospitality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517424.jpg" },
|
||||
{ id: "4", name: "David W.", handle: "@david_eat", testimonial: "Fresh and flavorful dishes every time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-asian-man-friends-reunion_23-2149244688.jpg" },
|
||||
{ id: "5", name: "Maria S.", handle: "@mariasin", testimonial: "Truly a hidden gem for seafood lovers.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-rich-stylish-man-dressed-modern-elegant-clothes-holds-cup-coffee-outdoor-restaurant_613910-3978.jpg" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Guest Experiences"
|
||||
description="Heartwarming feedback from our lovely customers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Years Served",
|
||||
description: "Delivering quality service to our guests.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-executives-showing-thumbs-up_1098-1828.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50k+",
|
||||
title: "Happy Guests",
|
||||
description: "Creating unforgettable culinary memories.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-people-enjoying-dinner-together_23-2148454092.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Freshness",
|
||||
description: "Guaranteed quality in every ingredient.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-raw-fish-slices-knife-cutting-board-vegetables-wood-serving-board-kitchen-table_179666-46508.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Journey"
|
||||
description="Milestones that define our commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15+", title: "Years Served", description: "Delivering quality service to our guests.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-executives-showing-thumbs-up_1098-1828.jpg" },
|
||||
{ id: "m2", value: "50k+", title: "Happy Guests", description: "Creating unforgettable culinary memories.", imageSrc: "http://img.b2bpic.net/free-photo/group-young-people-enjoying-dinner-together_23-2148454092.jpg" },
|
||||
{ id: "m3", value: "100%", title: "Freshness", description: "Guaranteed quality in every ingredient.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-raw-fish-slices-knife-cutting-board-vegetables-wood-serving-board-kitchen-table_179666-46508.jpg" },
|
||||
]}
|
||||
title="Our Journey"
|
||||
description="Milestones that define our commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you accept reservations?",
|
||||
content: "Yes, we highly recommend booking in advance.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is parking available?",
|
||||
content: "Ample parking is available for all guests.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are there vegetarian options?",
|
||||
content: "Yes, we offer a curated range of fresh vegetarian sides.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/group-people-discussing-some-issues_1328-4290.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Need Help?"
|
||||
description="Common questions regarding our restaurant services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you accept reservations?", content: "Yes, we highly recommend booking in advance." },
|
||||
{ id: "f2", title: "Is parking available?", content: "Ample parking is available for all guests." },
|
||||
{ id: "f3", title: "Are there vegetarian options?", content: "Yes, we offer a curated range of fresh vegetarian sides." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/group-people-discussing-some-issues_1328-4290.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Need Help?"
|
||||
description="Common questions regarding our restaurant services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
text="Visit us at Soekarno Hatta and indulge in the ultimate coastal dining experience."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Table Now",
|
||||
href: "tel:08123456789",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
text="Visit us at Soekarno Hatta and indulge in the ultimate coastal dining experience."
|
||||
buttons={[{ text: "Book Table Now", href: "tel:08123456789" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Ocean Garden"
|
||||
columns={[
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#menu",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Ocean Garden"
|
||||
columns={[
|
||||
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }] },
|
||||
{ title: "Links", items: [{ label: "Menu", href: "#menu" }, { label: "About", href: "#about" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user