Page: Homepage
Code: HOME Route:
/ Access: Public Priority: P0 Components: src/components/home/HeroSection.tsxsrc/components/home/HowItWorks.tsxsrc/components/home/FeaturedCourses.tsxsrc/components/home/FeaturedCreators.tsxsrc/components/home/ValueProposition.tsxsrc/components/home/Testimonials.tsxsrc/components/home/CTASection.tsx Purpose
Landing page that communicates PeerLoop's value proposition and guides visitors toward course discovery or signup.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
|---|---|---|
| (External) | Direct URL, search engines, marketing | Primary entry point |
| LGIN | Logo click | Return to home |
| SGUP | Logo click | Return to home |
| Any page | Logo/nav home link | Global navigation |
Outgoing (users navigate to)
Data Requirements
| Entity | Fields Used | Purpose |
|---|---|---|
| courses | title, thumbnail, price, rating, badge | Featured courses display |
| users (creators) | name, avatar, title | Featured creators section |
| platform_stats | various | Platform statistics display |
Sections
Header/Navigation
- • Logo (links to HOME)
- • Nav links: Courses, How It Works, Pricing, For Creators
- • CTA: Sign Up, Log In (or user avatar when logged in)
Hero
- • Headline: Value proposition (Learn, Teach, Earn)
- • Subheadline: Brief explanation of peer teaching model
- • Primary CTA: "Get Started" → SGUP
- • Secondary CTA: "Browse Courses" → CBRO
- • Hero image/illustration
How It Works
- • Step 1: Enroll in a course
- • Step 2: Learn from certified Student-Teachers
- • Step 3: Get certified and start teaching
- • Visual: 3-step illustration
Featured Courses
- • 3-6 course cards with:
- • - Thumbnail, title, creator name
- • - Price, rating, badge (if any)
- • - Level indicator
- • "View All Courses" link → CBRO
Value Proposition
- • For Students: Learn from peers who recently mastered the material
- • For Student-Teachers: Earn while teaching what you know
- • For Creators: Build a teaching community around your courses
Social Proof (Testimonials)
- • 3 testimonial cards in grid layout
- • Quote with decorative quote marks
- • Author: avatar, name, role
- • Course badge showing which course they took
Footer
- • Navigation links
- • Legal links (Privacy, Terms)
- • Copyright
User Stories Fulfilled
- • US-G001
- • US-G002
- • US-G004
States & Variations
| State | Description |
|---|---|
| Default | Standard homepage for visitors |
| Logged In | Header shows user avatar, dashboard link instead of Login/Signup |
Mobile Considerations
- • Hero section stacks vertically
- • Course cards become horizontal scroll or single column
- • Hamburger menu for navigation
- • CTAs remain prominent and thumb-accessible
Error Handling
| Error | Display |
|---|---|
| Featured courses fail to load | Show static placeholder or hide section |
| Featured creators fail to load | Show static placeholder or hide section |
| Images fail to load | Show placeholder images |
| Platform stats fail to load | Hide stats section |
Analytics Events
| Event | Trigger | Data |
|---|---|---|
page_view | Page load | source, referrer |
cta_click | Any CTA clicked | cta_name, destination |
course_card_click | Featured course clicked | course_id, position |
Planned API Calls
| Endpoint | When | Purpose |
|---|---|---|
GET /api/courses/featured | Page load | Featured courses for carousel |
GET /api/creators/featured | Page load | Featured creators section |
GET /api/stats/platform | Page load | Platform statistics |
Notes
- • Data fetched via SSR from D1
- • Platform stats from platform_stats table
- • Genesis Cohort launch: May feature only 4 courses (per CD-026)
- • Consider A/B testing hero messaging
- • SEO: Primary landing page, optimize meta tags
Features
Hero Section
- ✓ Headline with value proposition (Learn, Teach, Earn) [US-G001]
- ✓ Subheadline explaining peer teaching model [US-G001]
- ✓ Primary CTA: "Get Started" → SGUP [US-G001]
- ✓ Secondary CTA: "Browse Courses" → CBRO [US-G001]
- ○ Hero image/illustration [US-G001] Currently: gradient background only
How It Works
- ✓ Step 1: Enroll in a course [US-G002]
- ✓ Step 2: Learn from certified Student-Teachers [US-G002]
- ✓ Step 3: Get certified and start teaching [US-G002]
- ✓ Visual 3-step illustration [US-G002]
Featured Courses
- ✓ 3-6 course cards with thumbnail, title, creator [US-G004]
- ✓ Price, rating, badge display [US-G004]
- ✓ Level indicator [US-G004]
- ✓ "View All Courses" link → CBRO [US-G004]
Value Proposition
- ✓ For Students: Learn from peers who recently mastered the material [US-G001]
- ✓ For Student-Teachers: Earn while teaching what you know [US-G001]
- ✓ For Creators: Build a teaching community around your courses [US-G001]
Featured Creators
- ✓ Creator avatars and names [US-G004]
- ✓ Creator titles/descriptions [US-G004]
Platform Stats
- ○ Key metrics display (courses, students, etc.) [US-G001] Currently: only 1 stat in hero social proof
Social Proof
- ✓ Testimonials grid (3 cards) [US-G001]
- ○ Testimonials carousel with navigation [US-G001] Currently: static grid, no carousel
Interactive Elements
Buttons: 3/3 active
Links: 45/45 active
Buttons
| Element | Component | Action | Status |
|---|---|---|---|
| User menu toggle | Header | Opens user dropdown menu | active |
| Mobile menu toggle | Header | Opens/closes mobile navigation | active |
| Sign Out | Header (dropdown) | POST /api/auth/logout → redirect to / | active |
Links
Hero Section
| Element | Target | Status |
|---|---|---|
| "Get Started Free" button | /signup | active |
| "Browse Courses" button | /courses | active |
How It Works Section
| Element | Target | Status |
|---|---|---|
| "Learn more about the PeerLoop model →" | /how-it-works | active |
Featured Courses Section
| Element | Target | Status |
|---|---|---|
| "View all courses →" (desktop) | /courses | active |
| "View all courses" button (mobile) | /courses | active |
| Course cards (dynamic) | /courses/{slug} | active |
Featured Creators Section
| Element | Target | Status |
|---|---|---|
| "View all creators →" (desktop) | /creators | active |
| "View all creators" button (mobile) | /creators | active |
| Creator cards (dynamic) | /creators/{handle} | active |
CTA Section
| Element | Target | Status |
|---|---|---|
| "Create Free Account" button | /signup | active |
| "Browse Courses" button | /courses | active |
Header Navigation
| Element | Target | Status |
|---|---|---|
| Logo "Peerloop" | / | active |
| "Courses" | /courses | active |
| "How It Works" | /how-it-works | active |
| "Pricing" | /pricing | active |
| "For Creators" | /for-creators | active |
| "Sign In" (guest) | /login | active |
| "Get Started" (guest) | /signup | active |
| Dashboard (authenticated) | (role-based) | active |
| View Profile | /@{handle} | active |
| Settings | /settings | active |
| Creator Dashboard | /dashboard/creator | active |
| Teaching Dashboard | /dashboard/teaching | active |
| Admin Panel | /admin | active |
Footer
| Element | Target | Status |
|---|---|---|
| Logo | / | active |
| Platform links | /courses, /creators, /teachers, /how-it-works, /pricing | active |
| Get Involved links | /become-a-teacher, /for-creators, /stories, /testimonials | active |
| Company links | /about, /blog, /careers, /contact | active |
| Support links | /faq, /help, /privacy, /terms | active |
| Social (external) | Twitter, LinkedIn, GitHub | active |
| Bottom bar | /privacy, /terms, /cookies | active |
Target Pages Status
| Target | Page Code | Status |
|---|---|---|
/signup | SGUP | Implemented |
/login | LGIN | Implemented |
/courses | CBRO | Implemented |
/courses/{slug} | CDET | Implemented |
/creators | CRLS | Implemented |
/creators/{handle} | CPRO | Implemented |
/how-it-works | HOWI | PageSpecView |
/pricing | PRIC | PageSpecView |
/for-creators | FCRE | PageSpecView |
/become-a-teacher | BTAT | PageSpecView |
/stories | STOR | Implemented |
/testimonials | TSTM | Implemented |
/about | ABOU | PageSpecView |
/blog | BLOG | PageSpecView |
/careers | CARE | PageSpecView |
/contact | CONT | PageSpecView |
/faq | FAQP | PageSpecView |
/help | HELP | PageSpecView |
/privacy | PRIV | PageSpecView |
/terms | TERM | PageSpecView |
/cookies | - | Missing |
/teachers | STDR | PageSpecView |
/settings | SETT | PageSpecView |
/admin | ADMN | PageSpecView |
/dashboard/creator | CDSH | PageSpecView |
/dashboard/teaching | TDSH | PageSpecView |
/dashboard/learning | SDSH | Implemented |
/@{handle} | PROF | PageSpecView |
Verification Notes
Verified: 2026-01-07 Consolidated: 2026-01-08
Verified Components
- ✓
src/components/home/HeroSection.tsx - ✓
src/components/home/HowItWorks.tsx - ✓
src/components/home/FeaturedCourses.tsx - ✓
src/components/home/FeaturedCreators.tsx - ✓
src/components/home/ValueProposition.tsx - ✓
src/components/home/Testimonials.tsx - ✓
src/components/home/CTASection.tsx - ✓
src/components/navigation/Header.tsx - ✓
src/components/navigation/Footer.astro - ✓
src/components/courses/CourseCard.tsx - ✓
src/components/creators/CreatorCard.tsx
Screenshots
- 📷
HOME-2026-01-06-21-25-50.png- Full page verification screenshot
Notes
- • All navigation links are active and point to valid routes
- • Some target pages are PageSpecView placeholders (not fully implemented)
- • /cookies page is linked but does not exist
- • No analytics tracking is implemented
Discrepancies (Spec vs Implementation)
As of 2026-01-08
Planned but Not Implemented
| Feature | Original Spec | Status | Priority |
|---|---|---|---|
| Hero image/illustration | Required hero image or illustration | Not implemented | Medium |
| Platform Stats section | Multiple key metrics display (courses, students, etc.) | Partial - only 1 stat in hero social proof | Low |
| Analytics events | page_view, cta_click, course_card_click events | Not implemented | Low |
| /cookies page | Linked from footer | Page does not exist | Low |
Implemented Differently
| Feature | Original Spec | Reality | Note |
|---|---|---|---|
| Testimonials carousel | Carousel with navigation | Static 3-column grid | Acceptable - simpler implementation |
| Header nav links | Browse Courses, For Creators, About | Courses, How It Works, Pricing, For Creators | Different but functional navigation structure |
Learn from peers who get it
Learn. Teach. Earn.
Master new skills with 1-on-1 guidance from certified peer teachers. Then become a teacher yourself and earn while you teach.
A
B
C
D
E
150+ Students learning this month
How PeerLoop Works
The learn-teach-earn flywheel that makes quality education accessible and rewarding.
01
Enroll in a Course
Choose from our curated selection of courses taught by certified peer teachers through live 1-on-1 sessions.
02
Learn from Peers
Work one-on-one with a student-teacher who recently mastered the material. They understand your challenges.
03
Teach & Earn
Get certified after completing your course. Then teach new students and earn 70% of each enrollment.
Featured Courses
Start your learning journey with our most popular courses.
AI Tools Overview
AI Tools Overview
Navigate the AI landscape with confidence - choose the right tools without the overwhelm
4.9(34)
67 students
2 sessions3 hoursbeginner
$249
Intro to Claude Code
Intro to Claude Code
Master AI-powered coding in the terminal - no coding experience required
4.8(28)
52 students
2 sessions3 hoursbeginner
$249
Intro to n8n
Intro to n8n
Master workflow automation and connect your apps - no coding required
4.7(19)
38 students
2 sessions3 hoursbeginner
$249
Learn from the Best
Our creators are industry experts passionate about teaching.
Guy Rymberg
AI & Automation Expert
AI enthusiast and entrepreneur helping people navigate the AI tool landscape strategically.
4
Courses
156
Students
4.9
Rating
AI ToolsAutomationClaude Code+2
Gabriel Rymberg
Software Engineer & Educator
Software engineer helping non-coders build real projects with AI assistance.
1
Courses
42
Students
4.8
Rating
DeploymentGitHubVibe Coding+1
Everyone wins with PeerLoop
A platform designed for students, teachers, and course creators alike.
For Students
Learn from peers who get it
Your teacher recently mastered the same material. They remember the struggles, understand the confusion, and know exactly how to help you succeed.
For Student-Teachers
Earn while teaching
Turn your knowledge into income. Get certified after completing a course, then earn 70% of each enrollment when you teach new students.
For Creators
Build a teaching community
Create your course once, then let certified student-teachers scale your impact. You earn royalties while your community grows organically.
What our students say
Real results from real students who learned, completed, and many who now teach.
Finally deployed my first real website! The step-by-step process made it feel achievable. I am now building a second site for a client.
A
Amanda L.
Freelancer
Vibe Coding 101
My team used to spend 10 hours a week on manual data entry. After this course, I automated it all in n8n. Best investment I have made.
D
David R.
Operations Manager
Intro to n8n
Guy helped me realize I do not need 15 AI subscriptions. I narrowed down to 3 tools I actually use daily. Saved $200/month and got more productive.
M
Marcus T.
Entrepreneur
AI Tools Overview
Ready to start learning?
Join our community of learners and teachers. Start with any course and see why peer-to-peer learning works.
No credit card required
Live 1-on-1 sessions
Earn while you teach