Add Animated Intro Landing Page

[Riya-Kharade]

💡 The Problem

Currently, EcoPulse directly loads the homepage without an engaging introduction.

While the platform includes immersive 3D visualizations, there is no cinematic entry experience that captures user attention immediately.

This reduces the emotional impact and premium feel of the platform.

---

🚀 Proposed Solution

Create a new animated intro landing page that appears before the main homepage.

Features:

• 🌍 Animated rotating 3D Earth (using Three.js)
• ✨ Subtle particle background animation
• 📝 Centered headline: "Explore Pollution in 3D"
• 🚀 "Enter" button that navigates to index.html
• Smooth fade-in and fade-out transitions

This intro page will:

• Enhance user engagement
• Provide a cinematic startup-like experience
• Improve first impression and visual storytelling

---

🎨 Visual Representation

The intro page should include:

• Dark background with glowing Earth in center
• Slow continuous Earth rotation
• Smooth text fade-in animation
• Button hover animation (eco-theme colors)
• Responsive layout for mobile and desktop

Inspiration:

• NASA Earth visualization pages
• Climate-tech startup landing animations

---

🛠️ Implementation Details

• New File: intro.html
• Libraries: Three.js (already used in project)
• Animation: Earth sphere with texture + auto rotation
• Navigation: "Enter" button redirects to index.html
• No backend required

Optional enhancements:

• Auto-redirect after 5 seconds
• Fade transition effect
• Background ambient sound toggle

---

🎯 Impact

This feature will:

• Create a premium web experience
• Improve visual storytelling
• Increase user retention
• Make EcoPulse stand out in hackathons and portfolio reviews
• Strengthen production-level presentation

It transforms EcoPulse from a simple web project into an immersive climate-tech platform.

Assign this issue to me under ECWOC'26