feat(ui): redesign Wolfstar homepage with bento grid layout

[RedStar071]

🔗 Linked issue

#XXXX

🧭 Context

The Wolfstar marketing homepage needed a full visual refresh to match design option 1c — a bold bento grid layout with spectrum accent colors, updated header/footer chrome, and section-based composition instead of the previous carousel-driven feature showcase.

High-level summary: Redesigned /wolfstar with modular section components (hero, features, dashboard preview, stats, testimonials, CTA), new shared layout primitives (Section, SurfaceCard), spectrum design tokens, and updated Header/Footer composables.

📚 Description

This PR completes the Wolfstar homepage redesign across three commits:

• refactor: redesigned the Wolfstar homepage — Introduces the new section-based page structure and component architecture.
• fix(home): align the redesigned home page with design 1c — Finishes the half-done redesign to match design 1c: fixes HomeAccent typing, deduplicates constants, adds spectrum CSS tokens/utilities, expands dashboard mockup to 6 members, and replaces the removed feature carousel with a static ShowcaseSection (mod-log "In Action" showcase).
• feat(home): enhance home page with new components and styles — Polishes components and styles for the final layout.

Notable changes:

• New @components/ under app/pages/(marketing)/wolfstar/ — HeroSection, FeaturesSection, FeatureShowcase, DashboardSection, StatsSection, TestimonialsSection, ShowcaseSection, CtaSection, etc.
• Shared primitives: Section.vue, SurfaceCard.vue, discord/slash-command.vue
• Spectrum palette as :root tokens + bg-spectrum-* utilities in main.css / utilities.css
• Updated useHeader / useFooter composables and tests
• Removed FeatureCarousel.client.vue, FeatureShowcase.client.vue, and app/themes/header.ts
• Dependency updates in pnpm-lock.yaml

Testing:

• Updated useHeader and useFooter Nuxt composable specs
• Manual verification of homepage sections, accents, and responsive layout recommended

Notes for reviewers:

• Large pnpm-lock.yaml diff — verify intentional dependency changes alongside package.json
• Untracked .skills/ directory in working tree is not included in this PR

---

^{Need help on this PR? Tag /codesmith with what you need. Autofix is enabled.}

Confidence Score: 4/5

Mostly safe to merge after fixing the mobile navigation regression.

The redesign is primarily UI-focused, but the changed header model leaves mobile feature menu items without destinations.

app/composables/useHeader.ts

T-Rex Logs

What T-Rex did

• I inspected the targeted header composable and noted the mobile Features items lack to targets while desktop items include anchors, and I attempted the narrow Nuxt build path but the build blocker persisted due to stale dependencies, even after trying a frozen-lockfile install.
• I created a Playwright repro harness to start Nuxt dev and exercise the mobile Features submenu, with the aim to capture screenshots and log href/click results, but the harness run timed out before producing usable artifacts.
• I captured a desktop screenshot of /wolfstar as rendered by Nuxt and reviewed dev-server logs showing the server built and HTML validated, with Prisma client generation performed to unblock startup.
• I reviewed the Playwright run and mobile capture artifacts and noted a blocker/timeout path rather than usable mobile interaction data.

_{Ran code and verified through T-Rex}

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
app/composables/useHeader.ts:62-72
**Restore mobile feature links**
The mobile `Features` submenu items no longer have `to` targets, while the matching desktop items still point to `#moderation-tools`, `#advanced-logging`, and `#moderation-logs`. On small screens these entries render as non-navigating labels, so users cannot jump to the redesigned feature sections from the header. Add the same anchors used by `desktopLinks` to each mobile child.

_{Reviews (24): Last reviewed commit: "feat(discord): enhance StringSelectMenu ..." | Re-trigger Greptile}

Context used:

• Context used - CLAUDE.md (source)

[codecov]

Codecov Report

❌ Patch coverage is 77.04918% with 126 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.99%. Comparing base (5c8cd13) to head (ddf9b7b).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...eting)/wolfstar/@components/ModerationShowcase.vue	68.70%	15 Missing and 26 partials ⚠️
app/components/discord/v2/string-select-menu.vue	79.16%	3 Missing and 12 partials ⚠️
app/components/discord/scrollbar.vue	63.88%	10 Missing and 3 partials ⚠️
app/components/OtherApps.vue	50.00%	4 Missing and 3 partials ⚠️
shared/utils/format-slash-command-display-name.ts	68.18%	1 Missing and 6 partials ⚠️
shared/utils/slash-command.ts	33.33%	0 Missing and 6 partials ⚠️
...pp/components/discord/slash-command-suggestion.vue	66.66%	1 Missing and 4 partials ⚠️
...p/components/discord/slash-command-suggestions.vue	69.23%	3 Missing and 1 partial ⚠️
app/components/discord/message-reply.vue	81.25%	2 Missing and 1 partial ⚠️
...nents/discord/slash-command-suggestion-matched.vue	72.72%	1 Missing and 2 partials ⚠️
... and 10 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #288      +/-   ##
==========================================
+ Coverage   69.68%   70.99%   +1.30%     
==========================================
  Files         136      170      +34     
  Lines        3002     3496     +494     
  Branches      648      751     +103     
==========================================
+ Hits         2092     2482     +390     
- Misses        456      484      +28     
- Partials      454      530      +76     

Flag	Coverage Δ
component	64.07% <77.40%> (+3.77%)	⬆️
unit	69.18% <51.61%> (-0.37%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
app/components/Section.vue	100.00% <100.00%> (ø)
app/components/SurfaceCard.vue	100.00% <100.00%> (ø)
app/components/app/Footer.vue	100.00% <100.00%> (ø)
app/components/app/Header.vue	90.90% <100.00%> (+0.90%)	⬆️
app/components/discord/avatar.vue	100.00% <ø> (ø)
app/components/discord/embed.vue	100.00% <ø> (ø)
app/components/discord/invite.vue	75.00% <100.00%> (ø)
app/components/discord/mention.vue	100.00% <ø> (ø)
app/components/discord/message.vue	100.00% <100.00%> (ø)
app/components/discord/messages.vue	100.00% <ø> (ø)
... and 41 more

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codspeed-hq]

Merging this PR will not alter performance

✅ 44 untouched benchmarks

---

_{Comparing refactor/create-new-home-page (ddf9b7b) with main (ba9079f)}