bender/02720f4a-e8a5-4eef-acc8-e15e31d80270
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-10 09:52:38 +00:00
parent 53e54e0caf
commit 6f770902e5
1 changed files with 132 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

461
src/app/page.tsx
View File

@@ -28,343 +28,146 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Products",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="John's Famous Flowers"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Products", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="John's Famous Flowers"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "gradient-bars",
}}
title="John's Famous Flowers"
description="Bringing beauty into your life with our hand-picked, artisanal floral arrangements."
buttons={[
{
text: "Shop Now",
href: "#products",
},
]}
carouselItems={[
{
id: "1",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tulips-table_23-2148480711.jpg",
imageAlt: "Flowers",
},
{
id: "2",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-pink-white-color-roses-alstroemeria-flowers-white-background_141793-8151.jpg",
imageAlt: "Flowers",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/spring-composition-with-snowdrops-crocuses-close-up_169016-30378.jpg",
imageAlt: "Flowers",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/white-flowers-wooden-fence-closeup_169016-20746.jpg",
imageAlt: "Flowers",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-luxurious-bouquet-pink-red-roses-white-dahlias-black-background_181624-24023.jpg",
imageAlt: "Flowers",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/vibrant-gerbera-daisies_23-2151961701.jpg",
imageAlt: "Flowers",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{ variant: "gradient-bars" }}
title="John's Famous Flowers"
description="Bringing beauty into your life with our hand-picked, artisanal floral arrangements."
buttons={[{ text: "Shop Now", href: "#products" }]}
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tulips-table_23-2148480711.jpg", imageAlt: "Flowers" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/side-view-pink-white-color-roses-alstroemeria-flowers-white-background_141793-8151.jpg", imageAlt: "Flowers" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/spring-composition-with-snowdrops-crocuses-close-up_169016-30378.jpg", imageAlt: "Flowers" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/white-flowers-wooden-fence-closeup_169016-20746.jpg", imageAlt: "Flowers" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-luxurious-bouquet-pink-red-roses-white-dahlias-black-background_181624-24023.jpg", imageAlt: "Flowers" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-gerbera-daisies_23-2151961701.jpg", imageAlt: "Flowers" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Our Passion"
metrics={[
{
icon: Star,
label: "Arrangements Sold",
value: "15,000+",
},
{
icon: Smile,
label: "Happy Clients",
value: "10,000+",
},
{
icon: Award,
label: "Years Active",
value: "20+",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Our Passion"
metrics={[
{ icon: Star, label: "Arrangements Sold", value: "15,000+" },
{ icon: Smile, label: "Happy Clients", value: "10,000+" },
{ icon: Award, label: "Years Active", value: "20+" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Why Choose Us"
description="We don't just sell flowers; we curate experiences."
accordionItems={[
{
id: "f1",
title: "Freshness Guaranteed",
content: "We source daily from local farms.",
},
{
id: "f2",
title: "Artisanal Design",
content: "Every bouquet is designed by hand.",
},
{
id: "f3",
title: "Fast Delivery",
content: "Same-day delivery available across the city.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/birthday-flowers-with-empty-note_23-2149053811.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Why Choose Us"
description="We don't just sell flowers; we curate experiences."
accordionItems={[
{ id: "f1", title: "Freshness Guaranteed", content: "We source daily from local farms." },
{ id: "f2", title: "Artisanal Design", content: "Every bouquet is designed by hand." },
{ id: "f3", title: "Fast Delivery", content: "Same-day delivery available across the city." },
]}
imageSrc="http://img.b2bpic.net/free-photo/birthday-flowers-with-empty-note_23-2149053811.jpg"
mediaAnimation="blur-reveal"
/>
</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: "Romantic Roses",
price: "$55.00",
imageSrc: "http://img.b2bpic.net/free-photo/bouquet-red-roses-female-hands-white-background-top-view_169016-26131.jpg",
},
{
id: "p2",
name: "Spring Tulips",
price: "$45.00",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149681985.jpg",
},
{
id: "p3",
name: "Golden Sunflowers",
price: "$40.00",
imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-sunflowers_23-2150681824.jpg",
},
{
id: "p4",
name: "Wedding Floral Set",
price: "$150.00",
imageSrc: "http://img.b2bpic.net/free-photo/alley-leading-wedding-arch_1304-4051.jpg",
},
{
id: "p5",
name: "Mixed Seasonal",
price: "$60.00",
imageSrc: "http://img.b2bpic.net/free-photo/flower-composition-bucket-roses-chrysanthemum-side-view_141793-4420.jpg",
},
{
id: "p6",
name: "Elegant Orchid",
price: "$75.00",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-plants-deco_23-2149198533.jpg",
},
]}
title="Our Creations"
description="Browse our latest signature bouquets."
/>
</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: "Romantic Roses", price: "$55.00", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-red-roses-female-hands-white-background-top-view_169016-26131.jpg" },
{ id: "p2", name: "Spring Tulips", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149681985.jpg" },
{ id: "p3", name: "Golden Sunflowers", price: "$40.00", imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-sunflowers_23-2150681824.jpg" },
{ id: "p4", name: "Wedding Floral Set", price: "$150.00", imageSrc: "http://img.b2bpic.net/free-photo/alley-leading-wedding-arch_1304-4051.jpg" },
{ id: "p5", name: "Mixed Seasonal", price: "$60.00", imageSrc: "http://img.b2bpic.net/free-photo/flower-composition-bucket-roses-chrysanthemum-side-view_141793-4420.jpg" },
{ id: "p6", name: "Elegant Orchid", price: "$75.00", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-plants-deco_23-2149198533.jpg" },
]}
title="Our Creations"
description="Browse our latest signature bouquets."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "m",
badge: "Monthly",
price: "$40/mo",
subtitle: "Perfect for homes",
buttons: [
{
text: "Subscribe",
href: "#",
},
],
features: [
"1 delivery per month",
"Standard seasonal flowers",
],
},
{
id: "w",
badge: "Weekly",
price: "$120/mo",
subtitle: "For offices",
buttons: [
{
text: "Subscribe",
href: "#",
},
],
features: [
"4 deliveries per month",
"Premium selection",
],
},
{
id: "p",
badge: "Pro",
price: "$250/mo",
subtitle: "For events",
buttons: [
{
text: "Subscribe",
href: "#",
},
],
features: [
"Weekly luxury arrangements",
"Priority support",
],
},
]}
title="Subscription Plans"
description="Have flowers delivered regularly."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "m", badge: "Monthly", price: "$40/mo", subtitle: "Perfect for homes", buttons: [{ text: "Subscribe", href: "#" }],
features: ["1 delivery per month", "Standard seasonal flowers"],
},
{
id: "w", badge: "Weekly", price: "$120/mo", subtitle: "For offices", buttons: [{ text: "Subscribe", href: "#" }],
features: ["4 deliveries per month", "Premium selection"],
},
{
id: "p", badge: "Pro", price: "$250/mo", subtitle: "For events", buttons: [{ text: "Subscribe", href: "#" }],
features: ["Weekly luxury arrangements", "Priority support"],
},
]}
title="Subscription Plans"
description="Have flowers delivered regularly."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Alice M.",
handle: "@alice",
testimonial: "The best flower shop in town!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-young-beautiful-smiling-woman-looking-trendy-girl-casual-summer-hoodie-skirt-clothes_158538-1428.jpg",
},
{
id: "2",
name: "Bob D.",
handle: "@bob",
testimonial: "My wife absolutely loved the roses.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-cheerful-smiling-man-looking-happy-express-enthusiastic-optimistic-emotions-seei_1258-113416.jpg",
},
{
id: "3",
name: "Carla F.",
handle: "@carla",
testimonial: "Amazing service and beautiful arrangements.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-man-showing-approval_23-2148230800.jpg",
},
{
id: "4",
name: "David G.",
handle: "@david",
testimonial: "Fast delivery and very fresh flowers.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-satisfied-happy-young-man-glasses-working-cafe-sitting-coworking-space-with-laptop-showing-thumbs-up-like-approve-smth-good-chatting-giving-online-lessons_1258-314620.jpg",
},
{
id: "5",
name: "Eva P.",
handle: "@eva",
testimonial: "Worth every penny. Stunning work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-female-florist-medium-shot_23-2148463258.jpg",
},
]}
showRating={true}
title="Customer Stories"
description="See why locals love our flowers."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Alice M.", handle: "@alice", testimonial: "The best flower shop in town!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-young-beautiful-smiling-woman-looking-trendy-girl-casual-summer-hoodie-skirt-clothes_158538-1428.jpg" },
{ id: "2", name: "Bob D.", handle: "@bob", testimonial: "My wife absolutely loved the roses.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-cheerful-smiling-man-looking-happy-express-enthusiastic-optimistic-emotions-seei_1258-113416.jpg" },
{ id: "3", name: "Carla F.", handle: "@carla", testimonial: "Amazing service and beautiful arrangements.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-man-showing-approval_23-2148230800.jpg" },
{ id: "4", name: "David G.", handle: "@david", testimonial: "Fast delivery and very fresh flowers.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-satisfied-happy-young-man-glasses-working-cafe-sitting-coworking-space-with-laptop-showing-thumbs-up-like-approve-smth-good-chatting-giving-online-lessons_1258-314620.jpg" },
{ id: "5", name: "Eva P.", handle: "@eva", testimonial: "Worth every penny. Stunning work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-female-florist-medium-shot_23-2148463258.jpg" },
]}
showRating={true}
title="Customer Stories"
description="See why locals love our flowers."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get in Touch"
description="Have special requests or event needs? We'd love to hear from you."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/bunch-fresh-flowers-glass-desk_23-2147929233.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get in Touch"
description="Have special requests or event needs? We'd love to hear from you."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Your Email" },
]}
imageSrc="http://img.b2bpic.net/free-photo/bunch-fresh-flowers-glass-desk_23-2147929233.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Shop",
href: "#products",
},
{
label: "Pricing",
href: "#pricing",
},
],
},
{
items: [
{
label: "Contact",
href: "#contact",
},
{
label: "About",
href: "#about",
},
],
},
]}
logoText="John's Famous Flowers"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Shop", href: "#products" }, { label: "Pricing", href: "#pricing" }] },
{ items: [{ label: "Contact", href: "#contact" }, { label: "About", href: "#about" }] },
]}
logoText="John's Famous Flowers"
/>
</div>
</ReactLenis>
</ThemeProvider>
);