135 lines
6.6 KiB
TypeScript
135 lines
6.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Flavors", id: "flavors" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Find Us", id: "contact" },
|
|
]}
|
|
brandName="Yoz Yogurt"
|
|
button={{ text: "Order Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{ variant: "sparkles-gradient" }}
|
|
title="Life's Too Short for Bad Yogurt."
|
|
description="Fresh, creamy, customizable frozen yogurt — with dairy-free options, low-calorie picks, and unlimited toppings."
|
|
buttons={[{ text: "Explore Our Flavors", href: "#flavors" }]}
|
|
imageSrc="https://img.freepik.com/free-photo/fruit-salad-with-ice-cream_1232-1649.jpg?t=st=1715850000~exp=1715853600~hmac=e1234567890abcdef"
|
|
imageAlt="Luscious frozen yogurt cup"
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-yoz" data-section="why-yoz">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Why Yoz Yogurt?"
|
|
description="We believe frozen yogurt should be as fresh as it is fun. Quality ingredients, inclusive options, and a space for every celebration."
|
|
metrics={[
|
|
{ value: "Dairy-Free", title: "Options Available" },
|
|
{ value: "Only 8", title: "Low-Calorie Line" },
|
|
{ value: "Groups", title: "Always Welcome" },
|
|
]}
|
|
imageSrc="https://img.freepik.com/free-photo/freshly-fruit-smoothies-glass-jar-white-table_23-2148028558.jpg?t=st=1715850000~exp=1715853600~hmac=a1234567890abcdef"
|
|
imageAlt="Yoz yogurt shop features"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="flavors" data-section="flavors">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "c1", name: "Classic Vanilla", price: "$4.50", imageSrc: "https://img.freepik.com/free-photo/vanilla-ice-cream-scoop-waffle-cone_23-2148028501.jpg?t=st=1715850000~exp=1715853600~hmac=b1234567890abcdef" },
|
|
{ id: "c2", name: "Milk Chocolate", price: "$5.25", imageSrc: "https://img.freepik.com/free-photo/chocolate-ice-cream-scoops-wooden-table_23-2148028558.jpg?t=st=1715850000~exp=1715853600~hmac=c1234567890abcdef" },
|
|
{ id: "c3", name: "Salted Caramel", price: "$5.50", imageSrc: "https://img.freepik.com/free-photo/salted-caramel-ice-cream-scoop-waffle-cone_23-2148281358.jpg?t=st=1715850000~exp=1715853600~hmac=d1234567890abcdef" },
|
|
]}
|
|
title="Our Flavors"
|
|
description="Hand-picked rotating flavors made fresh daily—find your new favorite today!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="toppings" data-section="toppings">
|
|
<FeatureCardTwentyFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "t1", title: "Fresh Fruit", author: "Topping", description: "Crisp, sweet, and seasonal berries.", tags: ["Premium"], imageSrc: "https://img.freepik.com/free-photo/fresh-berries-white-background_23-2148281358.jpg?t=st=1715850000~exp=1715853600~hmac=e1234567890abcdef" },
|
|
{ id: "t2", title: "Cookie Dough", author: "Topping", description: "The ultimate sweet indulgence.", tags: ["Classic"], imageSrc: "https://img.freepik.com/free-photo/cookie-dough-bites-white-plate_23-2148028501.jpg?t=st=1715850000~exp=1715853600~hmac=f1234567890abcdef" },
|
|
]}
|
|
title="Build Your Perfect Cup"
|
|
description="Add unlimited toppings for just $2. Fresh fruit, cookie dough, and more to make it yours!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="I stop here on my bike rides. The pistachio Only 8 is my guilty pleasure. So good for only $3.50!"
|
|
rating={5}
|
|
author="Happy Cyclist"
|
|
avatars={[
|
|
{ src: "https://img.freepik.com/free-photo/customer-smiling-portrait_23-2148028558.jpg?t=st=1715850000~exp=1715853600~hmac=g1234567890abcdef", alt: "Customer" },
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Visit Us"
|
|
title="Find Yoz Yogurt"
|
|
description="Open daily: 11 AM - 10 PM. Located at 123 Yogurt Lane, Sweet City. Stop by for your treat today!"
|
|
buttons={[{ text: "Get Directions", href: "https://www.google.com/maps/search/?api=1&query=123+Yogurt+Lane+Sweet+City" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Yoz Yogurt"
|
|
leftLink={{ text: "Privacy Policy" }}
|
|
rightLink={{ text: "© 2024 Yoz Yogurt" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |