<!--
@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>
