Share the Smile - Diwali Donation Website

A beautiful React-based Diwali donation website with elegant curved borders and festive animations.

Features

Beautiful Curved Borders

• Traditional Indian decorative patterns
• S-shaped curves and intricate swirls
• Animated glow effects
• Responsive design for all devices

Enhanced Preloader

• Green diya with longer, curvy flame
• Multi-layered flame animation
• Smooth fade transitions

Fireworks & Particles

• Particles.js integration throughout the site
• Interactive fireworks effects
• Smooth animations with Framer Motion

Responsive Design

• Mobile-first approach
• Adaptive border sizes
• Touch-friendly interactions

Installation

1. Install Dependencies:

npm install

2. Start Development Server:

npm start

3. Build for Production:

npm run build

Project Structure

src/
├── components/
│   ├── DecorativeBorder.js    # Beautiful curved borders
│   ├── Preloader.js          # Enhanced green diya preloader
│   ├── Hero.js               # Hero section with video
│   ├── WhyCause.js           # Mission section
│   ├── Kits.js               # Kit selection
│   ├── Impact.js             # Impact statistics
│   ├── HowItWorks.js         # Process flow
│   ├── Volunteer.js          # Volunteer section
│   ├── DonorWall.js          # Recent donors
│   ├── Gallery.js            # Photo gallery
│   └── Footer.js             # Contact & social links
├── App.js                    # Main app component
├── App.css                   # Global styles
└── index.js                  # React entry point

Key Features

Decorative Borders

• Traditional Patterns: S-curves, swirls, and leaf shapes
• Animated Elements: Glowing effects and moving dots
• Responsive: Adapts to different screen sizes
• Performance: Optimized CSS animations

Enhanced Preloader

• Green Diya: Beautiful gradient from forest green to light green
• Curvy Flame: Longer, more realistic flame with multiple layers
• Smooth Animations: Flickering and curving effects

Video Integration

• Custom Video: Your 0929.mov file with sound
• Fallback System: Beautiful gradient background if video fails
• Interactive: Click to play functionality

Technologies Used

• React 18 - Modern React with hooks
• Framer Motion - Smooth animations
• Particles.js - Fireworks effects
• CSS3 - Advanced styling and animations
• Font Awesome - Icons

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Customization

Colors

The website uses a festive color palette:

• Gold: #FFD700
• Orange: #FF8C00
• Maroon: #800000
• Green: #228B22 (for diya)

Borders

The decorative borders can be customized in DecorativeBorder.css:

• Pattern complexity
• Animation speed
• Color schemes
• Responsive breakpoints

Performance

• Optimized Animations: CSS transforms and GPU acceleration
• Lazy Loading: Components load as needed
• Responsive Images: Optimized for different screen sizes
• Smooth Scrolling: Hardware-accelerated animations

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

---

Built with love for Diwali celebrations and spreading joy!