Component:

Feature Product Light

Name: Feature Product Light
Availability: InStock

Free

Tags: Feature Page Section Content Product Light

Colors:

Description:

This carefully crafted Feature component is perfect for Product landing pages, featuring a Light design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Feature
@industry: Product
@style: Light
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;

  /* Container */
  --container-max-width: 80rem; /* max-w-7xl */
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.feature-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-16) 0;
}

.feature-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.section-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.section-description {
  font-size: 1.125rem;
  color: var(--color-gray-600);
  max-width: 48rem;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}

.feature-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.feature-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-blue-100);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-6);
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-blue-600);
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-3);
}

.feature-description {
  font-size: 1rem;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.learn-more-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-blue-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.learn-more-link:hover {
  color: var(--color-blue-700);
}

.learn-more-icon {
  width: 1rem;
  height: 1rem;
  margin-left: var(--spacing-1);
}

.featured-section {
  margin-top: var(--spacing-16);
}

.featured-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.featured-content {
  padding: var(--spacing-8);
}

.featured-badge {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  margin-bottom: var(--spacing-6);
}

.featured-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.featured-description {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-8);
}

.feature-list {
  list-style: none;
  margin-bottom: var(--spacing-8);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-4);
}

.feature-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-blue-600);
  margin: var(--spacing-1) var(--spacing-2) 0 0;
}

.feature-text {
  color: var(--color-gray-600);
}

.feature-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.feature-primary-button {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-6);
  background-color: var(--color-blue-600);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.feature-primary-button:hover {
  background-color: var(--color-blue-700);
}

.feature-secondary-button {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-6);
  background-color: var(--color-white);
  color: var(--color-gray-800);
  text-decoration: none;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.feature-secondary-button:hover {
  background-color: var(--color-gray-50);
}

.image-container {
  order: -1;
}

.image-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  padding: var(--spacing-8);
}

.placeholder-image {
  background-color: var(--color-gray-200);
  aspect-ratio: 16/9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.placeholder-icon {
  width: 4rem;
  height: 4rem;
  color: var(--color-gray-500);
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .feature-container {
    padding: 0 var(--spacing-6);
  }
}

@media (min-width: 768px) {
  .feature-section {
    padding: var(--spacing-24) 0;
  }

  .section-title {
    font-size: 2.25rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-content {
    padding: var(--spacing-12);
  }

  .featured-title {
    font-size: 1.875rem;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .featured-section {
    margin-top: var(--spacing-24);
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-container {
    order: 1;
  }
}
</style>

<section class="feature-section">
  <div class="feature-container">
    <!-- Section Header -->
    <div class="section-header">
      <h2 class="section-title">Product Features That Make a Difference</h2>
      <p class="section-description">Our carefully designed features help you streamline workflows, improve productivity, and achieve better results with minimal effort.</p>
    </div>

    <!-- Features Grid -->
    <div class="features-grid">
      <!-- Feature Card 1 -->
      <div class="feature-card">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
        </div>
        <h3 class="feature-title">Intuitive Dashboard</h3>
        <p class="feature-description">Get a comprehensive overview of your product performance with our intuitive and customizable dashboard interface.</p>
        <a href="#" class="learn-more-link">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 2 -->
      <div class="feature-card">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <h3 class="feature-title">Advanced Security</h3>
        <p class="feature-description">Keep your data safe with enterprise-grade security features including encryption, access controls, and compliance tools.</p>
        <a href="#" class="learn-more-link">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 3 -->
      <div class="feature-card">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="feature-title">Performance Optimization</h3>
        <p class="feature-description">Boost your product's speed and efficiency with our advanced optimization tools and real-time performance monitoring.</p>
        <a href="#" class="learn-more-link">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 4 -->
      <div class="feature-card">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
          </svg>
        </div>
        <h3 class="feature-title">Data Analytics</h3>
        <p class="feature-description">Make data-driven decisions with comprehensive analytics tools that provide actionable insights and visualizations.</p>
        <a href="#" class="learn-more-link">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 5 -->
      <div class="feature-card">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
          </svg>
        </div>
        <h3 class="feature-title">Seamless Integration</h3>
        <p class="feature-description">Connect with your favorite tools and platforms through our extensive API and pre-built integrations ecosystem.</p>
        <a href="#" class="learn-more-link">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 6 -->
      <div class="feature-card">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <h3 class="feature-title">Collaboration Tools</h3>
        <p class="feature-description">Work together efficiently with team members through real-time collaboration features, comments, and shared workspaces.</p>
        <a href="#" class="learn-more-link">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Featured Highlight -->
    <div class="featured-section">
      <div class="featured-card">
        <div class="featured-grid">
          <!-- Content Side -->
          <div class="featured-content">
            <div class="featured-badge">Featured Capability</div>
            <h3 class="featured-title">Advanced Analytics Dashboard</h3>
            <p class="featured-description">Our most powerful feature gives you complete visibility into your product performance. Track key metrics, identify trends, and make data-driven decisions with our intuitive analytics dashboard.</p>
            
            <ul class="feature-list">
              <li class="feature-item">
                <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span class="feature-text">Real-time data visualization and reporting</span>
              </li>
              <li class="feature-item">
                <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span class="feature-text">Customizable widgets and dashboard layouts</span>
              </li>
              <li class="feature-item">
                <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span class="feature-text">Export capabilities for presentations and reports</span>
              </li>
            </ul>
            
            <div class="feature-button-group">
              <a href="#" class="feature-primary-button" aria-label="Try the dashboard demo">Try Demo</a>
              <a href="#" class="feature-secondary-button" aria-label="Learn more about the analytics dashboard">Learn More</a>
            </div>
          </div>
          
          <!-- Image Side -->
          <div class="image-container">
            <div class="image-wrapper">
              <div class="placeholder-image">
                <svg xmlns="http://www.w3.org/2000/svg" class="placeholder-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


                <!--
@type: Feature
@industry: Product
@style: Light
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-16 md:py-24">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-medium text-gray-800 mb-4">Product Features That Make a Difference</h2>
      <p class="text-lg text-gray-600 max-w-3xl mx-auto">Our carefully designed features help you streamline workflows, improve productivity, and achieve better results with minimal effort.</p>
    </div>

    <!-- Features Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature Card 1 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Intuitive Dashboard</h3>
        <p class="text-base text-gray-600 mb-6">Get a comprehensive overview of your product performance with our intuitive and customizable dashboard interface.</p>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 2 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Advanced Security</h3>
        <p class="text-base text-gray-600 mb-6">Keep your data safe with enterprise-grade security features including encryption, access controls, and compliance tools.</p>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 3 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Performance Optimization</h3>
        <p class="text-base text-gray-600 mb-6">Boost your product's speed and efficiency with our advanced optimization tools and real-time performance monitoring.</p>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 4 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Data Analytics</h3>
        <p class="text-base text-gray-600 mb-6">Make data-driven decisions with comprehensive analytics tools that provide actionable insights and visualizations.</p>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 5 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Seamless Integration</h3>
        <p class="text-base text-gray-600 mb-6">Connect with your favorite tools and platforms through our extensive API and pre-built integrations ecosystem.</p>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>

      <!-- Feature Card 6 -->
      <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Collaboration Tools</h3>
        <p class="text-base text-gray-600 mb-6">Work together efficiently with team members through real-time collaboration features, comments, and shared workspaces.</p>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Featured Highlight -->
    <div class="mt-16 lg:mt-24">
      <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2">
          <!-- Content Side -->
          <div class="p-8 md:p-12">
            <div class="inline-block px-4 py-2 bg-blue-50 rounded-full text-blue-600 text-sm font-medium mb-6">
              Featured Capability
            </div>
            <h3 class="text-2xl md:text-3xl font-normal text-gray-800 mb-4">Advanced Analytics Dashboard</h3>
            <p class="text-gray-600 mb-8">Our most powerful feature gives you complete visibility into your product performance. Track key metrics, identify trends, and make data-driven decisions with our intuitive analytics dashboard.</p>
            
            <ul class="space-y-4 mb-8">
              <li class="flex items-start">
                <svg class="h-5 w-5 text-blue-600 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span class="text-gray-600">Real-time data visualization and reporting</span>
              </li>
              <li class="flex items-start">
                <svg class="h-5 w-5 text-blue-600 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span class="text-gray-600">Customizable widgets and dashboard layouts</span>
              </li>
              <li class="flex items-start">
                <svg class="h-5 w-5 text-blue-600 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span class="text-gray-600">Export capabilities for presentations and reports</span>
              </li>
            </ul>
            
            <div class="flex flex-wrap gap-4">
              <a href="#" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" aria-label="Try the dashboard demo">
                Try Demo
              </a>
              <a href="#" class="inline-flex items-center px-6 py-3 bg-white border border-gray-200 text-gray-800 rounded-lg hover:bg-gray-50 transition-colors" aria-label="Learn more about the analytics dashboard">
                Learn More
              </a>
            </div>
          </div>
          
          <!-- Image Side -->
          <div class="order-first lg:order-last">
            <div class="h-full flex items-center justify-center bg-gray-100 p-8">
              <div class="bg-gray-200 aspect-video w-full flex items-center justify-center text-gray-500 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Feature Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions