Update src/app/page.tsx

This commit is contained in:
2025-12-29 23:06:44 +00:00
parent f61edf9782
commit 26b9970db5

View File

@@ -1,290 +1,289 @@
"use client" "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoCarousel from '@/components/sections/hero/HeroLogoCarousel'; import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout'; import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen'; import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight'; import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactFaq from '@/components/sections/contact/ContactFaq'; import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Phone, Twitter, Linkedin, Facebook, Youtube } from 'lucide-react'; import { Mail, Heart, ShoppingBag } from 'lucide-react';
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="text-shift" defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur" defaultTextAnimation="entrance-slide"
borderRadius="soft" borderRadius="rounded"
contentWidth="smallMedium" contentWidth="medium"
sizing="mediumSizeLargeTitles" sizing="mediumLarge"
background="floatingGradient" background="none"
cardStyle="inset" cardStyle="solid-accent"
primaryButtonStyle="shadow" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarStyleCentered
brandName="AffiliateHub" brandName="Fashion Forward"
navItems={[ navItems={[
{ name: "Home", id: "home" }, { name: "Shop", id: "shop" },
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Features", id: "features" }, { name: "Collections", id: "collections" },
{ name: "Testimonials", id: "testimonials" }, { name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" } { name: "Contact", id: "contact" }
]} ]}
button={{
text: "Get Started",
href: "contact"
}}
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogoCarousel <HeroSplitAvatars
logoText="AffiliateHub" title="Elevate Your Style"
description="Unlock your earning potential with our cutting-edge affiliate marketing platform. Get real-time tracking, advanced analytics, and dedicated support to scale your affiliate business." description="Discover our premium collection of carefully curated clothing pieces designed for the modern fashion enthusiast. From timeless classics to contemporary trends."
mediaItems={[ tag="New Collection"
{ tagIcon={ShoppingBag}
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983288368-py19hzaj.jpg", imagePosition="right"
imageAlt: "Affiliate marketing success dashboard" 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
imageAlt: "Marketing analytics and performance metrics" 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983289277-elw8ical.jpg",
imageAlt: "Collaborative marketing team working together" 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983290082-rq47q3ut.jpg",
imageAlt: "Earning potential and financial growth" 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983291397-8uh3i1cf.jpg",
imageAlt: "Network and partnership connections" imageAlt: "Luxury Leather Jacket",
isFavorited: false
} }
]} ]}
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<InlineImageSplitTextAbout <FeatureCardThree
heading={[ title="Why Choose Our Fashion"
{ type: "text", content: "Empowering Marketers Since 2015" }, 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"
type: "image",
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787044450-9f4y10ts.jpg",
alt: "AffiliateHub team"
},
{ type: "text", content: "to maximize their earnings" }
]}
useInvertedBackground="noInvert"
buttons={[
{ text: "Learn More", href: "#features" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardFifteen
title="Everything You Need to Succeed"
description="Our comprehensive platform provides all the tools and features you need to build, manage, and scale your affiliate marketing business."
animationType="slide-up"
textboxLayout="default" textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
features={[ features={[
{ {
id: "1", id: "1",
title: "Real-Time Analytics", title: "Premium Quality",
description: "Track every click, conversion, and commission in real-time with our advanced analytics dashboard.", 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983292413-wq7r64pm.jpg",
imageAlt: "Analytics dashboard interface" imageAlt: "Premium fabric quality"
}, },
{ {
id: "2", id: "2",
title: "Marketing Automation", title: "Sustainable Fashion",
description: "Automate your campaigns and reach your audience at scale with our intelligent marketing tools.", 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787045743-6gjau4zf.jpg",
imageAlt: "Marketing automation workflow" imageAlt: "Sustainable production"
}, },
{ {
id: "3", id: "3",
title: "Commission Tracking", title: "Expert Craftsmanship",
description: "Transparent commission tracking with instant payouts and detailed payment history.", 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983293269-qul9w8a9.jpg",
imageAlt: "Commission tracking system" imageAlt: "Expert craftsmanship"
}, },
{ {
id: "4", id: "4",
title: "24/7 Support", title: "Customer Support",
description: "Dedicated support team available round the clock to help you succeed.", 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", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983294082-ngjm8l0d.jpg",
imageAlt: "Customer support team" imageAlt: "Customer support"
} }
]} ]}
/> />
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="reviews" data-section="reviews">
<TestimonialCardEight <TestimonialCardOne
title="Success Stories from Our Affiliates" title="What Our Customers Love"
description="See how our platform has helped thousands of marketers grow their income and build sustainable businesses." description="Read authentic reviews from fashion enthusiasts who have transformed their wardrobe with our collection."
tag="Customer Reviews"
textboxLayout="default" textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
testimonials={[ testimonials={[
{ {
id: "1", id: "1",
name: "Sarah Mitchell", name: "Sarah Mitchell",
role: "Digital Marketer", role: "Fashion Blogger",
company: "Growth Marketing Co", company: "Style & Substance",
rating: 5, rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg",
imageAlt: "Sarah Mitchell portrait" imageAlt: "Sarah Mitchell"
}, },
{ {
id: "2", id: "2",
name: "James Chen", name: "James Chen",
role: "Marketing Manager", role: "Fashion Designer",
company: "Tech Solutions Inc", company: "Creative Studio",
rating: 5, rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
imageAlt: "James Chen portrait" imageAlt: "James Chen"
}, },
{ {
id: "3", id: "3",
name: "Emma Johnson", name: "Emma Johnson",
role: "Affiliate Director", role: "Style Consultant",
company: "Online Ventures", company: "Fashion Forward",
rating: 5, rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg",
imageAlt: "Emma Johnson portrait" imageAlt: "Emma Johnson"
}, },
{ {
id: "4", id: "4",
name: "Michael Rodriguez", name: "Michael Rodriguez",
role: "Independent Affiliate", role: "Fashion Enthusiast",
company: "Digital Entrepreneurs", company: "Style Community",
rating: 5, rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
imageAlt: "Michael Rodriguez portrait" imageAlt: "Michael Rodriguez"
} }
]} ]}
/> />
</div> </div>
<div id="faq" data-section="faq"> <div id="collections" data-section="collections">
<FaqSplitMedia <FaqSplitText
title="Common Questions About Affiliate Marketing" sideTitle="Frequently Asked Questions"
description="Find answers to frequently asked questions about our platform and affiliate program." sideDescription="Find answers to common questions about our collections, sizing, and policies."
textboxLayout="default" textPosition="left"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg"
imageAlt="Customer support team helping affiliates"
mediaPosition="left"
faqs={[ faqs={[
{ {
id: "1", id: "1",
title: "How much can I earn as an affiliate?", title: "What is your return policy?",
content: "Earnings depend on your marketing efforts and the products you promote. Our top affiliates earn $5,000+ per month. We offer competitive commission rates ranging from 15% to 40% depending on the product tier." 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", id: "2",
title: "How often do I get paid?", title: "How do I find my size?",
content: "We offer flexible payment schedules. Choose weekly, bi-weekly, or monthly payouts. Payments are processed automatically to your preferred payment method with no hidden fees." 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", id: "3",
title: "What marketing materials are provided?", title: "Do you ship internationally?",
content: "We provide banners, landing pages, email templates, social media graphics, and video assets. All materials are professionally designed and ready to use." 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", id: "4",
title: "Do I need experience to get started?", title: "Are your materials ethically sourced?",
content: "No experience necessary! We provide training, resources, and dedicated support to help you succeed, whether you're a seasoned marketer or just starting out." 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", id: "5",
title: "What's your cookie duration?", title: "Can I customize my order?",
content: "We offer a 45-day cookie window, giving you plenty of time to convert your referred customers. This is one of the longest in the industry." content: "We offer customization options for select items including monogramming, embroidery, and color matching. Contact our team for details on personalization services."
} }
]} ]}
/> />
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactFaq <ContactCenter
ctaTitle="Ready to Start Earning?" tag="Get In Touch"
ctaDescription="Join thousands of successful affiliates. Book a call with our team to discuss your affiliate marketing goals." title="Join Our Fashion Community"
ctaButton={{ description="Subscribe to our newsletter for exclusive previews, style tips, and special offers on new collections."
text: "Book a Free Call", tagIcon={Mail}
href: "contact"
}}
ctaIcon={Phone}
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
animationType="slide-up" inputPlaceholder="Enter your email address"
faqs={[ buttonText="Subscribe"
{ termsText="We respect your privacy. Unsubscribe anytime. No spam, ever."
id: "1",
title: "What's the application process?",
content: "Simply fill out our affiliate application form. We review applications within 24 hours. Most qualified marketers are approved immediately."
},
{
id: "2",
title: "Are there any fees to join?",
content: "Absolutely not! Joining our affiliate program is completely free. There are no setup fees, monthly fees, or hidden charges."
},
{
id: "3",
title: "Can I promote multiple products?",
content: "Yes! We encourage our affiliates to promote multiple products from our catalog. This diversifies your income streams and maximizes earning potential."
}
]}
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseSocial <FooterLogoEmphasis
logoText="AffiliateHub"
description="Empower your affiliate marketing business with tools designed for success. Join our community of top earners today."
columns={[ columns={[
{ {
title: "Platform",
items: [ items: [
{ label: "Dashboard", href: "#" }, { label: "New Arrivals", href: "shop" },
{ label: "Analytics", href: "#" }, { label: "Best Sellers", href: "shop" },
{ label: "Resources", href: "#" } { label: "Sale", href: "shop" }
] ]
}, },
{ {
title: "Company",
items: [ items: [
{ label: "About Us", href: "about" }, { label: "About Us", href: "about" },
{ label: "Blog", href: "#" }, { label: "Our Story", href: "about" },
{ label: "Careers", href: "#" } { label: "Sustainability", href: "about" }
]
},
{
items: [
{ label: "Contact", href: "contact" },
{ label: "Support", href: "contact" },
{ label: "Size Guide", href: "#" }
] ]
}, },
{ {
title: "Legal",
items: [ items: [
{ label: "Terms of Service", href: "#" },
{ label: "Privacy Policy", href: "#" }, { label: "Privacy Policy", href: "#" },
{ label: "Contact", href: "contact" } { label: "Terms of Service", href: "#" },
{ label: "Shipping Info", href: "#" }
] ]
} }
]} ]}
socialLinks={[ logoText="Fashion Forward"
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
{ icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" }
]}
copyrightText="© 2025 AffiliateHub. All rights reserved."
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }