8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

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.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement DocumentProposed change+19−7on v2
Page 1 of 9

System Requirements Document for skillswap

1. Introduction

SkillSwap is a platform designed to facilitate the exchange of skills among users, rather than purchasing courses. The primary goal of the SkillSwap landing page is to communicate the core message: "Don't buy a skill. Swap one." This document outlines the requirements for building the landing page at /, focusing on a premium, futuristic design that aligns with the project's creative direction.

SkillSwap is a platform designed to facilitate the exchange of skills among users, rather than purchasing courses. The primary goal of SkillSwap is to provide a comprehensive platform where users can teach and learn skills from each other. This document outlines the requirements for building the complete SkillSwap web application, focusing on a premium, futuristic design that aligns with the project's creative direction.

Page 2 of 9

2. System Overview

The SkillSwap landing page is the sole page to be developed, serving as the public entry point for the platform. It will feature interactive components, animations, and a premium design to engage users and convey the platform's core message. The page will not include authentication, database modifications, or additional pages beyond the specified landing page.

SkillSwap is a platform that allows users to exchange skills and knowledge instead of paying money. The application will include a landing page and multiple functional areas, such as onboarding, discovery, Skill DNA, match detail, messaging, profile management, and settings. The platform will support authentication, database integration, matching logic, messaging, responsive behavior, animations, loading states, empty states, and error states.

2a. Product Interpretation and Delivery Boundary

The landing page will be built using the existing React, Vite, TypeScript, and Tailwind CSS project, adhering to the design system and creative direction. The page will include interactive elements and animations using Framer Motion, but will not implement backend functionality such as matching or authentication. Navigation will be limited to the specified routes (/discover and /skill-dna), and skill selection will be managed through local React state.

The application will be built using React, Vite, TypeScript, Tailwind CSS, Supabase, and Framer Motion, adhering to the design system and creative direction. The platform will include interactive elements and animations, with a focus on a premium, futuristic design. The application will support both desktop and mobile layouts, with persistent navigation and responsive behavior.

Page 3 of 9

2b. Source Content Inventory

Not applicable as no content source directive was provided.

2c. Page Content and Component Coverage

Page 4 of 9

/

  • Hero Section

    • Full-screen hero with a dark, premium background.
    • Headline: "DON'T BUY A SKILL. SWAP ONE." in large, bold typography.
    • Supporting text: "Turn what you know into what you want to learn."
    • Interactive skill selector panel with "I CAN TEACH" and "I WANT TO LEARN" sections.
    • Skills: Figma, UI Design, HTML, Branding (teach); Photography, Motion Design, Video Editing (learn).
    • Selected skills glow purple, have stronger contrast, and animate smoothly.
    • Primary CTA: "FIND MY PERFECT SWAP →" navigates to /discover.

  • Visual Background

    • Dark background with subtle purple radial glow, ambient gradients, and decorative connection lines.

  • How It Works Section

    • Title: "HOW IT WORKS"
    • Three steps with minimal visual treatment:
      1. SHARE WHAT YOU KNOW: "Add the skills you're confident teaching."
      2. CHOOSE WHAT YOU WANT: "Tell us what you'd love to learn."
      3. FIND YOUR PERFECT SWAP: "We connect complementary skills."

  • Featured Matches Section

    • Title: "YOUR NEXT SWAP COULD LOOK LIKE THIS"
    • Three example cards with avatar, name, description, teaches, wants to learn, match percentage, and "VIEW SWAP →" CTA.

  • Skill DNA Preview

    • Central "YOU" connected to skills with glowing purple lines.
    • 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 →" navigates to /skill-dna.

  • Final CTA Section

    • Headline: "YOUR NEXT SKILL IS ONE SWAP AWAY."
    • Button: "FIND MY PERFECT SWAP →"

  • Navigation

    • Compact navbar with links: SkillSwap, Discover, My Skills, Skill DNA, Messages.
    • Right side: Sign In, Get Started.

  • Footer

    • Simple footer with "SkillSwap" and "Knowledge is better when shared."
    • Links: Discover, Skill DNA, About, Privacy.

  • Responsiveness

    • Desktop: Strong visual composition.
    • Tablet: Natural section reorganization.
    • Mobile: Vertical stacking of teach/learn interaction, mobile-friendly navigation.

  • Animation

    • Use Framer Motion for hero entrance, skill selection, skill pills, connection lines, cards, section reveals, and hover states.
Page 5 of 9

3. Functional Requirements

  • As a Landing Page Visitor, I should see a full-screen hero with the specified headline and supporting text to understand the core message of SkillSwap. (explicit)
  • As a Landing Page Visitor, I should be able to interact with the Teach/Learn skill selector to select skills and see visual feedback. (explicit)
  • As a Landing Page Visitor, I should be able to click the "FIND MY PERFECT SWAP →" CTA to navigate to /discover. (explicit)
  • As a Landing Page Visitor, I should see the "How It Works" section with the specified steps to understand the process of skill swapping. (explicit)
  • As a Landing Page Visitor, I should see the "Featured Matches" section with example cards to visualize potential swaps. (explicit)
  • As a Landing Page Visitor, I should see the "Skill DNA Preview" section with connected skills and a CTA to explore Skill DNA. (explicit)
  • As a Landing Page Visitor, I should see a final CTA section to encourage further interaction with the platform. (explicit)
  • As a Landing Page Visitor, I should be able to navigate using the compact navbar and footer links. (explicit)
  • As a Landing Page Visitor, I should experience smooth animations and transitions as specified. (explicit)

4. User Personas

  • Landing Page Visitor: Interacts with the landing page skill selector and CTAs to understand SkillSwap and continue to Discover or Skill DNA.
  • SkillSwap Member: An authenticated platform user who creates and manages teach/learn skills, discovers complementary people, inspects matches, exchanges messages, and manages profile and settings.
Page 6 of 9

5. Core User Flows

  1. Landing Page Visitor Flow
    • Entry: Visitor arrives at the landing page (/).
    • Hero Interaction: Reads the headline and supporting text, interacts with the skill selector.
    • Skill Selection: Selects skills to teach and learn, observes visual feedback.
    • Navigation: Clicks "FIND MY PERFECT SWAP →" to navigate to /discover.
    • Explore Sections: Scrolls through "How It Works", "Featured Matches", and "Skill DNA Preview" sections.
    • Final CTA: Engages with the final CTA section.
    • Exit: Uses navigation links to explore further or leaves the page.
  1. SkillSwap Member Flow
    • Authentication: Member logs in through /auth.
    • Profile Setup: Completes teach/learn profile through /onboarding.
    • Discovery: Searches for matches through /discover.
    • Skill DNA Exploration: Views connected skills through /skill-dna.
    • Match Interaction: Inspects and initiates swaps through /match/:id.
    • Messaging: Engages in conversations through /messages.
    • Profile Management: Edits profile through /profile.
    • Settings: Adjusts application settings through /settings.
Page 7 of 9

6. Visuals Colors and Theme

  • Muse: Gleb Kuznetsov
  • Palette:
    • Background: #000022
    • Surface: #111133
    • Text: #E0E0E0
    • Primary: #9C27B0
    • Accent: #FF4081
    • Muted: #333355
  • Typography:
    • Headings: Space Grotesk — Bold, uppercase, very large scale, tight tracking
    • Body: Orbitron
    • Scale: 1.5 modular, 72/48/32/24/18
  • Shape Language: Floating glass panels and thin luminous strokes
  • Layout: Full-bleed interactive hero with radial layouts and floating elements
  • Motion: Continuous slow orbit/parallax with light sweeps and data streams

7. Signature Design Concept

A full-viewport hero with a glowing radial gradient background. Large bold headline in Space Grotesk overlaying a subtle 3D particle animation. Interactive skill selector with glowing hover states and animated transitions. Luminous connection lines that animate on skill selection. Cinematic scroll-linked parallax as sections reveal.

Page 8 of 9

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Cinematic
  • Hero Dimensionality: WebGL
  • Landing Hero Motion Brief:
    • Focal subject: Interactive skill selector with glowing hover states.
    • Input→Transformation→Outcome: User selects skills, glowing lines animate, and CTA guides to /discover.
    • Motion Vocabulary: Cinematic scroll-linked parallax, glowing transitions.
    • Composed First Frame: Full-screen hero with headline and interactive selector.
    • Reduced-Motion State: Static layout with minimal animations.

9. Non-Functional Requirements

  • The landing page must be responsive, supporting desktop, tablet, and mobile layouts. (explicit)
  • The application must be responsive, supporting desktop, tablet, and mobile layouts. (explicit)
  • Animations must be smooth and elegant, enhancing the user experience without overwhelming. (explicit)
  • The implementation must be clean and reusable, adhering to the existing project structure. (explicit)
Page 9 of 9

10. Tech Stack

  • React
  • Vite
  • TypeScript
  • Tailwind CSS
  • Supabase
  • Framer Motion

11. Assumptions and Constraints

  • The landing page is the only page to be built; no other pages will be developed. (explicit)
  • No modifications to the database or implementation of authentication and matching are allowed. (explicit)
  • The complete application will be built in one pass, with no placeholders or dead buttons. (explicit)
  • The existing design system and tech stack must be used. (explicit)
  • Skill selection will use local React state only. (explicit)
  • Supabase will be used for authentication and data storage, with a local demo fallback if credentials are unavailable. (explicit)
  • Skill exchange is knowledge-for-knowledge; monetary transactions are not part of the core interaction. (explicit)

12. Glossary

  • SkillSwap: The platform for exchanging skills.
  • CTA: Call to Action, a prompt for the user to take a specific action.
  • Hero: The main introductory section of a webpage.
  • Skill DNA: A conceptual representation of a user's skills and learning desires.
  • Framer Motion: A library for creating animations in React applications.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.