components/hero.js

class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                .hero-gradient {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                }
                .floating {
                    animation: float 6s ease-in-out infinite;
                }
                @keyframes float {
                    0%, 100% { transform: translateY(0px); }
                    50% { transform: translateY(-20px); }
                }
                .typewriter {
                    overflow: hidden;
                    border-right: .15em solid #3b82f6;
                    white-space: nowrap;
                    margin: 0 auto;
                    letter-spacing: .15em;
                    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
                }
                @keyframes typing {
                    from { width: 0 }
                    to { width: 100% }
                }
                @keyframes blink-caret {
                    from, to { border-color: transparent }
                    50% { border-color: #3b82f6; }
                }
            </style>
            <section class="py-12 md:py-20">
                <div class="max-w-6xl mx-auto text-center px-4">
                    <div class="inline-flex items-center justify-center p-2 px-4 mb-6 rounded-full bg-gradient-to-r from-blue-100 to-purple-100 text-blue-600 font-medium text-sm">
                        <i data-feather="star" class="w-4 h-4 mr-2"></i>
                        <span>Trusted by 10,000+ developers worldwide</span>
                    </div>

                    <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
                        The <span class="hero-gradient bg-clip-text text-transparent">Developer's</span>
                        <br class="hidden md:block">
                        <span class="typewriter">API Playground</span>
                    </h1>

                    <p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-10">
                        Discover, test, and integrate powerful APIs in seconds. Streamline your workflow with our curated collection of developer tools.
                    </p>

                    <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
                        <a href="/explore" class="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-bold py-4 px-8 rounded-xl text-lg transition duration-300 transform hover:-translate-y-1 shadow-xl hover:shadow-2xl flex items-center justify-center">
                            <i data-feather="search" class="mr-3 w-5 h-5"></i>
                            Start Exploring APIs
                        </a>
                        <a href="/docs" class="bg-white hover:bg-gray-50 text-gray-800 font-bold py-4 px-8 rounded-xl text-lg transition duration-300 border-2 border-gray-200 hover:border-blue-300 shadow-lg hover:shadow-xl flex items-center justify-center">
                            <i data-feather="book-open" class="mr-3 w-5 h-5"></i>
                            View Documentation
                        </a>
                    </div>

                    <div class="relative max-w-4xl mx-auto">
                        <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl blur opacity-30"></div>
                        <div class="relative bg-white rounded-2xl p-1">
                            <div class="bg-gray-900 rounded-xl p-4 md:p-6">
                                <div class="flex items-center space-x-2 mb-4">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                    <span class="text-gray-400 text-sm ml-4">example.js</span>
                                </div>
                                <pre class="text-green-400 text-sm md:text-base overflow-x-auto"><code>// Fetch random user data from SxHub
const response = await fetch('https://api.sxhub.dev/random-user');
const data = await response.json();
console.log(data); // Clean, structured data ready to use!</code></pre>
                            </div>
                        </div>
                    </div>

                    <div class="mt-16 flex flex-wrap justify-center gap-8 md:gap-12">
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold text-blue-600 mb-2">500+</div>
                            <div class="text-gray-600">Curated APIs</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold text-purple-600 mb-2">99.9%</div>
                            <div class="text-gray-600">Uptime</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold text-green-600 mb-2">&lt;100ms</div>
                            <div class="text-gray-600">Average Latency</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl md:text-4xl font-bold text-orange-600 mb-2">24/7</div>
                            <div class="text-gray-600">Support</div>
                        </div>
                    </div>
                </div>
            </section>
        `;

        // Initialize icons in shadow DOM
        setTimeout(() => {
            feather.replace();
        }, 100);
    }
}

customElements.define('custom-hero', CustomHero);