Update src/app/page.tsx
This commit is contained in:
133
src/app/page.tsx
133
src/app/page.tsx
@@ -7,32 +7,24 @@ import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|||||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
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 FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Sparkles, Award, Star, Heart } from "lucide-react";
|
import { Sparkles, Award, Star, Heart, HelpCircle } from "lucide-react";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Shop", id: "/shop" },
|
{ name: "Shop", id: "/shop" },
|
||||||
{ name: "About", id: "/about" },
|
{ name: "About", id: "/about" },
|
||||||
{ name: "Reviews", id: "/testimonials" },
|
|
||||||
{ name: "Contact", id: "/contact" },
|
{ name: "Contact", id: "/contact" },
|
||||||
|
{ name: "FAQ", id: "faq" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const handleNavClick = (id: string) => {
|
const handleContactSubmit = (data: Record<string, string>) => {
|
||||||
if (id === "/") {
|
console.log("Contact form submitted:", data);
|
||||||
window.location.href = "/";
|
alert("Thank you for reaching out! We'll get back to you soon.");
|
||||||
} else if (id.startsWith("/")) {
|
|
||||||
window.location.href = id;
|
|
||||||
} else if (id.startsWith("http")) {
|
|
||||||
window.open(id, "_blank");
|
|
||||||
} else {
|
|
||||||
const element = document.getElementById(id);
|
|
||||||
if (element) {
|
|
||||||
element.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -60,18 +52,17 @@ export default function HomePage() {
|
|||||||
<HeroSplit
|
<HeroSplit
|
||||||
title="Discover Your Style"
|
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."
|
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" }}
|
background={{ variant: "fluid" }}
|
||||||
tag="New Arrivals"
|
tag="New Arrivals"
|
||||||
tagIcon={Sparkles}
|
tagIcon={Sparkles}
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "Shop Collection", href: "/shop" },
|
{ text: "Shop Collection", href: "products" },
|
||||||
{ text: "View New Items", href: "#products" },
|
{ text: "View New Items", href: "#" },
|
||||||
]}
|
]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-holding-bunch-hangers_1163-853.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-holding-bunch-hangers_1163-853.jpg"
|
||||||
imageAlt="Fashion and lifestyle banner"
|
imageAlt="Fashion and lifestyle banner"
|
||||||
imagePosition="right"
|
imagePosition="right"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -88,22 +79,28 @@ export default function HomePage() {
|
|||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "1", brand: "StyleHub Premium", name: "Classic Casual Shirt", price: "$89.99", rating: 5,
|
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", imageAlt: "Classic casual shirt"},
|
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", imageAlt: "Classic casual shirt"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "2", brand: "StyleHub Essentials", name: "Blue Denim Jacket", price: "$129.99", rating: 5,
|
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", imageAlt: "Blue denim jacket"},
|
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16967.jpg", imageAlt: "Blue denim jacket"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "3", brand: "StyleHub Sport", name: "Premium Sneakers", price: "$149.99", rating: 5,
|
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", imageAlt: "Premium sneakers"},
|
reviewCount: "3.2k", imageSrc: "http://img.b2bpic.net/free-photo/shoes-sand_23-2147647050.jpg", imageAlt: "Premium sneakers"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "4", brand: "StyleHub Couture", name: "Elegant Evening Dress", price: "$199.99", rating: 5,
|
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", imageAlt: "Elegant evening dress"},
|
reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-evening-dress-combing-hair_176420-17845.jpg", imageAlt: "Elegant evening dress"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "5", brand: "StyleHub Comfort", name: "Cozy Knit Sweater", price: "$79.99", rating: 5,
|
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", imageAlt: "Cozy knit sweater"},
|
reviewCount: "2.9k", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sensual-blond-girl-knitted-sweater-emotionally-posing-outdoor_574295-4018.jpg", imageAlt: "Cozy knit sweater"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "6", brand: "StyleHub Classic", name: "Dark Denim Jeans", price: "$99.99", rating: 5,
|
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", imageAlt: "Dark denim jeans"},
|
reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-top-view_23-2150264140.jpg", imageAlt: "Dark denim jeans"
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -117,9 +114,11 @@ export default function HomePage() {
|
|||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
names={[
|
names={[
|
||||||
"StyleHub Partners", "Premium Brands", "Fashion Leaders", "Quality Assurance", "Trusted Partners", "Industry Leaders", "Global Brands", "Excellence Partners"]}
|
"StyleHub Partners", "Premium Brands", "Fashion Leaders", "Quality Assurance", "Trusted Partners", "Industry Leaders", "Global Brands", "Excellence Partners"
|
||||||
|
]}
|
||||||
logos={[
|
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"]}
|
"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}
|
speed={40}
|
||||||
showCard={true}
|
showCard={true}
|
||||||
/>
|
/>
|
||||||
@@ -129,7 +128,8 @@ export default function HomePage() {
|
|||||||
<TextSplitAbout
|
<TextSplitAbout
|
||||||
title="About StyleHub"
|
title="About StyleHub"
|
||||||
description={[
|
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."]}
|
"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={[
|
buttons={[
|
||||||
{ text: "Learn Our Story", href: "/about" },
|
{ text: "Learn Our Story", href: "/about" },
|
||||||
{ text: "View Sustainability", href: "#" },
|
{ text: "View Sustainability", href: "#" },
|
||||||
@@ -150,22 +150,87 @@ export default function HomePage() {
|
|||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
testimonials={[
|
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", imageAlt: "Sarah Johnson"},
|
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", 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", imageAlt: "Michael Chen"},
|
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", 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", imageAlt: "Emily Rodriguez"},
|
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", 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", imageAlt: "David Kim"},
|
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", 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", imageAlt: "Jessica Martinez"},
|
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", 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", imageAlt: "Amanda Brooks"},
|
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", imageAlt: "Amanda Brooks"
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
speed={40}
|
speed={40}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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"
|
||||||
|
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"
|
||||||
|
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">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="StyleHub"
|
logoText="StyleHub"
|
||||||
|
|||||||
Reference in New Issue
Block a user