components/hero.js

class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero-image {
                    background-image: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.15) 50%, transparent 70%);
                }
                .dark .hero-image {
                    background-image: radial-gradient(circle at 30% 50%, rgba(79, 70, 229, 0.3) 0%, rgba(126, 34, 206, 0.25) 50%, transparent 70%);
                }
            </style>
            <section class="hero-image pt-24 pb-16 md:pt-32 md:pb-24">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="grid md:grid-cols-2 gap-12 items-center">
                        <div class="text-center md:text-left">
                            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
                                <span class="gradient-text">YAPPERTAR-ai</span> & DeepSeek
                            </h1>
                            <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-lg">
                                Revolutionizing AI with quantum cognition and deep learning for unparalleled internet search and data analysis.
                            </p>
                            <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                                <a href="#features" class="px-8 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                    Explore Features
                                </a>
                                <a href="https://t.me/yappertar_ai_collab" target="_blank" class="px-8 py-3 border border-primary-500 text-primary-500 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-gray-800 font-medium rounded-lg transition duration-300">
                                    Join Our Telegram
                                </a>
                            </div>
                        </div>
                        <div class="hidden md:block">
                            <div class="relative">
                                <div class="w-full h-96 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-2xl shadow-2xl overflow-hidden animate-float">
                                    <div class="absolute inset-0 flex items-center justify-center p-8">
                                        <div class="text-white text-center">
                                            <i data-feather="cpu" class="w-16 h-16 mx-auto mb-4"></i>
                                            <h3 class="text-2xl font-bold mb-2">QuantumMind Explorer</h3>
                                            <p class="opacity-80">The future of AI-powered search and analysis</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}

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