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)

245

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

Restaurant menu card

Author:
Anonymous

1 year ago

2.9k
Forgot password?
you can change password an time

Author:
gidy

3 weeks ago

150
Table
Table with image and status with pagination buttons

Author:
Abhiraj

5 months ago

1.5k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.2k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

2 months ago

217
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

1 week ago

15
Invoice template

Author:
Shakti

2 years ago

26.8k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

4 weeks ago

360
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

2 months ago

331
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

4 months ago

591
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

92
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

1 week ago

15

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components