Merge version_1 into main #2
364
src/app/page.tsx
364
src/app/page.tsx
@@ -17,269 +17,123 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Pro Marketing Hub"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Support", id: "contact" }
|
||||
]}
|
||||
brandName="Pro Marketing Hub"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Earn Money With Smart Marketing"
|
||||
description="Grow your business & income online with our advanced, high-conversion marketing platform."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Riv",
|
||||
role: "Marketer",
|
||||
testimonial: "This platform doubled my monthly earnings.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg?_wi=1",
|
||||
imageAlt: "digital marketing interface gold",
|
||||
},
|
||||
{
|
||||
name: "Sam K.",
|
||||
role: "Creator",
|
||||
testimonial: "Seamless integration and fast payouts.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colourful-pins-top-view-map_23-2148510446.jpg",
|
||||
imageAlt: "affiliate marketing icon gold",
|
||||
},
|
||||
{
|
||||
name: "Jamie Lee",
|
||||
role: "Freelancer",
|
||||
testimonial: "Best marketing tool for beginners.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/book-icon-right-side-with-white-background_187299-39776.jpg",
|
||||
imageAlt: "digital products icon",
|
||||
},
|
||||
{
|
||||
name: "Morgan D.",
|
||||
role: "CEO",
|
||||
testimonial: "Incredible features and professional support.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yjm5cs",
|
||||
imageAlt: "freelance professional icon",
|
||||
},
|
||||
{
|
||||
name: "Chris B.",
|
||||
role: "Affiliate",
|
||||
testimonial: "Everything I need in one dashboard.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg?_wi=2",
|
||||
imageAlt: "digital marketing interface gold",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Now",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg?_wi=3"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/colourful-pins-top-view-map_23-2148510446.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/book-icon-right-side-with-white-background_187299-39776.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yjm5cs",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/colourful-pins-top-view-map_23-2148510446.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "High Conversion",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Reach",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Instant Payouts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Data Driven",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Platform",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Earn Money With Smart Marketing"
|
||||
description="Grow your business & income online with our advanced, high-conversion marketing platform."
|
||||
testimonials={[
|
||||
{ name: "Alex Riv", handle: "@marketer", testimonial: "This platform doubled my monthly earnings.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg", imageAlt: "digital marketing interface gold" },
|
||||
{ name: "Sam K.", handle: "@creator", testimonial: "Seamless integration and fast payouts.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/colourful-pins-top-view-map_23-2148510446.jpg", imageAlt: "affiliate marketing icon gold" },
|
||||
{ name: "Jamie Lee", handle: "@freelancer", testimonial: "Best marketing tool for beginners.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/book-icon-right-side-with-white-background_187299-39776.jpg", imageAlt: "digital products icon" },
|
||||
{ name: "Morgan D.", handle: "@ceo", testimonial: "Incredible features and professional support.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yjm5cs", imageAlt: "freelance professional icon" },
|
||||
{ name: "Chris B.", handle: "@affiliate", testimonial: "Everything I need in one dashboard.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg", imageAlt: "digital marketing interface gold" }
|
||||
]}
|
||||
buttons={[{ text: "Start Now", href: "#services" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/colourful-pins-top-view-map_23-2148510446.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/book-icon-right-side-with-white-background_187299-39776.jpg", alt: "User 2" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yjm5cs", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/colourful-pins-top-view-map_23-2148510446.jpg", alt: "User 5" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "High Conversion" },
|
||||
{ type: "text", text: "Global Reach" },
|
||||
{ type: "text", text: "Instant Payouts" },
|
||||
{ type: "text", text: "Data Driven" },
|
||||
{ type: "text", text: "Secure Platform" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Share2,
|
||||
title: "Affiliate Marketing",
|
||||
description: "Earn commission by promoting verified products globally.",
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Digital Products",
|
||||
description: "Sell your courses, ebooks, and digital assets instantly.",
|
||||
},
|
||||
{
|
||||
icon: Laptop,
|
||||
title: "Freelancing",
|
||||
description: "Offer your professional services to a global audience.",
|
||||
},
|
||||
]}
|
||||
title="Marketing Solutions"
|
||||
description="Powerful tools to help you monetize your digital presence."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Share2, title: "Affiliate Marketing", description: "Earn commission by promoting verified products globally." },
|
||||
{ icon: BookOpen, title: "Digital Products", description: "Sell your courses, ebooks, and digital assets instantly." },
|
||||
{ icon: Laptop, title: "Freelancing", description: "Offer your professional services to a global audience." }
|
||||
]}
|
||||
title="Marketing Solutions"
|
||||
description="Powerful tools to help you monetize your digital presence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="payment" data-section="payment">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Countries Supported",
|
||||
items: [
|
||||
"Global reach",
|
||||
"Instant payouts",
|
||||
"Verified security",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99.9%",
|
||||
title: "Uptime Guarantee",
|
||||
items: [
|
||||
"Reliable access",
|
||||
"High performance",
|
||||
"Secure processing",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
title: "Support Availability",
|
||||
items: [
|
||||
"Expert assistance",
|
||||
"Fast resolution",
|
||||
"Dedicated care",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Seamless Payment Integration"
|
||||
description="Get paid anywhere, anytime with secure multi-channel gateways."
|
||||
/>
|
||||
</div>
|
||||
<div id="payment" data-section="payment">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "150+", title: "Countries Supported", items: ["Global reach", "Instant payouts", "Verified security"] },
|
||||
{ id: "m2", value: "99.9%", title: "Uptime Guarantee", items: ["Reliable access", "High performance", "Secure processing"] },
|
||||
{ id: "m3", value: "24/7", title: "Support Availability", items: ["Expert assistance", "Fast resolution", "Dedicated care"] }
|
||||
]}
|
||||
title="Seamless Payment Integration"
|
||||
description="Get paid anywhere, anytime with secure multi-channel gateways."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about getting started."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do I start?",
|
||||
content: "Sign up and link your payment method to begin earning.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is it global?",
|
||||
content: "Yes, we support over 150 countries.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are my earnings secure?",
|
||||
content: "We use bank-level encryption for all transactions.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "Can I sell courses?",
|
||||
content: "Absolutely, our platform is built for digital product sales.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "How is support handled?",
|
||||
content: "Our expert team is available 24/7 to resolve issues.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about getting started."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do I start?", content: "Sign up and link your payment method to begin earning." },
|
||||
{ id: "q2", title: "Is it global?", content: "Yes, we support over 150 countries." },
|
||||
{ id: "q3", title: "Are my earnings secure?", content: "We use bank-level encryption for all transactions." },
|
||||
{ id: "q4", title: "Can I sell courses?", content: "Absolutely, our platform is built for digital product sales." },
|
||||
{ id: "q5", title: "How is support handled?", content: "Our expert team is available 24/7 to resolve issues." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Ready to scale?"
|
||||
description="Join thousands of successful marketers today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Ready to scale?"
|
||||
description="Join thousands of successful marketers today."
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Pro Marketing Hub"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Pro Marketing Hub"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user