Royal Edu Hub - Modern Educational Platform

A modern, interactive educational website built with React, featuring stunning intro animations, 3D elements, smooth transitions, and a beautiful dark theme designed for educational excellence.

🚀 Features

• Stunning Intro Animation: Custom DotLottie animation with smooth fade transitions (5.5s duration)
• Modern Design: Dark theme with orange accent colors and professional gradients
• Responsive Layout: Optimized for all devices from mobile to desktop
• Smooth Animations: Framer Motion powered animations throughout the site
• Interactive Elements: Hover effects, micro-interactions, and engaging UI components
• 3D Integration: Ready for Spline 3D scenes and interactive elements
• Advanced Forms: Functional contact and career forms with Google Apps Script integration
• SEO Optimized: Meta tags, proper structure, and performance optimized
• Session Management: Smart intro animation that shows only once per session

🛠️ Tech Stack

• Frontend: React 18 with modern hooks and lazy loading
• Styling: Tailwind CSS with custom configurations
• Animations:
  • Framer Motion for page transitions and interactions
  • DotLottie for intro animations
  • Custom CSS transitions
• Icons: Lucide React for consistent iconography
• 3D: Three.js & Spline (ready for integration)
• Forms:
  • React Hook Form for validation
  • Google Apps Script for backend processing
• Notifications: React Hot Toast for user feedback
• Routing: React Router with future flags enabled
• Build Tools: Create React App with Craco for customization

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd EDU_HUB_

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3001 (or the port shown in terminal)

   Note: The intro animation will play once per session. To see it again, clear your browser's session storage or open an incognito window.

🎨 Customization

Colors

The color scheme is defined in tailwind.config.js:

• Primary: Orange (#FF4500)
• Dark theme: Various shades of dark grays
• Gradients: Custom gradient combinations

Components

All components are located in src/components/:

• layout/: Header and Footer
• sections/: Main page sections (Hero, About, Courses, etc.)
• 3d/: 3D components (Spline integration ready)

📱 Sections

1. Hero: Main landing section with call-to-action
2. About: Company information and features
3. Stats: Animated statistics and achievements
4. Courses: Educational offerings
5. Services: Available services
6. Testimonials: Student reviews
7. Contact: Contact form and information

🔧 Available Scripts

• npm start: Runs the app in development mode
• npm run build: Builds the app for production
• npm test: Launches the test runner
• npm run eject: Ejects from Create React App

🌐 Deployment

The app is ready for deployment on platforms like:

• Vercel
• Netlify
• GitHub Pages
• AWS S3

📄 License

This project is created for Royal Edu Hub educational platform.

🤝 Contributing

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

📞 Support

For support, email: info@royaleduhub.com

---

Royal Edu Hub - Your Gateway to Global Success 🎓