| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DevHub Academy - Code Crafters Paradise</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/course-card.js"></script> |
| <script src="components/testimonial.js"></script> |
| <script src="components/sparkles.js"></script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
| |
| <section class="relative bg-gradient-to-br from-purple-900 via-indigo-900 to-pink-900 text-white py-32 overflow-hidden"> |
| <div class="absolute inset-0 z-0"> |
| <div id="particles-js" class="absolute inset-0 opacity-30"></div> |
| </div> |
| <div class="container mx-auto px-6 text-center"> |
| <sparkles-effect> |
| <h1 class="text-6xl font-extrabold mb-6 floating">Transform Your Coding Journey</h1> |
| </sparkles-effect> |
| <p class="text-2xl mb-8 max-w-2xl mx-auto leading-relaxed text-white/90">Join <span class="text-purple-300">DevHub Academy</span> and unlock your potential in the world of code</p> |
| <div class="flex justify-center gap-4"> |
| <a href="https://devhubacademy.netlify.app/" target="_blank" class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300 transform hover:scale-105 active:scale-95">Live Demo</a> |
| <a href="#courses" class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition duration-300 transform hover:scale-105 active:scale-95">Explore Courses</a> |
| <a href="https://discord.gg/CJzDNf9D" target="_blank" class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition duration-300 flex items-center gap-2 transform hover:scale-105 active:scale-95"> |
| <i data-feather="message-circle"></i> Join Discord |
| </a> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-white"></div> |
| </section> |
| |
| <section class="py-28 glass-morph"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16">Why Choose DevHub Academy?</h2> |
| <div class="grid md:grid-cols-3 gap-10"> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="code" class="w-10 h-10 text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Hands-on Learning</h3> |
| <p class="text-gray-600">Learn by building real-world projects with expert guidance from industry professionals.</p> |
| </div> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="users" class="w-10 h-10 text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Community Support</h3> |
| <p class="text-gray-600">Join a vibrant community of learners and mentors to accelerate your growth.</p> |
| </div> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i data-feather="briefcase" class="w-10 h-10 text-blue-600"></i> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-24 bg-gradient-to-r from-purple-900 to-pink-800 text-white relative overflow-hidden"> |
| <div class="absolute top-0 left-0 w-full h-full overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black/20"></div> |
| <div class="particle" style="--tx: 100vw; --ty: -100vh; width: 3px; height: 3px; top: 20%; left: 10%; animation: particleMove 15s linear infinite;"></div> |
| <div class="particle" style="--tx: -100vw; --ty: 100vh; width: 4px; height: 4px; top: 60%; left: 70%; animation: particleMove 20s linear infinite;"></div> |
| </div> |
| <div class="container mx-auto px-6 text-center"> |
| <div class="max-w-2xl mx-auto"> |
| <h2 class="text-3xl font-bold mb-6">Join Our Coding Community</h2> |
| <p class="text-xl mb-8">Connect with fellow learners, get help from mentors, and participate in coding challenges on our Discord server!</p> |
| <a href="https://discord.gg/CJzDNf9D" target="_blank" class="bg-white text-indigo-800 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition duration-300 inline-flex items-center gap-2 transform hover:scale-105 active:scale-95"> |
| <i data-feather="message-circle"></i> Join Now |
| </a> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Career Services</h3> |
| <p class="text-gray-600">Get career coaching, resume reviews, and interview prep to land your dream job.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section id="courses" class="py-28 bg-gradient-to-b from-gray-900 to-indigo-900/30"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16">Our Popular Courses</h2> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <custom-course-card |
| title="Full Stack Development" |
| duration="12 weeks" |
| level="Intermediate" |
| image="http://static.photos/technology/640x360/1" |
| price="$999"> |
| Master both frontend and backend development with modern technologies like React, Node.js, and MongoDB. |
| </custom-course-card> |
| <custom-course-card |
| title="Data |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| if (document.getElementById('particles-js')) { |
| particlesJS('particles-js', { |
| "particles": { |
| "number": { |
| "value": 80, |
| "density": { |
| "enable": true, |
| "value_area": 800 |
| } |
| }, |
| "color": { |
| "value": ["#8b5cf6", "#ec4899", "#10b981"] |
| }, |
| "shape": { |
| "type": "circle", |
| "stroke": { |
| "width": 0, |
| "color": "#000000" |
| }, |
| "polygon": { |
| "nb_sides": 5 |
| } |
| }, |
| "opacity": { |
| "value": 0.5, |
| "random": true, |
| "anim": { |
| "enable": true, |
| "speed": 1, |
| "opacity_min": 0.1, |
| "sync": false |
| } |
| }, |
| "size": { |
| "value": 3, |
| "random": true, |
| "anim": { |
| "enable": true, |
| "speed": 2, |
| "size_min": 0.1, |
| "sync": false |
| } |
| }, |
| "line_linked": { |
| "enable": true, |
| "distance": 150, |
| "color": "#8b5cf6", |
| "opacity": 0.4, |
| "width": 1 |
| }, |
| "move": { |
| "enable": true, |
| "speed": 2, |
| "direction": "none", |
| "random": true, |
| "straight": false, |
| "out_mode": "out", |
| "bounce": false, |
| "attract": { |
| "enable": true, |
| "rotateX": 600, |
| "rotateY": 1200 |
| } |
| } |
| }, |
| "interactivity": { |
| "detect_on": "canvas", |
| "events": { |
| "onhover": { |
| "enable": true, |
| "mode": "repulse" |
| }, |
| "onclick": { |
| "enable": true, |
| "mode": "push" |
| }, |
| "resize": true |
| }, |
| "modes": { |
| "repulse": { |
| "distance": 100, |
| "duration": 0.4 |
| }, |
| "push": { |
| "particles_nb": 4 |
| } |
| } |
| }, |
| "retina_detect": true |
| }); |
| } |
| |
| |
| for (let i = 0; i < 15; i++) { |
| createParticle(); |
| } |
| |
| function createParticle() { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const size = Math.random() * 3 + 2; |
| const tx = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1000; |
| const ty = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1000; |
| const duration = Math.random() * 15 + 10; |
| const delay = Math.random() * 5; |
| const color = `rgba(${Math.floor(Math.random() * 50 + 200)}, |
| ${Math.floor(Math.random() * 100)}, |
| ${Math.floor(Math.random() * 150 + 100)}, |
| ${Math.random() * 0.3 + 0.2})`; |
| |
| Object.assign(particle.style, { |
| width: `${size}px`, |
| height: `${size}px`, |
| top: `${Math.random() * 100}%`, |
| left: `${Math.random() * 100}%`, |
| background: color, |
| animation: `particleMove ${duration}s linear ${delay}s infinite`, |
| '--tx': `${tx}px`, |
| '--ty': `${ty}px` |
| }); |
| |
| document.querySelector('body').appendChild(particle); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
