Let me analyze the screenshot and read the current landing page to update it to match this green premium design.

Now I have a complete understanding of the current landing page structure and the screenshot reference. The screenshot shows a premium green-themed design with:

• Soft mint green backgrounds with wave patterns
• Clean white cards with green accents
• A more premium, modern aesthetic
• Same section structure but refined styling

Let me update the landing page to match this premium green design:

Now let me update the globals.css to match the premium green design:

I've updated the landing page to match the premium green design from the screenshot. The changes include:

1. Color Scheme: Changed from emerald/teal tones to a cleaner premium green palette (#E8F5E9, #C8E6C9, #4CAF50, #388E3C) matching the screenshot exactly
2. Hero Section: Simplified the hero with a clean white card on a soft mint green background gradient
3. Urgency Banner: Changed from red to green gradient to match the premium green theme
4. Section Backgrounds: Alternating between soft mint green (#E8F5E9), white, and warm cream (#FFF8E1) for the steps section
5. Buttons: All CTAs now use consistent green-500/green-600 gradients
6. Gallery Tabs: Simplified to green-500 active state with white text
7. Pricing Cards: Clean white cards with green accents and borders
8. Overall Polish: Cleaner shadows, consistent border colors (green-100/green-200), and more premium feel throughout

The section structure remains completely unchanged as requested - same hero, gallery, testimonials, bonus, steps, plant showcase, extra bonus, pricing, guarantee, and expert sections in the same order.

Now I have the full context. I'll add scroll-based animations using Intersection Observer and CSS animations, plus hover effects for both mobile and desktop. I'll update the globals.css with new animations and then add the animation hooks to the landing page.

Now let me update the landing page to add the scroll animations using Intersection Observer and apply the hover effects:

Adicionei animacoes e efeitos ao scroll e hover em toda a pagina, tanto para mobile quanto para desktop. As principais mudancas incluem:

Animacoes ao Scroll (Intersection Observer):

• Fade In Up, Down, Left, Right para elementos entrarem na tela
• Scale In e Zoom In para cards e imagens
• Rotate In para a garantia
• Slide Up Bounce para botoes CTA
• Delays escalonados para criar efeito cascata

Efeitos de Hover (PC):

• hover-card: elevacao e sombra suave
• hover-zoom: zoom em imagens dentro de containers
• hover-glow: brilho verde nos botoes
• hover-shine: efeito de luz passando
• hover-tilt: inclinacao 3D nos depoimentos
• hover-wiggle: tremida nos icones
• hover-pulse-ring: anel pulsante nos numeros dos passos
• hover-float: flutuacao suave

Efeitos de Touch (Mobile):

• touch-feedback: escala ao pressionar
• ripple: efeito ondulacao ao tocar

Todas as animacoes respeitam prefers-reduced-motion para acessibilidade.