Update src/app/page.tsx
This commit is contained in:
406
src/app/page.tsx
406
src/app/page.tsx
@@ -14,300 +14,134 @@ import { Award, CheckCircle, Clock, Leaf, Palette, Trash2, Truck } from "lucide-
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Cakes",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Our Story",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Sweet Delights Bakery"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Cakes", id: "products" },
|
||||
{ name: "Our Story", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Sweet Delights Bakery"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Artisanal Cakes for Every Occasion"
|
||||
description="Handcrafted with love, using only the finest ingredients to create memories that taste as good as they look."
|
||||
kpis={[
|
||||
{
|
||||
value: "500+",
|
||||
label: "Cakes Crafted",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Natural Ingredients",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Client Rating",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Menu",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-bakery_23-2150273228.jpg"
|
||||
imageAlt="Artisan cake selection"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mother-daughter-using-smartphone-breakfast_23-2147788236.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-beautiful-woman-rests-coffee-shop-holds-modern-cell-phone_273609-2793.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bride-groom-posing-garden-smiling_8353-12167.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-young-cheerful-woman-with-bare-shoulders-eats-delicious-piece-cake-comes-friend-s-birthday-party-cafe-dressed-summer-clothing-has-delighted-look-relaxed-female-with-dessert_273609-2201.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-close-view-plate-sweet-with-berries-flour-tea-sieve-chocolate-nuts-side-marble-background_140725-133904.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 500+ happy cake lovers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Fresh Daily",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Custom Designs",
|
||||
icon: Palette,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Natural Ingredients",
|
||||
icon: Leaf,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Gluten Free Options",
|
||||
icon: Trash2,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Express Delivery",
|
||||
icon: Truck,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Artisanal Cakes for Every Occasion"
|
||||
description="Handcrafted with love, using only the finest ingredients to create memories that taste as good as they look."
|
||||
kpis={[
|
||||
{ value: "500+", label: "Cakes Crafted" },
|
||||
{ value: "100%", label: "Natural Ingredients" },
|
||||
{ value: "4.9/5", label: "Client Rating" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "View Menu", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-bakery_23-2150273228.jpg"
|
||||
imageAlt="Artisan cake selection"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/mother-daughter-using-smartphone-breakfast_23-2147788236.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/brunette-beautiful-woman-rests-coffee-shop-holds-modern-cell-phone_273609-2793.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/bride-groom-posing-garden-smiling_8353-12167.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-young-cheerful-woman-with-bare-shoulders-eats-delicious-piece-cake-comes-friend-s-birthday-party-cafe-dressed-summer-clothing-has-delighted-look-relaxed-female-with-dessert_273609-2201.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-close-view-plate-sweet-with-berries-flour-tea-sieve-chocolate-nuts-side-marble-background_140725-133904.jpg", alt: "Customer 5" }
|
||||
]}
|
||||
avatarText="Join 500+ happy cake lovers"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Fresh Daily", icon: CheckCircle },
|
||||
{ type: "text-icon", text: "Custom Designs", icon: Palette },
|
||||
{ type: "text-icon", text: "Natural Ingredients", icon: Leaf },
|
||||
{ type: "text-icon", text: "Gluten Free Options", icon: Trash2 },
|
||||
{ type: "text-icon", text: "Express Delivery", icon: Truck }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Midnight Fudge",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-close-view-plate-sweet-with-berries-flour-tea-sieve-chocolate-nuts-side-marble-background_140725-133904.jpg?_wi=1",
|
||||
imageAlt: "Midnight Fudge Cake",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Strawberry Dream",
|
||||
price: "$52",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-creamy-cake-with-strawberries_140725-904.jpg?_wi=1",
|
||||
imageAlt: "Strawberry Dream Cake",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Vanilla Classic",
|
||||
price: "$38",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-baker-s-hand-holding-sweet-puff-pastry-plate_23-2148189082.jpg",
|
||||
imageAlt: "Vanilla Classic Cake",
|
||||
},
|
||||
]}
|
||||
title="Signature Creations"
|
||||
description="Explore our curated collection of signature cakes, available for custom orders or daily pick-up."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Midnight Fudge", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/side-close-view-plate-sweet-with-berries-flour-tea-sieve-chocolate-nuts-side-marble-background_140725-133904.jpg", imageAlt: "Midnight Fudge Cake" },
|
||||
{ id: "p2", name: "Strawberry Dream", price: "$52", imageSrc: "http://img.b2bpic.net/free-photo/white-creamy-cake-with-strawberries_140725-904.jpg", imageAlt: "Strawberry Dream Cake" },
|
||||
{ id: "p3", name: "Vanilla Classic", price: "$38", imageSrc: "http://img.b2bpic.net/free-photo/female-baker-s-hand-holding-sweet-puff-pastry-plate_23-2148189082.jpg", imageAlt: "Vanilla Classic Cake" }
|
||||
]}
|
||||
title="Signature Creations"
|
||||
description="Explore our curated collection of signature cakes, available for custom orders or daily pick-up."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Our Baking Philosophy"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Master Bakers",
|
||||
value: "12 Years",
|
||||
},
|
||||
{
|
||||
icon: Leaf,
|
||||
label: "Organic Sourcing",
|
||||
value: "Local",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Fresh Daily",
|
||||
value: "Always",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Our Baking Philosophy"
|
||||
metrics={[
|
||||
{ icon: Award, label: "Master Bakers", value: "12 Years" },
|
||||
{ icon: Leaf, label: "Organic Sourcing", value: "Local" },
|
||||
{ icon: Clock, label: "Fresh Daily", value: "Always" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
role: "Wedding Client",
|
||||
company: "Happy Couple",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mother-daughter-using-smartphone-breakfast_23-2147788236.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Robert B.",
|
||||
role: "Regular",
|
||||
company: "Local Business",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-beautiful-woman-rests-coffee-shop-holds-modern-cell-phone_273609-2793.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah J.",
|
||||
role: "Event Planner",
|
||||
company: "EventsCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-posing-garden-smiling_8353-12167.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Tom K.",
|
||||
role: "Party Host",
|
||||
company: "Personal",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-cheerful-woman-with-bare-shoulders-eats-delicious-piece-cake-comes-friend-s-birthday-party-cafe-dressed-summer-clothing-has-delighted-look-relaxed-female-with-dessert_273609-2201.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Emma R.",
|
||||
role: "Food Blogger",
|
||||
company: "SweetReviews",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mother-daughter-using-smartphone-breakfast_23-2147788236.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Words of Sweetness"
|
||||
description="Hear what our wonderful community has to say about their experience with us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice M.", role: "Wedding Client", company: "Happy Couple", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mother-daughter-using-smartphone-breakfast_23-2147788236.jpg" },
|
||||
{ id: "t2", name: "Robert B.", role: "Regular", company: "Local Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brunette-beautiful-woman-rests-coffee-shop-holds-modern-cell-phone_273609-2793.jpg" },
|
||||
{ id: "t3", name: "Sarah J.", role: "Event Planner", company: "EventsCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-posing-garden-smiling_8353-12167.jpg" },
|
||||
{ id: "t4", name: "Tom K.", role: "Party Host", company: "Personal", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-cheerful-woman-with-bare-shoulders-eats-delicious-piece-cake-comes-friend-s-birthday-party-cafe-dressed-summer-clothing-has-delighted-look-relaxed-female-with-dessert_273609-2201.jpg" },
|
||||
{ id: "t5", name: "Emma R.", role: "Food Blogger", company: "SweetReviews", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mother-daughter-using-smartphone-breakfast_23-2147788236.jpg" }
|
||||
]}
|
||||
title="Words of Sweetness"
|
||||
description="Hear what our wonderful community has to say about their experience with us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Sweet Delights?"
|
||||
description="We blend traditional techniques with modern creativity to deliver exceptional dessert experiences."
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Artisan Craftsmanship",
|
||||
author: "Head Baker",
|
||||
description: "Every cake is a unique masterpiece, meticulously decorated by our team.",
|
||||
tags: [
|
||||
"Creative",
|
||||
"Artisan",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-close-view-plate-sweet-with-berries-flour-tea-sieve-chocolate-nuts-side-marble-background_140725-133904.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Premium Ingredients",
|
||||
author: "Supply Team",
|
||||
description: "We source high-quality butter, flour, and fresh fruits from local farmers.",
|
||||
tags: [
|
||||
"Quality",
|
||||
"Organic",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-creamy-cake-with-strawberries_140725-904.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Sweet Delights?"
|
||||
description="We blend traditional techniques with modern creativity to deliver exceptional dessert experiences."
|
||||
features={[
|
||||
{ id: "f1", title: "Artisan Craftsmanship", author: "Head Baker", description: "Every cake is a unique masterpiece, meticulously decorated by our team.", tags: ["Creative", "Artisan"], imageSrc: "http://img.b2bpic.net/free-photo/side-close-view-plate-sweet-with-berries-flour-tea-sieve-chocolate-nuts-side-marble-background_140725-133904.jpg" },
|
||||
{ id: "f2", title: "Premium Ingredients", author: "Supply Team", description: "We source high-quality butter, flour, and fresh fruits from local farmers.", tags: ["Quality", "Organic"], imageSrc: "http://img.b2bpic.net/free-photo/white-creamy-cake-with-strawberries_140725-904.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Sweet Delights"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Shop", href: "#products" }, { label: "Our Story", href: "#about" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }
|
||||
]}
|
||||
logoText="Sweet Delights"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user