Complete visual overhaul of the three core public pages, establishing a
consistent design system with reusable CSS classes and theme tokens.
Phase 1 — Home Page:
- Hero section with flame badge, bold headline, bouncing arrow CTA
- SVG map wrapped in warm-glow container with hover indicator
- State navigation cards with per-state colors and hover lift
- Value propositions grid (Compare, Find, Save, Free)
- Subtle dealer login CTA
Phase 2 — State Page:
- Themed breadcrumb with ChevronLeft back-nav
- Per-state accent colors on header
- County map in .map-container with hover indicator
- County navigation card grid with bidirectional map cross-highlighting
- Skeleton loading and DaisyUI error states
Phase 3 — County/Tables Page:
- Price-hero styling makes pricing the dominant visual element
- Sortable desktop table with chevron icons and active column highlight
- Completely redesigned mobile cards: company + price top row, cash
callout, icon-labeled details grid, tappable phone CTA
- Market prices section with info note
- Relative date formatting (Today, Yesterday, 3 days ago)
- Full skeleton loading states
Design System (shared across all pages):
- 19 reusable CSS classes in app.postcss (.accent-badge, .map-container,
.price-hero, .listing-card, .county-card, .skeleton-box, etc.)
- oil-orange and oil-blue color scales in Tailwind config
- fade-in-up, fade-in, float animations
- Staggered section reveals with Svelte transitions
- Zero hardcoded colors — all theme tokens and DaisyUI semantics
- Full dark mode support throughout
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
