282 lines
17 KiB
TypeScript
282 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import {
|
|
Award,
|
|
Check,
|
|
Heart,
|
|
HelpCircle,
|
|
Instagram,
|
|
Mail,
|
|
MessageCircle,
|
|
Palette,
|
|
ShoppingBag,
|
|
Sparkles,
|
|
Twitter,
|
|
Facebook,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="StyleNest"
|
|
navItems={[
|
|
{ name: "Collections", id: "collections" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Shop Now", href: "#products"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Wear Your Story, Own Your Style"
|
|
description="Thoughtfully designed cloth for everyday confidence. Explore our curated collections and discover pieces that feel like you."
|
|
background="radial-gradient"
|
|
tag="New Arrivals"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Shop New Arrivals", href: "#products" },
|
|
{ text: "Explore Collections", href: "#collections" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/interested-african-american-woman-trench-coat-looking-camera-front-view-curious-black-girl-standing-bricked-background_197531-28937.jpg"
|
|
imageAlt="Confident woman modeling casual trendy clothing"
|
|
ariaLabel="Hero section showcasing new arrivals"
|
|
/>
|
|
</div>
|
|
|
|
<div id="collections" data-section="collections">
|
|
<FeatureCardTen
|
|
title="Curated Collections"
|
|
description="Each piece in our collections is thoughtfully selected to reflect quality craftsmanship and contemporary style. From essentials to statement pieces, find what resonates with your personal aesthetic."
|
|
tag="Collections"
|
|
tagIcon={Palette}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "essentials", title: "Essentials", description: "Timeless basics that form the foundation of any wardrobe. Quality fabrics, perfect fit, everyday staples.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/different-zero-waste-products-with-copy-space_23-2148491097.jpg?_wi=1", imageAlt: "Folded quality casual apparel"},
|
|
items: [
|
|
{ icon: Check, text: "Premium fabrics" },
|
|
{ icon: Check, text: "Perfect fit" },
|
|
{ icon: Check, text: "Everyday wear" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
id: "layers", title: "Layers & Outerwear", description: "Versatile pieces designed to transition across seasons. Layer with confidence using our carefully curated outerwear.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-sitting-front-building-with-bag-looking-camera_23-2148148108.jpg?_wi=1", imageAlt: "Modern casual denim jacket"},
|
|
items: [
|
|
{ icon: Check, text: "Versatile styling" },
|
|
{ icon: Check, text: "Season-ready" },
|
|
{ icon: Check, text: "Quality construction" },
|
|
],
|
|
reverse: true,
|
|
},
|
|
{
|
|
id: "statement", title: "Statement Pieces", description: "Stand out with intentional design. Pieces that make an impression while maintaining wearability and comfort.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-attractive-stylish-blonde-woman-city-street-summer-fashion-style-dress-wearing-sunglasses_285396-8475.jpg?_wi=1", imageAlt: "Premium dress elegant casual wear"},
|
|
items: [
|
|
{ icon: Check, text: "Distinctive design" },
|
|
{ icon: Check, text: "Comfortable wear" },
|
|
{ icon: Check, text: "Confidence boost" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Featured Products"
|
|
description="Discover our latest additions and bestsellers. Each piece represents our commitment to quality, style, and sustainability."
|
|
tag="Shop"
|
|
tagIcon={ShoppingBag}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "product-1", brand: "StyleNest", name: "Premium Cotton Essential Tee", price: "$48", rating: 5,
|
|
reviewCount: "324", imageSrc: "http://img.b2bpic.net/free-photo/different-zero-waste-products-with-copy-space_23-2148491097.jpg?_wi=2", imageAlt: "Premium cotton essential t-shirt", isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-2", brand: "StyleNest", name: "Versatile Denim Jacket", price: "$128", rating: 5,
|
|
reviewCount: "287", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-sitting-front-building-with-bag-looking-camera_23-2148148108.jpg?_wi=2", imageAlt: "Modern casual denim jacket", isFavorited: false,
|
|
},
|
|
{
|
|
id: "product-3", brand: "StyleNest", name: "Minimalist Everyday Dress", price: "$89", rating: 5,
|
|
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-attractive-stylish-blonde-woman-city-street-summer-fashion-style-dress-wearing-sunglasses_285396-8475.jpg?_wi=2", imageAlt: "Premium dress elegant casual wear", isFavorited: false,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Crafted with Intention"
|
|
description="StyleNest was founded on the belief that quality clothing should be accessible to everyone. We partner with ethical manufacturers and sustainable fabric suppliers to create pieces that feel good to wear and better to own. Every collection tells a story of craftsmanship, authenticity, and respect for both people and planet."
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Learn More About Us", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-hands-folding-clothing-item_23-2148975582.jpg"
|
|
imageAlt="Fashion design studio showing quality craftsmanship"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="StyleNest has been recognized by leading fashion publications and media outlets for our commitment to quality and design excellence."
|
|
tag="Press"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
speed={40}
|
|
names=[
|
|
"Vogue", "Harper's Bazaar", "ELLE", "GQ", "Refinery29", "High Snobiety", "Hypebeast", "Design Week"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-psd/vinyl-vintage-music-poster-template_23-2148623988.jpg", "http://img.b2bpic.net/free-vector/golden-elegant-logo-flat-style_52683-14904.jpg", "http://img.b2bpic.net/free-vector/flat-design-fashion-trends-youtube-channel-art_23-2150759190.jpg", "http://img.b2bpic.net/free-vector/logo-template-design_1222-88.jpg", "http://img.b2bpic.net/free-vector/fashion-week-twitch-banner-template_23-2151062637.jpg", "http://img.b2bpic.net/free-vector/flat-design-human-resources-instagram-stories_23-2149500498.jpg", "http://img.b2bpic.net/free-vector/flat-design-acid-emoji-poster_23-2148914625.jpg", "http://img.b2bpic.net/free-vector/sacred-pentagon-poster_1017-2717.jpg"]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real feedback from people who have found their style with StyleNest. Discover why customers trust us for quality, fit, and authentic brand values."
|
|
tag="Testimonials"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Sarah Johnson", role: "Creative Director", company: "Design Studio", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman_23-2148006226.jpg", imageAlt: "Sarah Johnson professional portrait"},
|
|
{
|
|
id: "testimonial-2", name: "Michael Chen", role: "Fashion Consultant", company: "Style Collective", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3674.jpg", imageAlt: "Michael Chen professional portrait"},
|
|
{
|
|
id: "testimonial-3", name: "Emily Rodriguez", role: "Content Creator", company: "Lifestyle Blog", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-home_23-2148162643.jpg", imageAlt: "Emily Rodriguez professional portrait"},
|
|
{
|
|
id: "testimonial-4", name: "David Kim", role: "Product Manager", company: "Fashion Brand", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-elegant-groom-posing_23-2150327171.jpg", imageAlt: "David Kim professional portrait"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about sizing, materials, shipping, and more. We're here to help you find your perfect fit."
|
|
tag="Help"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "sizing", title: "How do I find the right size?", content: "Our sizing guide provides detailed measurements for each product. We recommend measuring yourself following our guide and comparing to our size chart. If you're between sizes, we suggest sizing up for a comfortable fit. Our customer service team is also available to help if you have specific sizing questions."},
|
|
{
|
|
id: "materials", title: "What materials do you use?", content: "We prioritize quality fabrics sourced from ethical suppliers. Most of our essentials are made from premium cotton or cotton blends. Our outerwear features sustainable materials including organic cotton, recycled polyester, and other eco-conscious alternatives. Each product description details the fabric composition."},
|
|
{
|
|
id: "shipping", title: "What are your shipping times?", content: "Standard shipping typically takes 5-7 business days. Express shipping is available for 2-3 business day delivery. All orders ship with tracking information. We ship worldwide with transparent pricing shown at checkout. Domestic orders over $100 qualify for free shipping."},
|
|
{
|
|
id: "returns", title: "What is your return policy?", content: "We offer a 30-day return policy for all unworn items with original tags attached. Returns are free for domestic orders. Simply initiate a return through your account, and we'll provide a prepaid shipping label. Refunds are processed within 5-7 business days of receiving your return."},
|
|
{
|
|
id: "care", title: "How should I care for my pieces?", content: "Each item comes with detailed care instructions. Most of our pieces are machine washable in cold water. We recommend washing inside out and air drying to maintain quality and longevity. For special fabrics like silk or delicate knits, gentle hand washing is recommended. Proper care ensures your StyleNest pieces last for years."},
|
|
{
|
|
id: "sustainability", title: "Are your products sustainable?", content: "Sustainability is core to our mission. We partner with ethical manufacturers, use eco-conscious materials, and minimize waste throughout production. Our packaging is recyclable and plastic-free. We also offer a take-back program where you can return worn pieces for recycling. Learn more about our sustainability initiatives on our dedicated page."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Get In Touch"
|
|
ctaDescription="Have questions about our collections, sizing, or brand story? Our customer service team is here to help. Reach out via email, phone, or contact form."
|
|
ctaButton={{
|
|
text: "Contact Us", href: "#"}}
|
|
ctaIcon={Mail}
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "contact-email", title: "Email Support", content: "Reach us at support@stylenest.com. We typically respond within 24 business hours during weekdays."},
|
|
{
|
|
id: "contact-phone", title: "Phone Support", content: "Call our customer service team at +1 (555) 123-4567. Available Monday-Friday, 9 AM - 6 PM EST."},
|
|
{
|
|
id: "contact-social", title: "Social Media", content: "Connect with us on Instagram @stylenest or send us a message on our social channels for faster responses on general inquiries."},
|
|
{
|
|
id: "contact-partnership", title: "Brand Partnerships", content: "Interested in collaborating with StyleNest? Email partnerships@stylenest.com with details about your proposal."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="StyleNest"
|
|
copyrightText="© 2025 StyleNest. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com", ariaLabel: "Visit StyleNest on Instagram"},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com", ariaLabel: "Visit StyleNest on Twitter"},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com", ariaLabel: "Visit StyleNest on Facebook"},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:hello@stylenest.com", ariaLabel: "Email StyleNest"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |