feat(web): redesign landing page and footer

[nathanialhenniges]

What

Redesign the public landing page and site footer to match the WolfWave marketing aesthetic.

Landing (apps/web/src/app/page.tsx)

Old: a single centered "open the control panel" card. New: a full editorial page.

• Hero — eyebrow pill, Montserrat display headline with a cyan Wolfathon. accent, dual CTA (Open control panel + View on GitHub), operator-only note, trust pills. Staggered entrance reveal reusing the existing wolf-rise keyframe.
• 01 · What's inside — six icon-chip cards for the shipped tools only: subathon timer, reward tracker, wheel of dares, giveaways, chat bot, OBS overlays.
• 02 · How it runs — three-step band (connect Twitch → drop overlays into OBS → go live).
• CTA — closing call to action + affiliation disclaimer.

Footer (apps/web/src/components/site-footer.tsx)

Flat centered stack → multi-column layout: brand block (mark + tagline), Get started / Project link groups (adds a Discord link), the affiliation disclaimer, and a bottom meta bar with the deployed commit sha. Same honest "independent fan tool" wording kept.

Fix (apps/web/src/components/wolf-mark.tsx)

WolfMark's root was a bare inline <span>, so size-* / mx-auto were silently ignored unless the parent was flex — a standalone <WolfMark className="size-14" /> collapsed and the logo <img> ballooned to ~864px. Root now defaults to inline-block (via cn, so a caller's own display class still wins). Fixes sizing everywhere.

Verification

• tsc --noEmit passes; prettier clean.
• Rendered at localhost:3001 (dark, 1280px) — hero, both sections, CTA, and footer confirmed; mark renders at 56px.
• Built with /frontend-design; reviewed with /uiux-review (NN/g): 0 catastrophic/major, contrast measured AA-pass (~5.1:1 worst case), one minor a11y item (missing new-tab cue on the hero GitHub link) fixed inline.

Notes

• Uses only existing design tokens (.app-bg, .panel-card, .eyebrow) and the shared cn helper — no new fonts or dependencies.
• CTA stays operator-only ("viewers watch live on Twitch").

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a redesigned, multi-section landing page with feature highlights, setup steps, and a new call-to-action.
  • Added links to the dashboard and GitHub from the hero section.
  • Expanded footer navigation with grouped internal and external links, including Discord and project resources.
  • Added a short commit reference link in the footer.

• Style

  • Refined branding, typography, icons, and WolfMark layout for a more polished presentation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fa98e29e-fd1a-4aba-b883-4a0e9feeb47d

📥 Commits

Reviewing files that changed from the base of the PR and between 14a29cc and d3fbd78.

📒 Files selected for processing (3)

• apps/web/src/app/page.tsx
• apps/web/src/components/site-footer.tsx
• apps/web/src/components/wolf-mark.tsx

---

Walkthrough

The landing page is expanded into a multi-section experience with feature cards, workflow steps, dashboard CTAs, and GitHub links. The footer is reorganized into grouped links with commit metadata, while WolfMark gains composed inline-block styling.

Changes

Landing and footer redesign

Layer / File(s)	Summary
Landing content and hero apps/web/src/app/page.tsx	Adds reusable section data and kicker headings, then updates the hero with new copy, dashboard navigation, and a GitHub link.
Feature, workflow, and CTA sections apps/web/src/app/page.tsx	Renders feature cards, workflow steps, and a closing dashboard CTA containing the shared disclaimer.
Footer links and branding apps/web/src/components/site-footer.tsx, apps/web/src/components/wolf-mark.tsx	Adds grouped internal/external footer links, short commit SHA display, Discord navigation, and composed WolfMark styling.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• MrDemonWolf/wolfathon#43: Updates the landing page and dashboard navigation around the control panel.

Poem

A bunny hops through cards of light,
With dashboard paths tucked snug and right.
The footer links now neatly roam,
While WolfMark finds an inline home.
GitHub gleams; the pages bloom!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: a web landing page and footer redesign.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/landing-page-redesign-60fe0e

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}