feat: visual revamp of marketing site (homepage, analyzer, wallet)

[jamespepper81]

Description

A visual revamp of the BitSleuth marketing site aimed at a stronger "wow factor" while keeping a trustworthy, professional feel appropriate for financial/crypto products. Alongside the redesign, this fixes several latent dark-mode, contrast, and CSP bugs uncovered during the audit.

Design foundation

• Display font: self-host Space Grotesk (variable) as --font-display, applied to all headings for a distinct voice alongside the existing Inter body font.
• Button component (src/components/ui/button.tsx): richer default/outline/ghost variants (shadow, hover glow, active press), a new xl size for hero CTAs, and a premium shine variant with a sweeping sheen used on top-of-funnel CTAs. Redundant per-callsite class strings removed.
• New utilities/keyframes (globals.css, tailwind.config.ts): dot/grid background patterns, .card-glow-border hover glow, ambient hero orbs, nav underline-slide, and shine/float/pulse-glow/gradient-x animations — all prefers-reduced-motion aware.
• Reveal component (src/components/ui/reveal.tsx): IntersectionObserver-driven scroll entrance animation with stagger delays; renders visible immediately when unsupported or under reduced motion.

Homepage: animated hero gradient + dot backdrop, glow-border product cards, a new trust strip (non-custodial / no registration / free during beta / open educational content), a closing gradient CTA banner, and an expanded 4-column footer.

Analyzer page: shine CTA + glow input in the hero, numbered How-It-Works steps with a connector line, a featured Free pricing plan, un-blurred "coming soon" cards with proper badges, and lucide check icons replacing ✅ emoji.

Wallet page: the hero text wall restructured into a lead line + checkmark bullets, with reveal animations and token cleanup across sections.

Bug fixes

• Testimonials rendered blinding white cards / low-contrast text in dark mode (hardcoded bg-white, text-gray-*, light-only avatar colors) — now fully theme-aware.
• Homepage product-card CTA used dark text on an orange background (text-foreground → text-primary-foreground).
• Educational section hardcoded orange-* utilities instead of brand tokens.
• CSP: the static style-src policy silently blocked every server-rendered inline style attribute (safe-area insets, next/image sizing, animation stagger delays) and Next.js-injected style tags. Extended the existing script-src 'unsafe-inline' trade-off to style-src; the site renders no user-supplied HTML.

Type of change

• Bug fix
• New feature
• Documentation update
• Refactoring / code cleanup
• Performance improvement
• Other (describe below)

Related issues

N/A

Testing

• npm run ci passes (lint, typecheck, 29 tests, production build).
• Ran the production build in a real Chromium (Playwright) and captured full-page screenshots of /, /analyzer, and /wallet in both light and dark, at 1440px desktop and 390px mobile widths — verified contrast, layout, header/footer, and that scroll-reveal animations settle correctly.
• Verified the CSP fix in-browser: server-rendered inline styles (including animation stagger delays) now apply, with no CSP violations in the console. No console errors beyond pre-existing Vercel analytics 404s that only occur in the local environment.

Screenshots (if applicable)

Screenshots (homepage light/dark, analyzer dark, wallet light, mobile dark) were shared during the working session. They can't be attached from the CLI here — see the verification method above for how each surface was checked.

Checklist

• npm run typecheck passes
• npm run lint passes
• npm run test passes
• npm run build succeeds
• Responsive design tested (mobile, tablet, desktop)
• Dark and light mode tested
• No console.log statements left in production code
• SEO metadata added for any new pages — N/A (no new pages/routes)
• Documentation updated if needed — N/A

🤖 Generated with Claude Code

https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys

---

Generated by Claude Code

[jamespepper81]

@claude can you code review the pr 683 and make any changes required