skillswap

byWeb Design School

# Build SkillSwap Landing Page Build ONLY the SkillSwap landing page at `/`. Do not build other pages. Do not modify the database. Do not implement authentication. Do not implement matching. Do not create unnecessary features. Use the existing React + Vite + TypeScript + Tailwind CSS project and existing design system. --- ## PRODUCT SkillSwap is a platform where people exchange skills instead of buying courses. Core message: "Don't buy a skill. Swap one." The landing page must immediately communicate this idea. --- # HERO Create a premium full-screen hero. Headline: DON'T BUY A SKILL. SWAP ONE. Use large bold typography with tight line height. Supporting text: "Turn what you know into what you want to learn." Below the text, create the main interactive component. --- # TEACH / LEARN INTERACTION Create a large dark interactive panel. Left: I CAN TEACH Skill pills: Figma UI Design HTML Branding Right: I WANT TO LEARN Skill pills: Photography Motion Design Video Editing Allow users to select skills. Selected skills should: * glow purple * have stronger contrast * animate smoothly * show a selected state Center: ↔ Primary CTA: FIND MY PERFECT SWAP → When clicked, navigate to `/discover`. --- # VISUAL BACKGROUND Use: * dark background * subtle purple radial glow * soft ambient gradients * extremely subtle grid/noise * thin decorative connection lines Do not make the background noisy. The hero should feel futuristic and premium. --- # HOW IT WORKS Create a concise section below the hero. Title: HOW IT WORKS Three steps: 01 SHARE WHAT YOU KNOW "Add the skills you're confident teaching." 02 CHOOSE WHAT YOU WANT "Tell us what you'd love to learn." 03 FIND YOUR PERFECT SWAP "We connect complementary skills." Use minimal visual treatment. --- # FEATURED MATCHES Create a section: YOUR NEXT SWAP COULD LOOK LIKE THIS Show 3 example people. Each card should include: Avatar Name Short description Teaches Wants to learn Match percentage Example: 94% MATCH Ananya Teaches: Photography Wants: Figma CTA: VIEW SWAP → Cards should feel premium and dark. --- # SKILL DNA PREVIEW Create a visually impressive preview of Skill DNA. Show a central: YOU Connected to: Figma Photography UI Design HTML Use glowing purple connection lines. Add heading: YOUR SKILLS HAVE A PATTERN. Supporting text: "Skill DNA turns everything you know and everything you want to learn into a living map." CTA: EXPLORE SKILL DNA → This can navigate to `/skill-dna`. --- # FINAL CTA Create a large final section. Headline: YOUR NEXT SKILL IS ONE SWAP AWAY. Button: FIND MY PERFECT SWAP → --- # NAVIGATION Create: SkillSwap Discover My Skills Skill DNA Messages Right side: Sign In Get Started Keep navbar compact and premium. --- # FOOTER Simple footer: SkillSwap "Knowledge is better when shared." Links: Discover Skill DNA About Privacy --- # RESPONSIVENESS Desktop: Strong visual composition. Tablet: Reorganize sections naturally. Mobile: Stack teach/learn interaction vertically. Navigation should become mobile-friendly. --- # ANIMATION Use Framer Motion. Animate: * hero entrance * skill selection * skill pills * connection lines * cards * section reveals * hover states Keep animations elegant. --- # IMPORTANT Do not build fake functionality. The skill selector can use local React state. The Discover CTA should navigate to `/discover`. The Skill DNA CTA should navigate to `/skill-dna`. Keep the implementation clean and reusable. Do not modify unrelated pages. Finish only the landing page.