ReactProject

byPulicheri Srinandini

Project Title: LiGHT Website Clone – Multi-Page React Application (Task 3) 🧩 Objective: Build a fully responsive multi-page React application using Vite that replicates the official LiGHT website. Reference Website: 👉 https://www.light.gyws.org/members ⚙️ Tech Stack Requirements: React (Vite setup) React Router DOM (for navigation) useState, useEffect, useRef (where needed) CSS / Tailwind CSS (no Bootstrap allowed) Data-driven components using .map() 📄 Pages to Build (Minimum 5) 1. 🏠 Home (/) Hero section / slider Animated counters (centers, states, members) Featured sections / cards Call-to-action buttons 2. 👥 Members (/members) 👉 Data must be fetched from: https://www.light.gyws.org/members Hierarchical member card layout Image + name + designation Senior Executive Members section Dynamic rendering using .map() Responsive grid layout 3. 💡 Initiatives (/initiatives) Horizontal scroll carousels Featured initiatives section Card hover effects (scale + shadow) Clean UI similar to LiGHT website 4. 📞 Contact (/contact) Contact form (Name, Email, Message) Form validation (React state-based) Toast / success notification Loading state on submit button 5. 🙋 Join Us (/join) CTA-based layout Info cards (why join, benefits) Simple and clean UI 6. ℹ️ About (/about) Organization overview Timeline / story section Mission & vision blocks 🧱 Project Requirements Reusable components: Navbar (active route highlight using useLocation) Footer Card components Button components Routing using React Router DOM Fully responsive design (mobile-first) Clean folder structure: src/ ├── components/ ├── pages/ ├── data/ ├── assets/ 📊 Data Handling Rule (IMPORTANT) Store data in /data folder Fetch and map dynamically using .map() Example: members.map(member => <MemberCard ... />) ✨ Bonus Features (Optional but HIGH SCORE) Scroll animations (AOS / Framer Motion) Dark mode toggle (localStorage) Carousel swipe support (mobile) Page transitions Scroll-to-top button 🚀 Deployment Deploy using Vercel or GitHub Pages Push code to GitHub repository 📌 Final Note: Focus on: UI structure similar to LiGHT website Clean component-based architecture No Bootstrap allowed