Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SuperNova | Expanding the boundaries of code</title> | |
| <meta name="description" content="SuperNova - A professional programming and software development group building the future of technology"> | |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#4f46e5', | |
| 600: '#4338ca', | |
| }, | |
| secondary: { | |
| 500: '#ec4899', | |
| 600: '#db2777', | |
| }, | |
| dark: { | |
| 900: '#0f172a', | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 6s infinite cubic-bezier(0.4, 0, 0.6, 1)', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-dark-900 text-gray-200 min-h-screen overflow-x-hidden"> | |
| <!-- Navbar Component --> | |
| <script src="components/navbar.js"></script> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <particles-bg></particles-bg> | |
| <script src="components/particles-bg.js"></script> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent to-dark-900 z-0"></div> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-500 via-secondary-500 to-purple-600 animate-text"> | |
| SuperNova | |
| </h1> | |
| <p class="text-2xl md:text-3xl mb-8 max-w-2xl mx-auto font-light tracking-wider">Expanding the boundaries of code</p> | |
| <div class="flex flex-col md:flex-row gap-6 justify-center items-center"> | |
| <glowing-button href="#services" text="Explore Services" size="xl" glow="true"></glowing-button> | |
| <glowing-button href="#contact" text="Contact Us" size="xl" variant="outline"></glowing-button> | |
| <script src="components/glowing-button.js"></script> | |
| </div> | |
| <div class="mt-16 grid grid-cols-3 gap-8 max-w-4xl mx-auto"> | |
| <div class="tech-badge"> | |
| <i data-feather="cpu" class="w-8 h-8"></i> | |
| <span>AI Solutions</span> | |
| </div> | |
| <div class="tech-badge"> | |
| <i data-feather="globe" class="w-8 h-8"></i> | |
| <span>Web 3.0</span> | |
| </div> | |
| <div class="tech-badge"> | |
| <i data-feather="lock" class="w-8 h-8"></i> | |
| <span>Blockchain</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center"> | |
| <a href="#about" class="animate-bounce hover:animate-pulse"> | |
| <div class="scroll-down"></div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Our Story</h2> | |
| <div class="relative"> | |
| <!-- Timeline component --> | |
| <script src="components/timeline.js"></script> | |
| <custom-timeline></custom-timeline> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-dark-800 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">What We Offer</h2> | |
| <p class="text-xl text-center mb-12 max-w-3xl mx-auto">Cutting-edge solutions to propel your business into the future</p> | |
| <!-- Services Grid --> | |
| <script src="components/services.js"></script> | |
| <custom-services></custom-services> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">Our Courses</h2> | |
| <p class="text-xl text-center mb-12 max-w-3xl mx-auto">Master the technologies shaping tomorrow</p> | |
| <!-- Courses Filter --> | |
| <script src="components/course-filter.js"></script> | |
| <course-filter></course-filter> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-dark-800 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">What Our Clients Say</h2> | |
| <!-- Testimonial Carousel --> | |
| <script src="components/testimonials.js"></script> | |
| <testimonial-carousel></testimonial-carousel> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">Join Us</h2> | |
| <p class="text-xl text-center mb-12 max-w-3xl mx-auto">Ready to start your next project? Get in touch today</p> | |
| <!-- Contact Form --> | |
| <script src="components/contact-form.js"></script> | |
| <contact-form></contact-form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <script src="components/footer.js"></script> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |