290 lines
12 KiB
TypeScript
290 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Mail, Heart, ShoppingBag } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="none"
|
|
cardStyle="solid-accent"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Fashion Forward"
|
|
navItems={[
|
|
{ name: "Shop", id: "shop" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Collections", id: "collections" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitAvatars
|
|
title="Elevate Your Style"
|
|
description="Discover our premium collection of carefully curated clothing pieces designed for the modern fashion enthusiast. From timeless classics to contemporary trends."
|
|
tag="New Collection"
|
|
tagIcon={ShoppingBag}
|
|
imagePosition="right"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983288368-py19hzaj.jpg"
|
|
imageAlt="Fashion collection showcase"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg", alt: "Customer 1" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg", alt: "Customer 2" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg", alt: "Customer 3" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg", alt: "Customer 4" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787044450-9f4y10ts.jpg", alt: "Customer 5" }
|
|
]}
|
|
avatarText="Join 10,000+ fashion lovers"
|
|
buttons={[
|
|
{ text: "Shop Now", href: "shop" },
|
|
{ text: "Explore Collection", href: "collections" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="shop" data-section="shop">
|
|
<ProductCardOne
|
|
title="Featured Collection"
|
|
description="Hand-picked pieces from our latest arrivals. Each item is selected for quality, style, and comfort."
|
|
tag="Best Sellers"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Premium Cotton T-Shirt",
|
|
price: "$49.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
|
|
imageAlt: "Premium Cotton T-Shirt",
|
|
isFavorited: false
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Elegant Silk Blouse",
|
|
price: "$89.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983289277-elw8ical.jpg",
|
|
imageAlt: "Elegant Silk Blouse",
|
|
isFavorited: false
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Classic Denim Jeans",
|
|
price: "$79.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983290082-rq47q3ut.jpg",
|
|
imageAlt: "Classic Denim Jeans",
|
|
isFavorited: false
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Luxury Leather Jacket",
|
|
price: "$199.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983291397-8uh3i1cf.jpg",
|
|
imageAlt: "Luxury Leather Jacket",
|
|
isFavorited: false
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<FeatureCardThree
|
|
title="Why Choose Our Fashion"
|
|
description="We believe in quality, sustainability, and timeless style. Every piece in our collection is carefully selected to meet our high standards."
|
|
tag="Our Promise"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
features={[
|
|
{
|
|
id: "1",
|
|
title: "Premium Quality",
|
|
description: "We source only the finest fabrics and materials from trusted suppliers around the world.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983292413-wq7r64pm.jpg",
|
|
imageAlt: "Premium fabric quality"
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Sustainable Fashion",
|
|
description: "Eco-friendly production methods and ethical sourcing practices for a better future.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787045743-6gjau4zf.jpg",
|
|
imageAlt: "Sustainable production"
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Expert Craftsmanship",
|
|
description: "Each piece is handcrafted by skilled artisans with decades of experience in fashion.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983293269-qul9w8a9.jpg",
|
|
imageAlt: "Expert craftsmanship"
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Customer Support",
|
|
description: "Dedicated support team ready to help with styling advice and any questions.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983294082-ngjm8l0d.jpg",
|
|
imageAlt: "Customer support"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Love"
|
|
description="Read authentic reviews from fashion enthusiasts who have transformed their wardrobe with our collection."
|
|
tag="Customer Reviews"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Mitchell",
|
|
role: "Fashion Blogger",
|
|
company: "Style & Substance",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg",
|
|
imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "James Chen",
|
|
role: "Fashion Designer",
|
|
company: "Creative Studio",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
|
|
imageAlt: "James Chen"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emma Johnson",
|
|
role: "Style Consultant",
|
|
company: "Fashion Forward",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg",
|
|
imageAlt: "Emma Johnson"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Michael Rodriguez",
|
|
role: "Fashion Enthusiast",
|
|
company: "Style Community",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
|
|
imageAlt: "Michael Rodriguez"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="collections" data-section="collections">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our collections, sizing, and policies."
|
|
textPosition="left"
|
|
useInvertedBackground="noInvert"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What is your return policy?",
|
|
content: "We offer a 30-day return policy on all items. If you're not satisfied with your purchase, simply return it in original condition for a full refund or exchange."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "How do I find my size?",
|
|
content: "Our size guide is available on each product page. We offer international sizing options including XS to XXL. Feel free to contact us if you need personalized sizing assistance."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Do you ship internationally?",
|
|
content: "Yes! We ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. Standard shipping takes 5-7 business days."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Are your materials ethically sourced?",
|
|
content: "Absolutely. We partner exclusively with suppliers who follow fair trade practices and environmental standards. All our manufacturers are certified for ethical production."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Can I customize my order?",
|
|
content: "We offer customization options for select items including monogramming, embroidery, and color matching. Contact our team for details on personalization services."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get In Touch"
|
|
title="Join Our Fashion Community"
|
|
description="Subscribe to our newsletter for exclusive previews, style tips, and special offers on new collections."
|
|
tagIcon={Mail}
|
|
useInvertedBackground="noInvert"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime. No spam, ever."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "New Arrivals", href: "shop" },
|
|
{ label: "Best Sellers", href: "shop" },
|
|
{ label: "Sale", href: "shop" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Our Story", href: "about" },
|
|
{ label: "Sustainability", href: "about" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "Support", href: "contact" },
|
|
{ label: "Size Guide", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Shipping Info", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
logoText="Fashion Forward"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|