235 lines
13 KiB
TypeScript
235 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Award, CheckCircle, Heart, HelpCircle, Mail, MessageCircle, Sparkles, TrendingUp, Zap, Shield } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="noise"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="ThreadCode"
|
|
navItems={[
|
|
{ name: "Collections", id: "collections" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "#products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Elevate Your Style"
|
|
description="Discover our carefully curated collection of premium clothing designed for the modern wardrobe. Quality, comfort, and contemporary aesthetics in every piece."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="New Collection"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "#products" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket_23-2149020793.jpg"
|
|
imageAlt="modern fashion campaign lifestyle photography"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg", alt: "Customer 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-man-wearing-hat_23-2148895168.jpg", alt: "Customer 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg", alt: "Customer 3" }
|
|
]}
|
|
avatarText="Join 10,000+ satisfied customers"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Featured Collections"
|
|
description="Handpicked pieces from our latest seasonal releases. Each item is designed with quality and style in mind."
|
|
tag="Limited Edition"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View All", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{ id: "1", name: "Essential Black Tee", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756258.jpg", imageAlt: "premium black designer t-shirt clothing" },
|
|
{ id: "2", name: "Linen Summer Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-hipster-woman-trendy-summer-clothes-sexy-carefree-woman-posing-street-background-sunset-positive-model-outdoors-cheerful-happy-sunglasses_158538-26071.jpg", imageAlt: "elegant white linen dress fashion" },
|
|
{ id: "3", name: "Classic Denim Jacket", price: "$129.99", imageSrc: "http://img.b2bpic.net/free-photo/pretty-mixed-race-woman-with-short-hair-autumn-outwear-hat_633478-1968.jpg", imageAlt: "denim jacket outerwear fashion product" },
|
|
{ id: "4", name: "Comfort Joggers", price: "$59.99", imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830370.jpg", imageAlt: "premium joggers athleisure wear clothing" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
title="Crafted for Your Lifestyle"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Discover Our Values", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
title="Why Choose ThreadCode"
|
|
description="We combine quality materials with contemporary design to create clothing that stands out."
|
|
tag="Quality First"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="scale-rotate"
|
|
features={[
|
|
{ icon: Sparkles, title: "Premium Materials", description: "Sourced from trusted suppliers, our fabrics are chosen for durability and comfort." },
|
|
{ icon: Zap, title: "Modern Design", description: "Contemporary aesthetics that work for any occasion, from casual to professional." },
|
|
{ icon: Shield, title: "Sustainable Practices", description: "We're committed to ethical manufacturing and environmentally conscious production." },
|
|
{ icon: Award, title: "Perfect Fit", description: "Carefully sized collections that flatter different body types and styles." }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTen
|
|
title="Our Impact"
|
|
description="Building a community of fashion-forward individuals who value quality."
|
|
tag="Brand Metrics"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{ id: "1", title: "Happy Customers", subtitle: "Satisfied with their purchase", category: "Community", value: "10,000+" },
|
|
{ id: "2", title: "Collections", subtitle: "Launched since 2020", category: "Products", value: "25+" },
|
|
{ id: "3", title: "5-Star Reviews", subtitle: "Average customer rating", category: "Quality", value: "4.8" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Customers Say"
|
|
description="Real feedback from real people who love ThreadCode."
|
|
tag="Customer Stories"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
showRating={true}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Johnson", handle: "@fashionista_sarah", testimonial: "The quality is outstanding! I've been a customer for over a year and every piece is a wardrobe staple.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg", imageAlt: "professional headshot portrait business woman" },
|
|
{ id: "2", name: "Michael Chen", handle: "@style_matters", testimonial: "Finally found a brand that combines style with comfort. ThreadCode has become my go-to for everyday wear.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-hat_23-2148895168.jpg", imageAlt: "professional headshot portrait business man" },
|
|
{ id: "3", name: "Emma Rodriguez", handle: "@emma_loves_fashion", testimonial: "Amazing customer service and the best-fitting clothes I've ever owned. Highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg", imageAlt: "professional lifestyle portrait young woman" },
|
|
{ id: "4", name: "James Williams", handle: "@dapper_james", testimonial: "ThreadCode pieces are investment pieces. They last longer and always look fresh. Worth every penny.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg", imageAlt: "professional lifestyle portrait young man" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our products and services."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{ id: "1", title: "What's your return policy?", content: "We offer a 30-day return policy on all items in original condition. Simply contact our support team to initiate a return." },
|
|
{ id: "2", title: "How long does shipping take?", content: "Standard shipping takes 5-7 business days. Express shipping is available for 2-3 business day delivery." },
|
|
{ id: "3", title: "Do you ship internationally?", content: "Yes! We ship to over 50 countries. International shipping times vary but typically take 10-14 business days." },
|
|
{ id: "4", title: "How should I care for my ThreadCode pieces?", content: "All our pieces come with care instructions. Generally, we recommend cold water washing and air drying to maintain quality and longevity." },
|
|
{ id: "5", title: "Are your materials sustainable?", content: "We're committed to sustainability. Many of our pieces feature organic or recycled materials, and we continuously work to improve our environmental impact." },
|
|
{ id: "6", title: "Do you offer size exchanges?", content: "Absolutely! If you need a different size, we offer free exchanges within 14 days of purchase." }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Stay Updated"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Join Our Community"
|
|
description="Subscribe to our newsletter for exclusive deals, style tips, and early access to new collections."
|
|
buttons={[{ text: "Subscribe Now", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "Collections", href: "#collections" },
|
|
{ label: "New Arrivals", href: "#" },
|
|
{ label: "Sale", href: "#" },
|
|
{ label: "All Products", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 ThreadCode. All rights reserved. Crafted for modern style."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |