255 lines
13 KiB
TypeScript
255 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||
import { Heart, Leaf, Waves } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="bounce-effect"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumSmall"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Experience", id: "#experience"},
|
||
{
|
||
name: "Menu", id: "#menu"},
|
||
{
|
||
name: "Reserve", id: "#reserve"},
|
||
]}
|
||
brandName="KORA"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroOverlayTestimonial
|
||
title="Civitavecchia’s Most Beautiful Brunch Experience"
|
||
description="Gourmet burgers, vibrant pokè bowls, fluffy pancakes & coastal vibes — served all day in a space designed to stay awhile."
|
||
testimonials={[
|
||
{
|
||
name: "Sofia R.", handle: "@sofia.travels", testimonial: "The burgers are soooo GOOD.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/scenic-view-private-sandy-beach-with-sun-beds-parasokamy-sea-mountains-resort_146671-18839.jpg?_wi=1", imageAlt: "luxury restaurant brunch setting coastal"},
|
||
{
|
||
name: "Luca M.", handle: "@lucamartin", testimonial: "Service was 10/10.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/texture-glass-table-table-setting-idea_169016-18539.jpg?_wi=1", imageAlt: "luxury restaurant brunch setting coastal"},
|
||
{
|
||
name: "Elena V.", handle: "@elena.vibe", testimonial: "Beautiful atmosphere and high-quality food.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/lamb-chicken-burger-without-top-bun-with-mushroom-herbs-tomato-sauce_140725-8320.jpg?_wi=1", imageAlt: "luxury restaurant brunch setting coastal"},
|
||
{
|
||
name: "Marco P.", handle: "@marco_civit", testimonial: "Super fluffy pancake.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/bowl-with-salmon-rice-fresh-vegetables-poke-top-view-vertical_127032-2415.jpg?_wi=1", imageAlt: "luxury restaurant brunch setting coastal"},
|
||
{
|
||
name: "Giulia B.", handle: "@giuliab", testimonial: "Modern, clean and welcoming.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg", imageAlt: "luxury restaurant brunch setting coastal"},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Reserve a Table", href: "#reserve"},
|
||
{
|
||
text: "Explore Menu", href: "#menu"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/scenic-view-private-sandy-beach-with-sun-beds-parasokamy-sea-mountains-resort_146671-18839.jpg?_wi=2"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/close-up-happy-people-table_23-2149212128.jpg", alt: "Customer 1"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/black-american-male-female-eating-vegan-food-restaurant_613910-7323.jpg", alt: "Customer 2"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/high-angle-smiley-people-with-drinks_23-2150124809.jpg", alt: "Customer 3"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/having-lunch-spacious-restaurant_52683-117480.jpg", alt: "Customer 4"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/close-up-woman-showing-menu-card-female-customer-sitting-restaurant_23-2147936254.jpg", alt: "Customer 5"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="experience" data-section="experience">
|
||
<FeatureCardNineteen
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
tag: "Signature", title: "Brunch", subtitle: "All Day", description: "Fluffy pancakes and artisanal Mediterranean breakfast creations.", imageSrc: "http://img.b2bpic.net/free-photo/texture-glass-table-table-setting-idea_169016-18539.jpg?_wi=2"},
|
||
{
|
||
tag: "Gourmet", title: "Burgers", subtitle: "Handcrafted", description: "Premium ingredients meet bold culinary innovation.", imageSrc: "http://img.b2bpic.net/free-photo/lamb-chicken-burger-without-top-bun-with-mushroom-herbs-tomato-sauce_140725-8320.jpg?_wi=2"},
|
||
{
|
||
tag: "Fresh", title: "Pokè", subtitle: "Vibrant", description: "Fresh, nutrient-dense bowls inspired by the sea.", imageSrc: "http://img.b2bpic.net/free-photo/bowl-with-salmon-rice-fresh-vegetables-poke-top-view-vertical_127032-2415.jpg?_wi=2"},
|
||
]}
|
||
title="Our Signature Experience"
|
||
description="Discover a curated journey of flavor and coastal Mediterranean flair."
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<AboutMetric
|
||
useInvertedBackground={false}
|
||
title="A Destination Reimagined"
|
||
metrics={[
|
||
{
|
||
label: "Local Ingredients", value: "100%", icon: Leaf,
|
||
},
|
||
{
|
||
label: "Seaside Location", value: "50m", icon: Waves,
|
||
},
|
||
{
|
||
label: "Happy Guests", value: "10k+", icon: Heart,
|
||
},
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="menu" data-section="menu">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="split-description"
|
||
gridVariant="two-columns-alternating-heights"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "1", name: "Octopus Burger", price: "€18", imageSrc: "http://img.b2bpic.net/free-photo/front-view-person-near-burger-plate-holding-jar-with-butter_23-2148784521.jpg"},
|
||
{
|
||
id: "2", name: "Signature Pokè", price: "€16", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-delicious-poke-bowl_23-2148873823.jpg"},
|
||
{
|
||
id: "3", name: "Fluffy Pancakes", price: "€12", imageSrc: "http://img.b2bpic.net/free-photo/top-view-breakfast-crepes-with-jam-bed_23-2148797010.jpg"},
|
||
{
|
||
id: "4", name: "Classic Gourmet", price: "€15", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-burgers-with-pickles-cutting-board_23-2148784500.jpg"},
|
||
{
|
||
id: "5", name: "Brunch Platter", price: "€22", imageSrc: "http://img.b2bpic.net/free-photo/ceramic-plate-toast-fried-egg-bacon-salad-ceramic-plate-wooden-desk_23-2148067226.jpg"},
|
||
{
|
||
id: "6", name: "Oceanic Bowl", price: "€19", imageSrc: "http://img.b2bpic.net/free-photo/hawaiian-poke-bowl-with-salmon-bowl-with-seaweed-sesame-seeds-cabbage-top-view-flat-lay-banner_127032-2490.jpg"},
|
||
]}
|
||
title="Curated Flavors"
|
||
description="From ocean-fresh pokè to gourmet burgers."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="asymmetric-60-wide-40-narrow"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sofia R.", role: "Traveler", company: "Visitor", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-having-fun-while-eating-dinner-communicating-with-friends-dining-table_637285-3342.jpg"},
|
||
{
|
||
id: "2", name: "Luca M.", role: "Foodie", company: "Local", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-eating-donut-talking-her-boyfriend-cafe_637285-9080.jpg"},
|
||
{
|
||
id: "3", name: "Elena V.", role: "Writer", company: "Journal", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-friends-having-lunch-luxury-restaurant_23-2151081466.jpg"},
|
||
{
|
||
id: "4", name: "Marco P.", role: "Chef", company: "Critic", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-mother-daughter-side-view_23-2149854624.jpg"},
|
||
{
|
||
id: "5", name: "Giulia B.", role: "Manager", company: "Corporate", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/friends-having-sangria-party-by-beach_23-2149481120.jpg"},
|
||
]}
|
||
title="Stories from the Table"
|
||
description="Hear what our wonderful guests have to say about their KORA experience."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social" data-section="social">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"@kora_civitavecchia", "Fresh Food Daily", "Seaside Dining", "Gourmet Burgers", "Brunch Lovers", "Poke Perfection", "Join Us Today"]}
|
||
title="Join the Kora Vibe"
|
||
description="Follow us on Instagram for daily brunch inspiration."
|
||
/>
|
||
</div>
|
||
|
||
<div id="location" data-section="location">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "q1", title: "Where are we located?", content: "Just steps away from the Civitavecchia cruise port."},
|
||
{
|
||
id: "q2", title: "Operating Hours?", content: "Open daily from 9:00 AM to 11:00 PM."},
|
||
{
|
||
id: "q3", title: "Do you offer delivery?", content: "Yes, through our primary partner apps."},
|
||
{
|
||
id: "q4", title: "How do I book a table?", content: "Click the Reserve button above to secure your table."},
|
||
]}
|
||
title="Visit Us"
|
||
description="Conveniently located near the sea and cruise port."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="reserve" data-section="reserve">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Reserve Your Table"
|
||
description="Secure your spot at Civitavecchia’s favorite brunch destination."
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Your Name"},
|
||
{
|
||
name: "email", type: "email", placeholder: "Email Address"},
|
||
{
|
||
name: "guests", type: "number", placeholder: "Number of Guests"},
|
||
{
|
||
name: "date", type: "date", placeholder: "Reservation Date"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/glass-beer-with-beautiful-tropical-maldives-island_1232-4472.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "KORA", items: [
|
||
{
|
||
label: "About Us", href: "#"},
|
||
{
|
||
label: "Menu", href: "#menu"},
|
||
],
|
||
},
|
||
{
|
||
title: "Reserve", items: [
|
||
{
|
||
label: "Book Table", href: "#reserve"},
|
||
{
|
||
label: "Events", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
bottomLeftText="© 2024 KORA. All Rights Reserved."
|
||
bottomRightText="Designed by KORA Team."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |