Full HTML Version

What's Included:
Title*: Required input

Description: Optional textarea

Fully responsive and dark mode ready

Simple validation (required on title)

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Code Master(Mfuranziza Dusabe Hamza)

563

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acode master</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .innovation-gradient {
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
            background-size: 400% 400%;
            animation: gradientShift 8s ease-in-out infinite;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .slide-in {
            animation: slideIn 0.8s ease-out;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .tech-grid {
            background-image: 
                linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        .glass-effect {
            backdrop-filter: blur(16px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .hover-scale {
            transition: transform 0.3s ease;
        }
        
        .hover-scale:hover {
            transform: scale(1.05);
        }
        
        .pulse-ring {
            animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
        }
        
        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 1; }
            80%, 100% { transform: scale(1.8); opacity: 0; }
        }
    </style>
</head>
<body class="bg-gray-900 text-white overflow-x-hidden">

<nav class="fixed top-0 w-full z-50 glass-effect">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 innovation-gradient rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">A</span>
                    </div>
                    <span class="text-xl font-bold">Acode master</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#home" class="hover:text-teal-400 transition-colors">Home</a>
                    <a href="#about" class="hover:text-teal-400 transition-colors">About</a>
                    <a href="#innovations" class="hover:text-teal-400 transition-colors">Innovations</a>
                    <a href="#components" class="hover:text-teal-400 transition-colors">Components</a>
                    <a href="#contact" class="hover:text-teal-400 transition-colors">Contact</a>
                </div>
                <button id="darkModeToggle" class="p-2 rounded-lg hover:bg-gray-700 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

<section id="home" class="min-h-screen flex items-center relative overflow-hidden tech-grid">
        <div class="absolute inset-0 innovation-gradient opacity-20"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="slide-in">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-purple-500 bg-clip-text text-transparent">
                        Innovating the Future
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 text-gray-300">
                        Where cutting-edge technology meets revolutionary ideas. Transform your vision into reality with our innovative solutions.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="bg-teal-600 hover:bg-teal-700 px-8 py-4 rounded-lg font-semibold text-lg hover-scale">
                            Explore Innovations
                        </button>
                        <button class="border border-teal-400 text-teal-400 hover:bg-teal-400 hover:text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover-scale">
                            Watch Demo
                        </button>
                    </div>
                </div>
                <div class="floating-animation">
                    <div class="relative">
                        <div class="w-80 h-80 mx-auto relative">
                            <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-purple-500 rounded-full pulse-ring"></div>
                            <div class="w-full h-full bg-gradient-to-r from-teal-400 to-purple-500 rounded-full flex items-center justify-center">
                                <svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">About Innovation</h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    We're pioneering the next generation of technological breakthroughs, focusing on AI, quantum computing, and sustainable tech solutions.
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="glass-effect p-8 rounded-2xl hover-scale">
                    <div class="w-16 h-16 bg-teal-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A8.04 8.04 0 0012 18.5z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">AI Innovation</h3>
                    <p class="text-gray-300 text-center">Advancing artificial intelligence to solve complex real-world problems and enhance human capabilities.</p>
                </div>
                
                <div class="glass-effect p-8 rounded-2xl hover-scale">
                    <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">Quantum Computing</h3>
                    <p class="text-gray-300 text-center">Exploring quantum mechanics to revolutionize computing power and solve impossible calculations.</p>
                </div>
                
                <div class="glass-effect p-8 rounded-2xl hover-scale">
                    <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">Sustainable Tech</h3>
                    <p class="text-gray-300 text-center">Creating environmentally conscious solutions that protect our planet for future generations.</p>
                </div>
            </div>
        </div>
    </section>

<section id="innovations" class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Latest Innovations</h2>
                <p class="text-xl text-gray-300">Discover our groundbreaking projects that are shaping tomorrow</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-800 rounded-2xl overflow-hidden hover-scale">
                    <div class="h-48 bg-gradient-to-r from-teal-400 to-blue-500 relative">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Neural Network Processor</h3>
                        <p class="text-gray-300 mb-4">Revolutionary chip architecture that mimics human brain processing for ultra-efficient AI computations.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-teal-400 font-semibold">Status: Beta</span>
                            <button class="text-teal-400 hover:text-teal-300">Learn More →</button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gray-800 rounded-2xl overflow-hidden hover-scale">
                    <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 relative">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Quantum Encryption</h3>
                        <p class="text-gray-300 mb-4">Unbreakable security protocols using quantum entanglement for next-generation data protection.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-purple-400 font-semibold">Status: Research</span>
                            <button class="text-purple-400 hover:text-purple-300">Learn More →</button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gray-800 rounded-2xl overflow-hidden hover-scale">
                    <div class="h-48 bg-gradient-to-r from-green-400 to-emerald-500 relative">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c0 5-4 9-9 9s-9-4-9-9m9 9c0-5 4-9 9-9s9 4 9 9"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Carbon Capture AI</h3>
                        <p class="text-gray-300 mb-4">Smart atmospheric processors that actively remove CO2 while generating clean energy.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-green-400 font-semibold">Status: Production</span>
                            <button class="text-green-400 hover:text-green-300">Learn More →</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="components" class="py-20 bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Innovation Components</h2>
                <p class="text-xl text-gray-300">Save and manage your innovative component ideas</p>
            </div>
            
            
            <div class="flex justify-center items-center p-5">
                <div class="border shadow-teal-300 shadow-lg max-w-2xl w-full p-8 rounded-2xl bg-gray-700 glass-effect">
                    <h3 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-teal-400 to-purple-500 bg-clip-text text-transparent">Save Innovation Component</h3>
                    <form id="innovationForm" class="space-y-6">
                        
                        
                        <div>
                            <label for="title" class="block text-lg font-medium mb-2 text-gray-200">
                                Component Title<span class="text-red-400">*</span>
                            </label>
                            <input
                                type="text"
                                id="title"
                                name="title"
                                required
                                placeholder="Enter your innovative component title"
                                class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                            />
                        </div>

<div>
                            <label for="category" class="block text-lg font-medium mb-2 text-gray-200">
                                Innovation Category
                            </label>
                            <select
                                id="category"
                                name="category"
                                class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                            >
                                <option value="">Select a category</option>
                                <option value="ai">Artificial Intelligence</option>
                                <option value="quantum">Quantum Computing</option>
                                <option value="biotech">Biotechnology</option>
                                <option value="sustainability">Sustainability</option>
                                <option value="robotics">Robotics</option>
                                <option value="blockchain">Blockchain</option>
                            </select>
                        </div>

<div>
                            <label for="description" class="block text-lg font-medium mb-2 text-gray-200">
                                Description & Vision
                            </label>
                            <textarea
                                id="description"
                                name="description"
                                rows="5"
                                placeholder="Describe your innovation component, its potential impact, and your vision for implementation..."
                                class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                            ></textarea>
                        </div>

<div>
                            <label class="block text-lg font-medium mb-2 text-gray-200">Innovation Level</label>
                            <div class="flex gap-4">
                                <label class="flex items-center">
                                    <input type="radio" name="level" value="concept" class="mr-2 text-teal-500">
                                    <span>Concept</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="level" value="prototype" class="mr-2 text-teal-500">
                                    <span>Prototype</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="level" value="production" class="mr-2 text-teal-500">
                                    <span>Production Ready</span>
                                </label>
                            </div>
                        </div>

<div class="flex gap-4 pt-4">
                            <button
                                type="submit"
                                class="flex-1 bg-gradient-to-r from-teal-600 to-purple-600 hover:from-teal-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover-scale transition-all"
                            >
                                Save Innovation
                            </button>
                            <button
                                type="button"
                                id="clearForm"
                                class="px-6 py-3 border border-gray-600 text-gray-300 hover:bg-gray-600 rounded-lg font-semibold hover-scale transition-all"
                            >
                                Clear
                            </button>
                        </div>
                    </form>
                </div>
            </div>

<div class="mt-12">
                <h3 class="text-2xl font-bold mb-6 text-center">Saved Innovation Components</h3>
                <div id="savedComponents" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold mb-6">Join the Innovation</h2>
                <p class="text-xl text-gray-300">Ready to be part of the technological revolution?</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h3 class="text-3xl font-bold mb-6">Get In Touch</h3>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center mr-4">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold">Email</p>
                                <p class="text-gray-300">mfuranzizahamza@gmail.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mr-4">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold">Phone</p>
                                <p class="text-gray-300">+250 796132866</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mr-4">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold">Location</p>
                                <p class="text-gray-300">RUBAVU ,RWANDA</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="glass-effect p-8 rounded-2xl">
                    <form class="space-y-6">
                        <div>
                            <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
                        </div>
                        <div>
                            <input type="email" placeholder="Your Email" class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
                        </div>
                        <div>
                            <textarea rows="4" placeholder="Your Message" class="w-full px-4 py-3 rounded-lg border border-gray-600 bg-gray-800 text-white resize-none focus:outline-none focus:ring-2 focus:ring-teal-500"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-gradient-to-r from-teal-600 to-purple-600 hover:from-teal-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover-scale">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-gray-800 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="flex items-center justify-center space-x-2 mb-4">
                    <div class="w-10 h-10 innovation-gradient rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">I</span>
                    </div>
                    <span class="text-2xl font-bold">InnovateTech</span>
                </div>
                <p class="text-gray-400 mb-6">Shaping tomorrow through innovation today</p>
                <div class="flex justify-center space-x-6 mb-6">
                    <a href="https://x.com/Mfuranziza100" class="text-gray-400 hover:text-teal-400">Twitter</a>
                    <a href="https://www.linkedin.com/in/mfuranziza-hamza-898970354/" class="text-gray-400 hover:text-teal-400">LinkedIn</a>
                    <a href="https://github.com/MFURANZIZA100" class="text-gray-400 hover:text-teal-400">GitHub</a>
                    <a href="https://medium.com/@mfuranzizahamza" class="text-gray-400 hover:text-teal-400">Medium</a>
                </div>
                <p class="text-gray-500">&copy; 2025 InnovateTech. All rights reserved.</p>
            </div>
        </div>
    </footer>

// Dark mode toggle
        document.getElementById('darkModeToggle').addEventListener('click', function() {
            document.body.classList.toggle('light-mode');
        });

// Smooth scrolling for navigation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Innovation form handling
        document.getElementById('innovationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const component = {
                id: Date.now(),
                title: formData.get('title'),
                category: formData.get('category'),
                description: formData.get('description'),
                level: formData.get('level'),
                timestamp: new Date().toLocaleDateString()
            };

// Add to saved components
            savedComponents.push(component);
            
            // Display success animation
            showSuccessAnimation();
            
            // Update display
            displaySavedComponents();
            
            // Clear form
            this.reset();
        });

// Clear form button
        document.getElementById('clearForm').addEventListener('click', function() {
            document.getElementById('innovationForm').reset();
        });

// Success animation
        function showSuccessAnimation() {
            const button = document.querySelector('button[type="submit"]');
            const originalText = button.innerHTML;
            
            button.innerHTML = `
                <svg class="w-5 h-5 inline mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                Saving...
            `;
            
            setTimeout(() => {
                button.innerHTML = `
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Saved Successfully!
                `;
                button.classList.add('bg-green-600');
                
                setTimeout(() => {
                    button.innerHTML = originalText;
                    button.classList.remove('bg-green-600');
                }, 1500);
            }, 1000);
        }

// Display saved components
        function displaySavedComponents() {
            const container = document.getElementById('savedComponents');
            
            if (savedComponents.length === 0) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <div class="w-24 h-24 mx-auto mb-4 opacity-50">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <p class="text-gray-400 text-lg">No innovation components saved yet.</p>
                        <p class="text-gray-500">Fill out the form above to save your first innovation!</p>
                    </div>
                `;
                return;
            }

container.innerHTML = savedComponents.map(component => `
                <div class="bg-gray-800 rounded-xl p-6 hover-scale slide-in border border-gray-700 hover:border-teal-500 transition-all duration-300">
                    <div class="flex justify-between items-start mb-4">
                        <h4 class="text-xl font-bold text-teal-400">${component.title}</h4>
                        <button onclick="deleteComponent(${component.id})" class="text-red-400 hover:text-red-300 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                        </button>
                    </div>
                    
                    ${component.category ? `
                        <div class="inline-block px-3 py-1 bg-gradient-to-r from-teal-600 to-purple-600 text-white text-sm rounded-full mb-3">
                            ${component.category.charAt(0).toUpperCase() + component.category.slice(1)}
                        </div>
                    ` : ''}
                    
                    ${component.description ? `
                        <p class="text-gray-300 mb-4 leading-relaxed">${component.description}</p>
                    ` : ''}
                    
                    <div class="flex justify-between items-center pt-4 border-t border-gray-700">
                        ${component.level ? `
                            <span class="text-sm font-medium px-2 py-1 rounded ${getLevelColor(component.level)}">
                                ${component.level.charAt(0).toUpperCase() + component.level.slice(1)}
                            </span>
                        ` : '<span></span>'}
                        <span class="text-gray-500 text-sm">${component.timestamp}</span>
                    </div>
                </div>
            `).join('');
        }

// Get color for innovation level
        function getLevelColor(level) {
            switch(level) {
                case 'concept': return 'bg-yellow-600 text-yellow-100';
                case 'prototype': return 'bg-blue-600 text-blue-100';
                case 'production': return 'bg-green-600 text-green-100';
                default: return 'bg-gray-600 text-gray-100';
            }
        }

// Delete component
        function deleteComponent(id) {
            if (confirm('Are you sure you want to delete this innovation component?')) {
                savedComponents = savedComponents.filter(comp => comp.id !== id);
                displaySavedComponents();
                
                // Show delete animation
                const deletedElement = event.target.closest('.bg-gray-800');
                if (deletedElement) {
                    deletedElement.style.transform = 'scale(0.8)';
                    deletedElement.style.opacity = '0';
                    setTimeout(() => displaySavedComponents(), 300);
                }
            }
        }

// Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe all sections for animations
        document.addEventListener('DOMContentLoaded', function() {
            // Observe sections
            document.querySelectorAll('section').forEach(section => {
                observer.observe(section);
            });

// Add scroll effect to navigation
            let lastScrollTop = 0;
            const nav = document.querySelector('nav');
            
            window.addEventListener('scroll', function() {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                if (scrollTop > lastScrollTop && scrollTop > 100) {
                    // Scrolling down
                    nav.style.transform = 'translateY(-100%)';
                } else {
                    // Scrolling up
                    nav.style.transform = 'translateY(0)';
                }
                
                lastScrollTop = scrollTop;
            });

// Add parallax effect to hero section
            window.addEventListener('scroll', function() {
                const scrolled = window.pageYOffset;
                const hero = document.querySelector('#home');
                const heroContent = hero.querySelector('.max-w-7xl');
                
                if (heroContent && scrolled < hero.offsetHeight) {
                    heroContent.style.transform = `translateY(${scrolled * 0.5}px)`;
                }
            });

// Add typing animation to hero text
            const heroTitle = document.querySelector('#home h1');
            if (heroTitle) {
                const text = heroTitle.textContent;
                heroTitle.textContent = '';
                heroTitle.style.borderRight = '3px solid';
                heroTitle.style.animation = 'blink 1s infinite';
                
                let i = 0;
                const typeWriter = () => {
                    if (i < text.length) {
                        heroTitle.textContent += text.charAt(i);
                        i++;
                        setTimeout(typeWriter, 100);
                    } else {
                        heroTitle.style.borderRight = 'none';
                    }
                };
                
                setTimeout(typeWriter, 1000);
            }

// Add particle effect to hero background
            createParticles();
            
            // Initialize saved components display
            displaySavedComponents();
        });

// Particle animation for hero section
        function createParticles() {
            const hero = document.querySelector('#home');
            const particleContainer = document.createElement('div');
            particleContainer.className = 'absolute inset-0 overflow-hidden pointer-events-none';
            hero.appendChild(particleContainer);

for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.className = 'absolute w-1 h-1 bg-teal-400 rounded-full opacity-30';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animation = `particle-float ${5 + Math.random() * 10}s linear infinite`;
                particle.style.animationDelay = Math.random() * 5 + 's';
                particleContainer.appendChild(particle);
            }
        }

// Add CSS animations dynamically
        const style = document.createElement('style');
        style.textContent = `
            @keyframes blink {
                0%, 50% { border-color: transparent; }
                51%, 100% { border-color: #14b8a6; }
            }
            
            @keyframes particle-float {
                0% { 
                    transform: translateY(100vh) translateX(0px) rotate(0deg); 
                    opacity: 0; 
                }
                10% { opacity: 0.3; }
                90% { opacity: 0.3; }
                100% { 
                    transform: translateY(-100px) translateX(100px) rotate(360deg); 
                    opacity: 0; 
                }
            }
            
            nav {
                transition: transform 0.3s ease-in-out;
            }
            
            .slide-in {
                animation: slideInUp 0.8s ease-out;
            }
            
            @keyframes slideInUp {
                from { 
                    opacity: 0; 
                    transform: translateY(50px); 
                }
                to { 
                    opacity: 1; 
                    transform: translateY(0); 
                }
            }
        `;
        document.head.appendChild(style);

// Add hover effects to innovation cards
        document.addEventListener('mouseover', function(e) {
            if (e.target.closest('.hover-scale')) {
                const card = e.target.closest('.hover-scale');
                card.style.transform = 'scale(1.05) rotateY(5deg)';
                card.style.boxShadow = '0 20px 40px rgba(0,0,0,0.3)';
            }
        });

document.addEventListener('mouseout', function(e) {
            if (e.target.closest('.hover-scale')) {
                const card = e.target.closest('.hover-scale');
                card.style.transform = 'scale(1) rotateY(0deg)';
                card.style.boxShadow = '';
            }
        });

// Add click ripple effect
        document.addEventListener('click', function(e) {
            if (e.target.tagName === 'BUTTON') {
                const button = e.target;
                const ripple = document.createElement('span');
                const rect = button.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                ripple.style.cssText = `
                    position: absolute;
                    width: ${size}px;
                    height: ${size}px;
                    left: ${x}px;
                    top: ${y}px;
                    background: rgba(255,255,255,0.3);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: ripple 0.6s linear;
                    pointer-events: none;
                `;
                
                button.style.position = 'relative';
                button.style.overflow = 'hidden';
                button.appendChild(ripple);
                
                setTimeout(() => ripple.remove(), 600);
            }
        });

// Add ripple animation
        const rippleStyle = document.createElement('style');
        rippleStyle.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(rippleStyle);
    </script>
</body>
</html>

Related Examples

Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

5 months ago

458
Life Tree
by salvator

Author:
Baraka Salvator

7 months ago

850
Product cards
Product cards for eCommerce

Author:
ehmasuk

1 month ago

304
magic card
by salvator

Author:
Baraka Salvator

7 months ago

878
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

2.1k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 year ago

3.1k
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

7 months ago

660
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

11 months ago

2.1k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

1 year ago

3.3k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

330
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

4 months ago

469
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

6 months ago

897

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components