class CustomHero extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .hero-bg {
                    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
                }
            </style>
            <section class="hero-bg pt-32 pb-20 md:pt-40 md:pb-28">
                <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-12 md:mb-0">
                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                            <span class="gradient-text">MAXYMIZE</span> Your Digital Potential
                        </h1>
                        <p class="text-lg text-gray-600 mb-8 max-w-lg">
                            Digital solutions that strengthen brand identity and expand business reach in today's connected world.
                        </p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                            <a href="#services" class="px-8 py-3 bg-gradient-to-r from-indigo-500 to-green-400 text-white rounded-full text-center font-medium hover:shadow-lg transition-all">
                                Explore Services
                            </a>
                            <a href="#contact" class="px-8 py-3 border-2 border-indigo-500 text-indigo-500 rounded-full text-center font-medium hover:bg-indigo-50 transition-all">
                                Contact Us
                            </a>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center">
                        <img src="http://static.photos/technology/640x360/1" alt="Digital Solutions" class="rounded-xl shadow-xl animate-float">
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-hero', CustomHero);