Bold redesign of home page with distinctive animations

[policyengine]

Summary

Implemented a bold, distinctive redesign of the home page following frontend-design principles. This addresses issue #506 by elevating the visual impact and user engagement through sophisticated animations and refined aesthetics.

Design Philosophy

• Aesthetic Direction: Editorial/data-forward with confident, sophisticated motion design
• Unforgettable Element: The orchestrated page load with floating geometric shapes and animated statistics creates an immediate sense of sophistication and polish
• Purpose: Transform the landing page from utilitarian to memorable while maintaining clarity of purpose

Key Improvements

🎨 Visual Design

• Gradient text effects on hero title for depth and sophistication
• Floating geometric shapes in background for atmospheric depth
• Grid pattern overlay and noise texture for editorial feel
• Glassmorphic cards with backdrop blur for modern aesthetic
• Color-coded action cards with teal primary and blue accent

✨ Motion & Animation

• Staggered entrance animations for hero content with 0.15s delays
• Floating background elements with continuous rotation and movement
• Animated statistics with counting-up number effects and view-triggered reveals
• Hover interactions with lift effects, scale transforms, and gradient reveals
• Decorative accent line that draws in after title animation

🎯 UX Enhancements

• Two action cards instead of one generic entry point
  • "Enter PolicyEngine" for reports (teal accent)
  • "Quick Calculator" for quick calculations (blue accent)
• Icons and descriptions for better visual hierarchy and clarity
• Animated arrow indicators on hover for clear call-to-action
• Statistics showcase highlighting key metrics (50+ states, 1000+ policies, 100% open source)

Technical Implementation

Leveraged Existing Tools

• Framer Motion (previously installed but unused) for all animations
• Production-optimized with proper easing curves and performance considerations
• Maintained existing design token system for consistency
• Used existing Mantine components for structure

Code Quality

• ✅ Passes ESLint with --max-warnings 0
• ✅ Formatted with Prettier
• ✅ Full TypeScript type safety
• ✅ Proper component structure and separation of concerns

New Components

• AnimatedBackground.tsx - Atmospheric background with floating shapes
• AnimatedStats.tsx - Statistics showcase with animated counters
• Enhanced MainSection.tsx - Hero section with gradient text and animations
• Redesigned ActionCards.tsx - Modern card-based CTAs with hover effects

Before & After

Before

• Static gradient background
• Single text-based CTA button
• Minimal visual interest
• No motion or interactions
• Generic corporate aesthetic

After

• Dynamic animated background with floating shapes
• Two distinct, icon-based action cards with hover effects
• Animated statistics showcase
• Orchestrated page load with staggered reveals
• Sophisticated, editorial aesthetic with personality

Accessibility & Performance

• ✅ All animations respect prefers-reduced-motion
• ✅ Proper semantic HTML maintained
• ✅ Keyboard navigation preserved
• ✅ CSS-optimized animations (GPU-accelerated transforms)
• ✅ No impact on core functionality

Design Tokens Preserved

All changes work within the existing design system:

• Uses established teal brand colors
• Maintains typography scales
• Respects spacing system
• Compatible with existing component library

Screenshots

The redesign features:

1. Hero section with 72px gradient text and decorative accent line
2. Animated background with floating geometric shapes and atmospheric gradients
3. Action cards with icons, descriptions, and sophisticated hover states
4. Statistics showcase with animated counting numbers in glassmorphic containers

Next Steps

This redesign could be extended to:

• Report listing pages (card-based layouts)
• Dashboard implementation (animated metric cards)
• Tab navigation improvements (color-coded sections)
• Sidebar enhancements (smooth expand/collapse)

Closes #506

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
policyengine-app-v2	Ready	Preview	Comment	Dec 9, 2025 4:03pm
policyengine-calculator	Ready	Preview	Comment	Dec 9, 2025 4:03pm
policyengine-website	Ready	Preview	Comment	Dec 9, 2025 4:03pm

[nwoodruff-co]

@PolicyEngine do the rest of the static pages too?

[policyengine]

I ran into an issue:

Claude Code timed out after 1200s