Component:

Hero Product Light

Name: Hero Product Light
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Hero Page Section Content Sale Product Light

Colors:

Description:

This carefully crafted Hero 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: Hero
@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-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;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-600: #16a34a;
  --color-red-300: #fca5a5;

  /* Spacing */
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.hero-section {
  position: relative;
  background-color: var(--color-gray-50);
  overflow: hidden;
}

.hero-container {
  max-width: 1536px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.content-column {
  width: 100%;
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: var(--text-4xl);
  font-weight: 500;
  color: var(--color-gray-800);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.hero-title span {
  color: var(--color-blue-600);
}

.hero-description {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  margin-bottom: 2rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-button-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.hero-primary-button {
  padding: 0.75rem 1.5rem;
  background-color: var(--color-blue-600);
  color: var(--color-white);
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
  text-decoration: none;
}

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

.hero-secondary-button {
  padding: 0.75rem 1.5rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
  font-weight: 500;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hero-secondary-button svg {
  color: var(--color-gray-800);
  width: 1.25rem;
  height: 1.25rem;
}

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

.social-proof {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-gray-100);
}

.social-proof-text {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: 1rem;
}

.hero-logo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.company-logo {
  height: 1.5rem;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.company-logo:hover {
  opacity: 1;
}

.image-column {
  width: 100%;
  position: relative;
}

.main-image-wrapper {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-gray-100);
}

.main-image {
  width: 100%;
  height: auto;
}

.floating-card {
  position: absolute;
  background-color: var(--color-white);
  border: 2px solid var(--color-red-300);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.floating-card-top {
  top: 1.5rem;
  right: 1.5rem;
}

.floating-card-bottom {
  bottom: 1.5rem;
  left: 1.5rem;
}

.hero-icon-wrapper {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-icon-wrapper.green {
  background-color: var(--color-green-100);
}

.hero-icon-wrapper.blue {
  background-color: var(--color-blue-100);
}

.hero-icon {
  width: 1rem;
  height: 1rem;
}

.hero-icon.green {
  color: var(--color-green-600);
}

.hero-icon.blue {
  color: var(--color-blue-600);
}

.card-label {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.card-value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-800);
}

.bg-decoration {
  position: absolute;
  z-index: -1;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  opacity: 0.7;
  filter: blur(24px);
}

.bg-decoration-top {
  top: -2.5rem;
  right: -2.5rem;
  background-color: var(--color-blue-50);
}

.bg-decoration-bottom {
  bottom: -2.5rem;
  left: -2.5rem;
  background-color: var(--color-green-50);
}

.testimonial {
  margin-top: 4rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.testimonial-image {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  border: 2px solid var(--color-gray-50);
  flex-shrink: 0;
}

.testimonial-content {
  color: var(--color-gray-600);
  margin-bottom: 1rem;
}

.testimonial-author {
  font-weight: 500;
  color: var(--color-gray-800);
}

.testimonial-role {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .hero-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .hero-button-group {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .hero-container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  
  .hero-title {
    font-size: var(--text-5xl);
  }
  
  .hero-description {
    font-size: var(--text-xl);
  }
  
  .testimonial-card {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .hero-container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  
  .content-wrapper {
    flex-direction: row;
    gap: 4rem;
  }
  
  .content-column {
    width: 50%;
    text-align: left;
  }
  
  .hero-title {
    font-size: var(--text-6xl);
  }
  
  .hero-description {
    margin-left: 0;
    margin-right: 0;
  }
  
  .hero-button-group {
    justify-content: flex-start;
  }
  
  .logo-grid {
    justify-content: flex-start;
  }
  
  .image-column {
    width: 50%;
  }
  
  .testimonial {
    margin-top: 5rem;
  }
}
</style>

<section class="hero-section">
  <div class="hero-container">
    <div class="content-wrapper">
      <!-- Content Column -->
      <div class="content-column">
        <span class="badge">New Product Release</span>
        <h1 class="hero-title">
          Design better <span>products</span> with customer insights
        </h1>
        <p class="hero-description">
          Transform your product development process with real-time customer feedback and analytics that help you build exactly what your users need.
        </p>
        <div class="hero-button-group">
          <a href="#" class="hero-primary-button">
            Start free trial
          </a>
          <a href="#" class="hero-secondary-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
            </svg>
            Watch demo
          </a>
        </div>
        
        <!-- Social proof -->
        <div class="social-proof">
          <p class="social-proof-text">Trusted by innovative teams worldwide</p>
          <div class="hero-logo-grid">
            <!-- Company logos -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" class="company-logo" width="100" height="25">
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" class="company-logo" width="100" height="31">
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion logo" class="company-logo" width="100" height="35">
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" class="company-logo" width="100" height="19">
          </div>
        </div>
      </div>
      
      <!-- Image Column -->
      <div class="image-column">
        <!-- Main product image -->
        <div class="main-image-wrapper">
          <img 
            src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp" 
            alt="Product dashboard interface" 
            class="main-image"
            width="1320"
            height="900"
            loading="lazy"
          >
          
          <!-- Floating elements -->
          <div class="floating-card floating-card-top">
            <div class="hero-icon-wrapper green">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hero-icon green">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941" />
              </svg>
            </div>
            <div>
              <p class="card-label">Monthly Growth</p>
              <p class="card-value">+27.4%</p>
            </div>
          </div>
          
          <div class="floating-card floating-card-bottom">
            <div class="hero-icon-wrapper blue">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hero-icon blue">
                <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
              </svg>
            </div>
            <div>
              <p class="card-label">Active Users</p>
              <p class="card-value">12.8k</p>
            </div>
          </div>
        </div>
        
        <!-- Background decoration -->
        <div class="bg-decoration bg-decoration-top"></div>
        <div class="bg-decoration bg-decoration-bottom"></div>
      </div>
    </div>
    
    <!-- Customer testimonial -->
    <div class="testimonial">
      <div class="testimonial-card">
        <div>
          <img 
            src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" 
            alt="Customer testimonial" 
            class="testimonial-image"
            width="40" 
            height="40"
            loading="lazy"
          >
        </div>
        <div>
          <p class="testimonial-content">"This platform has completely transformed how we approach product development. The insights we've gained have led to a 43% increase in user engagement and significantly faster time-to-market."</p>
          <div>
            <p class="testimonial-author">Sarah Johnson</p>
            <p class="testimonial-role">Product Director, TechSolutions Inc.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


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

<section class="relative bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20 lg:py-24">
    <div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">
      <!-- Content Column -->
      <div class="w-full lg:w-1/2 text-center lg:text-left">
        <span class="inline-block px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-6">New Product Release</span>
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-medium text-gray-800 leading-tight mb-6">
          Design better <span class="text-blue-600">products</span> with customer insights
        </h1>
        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto lg:mx-0">
          Transform your product development process with real-time customer feedback and analytics that help you build exactly what your users need.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
          <a href="#" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-300 text-center">
            Start free trial
          </a>
          <a href="#" class="px-6 py-3 bg-white border border-gray-200 text-gray-800 hover:bg-gray-50 font-medium rounded-lg shadow-sm transition duration-300 flex items-center justify-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
            </svg>
            Watch demo
          </a>
        </div>
        
        <!-- Social proof -->
        <div class="mt-10 pt-8 border-t border-gray-100">
          <p class="text-sm text-gray-500 mb-4">Trusted by innovative teams worldwide</p>
          <div class="flex flex-wrap justify-center lg:justify-start gap-6 items-center">
            <!-- Company logos -->
            <!-- Slack logo -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" class="h-6 opacity-70 hover:opacity-100 transition-opacity" width="100" height="25">
            <!-- Shopify logo -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" class="h-6 opacity-70 hover:opacity-100 transition-opacity" width="100" height="31">
            <!-- Notion logo -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion logo" class="h-6 opacity-70 hover:opacity-100 transition-opacity" width="100" height="35">
            <!-- Dropbox logo -->
            <img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" class="h-5 opacity-70 hover:opacity-100 transition-opacity" width="100" height="19">
          </div>
        </div>
      </div>
      
      <!-- Image Column -->
      <div class="w-full lg:w-1/2 relative">
        <!-- Main product image -->
        <!-- SaaS image by Figcomponents (CC BY 4.0) -->
        <div class="relative rounded-2xl overflow-hidden shadow-xl border border-gray-100">
          <img 
            src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp" 
            alt="Product dashboard interface" 
            class="w-full h-auto"
            width="1320"
            height="900"
            loading="lazy"
          >
          
          <!-- Floating elements for visual interest -->
          <div class="absolute top-6 right-6 bg-white border-2 border-red-300 rounded-lg p-3 shadow-xl flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-green-600">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941" />
              </svg>
            </div>
            <div>
              <p class="text-xs text-gray-500">Monthly Growth</p>
              <p class="text-sm font-medium text-gray-800">+27.4%</p>
            </div>
          </div>
          
          <div class="absolute bottom-6 left-6 bg-white border-2 border-red-300 rounded-lg p-3 shadow-xl flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-blue-600">
                <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
              </svg>
            </div>
            <div>
              <p class="text-xs text-gray-500">Active Users</p>
              <p class="text-sm font-medium text-gray-800">12.8k</p>
            </div>
          </div>
        </div>
        
        <!-- Background decoration -->
        <div class="absolute -z-10 -top-10 -right-10 w-64 h-64 bg-blue-50 rounded-full opacity-70 blur-3xl"></div>
        <div class="absolute -z-10 -bottom-10 -left-10 w-64 h-64 bg-green-50 rounded-full opacity-70 blur-3xl"></div>
      </div>
    </div>
    
    <!-- Customer testimonial -->
    <div class="mt-16 lg:mt-20 max-w-4xl mx-auto">
      <div class="bg-white border border-gray-100 rounded-2xl p-8 shadow-sm flex flex-col md:flex-row gap-6 items-center">
        <div class="flex-shrink-0">
          <!-- Customer image -->
          <img 
            src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" 
            alt="Customer testimonial" 
            class="w-16 h-16 rounded-full border-2 border-gray-50"
            width="40" 
            height="40"
            loading="lazy"
          >
        </div>
        <div>
          <p class="text-gray-600 mb-4">"This platform has completely transformed how we approach product development. The insights we've gained have led to a 43% increase in user engagement and significantly faster time-to-market."</p>
          <div>
            <p class="font-medium text-gray-800">Sarah Johnson</p>
            <p class="text-sm text-gray-500">Product Director, TechSolutions Inc.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Hero Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions