Merge version_1 into main #2
441
src/app/page.tsx
441
src/app/page.tsx
@@ -14,336 +14,133 @@ import { Activity, MessageSquare, Users } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="medium"
|
||||
background="floatingGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="medium"
|
||||
background="floatingGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
id: "#metrics",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="NexuSocial"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Community", id: "#metrics" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="NexuSocial"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Connect, Share, Grow."
|
||||
description="NexuSocial is the next-generation platform designed to bring creators, communities, and innovators together. Build your legacy in a world that never stops moving."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Riv",
|
||||
handle: "@arivera",
|
||||
testimonial: "The best platform I've used for community growth.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Jordan P.",
|
||||
handle: "@jptech",
|
||||
testimonial: "Seamless integration and beautiful design.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Sam Lee",
|
||||
handle: "@sleecreative",
|
||||
testimonial: "Finally, a social media tool that focuses on quality.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Casey K.",
|
||||
handle: "@ckdesign",
|
||||
testimonial: "NexuSocial changed the way I connect.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Taylor B.",
|
||||
handle: "@tbdev",
|
||||
testimonial: "Incredible performance and community focus.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg?_wi=1",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Reach",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Instant Updates",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Data",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "High Engagement",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Community First",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Connect, Share, Grow."
|
||||
description="NexuSocial is the next-generation platform designed to bring creators, communities, and innovators together. Build your legacy in a world that never stops moving."
|
||||
testimonials={[
|
||||
{ name: "Alex Riv", handle: "@arivera", testimonial: "The best platform I've used for community growth.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg" },
|
||||
{ name: "Jordan P.", handle: "@jptech", testimonial: "Seamless integration and beautiful design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg" },
|
||||
{ name: "Sam Lee", handle: "@sleecreative", testimonial: "Finally, a social media tool that focuses on quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg" },
|
||||
{ name: "Casey K.", handle: "@ckdesign", testimonial: "NexuSocial changed the way I connect.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg" },
|
||||
{ name: "Taylor B.", handle: "@tbdev", testimonial: "Incredible performance and community focus.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg" },
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg", alt: "User 5" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Global Reach" },
|
||||
{ type: "text", text: "Instant Updates" },
|
||||
{ type: "text", text: "Secure Data" },
|
||||
{ type: "text", text: "High Engagement" },
|
||||
{ type: "text", text: "Community First" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Instant Connectivity",
|
||||
description: "High-speed messaging for seamless communication.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Dynamic Communities",
|
||||
description: "Join and build groups around your unique passions.",
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: "Real-time Feed",
|
||||
description: "Stay updated with everything that matters to you.",
|
||||
},
|
||||
]}
|
||||
title="Why Choose NexuSocial?"
|
||||
description="Powerful tools built for the modern digital era."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="split"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: MessageSquare, title: "Instant Connectivity", description: "High-speed messaging for seamless communication." },
|
||||
{ icon: Users, title: "Dynamic Communities", description: "Join and build groups around your unique passions." },
|
||||
{ icon: Activity, title: "Real-time Feed", description: "Stay updated with everything that matters to you." },
|
||||
]}
|
||||
title="Why Choose NexuSocial?"
|
||||
description="Powerful tools built for the modern digital era."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1M+",
|
||||
title: "Active Users",
|
||||
description: "Monthly active participants.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trails-moving-lights_23-2147785861.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "150+",
|
||||
title: "Countries",
|
||||
description: "Available worldwide.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/internet-networking-technology-background-vector-with-blue-digital-wave_53876-112179.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "20M+",
|
||||
title: "Interactions",
|
||||
description: "Daily posts and likes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-growth-chart_23-2152011797.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Global Impact"
|
||||
description="Numbers that define our growing community."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
textboxLayout="default"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1M+", title: "Active Users", description: "Monthly active participants.", imageSrc: "http://img.b2bpic.net/free-photo/trails-moving-lights_23-2147785861.jpg" },
|
||||
{ id: "m2", value: "150+", title: "Countries", description: "Available worldwide.", imageSrc: "http://img.b2bpic.net/free-vector/internet-networking-technology-background-vector-with-blue-digital-wave_53876-112179.jpg" },
|
||||
{ id: "m3", value: "20M+", title: "Interactions", description: "Daily posts and likes.", imageSrc: "http://img.b2bpic.net/free-photo/financial-growth-chart_23-2152011797.jpg" },
|
||||
]}
|
||||
title="Our Global Impact"
|
||||
description="Numbers that define our growing community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex Riv",
|
||||
date: "Jan 2025",
|
||||
title: "Developer",
|
||||
quote: "The API access is incredible.",
|
||||
tag: "Tech",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Jordan P.",
|
||||
date: "Dec 2024",
|
||||
title: "Artist",
|
||||
quote: "Sharing work is easy.",
|
||||
tag: "Creative",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam Lee",
|
||||
date: "Nov 2024",
|
||||
title: "Founder",
|
||||
quote: "I built my startup here.",
|
||||
tag: "Startup",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Casey K.",
|
||||
date: "Oct 2024",
|
||||
title: "Designer",
|
||||
quote: "Best design community.",
|
||||
tag: "Design",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Taylor B.",
|
||||
date: "Sep 2024",
|
||||
title: "Analyst",
|
||||
quote: "Data features are elite.",
|
||||
tag: "Data",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="What They Say"
|
||||
description="Stories from our valued community members."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex Riv", date: "Jan 2025", title: "Developer", quote: "The API access is incredible.", tag: "Tech", avatarSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg", imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419444.jpg" },
|
||||
{ id: "t2", name: "Jordan P.", date: "Dec 2024", title: "Artist", quote: "Sharing work is easy.", tag: "Creative", avatarSrc: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg", imageSrc: "http://img.b2bpic.net/free-photo/handsome-middle-aged-man-portrait-neon-lights_23-2149051805.jpg" },
|
||||
{ id: "t3", name: "Sam Lee", date: "Nov 2024", title: "Founder", quote: "I built my startup here.", tag: "Startup", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg" },
|
||||
{ id: "t4", name: "Casey K.", date: "Oct 2024", title: "Designer", quote: "Best design community.", tag: "Design", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg" },
|
||||
{ id: "t5", name: "Taylor B.", date: "Sep 2024", title: "Analyst", quote: "Data features are elite.", tag: "Data", avatarSrc: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-home-using-headphones_23-2148793511.jpg" },
|
||||
]}
|
||||
title="What They Say"
|
||||
description="Stories from our valued community members."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Connect"
|
||||
description="Get in touch for partnerships."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-owner-working-their-strategy_23-2149241271.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Connect"
|
||||
description="Get in touch for partnerships."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your Message", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-owner-working-their-strategy_23-2149241271.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg?_wi=2"
|
||||
logoText="NexuSocial"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Guidelines",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg"
|
||||
logoText="NexuSocial"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "About", href: "#" }, { label: "Features", href: "#" }] },
|
||||
{ title: "Community", items: [{ label: "Blog", href: "#" }, { label: "Guidelines", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user