Copilot/update homepage dashboard #61
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -80,7 +80,7 @@ | |||||
| <div className="inline-flex items-center space-x-2 bg-white rounded-full px-4 py-1.5 shadow-sm border border-emerald-100 mb-6"> | ||||||
| <span className="flex h-2 w-2 rounded-full bg-emerald-500"></span> | ||||||
| <span className="text-sm font-semibold text-emerald-800 tracking-wide uppercase"> | ||||||
| Made for runners by a runner | ||||||
| </span> | ||||||
| </div> | ||||||
| <h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-[1.1] mb-6"> | ||||||
|
|
@@ -100,7 +100,7 @@ | |||||
| icon={ArrowRight} | ||||||
| onClick={() => navigate("/calculator")} | ||||||
| > | ||||||
| Get Started | ||||||
| </Button> | ||||||
| <Button variant="secondary" size="lg" onClick={scrollToFeatures}> | ||||||
| See How It Works | ||||||
|
|
@@ -121,29 +121,36 @@ | |||||
|
|
||||||
| {/* Visual / Dashboard Mockup */} | ||||||
| <div className="relative mx-auto w-full max-w-lg lg:max-w-none"> | ||||||
| <div | ||||||
| className="relative rounded-2xl bg-white shadow-2xl border border-slate-200 overflow-hidden cursor-pointer hover:shadow-emerald-200 hover:border-emerald-300 transition-all duration-200 group" | ||||||
| onClick={() => navigate("/race")} | ||||||
|
Check warning on line 126 in vite-project/src/components/layout/Landing.tsx
|
||||||
| onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && navigate("/race")} | ||||||
|
Check warning on line 127 in vite-project/src/components/layout/Landing.tsx
|
||||||
| role="link" | ||||||
|
Comment on lines
+124
to
+128
There was a problem hiding this comment. This clickable card is implemented as a with
role="link" and custom keyboard handling. For better accessibility/semantics (and to get correct keyboard behavior + SEO for free), consider using a real <Link to="/race"> (or an <a href>), rather than a generic div with ARIA role. |
||||||
| tabIndex={0} | ||||||
| aria-label="Browse race courses" | ||||||
| > | ||||||
| <div className="bg-slate-50 px-4 py-3 border-b border-slate-200 flex items-center space-x-2"> | ||||||
| <div className="w-3 h-3 rounded-full bg-red-400"></div> | ||||||
| <div className="w-3 h-3 rounded-full bg-yellow-400"></div> | ||||||
| <div className="w-3 h-3 rounded-full bg-green-400"></div> | ||||||
| <div className="ml-4 text-xs text-slate-400 font-mono group-hover:text-emerald-600 transition-colors"> | ||||||
| trainpace.com/race | ||||||
| </div> | ||||||
| </div> | ||||||
| <div className="p-6 grid gap-6"> | ||||||
| {/* Mock UI Elements - Race page preview */} | ||||||
| <div className="flex items-center justify-between border-b border-slate-100 pb-4"> | ||||||
| <div> | ||||||
| <div className="text-sm text-slate-500 font-medium uppercase"> | ||||||
| Race Courses | ||||||
| </div> | ||||||
| <div className="text-2xl font-bold text-slate-900"> | ||||||
| Boston Marathon{" "} | ||||||
| <span className="text-orange-500">Rolling Hills</span> | ||||||
| </div> | ||||||
| </div> | ||||||
| <div className="h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-600"> | ||||||
| <Map size={20} /> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
|
|
@@ -261,8 +268,8 @@ | |||||
| solution: "Personalized gel timing and carb calculations.", | ||||||
| }, | ||||||
| { | ||||||
| problem: "I want to know what pace I should be going per km.", | ||||||
| solution: "Get your exact per-km pace zones from any recent race time.", | ||||||
|
There was a problem hiding this comment. Copy consistency: this problem statement uses “per km” while the solution right below uses “per-km”. Consider standardizing the phrasing (either both “per km” or both “per-km”) to avoid inconsistent UI copy.
Suggested change
|
||||||
| }, | ||||||
| ]; | ||||||
|
|
||||||
|
|
@@ -814,7 +821,7 @@ | |||||
| className="bg-white text-emerald-700 font-bold py-4 px-8 rounded-full hover:bg-emerald-50 transition shadow-xl" | ||||||
| onClick={() => navigate("/calculator")} | ||||||
| > | ||||||
| Get Started | ||||||
| </button> | ||||||
| <button | ||||||
| className="bg-emerald-700 text-white font-semibold py-4 px-8 rounded-full hover:bg-emerald-800 transition border border-emerald-500" | ||||||
|
|
||||||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onKeyDowntriggers navigation on Space but doesn’t callpreventDefault(), so Space can also scroll the page while the element is focused. Also, Space activation is expected forrole="button"rather thanrole="link"(links generally activate on Enter). Align the role/keyboard interaction and prevent the default Space behavior when handling it.