I have several dynamic background suggestions for your hero header that would enhance the premium feel while maintaining readability:

1. Animated Mesh Gradient - Smooth, flowing color transitions using your orange accent, sage green, and teal. Creates an organic, therapeutic feel without being distracting. Works great with dark themes.
2. Animated Floating Particles - Subtle geometric shapes (circles, dots) in your accent colors that gently float and fade. Creates movement without disruption. Commonly used in healthcare/wellness sites.
3. Animated SVG Background Pattern - Soft, flowing lines or abstract shapes (representing movement/play) that subtly animate on scroll. More sophisticated and custom.
4. Parallax Animated Blur Orbs - Soft, blurred gradient orbs in the background that slowly shift position. Very modern and creates depth.
5. Animated Gradient Shift - Subtle color cycling through your theme colors (orange → sage → teal → back) creating an organic breathing effect.

My recommendation: Animated Mesh Gradient - it's visually sophisticated, works well with your dark theme, uses your brand colors naturally, and maintains focus on the hero text and CTA buttons. It also aligns with the therapeutic, flowing nature of your services.

Which direction appeals to you, or would you like me to suggest a different approach? Once you decide, I can implement it with framer-motion for smooth animations.

I'll create an Animated Floating Particles background component for the hero section. This will feature subtle geometric shapes in your accent colors (orange, sage green, teal) that gently float and fade, creating movement without distraction.

Now I'll create the animated particles background component:

Now I'll update the Hero component to use the animated particles background:

I've created an AnimatedParticlesBg component that displays 12 floating geometric shapes in your brand colors (orange, teal, and sage green). The particles gently float across the hero background with fade-in/fade-out animations over 20-35 second cycles, creating organic movement without distracting from the content. Each particle has randomized size, duration, and color for natural variety. The particles are positioned absolutely with blur filters and low opacity, ensuring text readability while adding sophisticated visual interest to the hero section.

Good, framer-motion is in package.json. The issue is that dependencies are still installing. The system automatically installs after package.json changes, but it may take a moment. Let me wait for the installation to complete, and in the meantime, I'll verify the imports are correct by checking if there are any syntax issues.

Actually, I can create a workaround: I'll create CSS-based animation versions that don't require framer-motion while the installation completes. Let me create lightweight alternatives:

Now let me update the Hero to use CSS animations instead of framer-motion, keeping the fade-in effects but using CSS:

I've fixed the framer-motion dependency issue by converting both components to use CSS animations instead. The AnimatedParticlesBg now uses CSS keyframe animations with CSS variables for drift direction, and the Hero component uses Tailwind's built-in animate-in utility classes for fade and slide effects with staggered delays. The visual effect remains the same—floating particles in the background and fade-in animations on page load—but without the external dependency. The preview should now load without errors.