feat: restore landing page energy — single CTA, remove coaches (#90) #39

Merged
forgejo_admin merged 1 commit from 90-landing-page-energy into main 2026-03-26 23:37:58 +00:00

Summary

Restores the original landing page energy by simplifying the funnel: single hero CTA, no coaches section (staff page owns that), new "How to Join" steps section, and a stronger bottom CTA.

Changes

  • index.html: Hero — replaced dual buttons ("Member Sign In" + "View Schedule") with single "View Our Teams" CTA linking to schedule.html
  • index.html: Removed entire "Our Coaches" section (5 coach cards) — staff.html handles this
  • index.html: Added "How to Join" 3-step section (Reach Out, Meet the Coaches, Get Placed) using existing .step / .step-number / .grid-3 CSS classes
  • index.html: Bottom CTA — changed "Want to Get Involved?" to "Ready to Compete?" with prominent phone number and email

Test Plan

  • Verify final page structure: Nav, Hero, About, How to Join, CTA, Footer (5 sections)
  • Verify hero has single CTA button linking to schedule.html
  • Verify no coaches section on landing page
  • Verify "How to Join" step numbers render correctly (existing CSS)
  • Verify bottom CTA shows phone number and email
  • Check mobile (375px), tablet (768px), desktop (1280px) — all use existing responsive CSS
  • No regressions on other pages (only index.html changed)

Review Checklist

  • Passed automated review-fix loop
  • No secrets committed
  • No unnecessary file changes
  • Commit messages are descriptive
## Summary Restores the original landing page energy by simplifying the funnel: single hero CTA, no coaches section (staff page owns that), new "How to Join" steps section, and a stronger bottom CTA. ## Changes - `index.html`: Hero — replaced dual buttons ("Member Sign In" + "View Schedule") with single "View Our Teams" CTA linking to schedule.html - `index.html`: Removed entire "Our Coaches" section (5 coach cards) — staff.html handles this - `index.html`: Added "How to Join" 3-step section (Reach Out, Meet the Coaches, Get Placed) using existing `.step` / `.step-number` / `.grid-3` CSS classes - `index.html`: Bottom CTA — changed "Want to Get Involved?" to "Ready to Compete?" with prominent phone number and email ## Test Plan - [ ] Verify final page structure: Nav, Hero, About, How to Join, CTA, Footer (5 sections) - [ ] Verify hero has single CTA button linking to schedule.html - [ ] Verify no coaches section on landing page - [ ] Verify "How to Join" step numbers render correctly (existing CSS) - [ ] Verify bottom CTA shows phone number and email - [ ] Check mobile (375px), tablet (768px), desktop (1280px) — all use existing responsive CSS - [ ] No regressions on other pages (only index.html changed) ## Review Checklist - [x] Passed automated review-fix loop - [x] No secrets committed - [x] No unnecessary file changes - [x] Commit messages are descriptive ## Related - Closes forgejo_admin/westside-app#90
- Hero: replace dual buttons with single "View Our Teams" CTA
- Remove entire coaches section (staff page handles this)
- Add "How to Join" 3-step section after Marcus quote
- Bottom CTA: "Ready to Compete?" with phone + email contact info

Closes forgejo_admin/westside-app#90

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Author
Owner

Review: Approved

Files changed: 1 (index.html only — no CSS or other pages touched)

Checklist

  • Hero: single CTA "View Our Teams" linking to schedule.html
  • Sacred subtitle ("This isn't babysitting...") preserved
  • Coaches section fully removed (staff.html owns it)
  • "How to Join" 3-step section added in correct position, using existing .step / .step-number / .grid-3 CSS
  • Bottom CTA: "Ready to Compete?" with phone + email contact info
  • Final structure: Nav, Hero, About, How to Join, CTA, Footer (5 sections)
  • No secrets committed
  • No unnecessary file changes
  • No CSS modifications needed (all classes pre-exist)
## Review: Approved **Files changed:** 1 (`index.html` only — no CSS or other pages touched) ### Checklist - [x] Hero: single CTA "View Our Teams" linking to schedule.html - [x] Sacred subtitle ("This isn't babysitting...") preserved - [x] Coaches section fully removed (staff.html owns it) - [x] "How to Join" 3-step section added in correct position, using existing `.step` / `.step-number` / `.grid-3` CSS - [x] Bottom CTA: "Ready to Compete?" with phone + email contact info - [x] Final structure: Nav, Hero, About, How to Join, CTA, Footer (5 sections) - [x] No secrets committed - [x] No unnecessary file changes - [x] No CSS modifications needed (all classes pre-exist)
Author
Owner

PR #39 Review

DOMAIN REVIEW

Tech stack: Static HTML/CSS playground (vanilla HTML, shared CSS, no framework).

Structural correctness:

  • Final page structure is Nav, Hero, About (3 cards + quote), How to Join (3 steps), CTA, Footer -- matches the specified requirements exactly.
  • Coaches section fully removed (5 coach cards). Staff page (staff.html) retains all coach content (33 references to "coach" confirmed), so no content is lost.
  • Hero simplified from dual buttons ("Member Sign In" + "View Schedule") to single CTA ("View Our Teams") linking to schedule.html -- correct.
  • "How to Join" section uses existing CSS classes (.step, .step-number, .grid, .grid-3) which are fully defined in shared/style.css at lines 863-899. No new CSS needed.
  • Bottom CTA changed from "Want to Get Involved?" to "Ready to Compete?" with inline phone number and email -- correct.

Accessibility:

  • tel: and mailto: links in the CTA section have visible text labels (phone number and email address), which is good for screen readers.
  • The nav retains aria-label="Main navigation" and the toggle button retains aria-expanded and aria-controls attributes.
  • No accessibility regressions detected.

Responsive design:

  • .grid-3 has mobile-first single column (line 869), 2-column at tablet breakpoint (line 3309), 3-column at desktop (line 3352). The "How to Join" steps will render correctly at all breakpoints.
  • .step class has text-align: center and proper padding via CSS vars. Step numbers render as 48px red circles. All confirmed in CSS.

Content quality:

  • The "How to Join" steps are clear and actionable: Reach Out, Meet the Coaches, Get Placed.
  • CTA energy is stronger: "Ready to Compete?" is direct and action-oriented.
  • No broken links. schedule.html exists as a target for the hero CTA.

Minor visual flow observation:

  • Two consecutive light sections (About and How to Join) both use class="section". The old coaches section used section-dark which provided alternating light/dark rhythm. However, the dark CTA banner immediately follows How to Join, so visual separation is still maintained. This is a design taste call, not a defect.

BLOCKERS

None.

This is a static HTML playground page with no user input, no backend interaction, no authentication, and no JavaScript logic changes. The BLOCKER criteria (test coverage, input validation, secrets, DRY auth) do not apply:

  • Test coverage: Playground pages are static HTML prototypes. No test framework applies. No new functionality requiring tests.
  • Input validation: No forms, no user input on this page.
  • Secrets: No credentials in code. The email address and phone number are intentionally public contact information.
  • DRY/auth: No auth logic involved.

NITS

  1. Two consecutive light sections -- About and How to Join are both class="section" (light background). The old coaches section was section-dark which created a light/dark/light rhythm. Consider using section section-dark on the How to Join section to restore visual alternation. This is purely aesthetic and depends on design preference.

SOP COMPLIANCE

  • Branch named after issue: 90-landing-page-energy references issue #90
  • PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related all present
  • Related references parent issue: Closes forgejo_admin/westside-app#90
  • No plan slug required (confirmed by requester: "No plan slug")
  • No secrets committed
  • No unnecessary file changes: only index.html changed (1 file, +20/-46)
  • Commit messages are descriptive (per PR title convention)
  • Scope is tight: all changes directly serve the issue requirements

PROCESS OBSERVATIONS

  • Net reduction of 26 lines. Simplification is the right direction for a landing page funnel.
  • Change failure risk is low: static HTML, single file, no dependencies.
  • The playground serves as the design gate before promotion to westside-app (SvelteKit). This PR correctly stays in playground scope.

VERDICT: APPROVED

## PR #39 Review ### DOMAIN REVIEW **Tech stack:** Static HTML/CSS playground (vanilla HTML, shared CSS, no framework). **Structural correctness:** - Final page structure is Nav, Hero, About (3 cards + quote), How to Join (3 steps), CTA, Footer -- matches the specified requirements exactly. - Coaches section fully removed (5 coach cards). Staff page (`staff.html`) retains all coach content (33 references to "coach" confirmed), so no content is lost. - Hero simplified from dual buttons ("Member Sign In" + "View Schedule") to single CTA ("View Our Teams") linking to `schedule.html` -- correct. - "How to Join" section uses existing CSS classes (`.step`, `.step-number`, `.grid`, `.grid-3`) which are fully defined in `shared/style.css` at lines 863-899. No new CSS needed. - Bottom CTA changed from "Want to Get Involved?" to "Ready to Compete?" with inline phone number and email -- correct. **Accessibility:** - `tel:` and `mailto:` links in the CTA section have visible text labels (phone number and email address), which is good for screen readers. - The nav retains `aria-label="Main navigation"` and the toggle button retains `aria-expanded` and `aria-controls` attributes. - No accessibility regressions detected. **Responsive design:** - `.grid-3` has mobile-first single column (line 869), 2-column at tablet breakpoint (line 3309), 3-column at desktop (line 3352). The "How to Join" steps will render correctly at all breakpoints. - `.step` class has `text-align: center` and proper padding via CSS vars. Step numbers render as 48px red circles. All confirmed in CSS. **Content quality:** - The "How to Join" steps are clear and actionable: Reach Out, Meet the Coaches, Get Placed. - CTA energy is stronger: "Ready to Compete?" is direct and action-oriented. - No broken links. `schedule.html` exists as a target for the hero CTA. **Minor visual flow observation:** - Two consecutive light sections (About and How to Join) both use `class="section"`. The old coaches section used `section-dark` which provided alternating light/dark rhythm. However, the dark CTA banner immediately follows How to Join, so visual separation is still maintained. This is a design taste call, not a defect. ### BLOCKERS None. This is a static HTML playground page with no user input, no backend interaction, no authentication, and no JavaScript logic changes. The BLOCKER criteria (test coverage, input validation, secrets, DRY auth) do not apply: - **Test coverage:** Playground pages are static HTML prototypes. No test framework applies. No new functionality requiring tests. - **Input validation:** No forms, no user input on this page. - **Secrets:** No credentials in code. The email address and phone number are intentionally public contact information. - **DRY/auth:** No auth logic involved. ### NITS 1. **Two consecutive light sections** -- About and How to Join are both `class="section"` (light background). The old coaches section was `section-dark` which created a light/dark/light rhythm. Consider using `section section-dark` on the How to Join section to restore visual alternation. This is purely aesthetic and depends on design preference. ### SOP COMPLIANCE - [x] Branch named after issue: `90-landing-page-energy` references issue #90 - [x] PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related all present - [x] Related references parent issue: `Closes forgejo_admin/westside-app#90` - [x] No plan slug required (confirmed by requester: "No plan slug") - [x] No secrets committed - [x] No unnecessary file changes: only `index.html` changed (1 file, +20/-46) - [x] Commit messages are descriptive (per PR title convention) - [x] Scope is tight: all changes directly serve the issue requirements ### PROCESS OBSERVATIONS - Net reduction of 26 lines. Simplification is the right direction for a landing page funnel. - Change failure risk is low: static HTML, single file, no dependencies. - The playground serves as the design gate before promotion to `westside-app` (SvelteKit). This PR correctly stays in playground scope. ### VERDICT: APPROVED
forgejo_admin deleted branch 90-landing-page-energy 2026-03-26 23:37:58 +00:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
forgejo_admin/westside-playground!39
No description provided.