Merge version_1 into main #2
363
src/app/page.tsx
363
src/app/page.tsx
@@ -26,282 +26,105 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="SkillSwap India"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="SkillSwap India"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Empowering Skills Across India"
|
||||
description="Join India's largest collaborative network to exchange skills, mentor peers, and grow together."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Aditi Sharma",
|
||||
handle: "@aditisharma",
|
||||
testimonial: "This platform transformed my learning journey completely.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-business-associates-engineers-gather-discussion_482257-126040.jpg?_wi=1",
|
||||
imageAlt: "skill exchange platform digital UI",
|
||||
},
|
||||
{
|
||||
name: "Rohan Patel",
|
||||
handle: "@rohanpatel",
|
||||
testimonial: "Connecting with experts across India has been a game changer.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-working-together_1170-1087.jpg?_wi=1",
|
||||
imageAlt: "professional collaboration india office",
|
||||
},
|
||||
{
|
||||
name: "Priya Singh",
|
||||
handle: "@priyasingh",
|
||||
testimonial: "Professional growth made simple and accessible.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=esfoys&_wi=1",
|
||||
imageAlt: "knowledge transfer icon technology",
|
||||
},
|
||||
{
|
||||
name: "Vikram Seth",
|
||||
handle: "@vikramseth",
|
||||
testimonial: "I learned more in a month than in a year of self-study.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chrome-spheres-attached-green-sphere_1156-677.jpg",
|
||||
imageAlt: "community network nodes tech",
|
||||
},
|
||||
{
|
||||
name: "Neha Gupta",
|
||||
handle: "@nehagupta",
|
||||
testimonial: "Best way to find mentors and share my own knowledge.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/uninstalling-symbol_53876-120808.jpg",
|
||||
imageAlt: "scheduling calendar app icon",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Exchanging",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/multiethnic-business-associates-engineers-gather-discussion_482257-126040.jpg?_wi=2"
|
||||
imageAlt="Professional skill exchange community in India"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
|
||||
alt: "Suresh",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg",
|
||||
alt: "Meera",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg",
|
||||
alt: "Amit",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-content-man-using-smartphone-pub_1262-3485.jpg",
|
||||
alt: "Sunita",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/south-asian-indian-male-student-wear-eyeglasses-casual-posed-outdoor_627829-5202.jpg",
|
||||
alt: "Raj",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ members"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Empowering Skills Across India"
|
||||
description="Join India's largest collaborative network to exchange skills, mentor peers, and grow together."
|
||||
testimonials={[
|
||||
{ name: "Aditi Sharma", handle: "@aditisharma", testimonial: "This platform transformed my learning journey completely.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-business-associates-engineers-gather-discussion_482257-126040.jpg", imageAlt: "skill exchange platform digital UI" },
|
||||
{ name: "Rohan Patel", handle: "@rohanpatel", testimonial: "Connecting with experts across India has been a game changer.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-working-together_1170-1087.jpg", imageAlt: "professional collaboration india office" },
|
||||
{ name: "Priya Singh", handle: "@priyasingh", testimonial: "Professional growth made simple and accessible.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=esfoys", imageAlt: "knowledge transfer icon technology" },
|
||||
{ name: "Vikram Seth", handle: "@vikramseth", testimonial: "I learned more in a month than in a year of self-study.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/chrome-spheres-attached-green-sphere_1156-677.jpg", imageAlt: "community network nodes tech" },
|
||||
{ name: "Neha Gupta", handle: "@nehagupta", testimonial: "Best way to find mentors and share my own knowledge.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/uninstalling-symbol_53876-120808.jpg", imageAlt: "scheduling calendar app icon" }
|
||||
]}
|
||||
buttons={[{ text: "Start Exchanging", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/multiethnic-business-associates-engineers-gather-discussion_482257-126040.jpg"
|
||||
imageAlt="Professional skill exchange community in India"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg", alt: "Suresh" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg", alt: "Meera" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg", alt: "Amit" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-content-man-using-smartphone-pub_1262-3485.jpg", alt: "Sunita" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/south-asian-indian-male-student-wear-eyeglasses-casual-posed-outdoor_627829-5202.jpg", alt: "Raj" }
|
||||
]}
|
||||
avatarText="Join 5,000+ members"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Built for ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/group-graphic-designers-working-together_1170-1087.jpg",
|
||||
alt: "Collaborative professionals",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " the new India workforce.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Built for " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/group-graphic-designers-working-together_1170-1087.jpg", alt: "Collaborative professionals" },
|
||||
{ type: "text", content: " the new India workforce." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Skill Matching",
|
||||
description: "Find the perfect partner to exchange expertise.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
|
||||
imageAlt: "professional headshot india smiling",
|
||||
},
|
||||
{
|
||||
title: "Global Reach",
|
||||
description: "Connect with talented individuals everywhere.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Globe,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg",
|
||||
imageAlt: "professional software developer headshot",
|
||||
},
|
||||
{
|
||||
title: "Secure Scheduling",
|
||||
description: "Seamless integration for all your meetings.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Calendar,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg",
|
||||
imageAlt: "professional manager smiling",
|
||||
},
|
||||
]}
|
||||
title="Why Swap Skills?"
|
||||
description="Unlock your potential through direct collaboration with peers."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Skill Matching", description: "Find the perfect partner to exchange expertise.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
{ title: "Global Reach", description: "Connect with talented individuals everywhere.", bentoComponent: "reveal-icon", icon: Globe },
|
||||
{ title: "Secure Scheduling", description: "Seamless integration for all your meetings.", bentoComponent: "reveal-icon", icon: Calendar }
|
||||
]}
|
||||
title="Why Swap Skills?"
|
||||
description="Unlock your potential through direct collaboration with peers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Suresh",
|
||||
date: "Oct 2023",
|
||||
title: "Developer",
|
||||
quote: "Incredible platform.",
|
||||
tag: "Mentorship",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-man-using-smartphone-pub_1262-3485.jpg",
|
||||
imageAlt: "young professional headshot",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Meera",
|
||||
date: "Sep 2023",
|
||||
title: "Designer",
|
||||
quote: "Truly helpful experience.",
|
||||
tag: "Growth",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/south-asian-indian-male-student-wear-eyeglasses-casual-posed-outdoor_627829-5202.jpg",
|
||||
imageAlt: "experienced professional mentor portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Amit",
|
||||
date: "Aug 2023",
|
||||
title: "Manager",
|
||||
quote: "Exceptional networking.",
|
||||
tag: "Networking",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-business-associates-engineers-gather-discussion_482257-126040.jpg?_wi=3",
|
||||
imageAlt: "skill exchange platform digital UI",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sunita",
|
||||
date: "Jul 2023",
|
||||
title: "Student",
|
||||
quote: "Learned so much!",
|
||||
tag: "Learning",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-content-man-using-smartphone-pub_1262-3485.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-working-together_1170-1087.jpg?_wi=2",
|
||||
imageAlt: "professional collaboration india office",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Raj",
|
||||
date: "Jun 2023",
|
||||
title: "Freelancer",
|
||||
quote: "My go-to resource.",
|
||||
tag: "Skill Swap",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/south-asian-indian-male-student-wear-eyeglasses-casual-posed-outdoor_627829-5202.jpg",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=esfoys&_wi=2",
|
||||
imageAlt: "knowledge transfer icon technology",
|
||||
},
|
||||
]}
|
||||
title="Success Stories"
|
||||
description="See how others are growing."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Suresh", date: "Oct 2023", title: "Developer", quote: "Incredible platform.", tag: "Mentorship", avatarSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg", imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-man-using-smartphone-pub_1262-3485.jpg", imageAlt: "young professional headshot" },
|
||||
{ id: "2", name: "Meera", date: "Sep 2023", title: "Designer", quote: "Truly helpful experience.", tag: "Growth", avatarSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg", imageSrc: "http://img.b2bpic.net/free-photo/south-asian-indian-male-student-wear-eyeglasses-casual-posed-outdoor_627829-5202.jpg", imageAlt: "experienced professional mentor portrait" },
|
||||
{ id: "3", name: "Amit", date: "Aug 2023", title: "Manager", quote: "Exceptional networking.", tag: "Networking", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg", imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-business-associates-engineers-gather-discussion_482257-126040.jpg", imageAlt: "skill exchange platform digital UI" },
|
||||
{ id: "4", name: "Sunita", date: "Jul 2023", title: "Student", quote: "Learned so much!", tag: "Learning", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-content-man-using-smartphone-pub_1262-3485.jpg", imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-working-together_1170-1087.jpg", imageAlt: "professional collaboration india office" },
|
||||
{ id: "5", name: "Raj", date: "Jun 2023", title: "Freelancer", quote: "My go-to resource.", tag: "Skill Swap", avatarSrc: "http://img.b2bpic.net/free-photo/south-asian-indian-male-student-wear-eyeglasses-casual-posed-outdoor_627829-5202.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=esfoys", imageAlt: "knowledge transfer icon technology" }
|
||||
]}
|
||||
title="Success Stories"
|
||||
description="See how others are growing."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Join Us"
|
||||
title="Ready to Start?"
|
||||
description="Register today for early access."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Join Us"
|
||||
title="Ready to Start?"
|
||||
description="Register today for early access."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="SkillSwap India"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Help",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="SkillSwap India"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Help", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user