193 lines
9.6 KiB
TypeScript
193 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Menu", id: "#products" },
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Team", id: "#team" },
|
|
{ name: "Contact", id: "#contact" },
|
|
]}
|
|
brandName="Joanna's Place"
|
|
button={{ text: "Order Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Klintholm's Finest Burgers"
|
|
description="Experience hand-crafted, locally sourced ingredients served right by the harbor. Joanna's Place offers premium comfort food in a relaxed seaside setting."
|
|
kpis={[
|
|
{ value: "12", label: "Signature Burgers" },
|
|
{ value: "15+", label: "Years Quality" },
|
|
{ value: "Local", label: "Sourced Beef" },
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[{ text: "View Menu", href: "#products" }]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s7pwiw"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=05xi4v", alt: "Happy customer" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w5ai71", alt: "Happy customer" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u5z87", alt: "Happy customer" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6yt3v6", alt: "Happy customer" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9mxt0y", alt: "Happy customer" },
|
|
]}
|
|
avatarText="Loved by 500+ happy locals"
|
|
marqueeItems={[
|
|
{ type: "text", text: "Locally Sourced" },
|
|
{ type: "text", text: "Fresh Ingredients" },
|
|
{ type: "text", text: "Harbor View" },
|
|
{ type: "text", text: "Artisan Buns" },
|
|
{ type: "text", text: "Hand-made Patties" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Tradition by the Harbor"
|
|
description={[
|
|
"Founded on a love for simple, delicious food, Joanna's Place brings a touch of premium dining to Klintholm Havn.", "Every burger is crafted with passion, featuring fresh ingredients and local flavors that keep guests coming back year after year."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", name: "Classic Harbor", price: "145 DKK", variant: "Beef", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sdswn5" },
|
|
{ id: "2", name: "Klintholm Special", price: "165 DKK", variant: "Bacon Cheese", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7osnsl" },
|
|
{ id: "3", name: "Forest Burger", price: "155 DKK", variant: "Mushroom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3e6ddz" },
|
|
{ id: "4", name: "Veggie Delight", price: "135 DKK", variant: "Plant-based", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7sp5i5" },
|
|
{ id: "5", name: "Spicy Harbor", price: "150 DKK", variant: "Chili", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vx2ibo" },
|
|
{ id: "6", name: "Double Smash", price: "180 DKK", variant: "Beef", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6zkdzb" },
|
|
]}
|
|
title="Our Signature Creations"
|
|
description="Discover our curated selection of premium burgers, each prepared to order."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "50k+", title: "Served", description: "Burgers served over years", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rg8snl" },
|
|
{ id: "m2", value: "100%", title: "Local", description: "Local fresh meat", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gwb8rl" },
|
|
{ id: "m3", value: "5.0", title: "Rating", description: "Average guest rating", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ol1e35" },
|
|
]}
|
|
title="Our Success"
|
|
description="Numbers that define our journey."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{ id: "t1", name: "Joanna", role: "Owner & Founder", description: "Head of culinary vision", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ubx031" },
|
|
{ id: "t2", name: "Erik", role: "Head Chef", description: "Master of the grill", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=36ildq" },
|
|
{ id: "t3", name: "Sara", role: "Service Lead", description: "Ensuring great harbor vibes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v8amwm" },
|
|
]}
|
|
title="Meet The Crew"
|
|
description="The passionate people behind Joanna's Place."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "Anders Jensen", handle: "@andersj", testimonial: "Best burger in Denmark!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=05xi4v" },
|
|
{ id: "2", name: "Mette Nielsen", handle: "@metten", testimonial: "Amazing location and food.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w5ai71" },
|
|
{ id: "3", name: "Thomas Holm", handle: "@thomash", testimonial: "The atmosphere is top notch.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u5z87" },
|
|
{ id: "4", name: "Lise Petersen", handle: "@lisep", testimonial: "Juicy and perfect every time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6yt3v6" },
|
|
{ id: "5", name: "Jens V.", handle: "@jensv", testimonial: "A must-visit when at the harbor.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9mxt0y" },
|
|
]}
|
|
title="Guest Voices"
|
|
description="What people say about our burgers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "q1", title: "Do you accept reservations?", content: "Yes, for larger groups." },
|
|
{ id: "q2", title: "Are there vegan options?", content: "Absolutely, try our Veggie Delight." },
|
|
{ id: "q3", title: "Is parking available?", content: "Free parking at Klintholm Havn." },
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about us."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Visit Us Today"
|
|
description="Join us at the harbor for the best burger experience in the area."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=os2qec"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Menu", href: "#products" }, { label: "About", href: "#about" }] },
|
|
{ items: [{ label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] },
|
|
]}
|
|
logoText="Joanna's Place"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|