Landing Page - SkillUp Mentorship 🚀

A modern, responsive landing page for a digital design and development mentorship program featuring animated elements, interactive components, and a sleek dark theme.

✨ Features

🎨 Design & UI

• Modern Dark Theme with gradient accents
• Glassmorphism Effects with backdrop blur
• Floating Animated Shapes in hero section
• Responsive Grid Layouts for all screen sizes
• Smooth Animations and hover effects
• Interactive Elements with visual feedback

🔧 Functionality

• Smooth Scrolling Navigation between sections
• Real-time Countdown Timer for next batch
• Interactive FAQ Accordion with expand/collapse
• Testimonials Slider with touch/drag support
• Floating CTA Button that appears on scroll
• Sticky Header with blur effect
• Intersection Observer for scroll-triggered animations

📱 Responsive Features

• Mobile-first responsive design
• Touch-friendly interface
• Optimized for all devices
• Fast loading performance

🚀 Quick Start

1. Clone the repository

   git clone https://github.com/yourusername/skillup-mentorship.git
   cd skillup-mentorship

2. Open in browser

   # Simply open index.html in your preferred browser
   open index.html

3. Or use a local server

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using PHP
   php -S localhost:8000

📁 Project Structure

skillup-mentorship/
├── 📄 index.html          # Main HTML structure
├── 🎨 style.css           # Complete CSS styling
├── ⚡ script.js           # Interactive functionality
├── 📖 README.md          # Project documentation
└── 🖼️ assets/            # Images and media (if any)

🎯 Sections Overview

Section	Description	Features
Hero	Eye-catching landing area	Animated shapes, gradient text, CTA button
About	Mentor introduction	Statistics, professional image
Features	Course highlights	Animated icons, hover effects
Testimonials	Student success stories	Horizontal slider, testimonial cards
Countdown	Next batch timer	Real-time countdown, auto-updating
Pricing	Course pricing plans	Three-tier pricing, popular badge
FAQ	Common questions	Accordion interface, smooth transitions
Footer	Contact & social links	Social media integration

🛠️ Customization

Colors & Branding

:root {
  --primary: #2563eb;      /* Primary blue */
  --secondary: #ec4899;    /* Secondary pink */
  --dark: #111827;         /* Dark background */
  --light: #f3f4f6;        /* Light text */
  --gray: #4b5563;         /* Muted text */
}

Animation Timing

// Countdown timer (script.js line 130)
targetDate.setDate(targetDate.getDate() + 30); // Change days

// Floating shapes animation duration
shape.style.animationDuration = `${20 + Math.random() * 10}s`;

Content Updates

• Mentor Info: Update image, stats, and description in the About section
• Pricing Plans: Modify prices, features, and discount percentages
• Testimonials: Add/edit student testimonials and company names
• Social Links: Update footer social media links

🎨 Key CSS Features

Glassmorphism Effects

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Gradient Text

.gradient-text {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  color: transparent;
}

Smooth Animations

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(50px, 50px) rotate(90deg); }
  50% { transform: translate(0, 100px) rotate(180deg); }
  75% { transform: translate(-50px, 50px) rotate(270deg); }
}

⚡ Performance Optimizations

• Efficient CSS Animations using transform and opacity
• Intersection Observer for scroll-triggered animations
• Debounced Scroll Events for better performance
• Optimized Font Loading with Google Fonts
• Minimal External Dependencies

🌐 Browser Support

Browser	Support
Chrome	✅ Full
Firefox	✅ Full
Safari	✅ Full
Edge	✅ Full
IE 11	⚠️ Partial

🔧 Dependencies

External Resources

• Google Fonts - Poppins font family
• Animated Icons - AnimatedIcons.co for feature icons

No Build Process Required

This project uses vanilla HTML, CSS, and JavaScript with no build tools or package managers required.

📱 Mobile Responsiveness

The site is fully responsive with breakpoints for:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Key mobile optimizations:

• Simplified navigation
• Stacked layouts
• Touch-friendly buttons
• Optimized text sizes
• Reduced animations on mobile

🎯 Performance Metrics

• Page Load Time: < 2 seconds
• First Contentful Paint: < 1.5 seconds
• Lighthouse Score: 90+ (Performance, Accessibility, Best Practices)
• Mobile Friendly: ✅ Google Mobile-Friendly Test

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Tigmanshu Kumar

• GitHub: @Tigmanshukumar
• LinkedIn: Tigmanshu Kumar
• Instagram: @tigmanshu

🙏 Acknowledgments

• Design inspiration from modern web trends
• Icons from AnimatedIcons.co
• Font family from Google Fonts
• Community feedback and suggestions

📊 Project Stats

Lines of Code: ~1,200
CSS Properties: 300+
JavaScript Functions: 15+
Responsive Breakpoints: 3
Animation Keyframes: 5

---

⭐ Star this repo if you found it helpful!

Made with ❤️ by Tigmanshu Kumar