claude/rework-homepage-compete-tj9ni #188
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Completely redesigned the homepage based on the PRD to position WODsmith Compete as the flagship product. The new landing page focuses on trust and ops relief rather than generic feature lists. New sections: - Hero: "Run a comp athletes trust - without spreadsheet ops" - Pain strip: Real quotes from organizers/athletes about typos, appeals, heat discovery, and volunteer scheduling chaos - Two audiences: Separate value props for athletes and organizers - Disaster prevention: Score verification, audit trails, transparent scoring, and digital appeals (with availability labels) - Volunteer/judge scheduling: Availability intake, heat assignments, rotations, conflict detection (with coming soon features) - Series teaser: Multi-location configuration and global leaderboards - Reliability: Edge deployment, uptime targets, graceful degradation - Proof section: Testimonials from comp organizers - FAQ: Migration, pricing, support, offline, appeals, notifications - Final CTA: Book a demo with friction clarifiers Key changes: - Replaced generic "Tools for Functional Fitness" messaging - Added truthful "available now" vs "coming soon" labels per PRD - Named specific villains (spreadsheets, typos, paper appeals) - Included proof nuggets and social proof early - Mobile-first responsive design with dark mode support
Contributor
WalkthroughThis PR introduces nine new landing page components (CompeteHero, PainStrip, TwoAudiences, DisasterPrevention, VolunteerScheduling, SeriesTeaser, ReliabilitySection, ProofSection, FAQSection, FinalCTA) and refactors the main route to compose them into a structured landing page layout. The route metadata is updated to reflect WODsmith Compete branding. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
🚀 Preview DeployedURL: https://wodsmith-app-pr-188.zacjones93.workers.dev
This comment is automatically updated on each push to this PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/wodsmith-start/src/components/landing/faq-section.tsx`:
- Around line 40-112: The FAQ accordion lacks ARIA attributes: update the
FAQItem component (used by FAQSection with openIndex/setOpenIndex) so the toggle
button exposes aria-expanded={isOpen} and aria-controls referencing a unique ID
for the answer panel, and give the answer container an id and role="region" (and
aria-labelledby pointing back to the button id) so assistive tech can map the
relationship between the button and content; generate stable IDs per item (e.g.,
using the question or index) to wire aria-controls/aria-labelledby consistently.
🧹 Nitpick comments (1)
apps/wodsmith-start/src/components/landing/compete-hero.tsx (1)
56-67: Consider accessibility for the scroll button.The "See How It Works" button scrolls smoothly to
#pain-points, which exists inPainStrip. However, for better accessibility, consider addingtype="button"to explicitly prevent form submission behavior if this component is ever used within a form context.Optional improvement
<Button variant="outline" size="lg" + type="button" onClick={() => { document .getElementById("pain-points") ?.scrollIntoView({ behavior: "smooth" }) }} >
Comment on lines
+40
to
+112
| interface FAQItemProps { | ||
| question: string | ||
| answer: string | ||
| isOpen: boolean | ||
| onToggle: () => void | ||
| } | ||
|
|
||
| function FAQItem({ question, answer, isOpen, onToggle }: FAQItemProps) { | ||
| return ( | ||
| <div className="border-b border-border"> | ||
| <button | ||
| type="button" | ||
| onClick={onToggle} | ||
| className="flex w-full items-center justify-between py-6 text-left" | ||
| > | ||
| <span className="font-medium">{question}</span> | ||
| <ChevronDown | ||
| className={cn( | ||
| "h-5 w-5 shrink-0 text-muted-foreground transition-transform", | ||
| isOpen && "rotate-180", | ||
| )} | ||
| /> | ||
| </button> | ||
| <div | ||
| className={cn( | ||
| "grid transition-all", | ||
| isOpen ? "grid-rows-[1fr] pb-6" : "grid-rows-[0fr]", | ||
| )} | ||
| > | ||
| <div className="overflow-hidden"> | ||
| <p className="text-muted-foreground">{answer}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export function FAQSection() { | ||
| const [openIndex, setOpenIndex] = useState<number | null>(null) | ||
|
|
||
| return ( | ||
| <section id="faq" className="bg-background py-20"> | ||
| <div className="container mx-auto px-4"> | ||
| <div className="mx-auto max-w-3xl"> | ||
| <div className="mb-12 text-center"> | ||
| <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-secondary px-4 py-2"> | ||
| <HelpCircle className="h-4 w-4 text-muted-foreground" /> | ||
| <span className="font-medium text-sm text-muted-foreground"> | ||
| FAQ | ||
| </span> | ||
| </div> | ||
|
|
||
| <h2 className="mb-4 font-mono text-3xl font-bold tracking-tight sm:text-4xl"> | ||
| Frequently asked questions | ||
| </h2> | ||
|
|
||
| <p className="text-lg text-muted-foreground"> | ||
| Everything organizers ask before signing up. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="rounded-xl border border-border bg-card"> | ||
| <div className="px-6"> | ||
| {faqs.map((faq, index) => ( | ||
| <FAQItem | ||
| key={faq.question} | ||
| question={faq.question} | ||
| answer={faq.answer} | ||
| isOpen={openIndex === index} | ||
| onToggle={() => | ||
| setOpenIndex(openIndex === index ? null : index) | ||
| } | ||
| /> |
Contributor
There was a problem hiding this comment.
Add ARIA attributes to the accordion for accessibility.
Buttons should expose expanded state and control IDs so assistive tech can interpret the accordion correctly.
♿ Proposed accessibility fix
interface FAQItemProps {
+ id: string
question: string
answer: string
isOpen: boolean
onToggle: () => void
}
-function FAQItem({ question, answer, isOpen, onToggle }: FAQItemProps) {
+function FAQItem({ id, question, answer, isOpen, onToggle }: FAQItemProps) {
return (
<div className="border-b border-border">
<button
type="button"
onClick={onToggle}
+ aria-expanded={isOpen}
+ aria-controls={id}
className="flex w-full items-center justify-between py-6 text-left"
>
<span className="font-medium">{question}</span>
<ChevronDown
className={cn(
"h-5 w-5 shrink-0 text-muted-foreground transition-transform",
isOpen && "rotate-180",
)}
/>
</button>
<div
+ id={id}
+ role="region"
+ aria-hidden={!isOpen}
className={cn(
"grid transition-all",
isOpen ? "grid-rows-[1fr] pb-6" : "grid-rows-[0fr]",
)}
>
<div className="overflow-hidden">
<p className="text-muted-foreground">{answer}</p>
</div>
</div>
</div>
)
}
{faqs.map((faq, index) => (
<FAQItem
+ id={`faq-${index}`}
key={faq.question}
question={faq.question}
answer={faq.answer}
isOpen={openIndex === index}
onToggle={() =>
setOpenIndex(openIndex === index ? null : index)
}
/>
))}🤖 Prompt for AI Agents
In `@apps/wodsmith-start/src/components/landing/faq-section.tsx` around lines 40 -
112, The FAQ accordion lacks ARIA attributes: update the FAQItem component (used
by FAQSection with openIndex/setOpenIndex) so the toggle button exposes
aria-expanded={isOpen} and aria-controls referencing a unique ID for the answer
panel, and give the answer container an id and role="region" (and
aria-labelledby pointing back to the button id) so assistive tech can map the
relationship between the button and content; generate stable IDs per item (e.g.,
using the question or index) to wire aria-controls/aria-labelledby consistently.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Completely redesigned the homepage based on the PRD to position WODsmith Compete as the flagship product. The new landing page focuses on trust and ops relief rather than generic feature lists.
New sections:
Key changes:
Summary by cubic
Redesigned the homepage to position WODsmith Compete as the flagship, focusing on trust and removing spreadsheet ops. Updated meta tags and built a new session-aware landing flow with clear CTAs.
New Features
Refactors
Written for commit 58450b8. Summary will update on new commits.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.