334 lines
14 KiB
TypeScript
334 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardSix from '@/components/sections/product/ProductCardSix';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import { Sparkles, Users, TrendingUp, Zap, Star, Heart, Flower } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="radialGradient"
|
|
cardStyle="solid-accent-light"
|
|
primaryButtonStyle="neon-glow-border"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="TeenSun"
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Instagram", id: "https://instagram.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardMetrics
|
|
title="Bloom Your Way"
|
|
description="TeenSun—where flowers meet youth, style, and bold vibes"
|
|
tag="Express Yourself"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Shop Now and Stand Out", href: "#products" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618339339-arsowb86.jpg"
|
|
imageAlt="Vibrant flower arrangement aesthetic"
|
|
frameStyle="card"
|
|
metricsLabel="Loved by thousands of teens expressing themselves through flowers"
|
|
metrics={[
|
|
{ id: "1", value: "10K+", label: "Happy Teens" },
|
|
{ id: "2", value: "5K+", label: "Arrangements Bloomed" },
|
|
{ id: "3", value: "4.9★", label: "Customer Love" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
title="TeenSun is more than flowers. It's self-expression. Bold, vibrant, and unapologetically yours—from prom corsages to dorm room vibes, every arrangement tells your story."
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Explore Collections", href: "#products" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardSix
|
|
title="Featured Collections"
|
|
description="Discover arrangements designed for your vibe. Bold colors, fresh blooms, and Instagrammable moments."
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Summer Sunset",
|
|
price: "$45",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618340843-nnovvivq.jpg",
|
|
imageAlt: "Summer sunset flower arrangement"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Electric Dream",
|
|
price: "$55",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618342026-zneq9gsx.jpg",
|
|
imageAlt: "Electric dream vibrant bouquet"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Wildflower Mood",
|
|
price: "$50",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618342915-84l0rgsg.jpg",
|
|
imageAlt: "Wildflower mood arrangement"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Rainbow Bloom",
|
|
price: "$60",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618345921-7ayd5tm5.jpg",
|
|
imageAlt: "Rainbow bloom colorful arrangement"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="video" data-section="video">
|
|
<FeatureCardSix
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "The TeenSun Story",
|
|
description: "From our garden to your moment. Discover how we create flower arrangements that celebrate youth, style, and self-expression. Every bloom tells a story—yours.",
|
|
videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Flower Arrangements That Pop",
|
|
description: "Watch our creative process as we design bold, vibrant arrangements. See how we pick each flower, color, and detail to make sure your bouquet is absolutely stunning.",
|
|
videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Behind the Blooms",
|
|
description: "Meet the team that makes TeenSun happen. Learn about our passion for sustainable floristry and how we bring fresh, gorgeous arrangements to your door every single time.",
|
|
videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ"
|
|
}
|
|
]}
|
|
title="Our Story in Full Bloom"
|
|
description="Experience TeenSun through video. See our passion, process, and the magic that goes into every arrangement."
|
|
tag="Brand Story"
|
|
tagIcon={Flower}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Teens Say"
|
|
description="Real stories from real people who bloomed with TeenSun"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Maya Chen",
|
|
handle: "@mayaflowers",
|
|
testimonial: "Finally flowers that feel like ME! The arrangement I got was so aesthetic and my bestie was obsessed. TeenSun gets it.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618349555-r4egyovr.jpg",
|
|
imageAlt: "teen girl portrait avatar young smile"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Jordan",
|
|
handle: "@jordan.vibes",
|
|
testimonial: "Used TeenSun for prom flowers and they were STUNNING. Not your grandma's bouquet—bold, colorful, perfect.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618350815-56pqfu8k.jpg",
|
|
imageAlt: "teen avatar young person portrait smile"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Aisha",
|
|
handle: "@aisha.loves.flowers",
|
|
testimonial: "The quality is insane and they arrived super fresh. My room looks like an Instagram photoshoot now. 10/10",
|
|
rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79357.jpg",
|
|
imageAlt: "young girl portrait avatar friendly"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Tyler",
|
|
handle: "@flower.guy",
|
|
testimonial: "Sent my crush flowers from TeenSun and she loved them. The colors pop and they actually last forever.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618371721-xioe1jkw.jpg",
|
|
imageAlt: "teen boy portrait avatar smile"
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Sofia",
|
|
handle: "@sofias.corner",
|
|
testimonial: "Every arrangement feels custom. Like they know exactly what vibe I'm going for. Best flower delivery ever.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618375722-pri3gds2.jpg",
|
|
imageAlt: "young person portrait avatar happy"
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Emma",
|
|
handle: "@emmaboots",
|
|
testimonial: "Obsessed with TeenSun. The flowers are fresh, the colors are fire, and the customer service is actually so friendly.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618388871-dusvrdb4.jpg",
|
|
imageAlt: "teen girl portrait avatar aesthetic"
|
|
}
|
|
]}
|
|
showRating={true}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSix
|
|
title="TeenSun by the Numbers"
|
|
description="Growing fast because teens choose authentic, bold expression"
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "10K+",
|
|
tag: "Community",
|
|
tagIcon: Users,
|
|
title: "Teens Blooming"
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "50K+",
|
|
tag: "Growth",
|
|
tagIcon: TrendingUp,
|
|
title: "Orders Shipped"
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "48hrs",
|
|
tag: "Speed",
|
|
tagIcon: Zap,
|
|
title: "Delivery Time"
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "4.9/5",
|
|
tag: "Rating",
|
|
tagIcon: Star,
|
|
title: "Customer Satisfaction"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Questions? Let's Chat"
|
|
ctaDescription="Reach out anytime. We love connecting with our teen community."
|
|
ctaButton={{
|
|
text: "Get in Touch",
|
|
href: "mailto:hello@teensun.com"
|
|
}}
|
|
ctaIcon={Heart}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How long do arrangements last?",
|
|
content: "Our flowers stay fresh for 7-10 days with proper care. We include care instructions with every order. Want them to last longer? Check out our preservation tips on our blog!"
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Do you ship nationwide?",
|
|
content: "Yes! We deliver to all 50 states. Standard shipping takes 2-3 days, and we have next-day options for last-minute needs. All arrangements arrive fresh and ready to impress."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Can I customize my arrangement?",
|
|
content: "Absolutely! Hit us up at hello@teensun.com with your vibe and color preferences. Our team will create something totally custom just for you."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What's your return/refund policy?",
|
|
content: "Not happy? We've got you covered. We offer refunds or replacements within 24 hours if there are any issues. Your satisfaction is everything to us."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Are the flowers sustainable?",
|
|
content: "We partner with local growers and use eco-friendly packaging. Every arrangement supports sustainable farming practices. Bloom responsibly with TeenSun."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Do you offer bulk orders for events?",
|
|
content: "Yes! Planning a party, prom, or event? Contact our team at events@teensun.com for custom bulk pricing and arrangements."
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{ label: "All Arrangements", href: "#products" },
|
|
{ label: "Summer Collection", href: "#products" },
|
|
{ label: "Gifts", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com/teensunflowers" },
|
|
{ label: "TikTok", href: "https://tiktok.com/teensunflowers" },
|
|
{ label: "Contact Us", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "TeenSun",
|
|
items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Careers", href: "https://teensun.com/careers" }
|
|
]
|
|
}
|
|
]}
|
|
logoText="TeenSun"
|
|
copyrightText="© 2025 TeenSun Flowers. Bloom your way."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |