components/technology-section.js

class TechnologySection extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .tech-section {
          padding: 5rem 0;
          background: #1a202c;
          color: white;
        }
        .tech-card {
          background: #2d3748;
          border-radius: 0.5rem;
          padding: 2rem;
          transition: transform 0.3s ease;
        }
        .tech-card:hover {
          transform: translateY(-5px);
        }
      </style>
      <section class="tech-section">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold mb-4"><span class="text-primary">Technology</span> & Innovation</h2>
            <p class="text-gray-300 max-w-2xl mx-auto">Cutting-edge digital solutions for the modern business</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="tech-card">
              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
                <i data-feather="code" class="w-6 h-6"></i>
              </div>
              <h3 class="text-xl font-bold mb-2">Web Development</h3>
              <p class="text-gray-300">Custom websites and web applications built for performance</p>
            </div>
            <div class="tech-card">
              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
                <i data-feather="smartphone" class="w-6 h-6"></i>
              </div>
              <h3 class="text-xl font-bold mb-2">Mobile Apps</h3>
              <p class="text-gray-300">iOS and Android applications with beautiful UI/UX</p>
            </div>
            <div class="tech-card">
              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
                <i data-feather="bar-chart-2" class="w-6 h-6"></i>
              </div>
              <h3 class="text-xl font-bold mb-2">Data Analytics</h3>
              <p class="text-gray-300">Actionable insights from your business data</p>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('technology-section', TechnologySection);