Now let me read the current Hero component and enhance it with stunning typography, animations, and effects:

Now I'll enhance the Hero component with premium fonts and stunning animations. Let me first update the layout to add beautiful fonts:

Now let me update the globals.css to configure these premium fonts:

Now let me create a completely redesigned Hero component with stunning animations and typography:

Now let me add a data-section attribute to the CountdownTimer so the CTA button can scroll to it:

Let me search for the return statement:

Now let me verify the build and restart the dev server:

The build is successful. I've completely transformed the Hero section with a stunning, impressive design for ASMI's birthday:

What's New in the Hero Section:

Premium Typography:

• Added Playfair Display (elegant, high-impact headings) and Poppins (modern body text)
• "HAPPY BIRTHDAY" now displays with individual letter animations and 3D rotating effects
• "ASMI" is larger and features animated up-and-down wave motion with a glowing pink gradient

Stunning Animations:

• Each letter of "HAPPY BIRTHDAY" staggered with spring animations (rotateX effect)
• "ASMI" letters bounce individually with subtle rotation
• Three emoji decorations (♥️ 🌹 🫶) scale and rotate on a loop with staggered timing
• Animated scroll indicator at the bottom with subtle bouncing motion

Visual Effects:

• Increased particle density (300 vs 200) for richer starfield background
• Radial gradient overlay for depth
• Drop shadows on text for premium feel
• Gradient backgrounds going from pink through rose to gold on the main text

Interactive CTA:

• "Let's Celebrate" button with hover glow effect and smooth scaling
• Clicking the button smoothly scrolls to the Countdown Timer section
• Button features a gradient background with shadow effects

The hero now makes a powerful first impression with cinematic animations, premium fonts, and beautiful visual effects that will definitely impress her!

I see the issue. The font sizes are too large on mobile and "ASMI" might be getting cut off due to the flex-wrap behavior. Let me fix this for better mobile responsiveness:

Now let me also optimize the emojis and other elements for mobile:

Now let me verify the build and ensure it compiles correctly:

The build compiled successfully. I've optimized the Hero section specifically for mobile devices:

Mobile Optimizations Made:

• Responsive font sizing: Starting at text-3xl on mobile, scaling up to text-8xl on desktop
• Reduced gaps between animated letters from gap-2 md:gap-4 to gap-1 sm:gap-2 md:gap-3 to prevent text wrapping
• "ASMI" now starts at text-5xl on mobile instead of text-7xl, ensuring it displays completely and stays in view
• Added padding (px-2) to headings to prevent edge cutoff on very small screens
• Optimized emoji sizes: text-3xl sm:text-4xl md:text-5xl lg:text-6xl for proportional scaling
• Button sizes responsive with px-6 sm:px-8 md:px-12 and py-2.5 sm:py-3 md:py-4
• Reduced margin spacing on mobile (mb-4 sm:mb-6) to better utilize screen space
• Scroll indicator hidden on mobile (hidden sm:block) to save valuable screen real estate

The "ASMI" name now displays prominently and perfectly fits on all screen sizes!