Feature Section Generator

<section class="feature-section">
  <div class="feature-header" style="text-align: center">
    <span class="feature-badge">Features</span>
    <h2 class="feature-section-title">Powerful Features</h2>
    <p class="feature-section-subtitle">Everything you need to build amazing products and grow your business</p>
  </div>
  <div class="feature-grid">
    <div class="feature-card" style="animation-delay: 0s">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      </div>
      <h3 class="feature-title">Lightning Fast</h3>
      <p class="feature-description">Optimized for speed and performance. Load times under 100ms guaranteed.</p>
    </div>
    <div class="feature-card" style="animation-delay: 0.1s">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
      </div>
      <h3 class="feature-title">Secure by Default</h3>
      <p class="feature-description">Enterprise-grade security with end-to-end encryption and SOC 2 compliance.</p>
    </div>
    <div class="feature-card" style="animation-delay: 0.2s">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
      </div>
      <h3 class="feature-title">Advanced Analytics</h3>
      <p class="feature-description">Real-time insights and comprehensive dashboards to track your success.</p>
    </div>
    <div class="feature-card" style="animation-delay: 0.30000000000000004s">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </div>
      <h3 class="feature-title">Team Collaboration</h3>
      <p class="feature-description">Work together seamlessly with real-time editing and commenting.</p>
    </div>
    <div class="feature-card" style="animation-delay: 0.4s">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
        </svg>
      </div>
      <h3 class="feature-title">Cloud Native</h3>
      <p class="feature-description">Scalable infrastructure that grows with your business automatically.</p>
    </div>
    <div class="feature-card" style="animation-delay: 0.5s">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </div>
      <h3 class="feature-title">24/7 Support</h3>
      <p class="feature-description">Round-the-clock expert support to help you succeed.</p>
    </div>
  </div>
</section>