Component:

Cta Product Light

Name: Cta Product Light
Availability: InStock

Free

Tags: Call To Action (CTA)Page Section Content Sale Product Light

Colors:

Description:

This carefully crafted Call To Action (CTA) 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: Call To Action (CTA)
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@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-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-yellow-400: #facc15;

  /* Spacing */
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --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 */
.final-cta-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-16) var(--spacing-4);
}

.final-cta-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

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

.cta-grid {
  display: grid;
  gap: var(--spacing-8);
}

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

.cta-label {
  display: inline-block;
  color: var(--color-blue-600);
  font-weight: 500;
  margin-bottom: var(--spacing-3);
  line-height: 1;
}

.cta-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--color-gray-800);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.cta-description {
  margin-top: var(--spacing-4);
  color: var(--color-gray-600);
  font-size: 1.125rem;
}

.cta-feature-list {
  margin-top: var(--spacing-8);
  display: flex;
  flex-direction: column;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

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

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

.final-cta-buttons {
  margin-top: var(--spacing-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-button-secondary {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

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

.cta-button-primary {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

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

.cta-button-icon {
  margin-left: var(--spacing-2);
  margin-right: -0.25rem;
  width: 1rem;
  height: 1rem;
}

.cta-image-wrapper {
  position: relative;
  height: 100%;
}

.cta-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.cta-footer {
  background-color: var(--color-gray-50);
  padding: var(--spacing-6) var(--spacing-8);
  margin-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-100);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.avatar-group {
  display: flex;
  margin-right: var(--spacing-4);
}

.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  margin-right: -0.5rem;
  border: 2px solid var(--color-white);
}

.stats-group {
  display: flex;
  align-items: center;
}

.stats-text {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.stats-value {
  font-weight: 500;
  color: var(--color-gray-800);
}

.rating-stars {
  display: flex;
  color: var(--color-yellow-400);
}

.star-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .cta-section {
    padding: var(--spacing-20) var(--spacing-6);
  }

  .cta-content {
    padding: var(--spacing-10);
  }

  .cta-title {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .stats-group {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .cta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-12);
  }

  .cta-footer {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .cta-section {
    padding: var(--spacing-24) var(--spacing-8);
  }

  .cta-content {
    padding: var(--spacing-12);
  }
}
</style>

<section class="final-cta-section">
  <div class="final-cta-container">
    <div class="cta-card">
      <div class="cta-grid">
        <div class="cta-content">
          <span class="cta-label">Limited Time Offer</span>
          <h2 class="cta-title">
            Elevate your product experience
          </h2>
          <p class="cta-description">
            Join thousands of product teams who have streamlined their design workflow and improved collaboration with our intuitive platform.
          </p>
          
          <div class="cta-feature-list">
            <div class="feature-item">
              <svg class="cta-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
              <span class="cta-feature-text">14-day free trial with full access</span>
            </div>
            <div class="feature-item">
              <svg class="cta-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
              <span class="cta-feature-text">No credit card required</span>
            </div>
            <div class="feature-item">
              <svg class="cta-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
              <span class="cta-feature-text">Cancel anytime</span>
            </div>
          </div>
          
          <div class="final-cta-buttons">
            <a href="#" class="cta-button cta-button-secondary" aria-label="Try for free">
              Try for free
            </a>
            <a href="#" class="cta-button cta-button-primary" aria-label="Schedule a demo">
              Schedule a demo
              <svg class="cta-button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
              </svg>
            </a>
          </div>
        </div>
        
        <div class="cta-image-wrapper">
          <img 
            src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp" 
            alt="Product dashboard interface" 
            class="cta-image"
            width="1320" 
            height="900" 
            loading="lazy"
          >
        </div>
      </div>
      
      <div class="cta-footer">
        <div class="footer-content">
          <div class="stats-group">
            <div class="avatar-group">
              <img class="avatar" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="User avatar" width="40" height="40" loading="lazy">
              <img class="avatar" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="User avatar" width="40" height="40" loading="lazy">
              <img class="avatar" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="User avatar" width="40" height="40" loading="lazy">
            </div>
            <p class="stats-text">
              <span class="stats-value">500+</span> product teams trust us
            </p>
          </div>
          <div class="stats-group">
            <div class="rating-stars">
              <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
            </div>
            <p class="stats-text">
              <span class="stats-value">4.9/5</span> from 2,000+ reviews
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


                <!--
@type: Call To Action (CTA)
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-16 sm:py-20 lg:py-24">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="relative overflow-hidden rounded-2xl bg-white border border-gray-200 shadow-sm">
      <div class="grid md:grid-cols-2 gap-8 lg:gap-12">
        <div class="p-8 sm:p-10 lg:p-12">
          <span class="inline-block text-blue-600 font-medium mb-3">Limited Time Offer</span>
          <h2 class="text-3xl sm:text-4xl font-medium text-gray-800 tracking-tight">
            Elevate your product experience
          </h2>
          <p class="mt-4 text-gray-600 text-lg">
            Join thousands of product teams who have streamlined their design workflow and improved collaboration with our intuitive platform.
          </p>
          
          <div class="mt-8 space-y-4">
            <div class="flex items-center gap-x-3">
              <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
              <span class="text-gray-600">14-day free trial with full access</span>
            </div>
            <div class="flex items-center gap-x-3">
              <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
              <span class="text-gray-600">No credit card required</span>
            </div>
            <div class="flex items-center gap-x-3">
              <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
              <span class="text-gray-600">Cancel anytime</span>
            </div>
          </div>
          
          <div class="mt-10 flex flex-wrap gap-4">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-white border border-gray-200 text-gray-800 rounded-lg hover:bg-gray-50 shadow-sm transition-colors duration-200 font-medium" aria-label="Try for free">
              Try for free
            </a>
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-sm transition-colors duration-200 font-medium" aria-label="Schedule a demo">
              Schedule a demo
              <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
              </svg>
            </a>
          </div>
        </div>
        
        <div class="relative h-full">
          <!-- Product image by Figcomponents (CC BY 4.0) -->
          <img 
            src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp" 
            alt="Product dashboard interface" 
            class="h-full w-full object-cover md:absolute md:inset-0"
            width="1320" 
            height="900" 
            loading="lazy"
          >
        </div>
      </div>
      
      <div class="bg-gray-50 px-8 py-6 mt-6 md:mt-0 md:border-t border-gray-100">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div class="flex items-center space-x-4">
            <div class="flex -space-x-2">
              <img class="h-8 w-8 rounded-full ring-2 ring-white" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="User avatar" width="40" height="40" loading="lazy">
              <img class="h-8 w-8 rounded-full ring-2 ring-white" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="User avatar" width="40" height="40" loading="lazy">
              <img class="h-8 w-8 rounded-full ring-2 ring-white" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="User avatar" width="40" height="40" loading="lazy">
            </div>
            <p class="text-sm text-gray-600">
              <span class="font-medium text-gray-800">500+</span> product teams trust us
            </p>
          </div>
          <div class="flex items-center">
            <div class="flex text-yellow-400">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
              </svg>
            </div>
            <p class="ml-2 text-sm text-gray-600">
              <span class="font-medium text-gray-800">4.9/5</span> from 2,000+ reviews
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Cta Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions