components/hero-section.js

class HeroSection extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .hero-section {
          margin-bottom: 5rem;
        }
        .floating {
          animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-15px); }
          100% { transform: translateY(0px); }
        }
      </style>
      <section class="hero-section mb-20">
          <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 mb-10 md:mb-0">
                  <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">Elevate Your Digital <span class="text-primary">Presence</span></h1>
                  <p class="text-xl text-gray-600 mb-8">We craft beautiful, functional digital experiences that connect with your audience and drive results.</p>
                  <div class="flex space-x-4">
                      <a href="/about.html" class="bg-primary hover:bg-red-600 text-white px-8 py-3 rounded-lg font-medium transition duration-300">About Us</a>
                      <a href="#" class="border-2 border-primary text-primary hover:bg-red-50 px-8 py-3 rounded-lg font-medium transition duration-300">View Portfolio</a>
                  </div>
              </div>
              <div class="md:w-1/2">
                  <img src="http://static.photos/technology/1024x576/42" alt="Digital Experience" class="rounded-xl shadow-2xl floating">
              </div>
          </div>
      </section>
    `;
  }
}
customElements.define('hero-section', HeroSection);