Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/tasks/active/20260315-homepage-improvements-todo.md`:
- Around line 1-528: Create the paired lessons file named
20260315-homepage-improvements-lessons.md to accompany the existing todo:
summarize what was implemented (updates to hero-section.tsx and
features-section.tsx messaging, two-tier FeaturesSection, new WhySection and
import in page.tsx, mobile NavBar changes, expanded Footer), note implementation
decisions and trade-offs (use of lucide-react icons, Tailwind classes, theme
variables), list important gotchas and verification steps (responsive checks,
accessibility/hamburger aria-label, theme toggle behavior, run pnpm verify:fast,
run pnpm dev and check Hero → Demo → Why → Features flow), enumerate changed
symbols/files to review (hero-section.tsx, features-section.tsx,
why-section.tsx, page.tsx, nav-bar.tsx, footer.tsx) and suggest follow-up tasks
(add unit/e2e checks, audit color contrast, update changelog). Ensure the
lessons file is concise, dated 2026-03-15, and attributes the author/PR for
traceability.

In `@packages/frontend/src/app/home/nav-bar.tsx`:
- Around line 47-53: The mobile menu toggle button in nav-bar.tsx should expose
aria state and control target and the Docs/GitHub links should close the menu
like Features/CTA do: add aria-expanded={open} and aria-controls="mobile-menu"
(or the id used for the mobile menu container) to the button that uses setOpen
and open (the button with className "md:hidden p-1 text-homepage-text"), and
update the Docs and GitHub link click handlers to call setOpen(false) (same
pattern used by the Features/CTA link handlers) so clicking those items closes
the mobile menu consistently.

In `@packages/frontend/src/app/home/why-section.tsx`:
- Around line 39-43: The comparator column header currently reads "Others" in
the JSX fragment inside the WhySection component (the div with text "Others" and
className "px-5 py-3 text-center text-muted-foreground"); replace that label
with an explicit competitor label such as "Google Sheets / Airtable" to align
the header with the section's positioning and intent so the comparison is clear.
- Around line 37-56: The comparison is rendered with generic divs but is
semantically tabular; replace the grid-based div structure in why-section.tsx
with proper table markup: use a <table> wrapping a <thead> containing a single
<tr> with three <th> cells (empty/label header, "Wafflebase", "Others") and a
<tbody> where you map rows to <tr> elements; for each mapped row render the
first cell as a row header (<th scope="row">) using row.label and the other two
as <td> for row.wafflebase and row.others, preserving the existing className
styling on the table, thead, tbody, th and td to keep visual layout and ensure
keys remain on the mapped <tr>.

---

Nitpick comments:
In `@packages/frontend/src/app/home/features-section.tsx`:
- Around line 55-77: The iterator variable "f" used in the heroFeatures.map and
secondaryFeatures.map JSX blocks reduces readability; rename it to a descriptive
identifier (e.g., heroFeature for the heroFeatures.map callback and
secondaryFeature for the secondaryFeatures.map callback, or at minimum feature)
and update all usages inside those callbacks (key, f.icon, f.title,
f.description) to the new name to make intent clear and follow the naming
guideline.