Valentine's Day Love Website ❤️

A romantic, immersive, and emotionally captivating Valentine's Day website built with React, TypeScript, Tailwind CSS, GSAP, and Framer Motion.

✨ Features

🎨 Design

• Dark Romantic Palette: Deep reds, pink glows, violet accents on a dark background
• Glassmorphism Effects: Modern frosted glass cards and overlays
• Premium Typography: Cormorant Garamond for headings, Lato for body text
• Responsive Design: Mobile-first approach with perfect scaling to all devices

🎬 Animations

• GSAP ScrollTrigger: Smooth scroll-based animations and parallax effects
• Framer Motion: React-native animations with gestures
• Floating Hearts: Ambient heart particles throughout the site
• Heartbeat Effects: Pulsing animations on key elements
• 3D Tilt Effects: Interactive card tilting on desktop
• Typewriter Effect: Line-by-line letter reveal
• Confetti & Fireworks: Celebration effects on the surprise page

📱 Mobile-First

• Touch-Friendly: Large buttons, swipe gestures, haptic feedback
• Hamburger Menu: Animated mobile navigation with heart icon
• Safe Area Support: iOS notch and gesture area compatibility
• Reduced Motion: Respects user accessibility preferences

🎯 Sections

1. Hero: Fullscreen landing with animated headline and 3D heart
2. Our Story: Scroll-based timeline of your love journey
3. Love Letter: Typewriter-style romantic letter
4. Memory Gallery: Masonry grid with modal image viewer
5. Final Surprise: Beating heart with confetti celebration

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone or download the project
cd app

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Deployment

The site is ready to deploy on Vercel, Netlify, or any static hosting:

# Build the project
npm run build

# Deploy the dist/ folder

🎨 Customization Guide

1. Personalize Names & Text

Edit these files to customize the content:

Hero Section (src/sections/Hero.tsx)

// Change the main headline
<h1>
  Happy Valentine's Day
  <span>My Love</span>  {/* Change to your partner's name */}
</h1>

// Update the subtitle
<p>
  Every moment with you is a treasure...
</p>

Our Story (src/sections/OurStory.tsx)

const storyEvents = [
  {
    date: 'June 15, 2023',  // Your actual dates
    title: 'The First Meeting',
    description: 'Your personal story here...',
  },
  // Add more events
];

Love Letter (src/sections/LoveLetter.tsx)

const letterContent = [
  "My Dearest [Partner's Name],",
  "",
  "Your personal message here...",
  // Add more lines
];

2. Add Your Photos

Memory Gallery (src/sections/MemoryGallery.tsx)

const galleryImages = [
  {
    id: 1,
    src: '/your-photo-1.jpg',  // Add your photos to public/ folder
    title: 'Your Title',
    description: 'Your description',
    date: 'Your Date',
  },
  // Add more images
];

3. Change Colors

Edit tailwind.config.js:

colors: {
  romantic: {
    red: '#d41c58',    // Your primary color
    pink: '#fd4ecd',   // Your secondary color
    purple: '#b52cff', // Your accent color
  },
}

4. Update Fonts

Edit src/index.css:

@import url('https://fonts.googleapis.com/css2?family=Your+Font&display=swap');

body {
  font-family: 'Your Font', sans-serif;
}

📁 Project Structure

app/
├── src/
│   ├── components/
│   │   ├── custom/
│   │   │   ├── FloatingHearts.tsx    # Floating heart particles
│   │   │   └── Navigation.tsx        # Mobile-first navbar
│   │   └── ui/                       # shadcn/ui components
│   ├── sections/
│   │   ├── Hero.tsx                  # Landing section
│   │   ├── OurStory.tsx              # Timeline section
│   │   ├── LoveLetter.tsx            # Typewriter letter
│   │   ├── MemoryGallery.tsx         # Photo gallery
│   │   ├── FinalSurprise.tsx         # Proposal section
│   │   └── Footer.tsx                # Footer
│   ├── hooks/
│   │   └── useGSAP.ts                # GSAP animation hooks
│   ├── types/
│   │   └── confetti.d.ts             # Type declarations
│   ├── App.tsx                       # Main app component
│   ├── App.css                       # App styles
│   ├── index.css                     # Global styles
│   └── main.tsx                      # Entry point
├── public/                           # Static assets
├── dist/                            # Build output
├── tailwind.config.js               # Tailwind configuration
├── vite.config.ts                   # Vite configuration
└── package.json                     # Dependencies

🎯 Performance Optimizations

• ✅ Lazy Loading: Images load as they enter viewport
• ✅ GPU Acceleration: All animations use transform3d
• ✅ Code Splitting: Components loaded on demand
• ✅ Reduced Motion: Respects prefers-reduced-motion
• ✅ Optimized Assets: Compressed images and fonts
• ✅ 60fps Animations: Smooth 60fps on all devices

♿ Accessibility

• Keyboard navigation support
• ARIA labels on interactive elements
• Focus indicators
• Reduced motion support
• High contrast mode support
• Screen reader friendly

🛠️ Tech Stack

• Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS 3.4
• Animations: GSAP + ScrollTrigger + Framer Motion
• Icons: Lucide React
• UI Components: shadcn/ui

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• iOS Safari 14+
• Chrome Android 90+

💝 Tips for the Perfect Gift

1. Add Personal Photos: Replace the placeholder images with your actual couple photos
2. Write From the Heart: Customize the love letter with your own words
3. Include Inside Jokes: Add personal touches that only you two understand
4. Set the Mood: Play romantic music while she views the site
5. Present it Right: Send the link with a sweet message or reveal it in person

📝 License

This project is created with love for your special someone. Feel free to customize and make it your own!

---

Made with ❤️ for the one who holds my heart.