Initial commit
This commit is contained in:
301
src/app/page.tsx
Normal file
301
src/app/page.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
"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 { Sparkles, Users, TrendingUp, Zap, Star, Heart } 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="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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user