components/overview-section-new.js

class OverviewSectionNew extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .overview-section {
          padding: 5rem 0;
          background: white;
        }
        .process-step {
          position: relative;
          padding-left: 3rem;
        }
        .process-step:before {
          content: attr(data-number);
          position: absolute;
          left: 0;
          top: 0;
          font-size: 2rem;
          font-weight: bold;
          color: #ef4444;
        }
      </style>
      <section class="overview-section">
        <div class="container mx-auto px-4">
          <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
              <img src="http://static.photos/workspace/640x360/5" alt="Creative Process" class="rounded-xl shadow-lg">
            </div>
            <div class="md:w-1/2 md:pl-12">
              <h2 class="text-3xl font-bold mb-6">Our <span class="text-primary">Process</span></h2>
              <div class="space-y-8">
                <div class="process-step" data-number="1">
                  <h3 class="text-xl font-bold mb-2">Discovery</h3>
                  <p class="text-gray-600">We begin by understanding your business goals and audience needs.</p>
                </div>
                <div class="process-step" data-number="2">
                  <h3 class="text-xl font-bold mb-2">Strategy</h3>
                  <p class="text-gray-600">We develop a tailored approach to achieve your objectives.</p>
                </div>
                <div class="process-step" data-number="3">
                  <h3 class="text-xl font-bold mb-2">Execution</h3>
                  <p class="text-gray-600">Our team brings the vision to life with precision and creativity.</p>
                </div>
                <div class="process-step" data-number="4">
                  <h3 class="text-xl font-bold mb-2">Optimization</h3>
                  <p class="text-gray-600">We refine and improve based on data and results.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('overview-section-new', OverviewSectionNew);