Page: How It Works
/how-it-works Access: Public Priority: P0 Test Script: scripts/page-tests/test-HOWI.sh Components: src/components/marketing/index.ts Purpose
Explain the Peerloop learning model in detail - the learn-teach-earn flywheel, how sessions work, and what makes peer learning effective. Convert curious visitors into enrolled students.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
|---|---|---|
| HOME | Header 'How It Works' link or Hero section | Primary entry |
| ABOU | "Learn more about how it works" link | From about page |
Outgoing (users navigate to)
Sections
Hero
- • Headline: "Learn. Teach. Earn."
- • Subheadline: "A revolutionary approach to education that benefits everyone in the learning chain."
- • Animated flywheel with concentric spinning circles
- • Labels: Learn, Teach, Earn, Grow positioned around flywheel
Your Journey (Steps)
- • Step 1: Choose Your Course (search icon)
- • Step 2: Learn with a Peer Tutor (video icon)
- • Step 3: Practice & Progress (code icon)
- • Step 4: Earn Your Certificate (award icon)
- • Step 5: Become a Teacher (graduation icon)
- • Step 6: Earn While You Teach (dollar icon)
For Students
- • 4 benefit bullet points
- • 75%+ completion rate stat card
- • "Start Learning" CTA button → /courses
For Student-Teachers
- • 4 benefit bullet points
- • Earning potential calculator ($900/month example)
- • "Become a Teacher" CTA button → /become-a-teacher
For Course Creators
- • 4 benefit bullet points
- • Revenue split visual (70% S-T / 15% Creator / 15% Platform)
- • "Create a Course" CTA button → /for-creators
Why Peer Learning Works
- • Fresh Perspective - Teachers who just learned remember what was confusing
- • Relatable Experience - Peer tutors speak your language
- • Affordable Access - Premium instruction at fraction of cost
- • Infinite Scale - Every student can become a teacher
FAQ Preview
- • 3 expandable accordion questions
- • How much does it cost?
- • How do I become a Student-Teacher?
- • What if I'm not satisfied?
- • "See all FAQs" link → /faq
Final CTA
- • "Ready to Start Your Journey?" headline
- • "Get Started Free" button → /signup
- • "Browse Courses" button → /courses
User Stories Fulfilled
- • US-G002
- • US-S001
- • US-T001
States & Variations
| State | Description |
|---|---|
| Default | Standard page for all visitors |
Mobile Considerations
- • Steps become vertical timeline on mobile
- • Role sections stack vertically
- • Flywheel animation uses CSS animate-spin with different durations
Notes
- • Static page - no API calls or data fetching required
- • All content is hardcoded in the component
- • Responsive design with mobile-friendly layout
- • FAQ accordions use React state for toggle
- • Flywheel animation uses CSS animate-spin with different durations
Features
- ✓ Hero section with "Learn. Teach. Earn." headline
- ✓ Animated flywheel illustration with Learn/Teach/Earn/Grow labels
- ✓ Step-by-step journey (6 steps with icons in alternating timeline)
- ✓ For Students section with benefits + 75% completion stat
- ✓ For Student-Teachers section with benefits + $900/month earning calculator
- ✓ For Course Creators section with benefits + 70/15/15 revenue split visual
- ✓ Why Peer Learning Works section (4 reasons)
- ✓ FAQ Preview section (3 expandable questions)
- ✓ Final CTA section with Get Started + Browse Courses buttons
- ○ Video Explainer section Spec says optional - not implemented
Interactive Elements
Buttons
| Element | Component | Action | Status |
|---|---|---|---|
| FAQ accordion buttons (x3) | HowItWorksPage | Toggle FAQ answer visibility | active |
Links
Navigation CTAs
| Element | Target | Status |
|---|---|---|
| "Start Learning" button | /courses | active |
| "Become a Teacher" button | /become-a-teacher | active |
| "Create a Course" button | /for-creators | active |
| "See all FAQs" link | /faq | active |
| "Get Started Free" button | /signup | active |
| "Browse Courses" button | /courses | active |
Target Pages Status
| Target | Page Code | Status |
|---|---|---|
/courses | CBRO | Implemented |
/become-a-teacher | BTAT | PageSpecView |
/for-creators | FCRE | PageSpecView |
/faq | FAQP | Implemented |
/signup | SGUP | Implemented |
Verification Notes
Verified Components
- ✓
src/components/marketing/HowItWorksPage.tsx
Screenshots
- 📷
HOWI-2026-01-08-18-56-18.png- Full page screenshot showing all sections
Notes
- • 2 target pages (BTAT, FCRE) are PageSpecView placeholders
- • Analytics events from original spec not implemented
- • Video explainer section intentionally omitted (marked optional in spec)
Test Coverage
scripts/page-tests/test-HOWI.sh tests/pages/how-it-works.test.tsx ○ tests/components/marketing/HowItWorksPage.test.tsx ✓ Discrepancies (Spec vs Implementation)
As of 2026-01-08
Planned but Not Implemented
| Feature | Original Spec | Status | Priority |
|---|---|---|---|
| Video Explainer section | 2-3 minute video walking through the platform with testimonials | Not implemented | Low - marked optional in spec |
| Analytics: page_view event | Track page load with source, referrer | Not implemented | Medium |
| Analytics: section_view event | Track when sections scrolled into view | Not implemented | Low |
| Analytics: video_play event | Track when explainer video played | Not implemented - no video | N/A |
| Analytics: cta_click event | Track CTA clicks with destination info | Not implemented | Medium |
Implemented Differently
| Feature | Original Spec | Reality | Note |
|---|---|---|---|
| Step titles and descriptions | Generic step descriptions in sections spec | More detailed titles with icons in component | Implementation improved on spec |
Removed from Spec
| Feature | Reason |
|---|---|
| sampleContent section | Content is hardcoded in component, sampleContent was for planning only |
Learn. Teach. Earn.
A revolutionary approach to education that benefits everyone in the learning chain.
Peerloop creates a sustainable cycle where students become teachers, making quality education accessible and affordable.
Your Journey
From curious learner to confident teacher in six simple steps.
Choose Your Course
Browse our catalog of expert-designed courses. Each course is created by industry professionals and taught by certified peer tutors.
Learn with a Peer Tutor
Book 1-on-1 video sessions with a Student-Teacher who recently mastered the material. They understand your challenges because they faced them too.
Practice & Progress
Complete hands-on assignments and projects. Your tutor provides personalized feedback and guidance every step of the way.
Earn Your Certificate
Pass the course assessments to receive a verified certificate. Share it on LinkedIn or add it to your resume.
Become a Teacher
Top graduates can apply to become certified Student-Teachers. Get endorsed by the course creator and start helping others.
Earn While You Teach
Keep 70% of every session fee. Set your own schedule, work from anywhere, and build your teaching reputation.
For Students
- ✓Affordable 1-on-1 tutoring at a fraction of traditional costs
- ✓Learn from peers who recently mastered the same material
- ✓Flexible scheduling that fits your life
- ✓Direct path to earning as a teacher yourself
For Student-Teachers
- ✓Earn 70% of every session fee
- ✓Set your own availability and rates
- ✓Build your teaching portfolio and reputation
- ✓Help others while reinforcing your own knowledge
For Course Creators
- ✓Earn 15% royalty on all sessions for your course
- ✓Build a team of certified tutors to teach your material
- ✓Focus on content creation while others handle delivery
- ✓Passive income that scales with your course's popularity
Why Peer Learning Works
The science behind our approach to education.
Fresh Perspective
Teachers who just learned the material remember exactly what was confusing. They explain concepts the way they wish someone had explained to them.
Relatable Experience
Peer tutors speak your language. They've faced the same challenges and can share practical strategies that worked for them.
Affordable Access
By leveraging recent graduates as tutors, we deliver premium 1-on-1 instruction at a fraction of traditional tutoring costs.
Infinite Scale
Every student can become a teacher. As more people complete courses, the pool of available tutors grows automatically.
Ready to Start Your Journey?
Join thousands of learners who are mastering new skills, earning certifications, and building income through teaching.