243 lines
15 KiB
TypeScript
243 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import Link from "next/link";
|
|
import { Sparkles, Award, Star, Heart, HelpCircle } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Shop", id: "/shop" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" },
|
|
{ name: "FAQ", id: "faq" },
|
|
];
|
|
|
|
const handleContactSubmit = (data: Record<string, string>) => {
|
|
console.log("Contact form submitted:", data);
|
|
alert("Thank you for reaching out! We'll get back to you soon.");
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={navItems}
|
|
button={{ text: "Shop Now", href: "/shop" }}
|
|
brandName="StyleHub"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Discover Your Style"
|
|
description="Explore our curated collection of premium fashion and apparel. Find the perfect pieces to express your unique style with our exclusive collections."
|
|
background={{ variant: "glowing-orb" }}
|
|
tag="New Arrivals"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "products" },
|
|
{ text: "View New Items", href: "#" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-holding-bunch-hangers_1163-853.jpg"
|
|
imageAlt="Fashion and lifestyle banner"
|
|
imagePosition="right"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Featured Collections"
|
|
description="Handpicked items from our latest collections designed for style and comfort"
|
|
tag="Best Sellers"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1", brand: "StyleHub Premium", name: "Classic Casual Shirt", price: "$89.99", rating: 5,
|
|
reviewCount: "2.4k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg?_wi=1", imageAlt: "Classic casual shirt"
|
|
},
|
|
{
|
|
id: "2", brand: "StyleHub Essentials", name: "Blue Denim Jacket", price: "$129.99", rating: 5,
|
|
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16967.jpg?_wi=1", imageAlt: "Blue denim jacket"
|
|
},
|
|
{
|
|
id: "3", brand: "StyleHub Sport", name: "Premium Sneakers", price: "$149.99", rating: 5,
|
|
reviewCount: "3.2k", imageSrc: "http://img.b2bpic.net/free-photo/shoes-sand_23-2147647050.jpg?_wi=1", imageAlt: "Premium sneakers"
|
|
},
|
|
{
|
|
id: "4", brand: "StyleHub Couture", name: "Elegant Evening Dress", price: "$199.99", rating: 5,
|
|
reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-evening-dress-combing-hair_176420-17845.jpg?_wi=1", imageAlt: "Elegant evening dress"
|
|
},
|
|
{
|
|
id: "5", brand: "StyleHub Comfort", name: "Cozy Knit Sweater", price: "$79.99", rating: 5,
|
|
reviewCount: "2.9k", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sensual-blond-girl-knitted-sweater-emotionally-posing-outdoor_574295-4018.jpg?_wi=1", imageAlt: "Cozy knit sweater"
|
|
},
|
|
{
|
|
id: "6", brand: "StyleHub Classic", name: "Dark Denim Jeans", price: "$99.99", rating: 5,
|
|
reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-top-view_23-2150264140.jpg?_wi=1", imageAlt: "Dark denim jeans"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Millions"
|
|
description="Leading brands and fashion influencers choose StyleHub for quality and style"
|
|
tag="Partners"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"StyleHub Partners", "Premium Brands", "Fashion Leaders", "Quality Assurance", "Trusted Partners", "Industry Leaders", "Global Brands", "Excellence Partners"
|
|
]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/collection-abstract-lineal-logo_23-2148457951.jpg", "http://img.b2bpic.net/free-vector/retro-logo-collection_23-2148445976.jpg", "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg", "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149753026.jpg", "http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-set_23-2148888960.jpg", "http://img.b2bpic.net/free-vector/health-store-logo-design_23-2148472971.jpg", "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg", "http://img.b2bpic.net/free-vector/retro-logo-collection_23-2148445976.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="About StyleHub"
|
|
description={[
|
|
"StyleHub is your destination for premium fashion and quality apparel. Since 2015, we've been committed to bringing you the finest selection of clothing that combines style, comfort, and sustainability.", "Our mission is to make high-quality fashion accessible to everyone. We carefully curate every piece in our collection to ensure exceptional quality, timeless style, and excellent value for our customers worldwide."
|
|
]}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "/about" },
|
|
{ text: "View Sustainability", href: "#" },
|
|
]}
|
|
showBorder={true}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Customer Love"
|
|
description="Hear what our satisfied customers say about their StyleHub shopping experience"
|
|
tag="Reviews"
|
|
tagIcon={Heart}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "@sarahj_style", testimonial: "StyleHub has completely transformed my wardrobe! The quality is exceptional and the prices are unbeatable. Highly recommended for anyone serious about fashion.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "@m_chen_looks", testimonial: "Best shopping experience ever. Fast delivery, great customer service, and the clothing fits perfectly. I'm now a loyal StyleHub customer!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", handle: "@emily_fashion", testimonial: "Love the diversity of styles available at StyleHub. From casual to formal, there's something for everyone. Quality is consistently excellent!", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", handle: "@davidkim_style", testimonial: "StyleHub offers premium quality at reasonable prices. Their collection is always fresh and on-trend. This is my go-to place for shopping!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Martinez", handle: "@jess_vibe", testimonial: "Amazing customer service and fantastic products! The attention to detail in every piece is remarkable. StyleHub is my favorite fashion destination.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=3", imageAlt: "Jessica Martinez"
|
|
},
|
|
{
|
|
id: "6", name: "Amanda Brooks", handle: "@amandab_style", testimonial: "I've been shopping with StyleHub for two years now. Consistently excellent quality, great prices, and they always go above and beyond for customers!", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=4", imageAlt: "Amanda Brooks"
|
|
},
|
|
]}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get in Touch"
|
|
description="Have questions or feedback? We'd love to hear from you. Contact our team and we'll get back to you as soon as possible."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "subject", type: "text", placeholder: "Subject", required: true },
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us how we can help...", rows: 5,
|
|
required: true,
|
|
}}
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
imageSrc="http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg?_wi=1"
|
|
imageAlt="Contact support"
|
|
mediaAnimation="slide-up"
|
|
buttonText="Send Message"
|
|
onSubmit={handleContactSubmit}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about shopping, shipping, and returns at StyleHub"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
mediaPosition="left"
|
|
imageSrc="http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg?_wi=2"
|
|
imageAlt="Customer support and help"
|
|
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 with your purchase, simply return it in original condition for a full refund or exchange."
|
|
},
|
|
{
|
|
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 5-7 business days. We also offer express shipping options (2-3 business days) for an additional fee. All orders include tracking information."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer international shipping?", content: "Yes! We ship to over 150 countries worldwide. International shipping times vary by location but typically take 10-21 business days. Import duties may apply depending on your country."
|
|
},
|
|
{
|
|
id: "4", title: "How do I care for my StyleHub items?", content: "Each item comes with detailed care instructions. We recommend following the label instructions for best results. Most of our pieces are machine washable and designed to maintain their quality through many wears."
|
|
},
|
|
{
|
|
id: "5", title: "Are your products sustainable?", content: "We're committed to sustainability! We use eco-friendly materials, ethical manufacturing practices, and sustainable packaging. Learn more about our environmental initiatives on our sustainability page."
|
|
},
|
|
{
|
|
id: "6", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and various local payment methods depending on your country. All transactions are secure and encrypted."
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="StyleHub"
|
|
leftLink={{ text: "Privacy Policy", href: "#privacy" }}
|
|
rightLink={{ text: "Terms of Service", href: "#terms" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |