Add smooth open/close animation to InfoBox component

Implements a slide-down fade-in animation when the InfoBox expands, improving the user experience with smooth visual transitions.

Changes:
- Add animateDown keyframe animation to Tailwind config
- Apply animation to InfoBox content div when opened
- Animation includes opacity fade, vertical slide, and max-height transition
- Update InfoBox width to use responsive sizing (17rem on mobile, 28rem on larger screens)
- Change icon color to green for better visual consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

tailwind.config.ts

@@ -25,6 +25,18 @@ const config: Config = {
           transform: 'translateX(100%)',
         },
       },
+      animateDown: {
+        '0%': {
+          opacity: '0',
+          transform: 'translateY(-15px)',
+          maxHeight: '0px',
+        },
+        '100%': {
+          opacity: '1',
+          transform: 'translateY(0)',
+          maxHeight: '200px',
+        },
+      },
     },
   },
   plugins: [