232 lines
12 KiB
TypeScript
232 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Award, Flower, Flower2, Gift, Heart, Leaf, Mail, Shield, Sparkles, Truck } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Bloom"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Order Now", href: "products"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Discover Fresh & Beautiful Flowers"
|
|
description="Handpicked blooms delivered fresh to your doorstep. Celebrate every moment with nature's finest arrangements."
|
|
tag="Premium Florals"
|
|
tagIcon={Flower2}
|
|
background={{ variant: "radial-gradient" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/bouquet-pink-roses-single-branch-rose-with-green-leaves-inside-vase_114579-1440.jpg", imageAlt: "Elegant rose bouquet arrangement"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/closeup-pink-rose-bouquet_53876-153449.jpg", imageAlt: "Colorful spring tulips"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/wedding-roses-bouquet-stands-chair-around-are-scattered-petals-roses_8353-9798.jpg", imageAlt: "Bright sunflower bunch"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/floral-decor-light-pink-roses-vase-scissors-rope-rose-petals-black_140725-10930.jpg", imageAlt: "Romantic peony arrangement"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-bouquet-with-pink-roses-green-leaves_181624-28053.jpg", imageAlt: "Delicate cherry blossom display"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Shop Flowers", href: "products" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="We believe every flower tells a story of beauty, care, and connection. Since 2010, Bloom has been crafting memorable moments through the art of floristry."
|
|
useInvertedBackground="noInvert"
|
|
metrics={[
|
|
{ icon: Heart, label: "Happy Customers", value: "50K+" },
|
|
{ icon: Flower, label: "Bouquets Created", value: "100K+" },
|
|
{ icon: Truck, label: "Same-Day Deliveries", value: "95%" },
|
|
{ icon: Award, label: "Industry Awards", value: "15+" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Signature Collections"
|
|
description="Browse our curated selection of premium floral arrangements perfect for any occasion."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Bloom Classic", name: "Red Romance Roses", price: "$75.00", rating: 5,
|
|
reviewCount: "328", imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-holding-collection-red-roses_23-2148488575.jpg", imageAlt: "Dozen red roses bouquet"
|
|
},
|
|
{
|
|
id: "2", brand: "Bloom Spring", name: "Vibrant Tulip Ensemble", price: "$65.00", rating: 5,
|
|
reviewCount: "245", imageSrc: "https://img.b2bpic.net/free-photo/side-view-bouquet-red-color-roses-flowers_140725-12105.jpg", imageAlt: "Colorful mixed tulips arrangement"
|
|
},
|
|
{
|
|
id: "3", brand: "Bloom Sunshine", name: "Golden Sunflower Radiance", price: "$55.00", rating: 4,
|
|
reviewCount: "189", imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-beautifully-bloomed-colorful-rose-flowers_23-2149005546.jpg", imageAlt: "Bright sunflower bouquet"
|
|
},
|
|
{
|
|
id: "4", brand: "Bloom Garden", name: "Wild Meadow Mix", price: "$70.00", rating: 5,
|
|
reviewCount: "412", imageSrc: "https://img.b2bpic.net/free-photo/rich-bouquet-made-red-roses-stands-outside_8353-8470.jpg", imageAlt: "Natural mixed wildflowers arrangement"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
title="Why Choose Bloom"
|
|
description="Experience the difference of premium floristry with our commitment to quality and care."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
features={[
|
|
{
|
|
icon: Leaf,
|
|
title: "Fresh Daily", description: "We source the finest blooms daily from trusted growers worldwide to ensure peak freshness and vibrancy in every arrangement."
|
|
},
|
|
{
|
|
icon: Truck,
|
|
title: "Fast Delivery", description: "Same-day delivery available for orders placed before noon. We guarantee your flowers arrive fresh and beautiful."
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Quality Guaranteed", description: "Every arrangement is handcrafted by expert florists and backed by our 100% satisfaction guarantee."
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Custom Designs", description: "Work with our designers to create a one-of-a-kind arrangement tailored perfectly to your vision and budget."
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: "Eco-Friendly", description: "We use sustainable practices, recyclable packaging, and support local farms to protect our environment."
|
|
},
|
|
{
|
|
icon: Gift,
|
|
title: "Perfect Gifts", description: "Surprise your loved ones with our beautifully presented bouquets and personalized gift cards for any occasion."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Customer Love"
|
|
description="See what our happy customers have to say about their Bloom experience."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", role: "Wedding Planner", testimonial: "Bloom created the most stunning wedding centerpieces for our big day. The attention to detail and freshness was absolutely incredible. Every guest complimented the flowers!", imageSrc: "https://img.b2bpic.net/free-photo/headshot-charismatic-pleasant-friendly-european-woman-short-chestnut-haircut-smiling-positive-feeling-happy-upbeat-enjoying-lifes-casually-talking-friends-amused-cheerful-standing-white-background_176420-34680.jpg", imageAlt: "Sarah Mitchell portrait"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", role: "Business Owner", testimonial: "I order from Bloom every week for our office. Their arrangements instantly brighten our workspace, and their same-day delivery is reliable and fast. Highly recommended!", imageSrc: "https://img.b2bpic.net/free-photo/caucasion-woman-casual-confident-concept_53876-137678.jpg", imageAlt: "James Chen portrait"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "Event Coordinator", testimonial: "Working with Bloom for our corporate events has been a game-changer. Their custom designs are always on-brand, fresh, and delivered perfectly on time every single time.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-25676.jpg", imageAlt: "Emily Rodriguez portrait"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Thompson", role: "Customer", testimonial: "I sent flowers to my mom on Mother's Day and her reaction was priceless. They arrived the next morning looking absolutely perfect. Bloom is now my go-to for all occasions!", imageSrc: "https://img.b2bpic.net/free-photo/close-up-picture-smiling-woman-black-dress-looking-camera-gray_171337-13347.jpg", imageAlt: "Michael Thompson portrait"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Updated"
|
|
title="Get Special Offers & Seasonal Collections"
|
|
description="Subscribe to our newsletter to receive exclusive discounts, seasonal flower arrangements, and florist tips delivered to your inbox."
|
|
tagIcon={Mail}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground="noInvert"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe at any time. We send updates about 2-3 times per month."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Bloom"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "hero" },
|
|
{ label: "Shop", href: "products" },
|
|
{ label: "About", href: "about" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Delivery Info", href: "#" },
|
|
{ label: "Care Guide", href: "#" },
|
|
{ label: "Gift Cards", href: "#" },
|
|
{ label: "Custom Orders", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms & Conditions", href: "#" },
|
|
{ label: "Shipping Policy", href: "#" },
|
|
{ label: "Returns", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Pinterest", href: "https://pinterest.com" },
|
|
{ label: "TikTok", href: "https://tiktok.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |