class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero-bg {
                    background: linear-gradient(135deg, #F9FAFB 0%, #EFF6FF 100%);
                }
            </style>
            <section class="hero-bg pt-32 pb-20">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="lg:flex lg:items-center lg:justify-between">
                        <div class="lg:w-1/2">
                            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
                                Build amazing things <span class="gradient-text">faster</span>
                            </h1>
                            <p class="text-lg text-gray-600 mb-8">
                                SkyWork helps you streamline your workflow and collaborate with your team more effectively than ever before.
                            </p>
                            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                                <a href="#" class="px-6 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition text-center">
                                    Get Started
                                </a>
                                <a href="#" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition text-center">
                                    Learn More
                                </a>
                            </div>
                        </div>
                        <div class="lg:w-1/2 mt-12 lg:mt-0">
                            <img src="http://static.photos/technology/1024x576/1" alt="Hero Image" class="rounded-lg shadow-xl w-full">
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-hero', CustomHero);