Files
2155429f-ef88-4d01-94ed-377…/src/app/page.tsx
2026-01-05 13:14:18 +00:00

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>
);
}