Now I understand the current design. Let me ask you a few questions to help create the perfect hero image and improve the UI:

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