components/hero.js

class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero-gradient {
                    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.05) 90%);
                }
            </style>
            <section class="space-bg star-field pt-32 pb-20 px-4 sm:px-6 lg:px-8">
                <div class="max-w-7xl mx-auto">
                    <div class="text-center">
                        <h1 class="text-4xl md:text-6xl font-bold mb-6">
                            <span class="gradient-text">AstralAGI</span> - AI That Thinks Among Stars
                        </h1>
                        <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-10">
                            Next-generation artificial general intelligence platform that operates at cosmic scale, delivering unparalleled reasoning capabilities.
                        </p>
                        <div class="flex flex-col sm:flex-row justify-center gap-4">
                            <button class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-lg text-lg font-medium transition duration-300 hover-scale">
                                Start Building
                            </button>
                            <button class="glass-card hover:bg-gray-800/50 text-white px-8 py-3 rounded-lg text-lg font-medium transition duration-300 hover-scale">
                                View Documentation
                            </button>
                        </div>
                    </div>
                    <div class="mt-20 flex justify-center">
                        <div class="terminal-window p-6 rounded-2xl max-w-4xl w-full hover-scale">
                            <div class="flex items-center mb-4">
                                <div class="flex space-x-2">
                                    <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                                    <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                </div>
                                <div class="ml-4 text-gray-400 text-sm">terminal</div>
                            </div>
                            <div class="text-green-400 font-mono text-sm">
                                <span class="text-purple-400">$</span> astral deploy --model cosmic-mind
                            </div>
                            <div class="text-gray-300 font-mono text-sm mt-2">
                                > Initializing neural clusters... ✓
                            </div>
                            <div class="text-gray-300 font-mono text-sm">
                                > Deploying across 256 quantum cores... ✓
                            </div>
                            <div class="text-cyan-400 font-mono text-sm mt-2">
                                🚀 AstralAGI v2.0 launched successfully!
                            </div>
                        </div>
                    </div>
                </div>
            </section>
`;
    }
}
customElements.define('custom-hero', CustomHero);