Now let me enhance the Journey section with animations and visual depth:
Now let me enhance the testimonials section:
Now let me enhance the join-movement (CTA) section:
Now let me check and enhance the header/navigation:
Now let me enhance the footer:
Now let me check the globals.css for any needed CSS enhancements:
The globals.css looks good. Let me add a custom height utility for the navbar since I used h-18:
I've completely redesigned the ChurchCompass homepage with significant UI improvements:
Hero Section:
- Full-width background image with a church + compass theme at golden hour
- Gradient overlays for text readability
- Staggered entrance animations for all elements
- Social proof stats cards (Churches Joined, Visitors Connected, Cities Reached) with glassmorphism
- Scroll indicator at the bottom
- Enhanced CTA buttons with hover scale effects and shadows
Navbar:
- Transparent on top, transitions to white with shadow on scroll
- Text color adapts (white to navy) based on scroll position
- Improved mobile menu with slide animation
- Better call-to-action buttons
Journey Section (How It Works):
- Scroll-triggered animations with staggered delays
- Cards lift on hover with gradient accent overlays
- Enhanced icon styling with gradient backgrounds
- Animated connector arrows between steps
Testimonials Section:
- Star ratings added to each testimonial
- Scroll-triggered entrance animations
- Cards with hover lift effects and shadow transitions
- Trust badges section at the bottom
Join Movement Section:
- Gradient icon backgrounds per card type
- Bottom CTA banner with gradient background
- Decorative dot pattern background
- Enhanced hover effects
Footer:
- Newsletter subscription section with email input
- Contact information with icons
- Organized into 4 columns
- Social links with hover scale effects