238 lines
13 KiB
TypeScript
238 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { CheckCircle, Hammer, Leaf, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmall"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" },
|
|
]}
|
|
button={{ text: "Shop Now", href: "#products" }}
|
|
brandName="StyleCo"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Premium Fashion for Every Occasion"
|
|
description="Discover our curated collection of high-quality clothing that combines style, comfort, and sustainability. Shop timeless pieces designed for modern living."
|
|
background={{ variant: "plain" }}
|
|
kpis={[
|
|
{ value: "10,000+", label: "Happy Customers" },
|
|
{ value: "99.2%", label: "Quality Rating" },
|
|
{ value: "2-4 Days", label: "Fast Delivery" },
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="New Collection"
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-sitting-outdoors_23-2149409728.jpg"
|
|
imageAlt="Fashion collection showcase"
|
|
mediaAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "#products" },
|
|
{ text: "Learn More", href: "#about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
products={[
|
|
{
|
|
id: "1", name: "Premium Cotton T-Shirt", price: "$49.99", variant: "White, Black, Navy · 5 Colors", imageSrc: "http://img.b2bpic.net/free-photo/top-view-vintage-suitcase-with-casual-clothes_23-2148610424.jpg?_wi=1", imageAlt: "Premium cotton t-shirt", isFavorited: false,
|
|
},
|
|
{
|
|
id: "2", name: "Classic Denim Jeans", price: "$89.99", variant: "Deep Blue · Multiple Sizes", imageSrc: "http://img.b2bpic.net/free-photo/view-beige-tone-colored-pants_23-2150773390.jpg?_wi=1", imageAlt: "Classic denim jeans", isFavorited: false,
|
|
},
|
|
{
|
|
id: "3", name: "Elegant Evening Dress", price: "$149.99", variant: "Black, Burgundy · Premium Fabric", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-bronze-make-up-black-golden-dress-stone-wall_343596-375.jpg?_wi=1", imageAlt: "Elegant evening dress", isFavorited: false,
|
|
},
|
|
]}
|
|
title="Featured Collections"
|
|
description="Hand-picked selections of our most loved pieces this season"
|
|
tag="Best Sellers"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View All Products", href: "#products" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Crafted with Purpose"
|
|
description="We believe fashion should be sustainable, accessible, and empowering. Since 2015, we've been dedicated to creating high-quality clothing that makes you feel confident in every moment. Our commitment to ethical production and innovative design sets us apart."
|
|
tag="About StyleCo"
|
|
imageSrc="http://img.b2bpic.net/free-photo/brown-gray-hallway-with-glass-windows_250224-246.jpg?_wi=1"
|
|
imageAlt="StyleCo team and workspace"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Our Story", href: "#about" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
title="Why Choose Us"
|
|
description="Experience the difference quality and care make"
|
|
features={[
|
|
{
|
|
title: "Sustainable Materials", description: "100% ethically sourced fabrics and eco-friendly production methods", imageSrc: "http://img.b2bpic.net/free-photo/top-view-vintage-suitcase-with-casual-clothes_23-2148610424.jpg?_wi=2", imageAlt: "Sustainable fashion materials", buttonIcon: Leaf,
|
|
},
|
|
{
|
|
title: "Expert Craftsmanship", description: "Each piece is carefully designed and manufactured to perfection", imageSrc: "http://img.b2bpic.net/free-photo/view-beige-tone-colored-pants_23-2150773390.jpg?_wi=2", imageAlt: "Expert clothing craftsmanship", buttonIcon: Hammer,
|
|
},
|
|
{
|
|
title: "Perfect Fit Guarantee", description: "Free returns within 30 days if you're not completely satisfied", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-bronze-make-up-black-golden-dress-stone-wall_343596-375.jpg?_wi=2", imageAlt: "Perfect fit clothing", buttonIcon: CheckCircle,
|
|
},
|
|
{
|
|
title: "Style Consultation", description: "Personal styling advice from our fashion experts available 24/7", imageSrc: "http://img.b2bpic.net/free-photo/brown-gray-hallway-with-glass-windows_250224-246.jpg?_wi=2", imageAlt: "Fashion style consultation", buttonIcon: Users,
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Loved by Customers"
|
|
description="Real feedback from people who trust our fashion"
|
|
tag="Customer Reviews"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", role: "Fashion Enthusiast", company: "New York", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-60-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1854.jpg", imageAlt: "Sarah Mitchell"},
|
|
{
|
|
id: "2", name: "James Chen", role: "Business Professional", company: "San Francisco", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-focus-concentration_181624-26347.jpg", imageAlt: "James Chen"},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "Creative Director", company: "Los Angeles", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-sitting-table_23-2148095754.jpg", imageAlt: "Emma Rodriguez"},
|
|
{
|
|
id: "4", name: "Michael Thompson", role: "Entrepreneur", company: "Austin", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg", imageAlt: "Michael Thompson"},
|
|
{
|
|
id: "5", name: "Lisa Anderson", role: "Marketing Manager", company: "Chicago", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-business-woman-with-sunglasses_23-2148603032.jpg", imageAlt: "Lisa Anderson"},
|
|
{
|
|
id: "6", name: "David Park", role: "Tech Executive", company: "Seattle", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg", imageAlt: "David Park"},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Trusted by Fashion Communities"
|
|
description="Featured in leading fashion publications and recommended by style influencers worldwide"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Fashion Hub", "Trend Co", "Premium Wear", "Style Vault", "Outfit Lab", "Wardrobe Pro", "Chic Threads", "Denim Collective"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on all items. If you're not completely satisfied, simply return your purchase for a full refund. We also cover return shipping costs for defective items."},
|
|
{
|
|
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 3-5 business days. We also offer expedited 1-2 day shipping for an additional fee. All orders include free delivery on orders over $100."},
|
|
{
|
|
id: "3", title: "Do you offer size exchanges?", content: "Yes! If your item doesn't fit perfectly, we offer free size exchanges within 30 days of purchase. Contact our customer service team and we'll arrange everything for you."},
|
|
{
|
|
id: "4", title: "Are your materials sustainable?", content: "We're committed to sustainability. All our products are made from ethically sourced materials including organic cotton, recycled polyester, and eco-friendly dyes. We work with certified suppliers who meet strict environmental standards."},
|
|
{
|
|
id: "5", title: "Can I get style advice?", content: "Absolutely! Our fashion experts are available 24/7 via chat, email, or phone. We offer personalized styling consultations to help you find pieces that work best for your body type and lifestyle."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our products and services"
|
|
tag="Help & Support"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "New Arrivals", href: "#products" },
|
|
{ label: "Best Sellers", href: "#products" },
|
|
{ label: "Collections", href: "#products" },
|
|
{ label: "Sale", href: "#products" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Size Guide", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Return Policy", href: "#" },
|
|
{ label: "Accessibility", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2025 StyleCo. All rights reserved."
|
|
bottomRightText="Crafted with care for fashion lovers"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|