Merge version_1 into main #3
163
src/app/page.tsx
163
src/app/page.tsx
@@ -30,17 +30,12 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "How it Works", id: "#how-it-works"},
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Community", id: "#testimonials"},
|
||||
{
|
||||
name: "Sign Up", id: "#contact"},
|
||||
{ name: "How it Works", id: "#how-it-works" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Community", id: "#testimonials" },
|
||||
{ name: "Sign Up", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Join for Free", href: "#contact"}}
|
||||
button={{ text: "Join for Free", href: "#contact" }}
|
||||
brandName="SkillSwap"
|
||||
/>
|
||||
</div>
|
||||
@@ -48,58 +43,35 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Stop Paying. Start Swapping."
|
||||
description="Trade your skills with students across India. No money. Just talent."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.", handle: "@sarahj", testimonial: "Changed how I learn coding!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg"},
|
||||
{
|
||||
name: "Arjun K.", handle: "@arjunk", testimonial: "Learned guitar in three sessions.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg"},
|
||||
{
|
||||
name: "Priya D.", handle: "@priyad", testimonial: "Incredible community support.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg"},
|
||||
{
|
||||
name: "Vikram S.", handle: "@vikrams", testimonial: "Easy to swap creative writing.", rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg"},
|
||||
{
|
||||
name: "Ananya P.", handle: "@ananyap", testimonial: "Best platform for development.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg"},
|
||||
{ name: "Sarah J.", handle: "@sarahj", testimonial: "Changed how I learn coding!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg" },
|
||||
{ name: "Arjun K.", handle: "@arjunk", testimonial: "Learned guitar in three sessions.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg" },
|
||||
{ name: "Priya D.", handle: "@priyad", testimonial: "Incredible community support.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg" },
|
||||
{ name: "Vikram S.", handle: "@vikrams", testimonial: "Easy to swap creative writing.", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg" },
|
||||
{ name: "Ananya P.", handle: "@ananyap", testimonial: "Best platform for development.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg" },
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Early Access", href: "#contact"},
|
||||
{
|
||||
text: "See How It Works", href: "#how-it-works"},
|
||||
{ text: "Get Early Access", href: "#contact" },
|
||||
{ text: "See How It Works", href: "#how-it-works" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg", alt: "User 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg", alt: "User 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg", alt: "User 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg", alt: "User 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg", alt: "User 5"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg", alt: "User 5" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Python"},
|
||||
{
|
||||
type: "text", text: "UI/UX Design"},
|
||||
{
|
||||
type: "text", text: "Guitar"},
|
||||
{
|
||||
type: "text", text: "Creative Writing"},
|
||||
{
|
||||
type: "text", text: "Data Analysis"},
|
||||
{ type: "text", text: "Python" },
|
||||
{ type: "text", text: "UI/UX Design" },
|
||||
{ type: "text", text: "Guitar" },
|
||||
{ type: "text", text: "Creative Writing" },
|
||||
{ type: "text", text: "Data Analysis" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -110,27 +82,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "List Your Skill", description: "Define what you can teach to others.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Find Your Match", description: "Browse our community for the perfect skill trade.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Swap & Grow", description: "Start learning and teaching today.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"}
|
||||
},
|
||||
{ id: 1, title: "List Your Skill", description: "Define what you can teach to others.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" } },
|
||||
{ id: 2, title: "Find Your Match", description: "Browse our community for the perfect skill trade.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" } },
|
||||
{ id: 3, title: "Swap & Grow", description: "Start learning and teaching today.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" } },
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Three Simple Steps"
|
||||
@@ -145,14 +99,10 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "AI Matchmaking", price: "Smart AI", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
{
|
||||
id: "2", name: "Campus Communities", price: "Social", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
{
|
||||
id: "3", name: "Skill Badges", price: "Gamified", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
{
|
||||
id: "4", name: "Session Rooms", price: "Integrated", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg"},
|
||||
{ id: "1", name: "AI Matchmaking", price: "Smart AI", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" },
|
||||
{ id: "2", name: "Campus Communities", price: "Social", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" },
|
||||
{ id: "3", name: "Skill Badges", price: "Gamified", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" },
|
||||
{ id: "4", name: "Session Rooms", price: "Integrated", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg" },
|
||||
]}
|
||||
title="Powerful Platform Features"
|
||||
description="Designed to help you master new skills effortlessly."
|
||||
@@ -162,17 +112,13 @@ export default function LandingPage() {
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="centered"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "10,000+", subtitle: "Students", category: "Users", value: "10k"},
|
||||
{
|
||||
id: "2", title: "50+", subtitle: "Colleges", category: "Network", value: "50"},
|
||||
{
|
||||
id: "3", title: "200+", subtitle: "Skills", category: "Exchange", value: "200"},
|
||||
{
|
||||
id: "4", title: "#1", subtitle: "Marketplace", category: "Rating", value: "1"},
|
||||
{ id: "1", title: "10,000+", subtitle: "Students", category: "Users", value: "10k" },
|
||||
{ id: "2", title: "50+", subtitle: "Colleges", category: "Network", value: "50" },
|
||||
{ id: "3", title: "200+", subtitle: "Skills", category: "Exchange", value: "200" },
|
||||
{ id: "4", title: "#1", subtitle: "Marketplace", category: "Rating", value: "1" },
|
||||
]}
|
||||
title="Join our Community"
|
||||
description="Growing rapidly across India."
|
||||
@@ -184,16 +130,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah J.", date: "Oct 2024", title: "Python Developer", quote: "SkillSwap changed how I learn programming!", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg", imageSrc: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg", imageAlt: "student portrait"},
|
||||
{
|
||||
id: "2", name: "Arjun K.", date: "Nov 2024", title: "Guitarist", quote: "I learned guitar in just three sessions.", tag: "Swapper", avatarSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg", imageAlt: "student portrait"},
|
||||
{
|
||||
id: "3", name: "Priya D.", date: "Dec 2024", title: "UI Designer", quote: "The community support is simply incredible.", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg", imageAlt: "student portrait"},
|
||||
{
|
||||
id: "4", name: "Vikram S.", date: "Jan 2025", title: "Writer", quote: "Exchanging creative writing for coding was easy.", tag: "Swapper", avatarSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg", imageAlt: "digital dashboard UI card"},
|
||||
{
|
||||
id: "5", name: "Ananya P.", date: "Feb 2025", title: "Data Analyst", quote: "Best platform for skill development.", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg", imageAlt: "student portrait"},
|
||||
{ id: "1", name: "Sarah J.", date: "Oct 2024", title: "Python Developer", quote: "SkillSwap changed how I learn programming!", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg", imageSrc: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg", imageAlt: "student portrait" },
|
||||
{ id: "2", name: "Arjun K.", date: "Nov 2024", title: "Guitarist", quote: "I learned guitar in just three sessions.", tag: "Swapper", avatarSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg", imageAlt: "student portrait" },
|
||||
{ id: "3", name: "Priya D.", date: "Dec 2024", title: "UI Designer", quote: "The community support is simply incredible.", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/afro-american-couple-front-house_23-2148012864.jpg", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg", imageAlt: "student portrait" },
|
||||
{ id: "4", name: "Vikram S.", date: "Jan 2025", title: "Writer", quote: "Exchanging creative writing for coding was easy.", tag: "Swapper", avatarSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328287.jpg", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039324.jpg", imageAlt: "digital dashboard UI card" },
|
||||
{ id: "5", name: "Ananya P.", date: "Feb 2025", title: "Data Analyst", quote: "Best platform for skill development.", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-nice-friendlylooking-hispanic-male-student-yellow-tshirt-grinning-delighted-l_1258-109369.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg", imageAlt: "student portrait" },
|
||||
]}
|
||||
title="Hear From Swappers"
|
||||
description="See how students like you are learning new things every day."
|
||||
@@ -205,17 +146,13 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Is it really free?", content: "Yes, SkillSwap is entirely free for students."},
|
||||
{
|
||||
id: "2", title: "How do matches work?", content: "Our AI identifies the best skill swaps for you."},
|
||||
{
|
||||
id: "3", title: "Are sessions secure?", content: "We use built-in, monitored session rooms."},
|
||||
{ id: "1", title: "Is it really free?", content: "Yes, SkillSwap is entirely free for students." },
|
||||
{ id: "2", title: "How do matches work?", content: "Our AI identifies the best skill swaps for you." },
|
||||
{ id: "3", title: "Are sessions secure?", content: "We use built-in, monitored session rooms." },
|
||||
]}
|
||||
ctaTitle="Be the First to Swap."
|
||||
ctaDescription="Join our growing community and start trading skills today."
|
||||
ctaButton={{
|
||||
text: "Join Waitlist", href: "#"}}
|
||||
ctaButton={{ text: "Join Waitlist", href: "#" }}
|
||||
ctaIcon={ArrowRight}
|
||||
/>
|
||||
</div>
|
||||
@@ -225,15 +162,9 @@ export default function LandingPage() {
|
||||
logoText="SkillSwap"
|
||||
copyrightText="© 2025 SkillSwap. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com", ariaLabel: "LinkedIn"},
|
||||
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user