feat: Implement Phase 1 enhancements - components and animations

Components:
- Extract ServiceItem component with hover effects
- Extract SupportItem component with hover animations
- Extract Card component with scroll animations
- Extract Section component for consistent layout

Enhancements:
- Add Intersection Observer for scroll-triggered animations
- Implement hover effects on cards, services, and support items
- Add PWA manifest (site.webmanifest)
- Create SVG OG image placeholder for social sharing
- Add comprehensive favicon meta tags (16x16, 32x32, apple-touch-icon)
- Respect prefers-reduced-motion for accessibility

Files modified:
- src/pages/index.astro - Refactored to use new components
- src/layouts/BaseLayout.astro - Enhanced favicon and meta tags

Files created:
- src/components/Card.astro
- src/components/Section.astro
- src/components/ServiceItem.astro
- src/components/SupportItem.astro
- public/og-image.svg
- public/site.webmanifest
- public/FAVICON_INSTRUCTIONS.md

Note: PNG favicon variants still need to be generated (see FAVICON_INSTRUCTIONS.md)

public/FAVICON_INSTRUCTIONS.md

@@ -0,0 +1,51 @@
+# Favicon Generation Instructions
+
+The following favicon files are referenced in the site but need to be generated:
+
+- `favicon-16x16.png` - 16x16px PNG favicon
+- `favicon-32x32.png` - 32x32px PNG favicon  
+- `apple-touch-icon.png` - 180x180px PNG for Apple devices
+- `og-image.png` - 1200x630px PNG for social media sharing (optional, currently using SVG)
+
+## How to Generate
+
+### Option 1: Use an Online Tool
+Visit https://realfavicongenerator.net/ and upload your source image (coffee emoji or custom design).
+
+### Option 2: Use ImageMagick (if available)
+If you have a source PNG image:
+
+```bash
+# 16x16
+convert source.png -resize 16x16 favicon-16x16.png
+
+# 32x32
+convert source.png -resize 32x32 favicon-32x32.png
+
+# Apple touch icon
+convert source.png -resize 180x180 apple-touch-icon.png
+
+# OG image
+convert source.png -resize 1200x630 og-image.png
+```
+
+### Option 3: Use the SVG favicon
+The current `favicon.svg` (coffee emoji) works in modern browsers. The PNG variants are fallbacks for older browsers and specific platforms.
+
+## Current Status
+
+- ✅ `favicon.svg` - Exists (coffee emoji)
+- ❌ `favicon-16x16.png` - Needs to be created
+- ❌ `favicon-32x32.png` - Needs to be created
+- ❌ `apple-touch-icon.png` - Needs to be created
+- ✅ `og-image.svg` - Created (SVG placeholder)
+- ⚠️  `og-image.png` - Optional (browsers support SVG, but PNG is more compatible)
+
+## Design Recommendations
+
+Use the cozy coffee theme colors:
+- Background: `#1a1410` (dark coffee)
+- Accent: `#e8bf8e` (light coffee/cream)
+- Text: `#f4e9d8` (cream)
+
+The favicon should be simple and recognizable at small sizes. The coffee emoji ☕ is perfect!