<!--
@type: Hero
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--primary-color: #4f46e5; /* indigo-600 */
--primary-color-dark: #4338ca; /* indigo-700 */
--primary-bg: #f1f5f9; /* slate-50 */
--primary-text: #0f172a; /* slate-900 */
--secondary-text: #475569; /* slate-600 */
--badge-bg: #e0e7ff; /* indigo-100 */
--badge-text: #4338ca; /* indigo-700 */
--button-border: #e0e7ff; /* indigo-200 */
--button-hover-bg: #eef2ff; /* indigo-50 */
--button-focus: #a5b4fc; /* indigo-200 */
--button-focus-solid: #4338ca; /* indigo-400 */
--star-color: #facc15; /* yellow-400 */
--img-border: #e2e8f0; /* slate-200 */
--shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -4px rgba(16, 24, 40, 0.1);
--shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--radius-lg: 0.5rem;
--radius-full: 9999px;
--transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
.hero-modern-business {
width: 100%;
background: var(--primary-bg);
font-family: var(--font-sans);
padding: 3rem 1rem;
}
@media (min-width: 640px) {
.hero-modern-business {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 768px) {
.hero-modern-business {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.hero-modern-business__container {
max-width: 80rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
@media (min-width: 768px) {
.hero-modern-business__container {
flex-direction: row;
gap: 4rem;
align-items: stretch;
}
}
.hero-modern-business__content {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
}
@media (min-width: 768px) {
.hero-modern-business__content {
width: 50%;
}
}
.hero-modern-business__badge {
display: inline-block;
padding: 0.25rem 1rem;
margin-bottom: 1rem;
border-radius: var(--radius-full);
background: var(--badge-bg);
color: var(--badge-text);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.025em;
box-shadow: var(--shadow-sm);
}
.hero-modern-business__title {
font-size: 1.875rem;
font-weight: 800;
color: var(--primary-text);
line-height: 1;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.hero-modern-business__title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.hero-modern-business__title {
font-size: 3rem;
}
}
.hero-modern-business__desc {
font-size: 1.125rem;
color: var(--secondary-text);
margin-bottom: 2rem;
max-width: 40rem;
}
@media (min-width: 640px) {
.hero-modern-business__desc {
font-size: 1.25rem;
}
}
.hero-modern-business__actions {
display: flex;
flex-direction: row;
gap: 1rem;
margin-bottom: 1rem;
}
.hero-modern-business__button {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-lg);
font-size: 1rem;
font-weight: 600;
box-shadow: var(--shadow-lg);
border: none;
outline: none;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
text-decoration: none;
position: relative;
}
.hero-modern-business__button--primary {
background: var(--primary-color);
color: #fff;
}
.hero-modern-business__button--primary:hover,
.hero-modern-business__button--primary:focus {
background: var(--primary-color-dark);
}
.hero-modern-business__button--primary:focus {
box-shadow: 0 0 0 2px var(--button-focus-solid), 0 0 0 4px #fff;
}
.hero-modern-business__button--secondary {
background: #fff;
color: var(--primary-color);
border: 1px solid var(--button-border);
}
.hero-modern-business__button--secondary:hover,
.hero-modern-business__button--secondary:focus {
background: var(--button-hover-bg);
color: var(--primary-color-dark);
border-color: var(--primary-color-dark);
}
.hero-modern-business__button--secondary:focus {
box-shadow: 0 0 0 2px var(--button-focus), 0 0 0 4px #fff;
}
.hero-modern-business__avatars {
display: flex;
align-items: center;
gap: 1rem;
max-width: 64rem;
padding: 1rem 0;
justify-content: center;
}
.hero-modern-business__avatar-group {
display: flex;
align-items: center;
}
.hero-modern-business__avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
border: 2px solid #fff;
object-fit: cover;
margin-right: -0.75rem;
box-shadow: 0 0 0 1px var(--img-border);
background: #fff;
}
.hero-modern-business__rating {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hero-modern-business__stars {
display: flex;
align-items: center;
gap: 0.25rem;
}
.hero-modern-business__star {
width: 1.25rem;
height: 1.25rem;
color: var(--star-color);
display: inline-block;
}
.hero-modern-business__rating-text {
font-size: 0.875rem;
}
.hero-modern-business__rating-text .font-semibold {
font-weight: 600;
}
.hero-modern-business__image-wrapper {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.hero-modern-business__image-wrapper {
width: 50%;
margin-bottom: 0;
align-items: center;
}
}
.hero-modern-business__image {
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--img-border);
object-fit: cover;
width: 100%;
height: auto;
max-height: 22.5rem;
background: #fff;
display: block;
}
</style>
<section class="hero-modern-business" aria-label="Business Hero Section">
<div class="hero-modern-business__container">
<div class="hero-modern-business__content">
<span class="hero-modern-business__badge">
Welcome to the business of the future
</span>
<h1 class="hero-modern-business__title">
Empower Your Business<br class="hero-modern-business__br" /> with Smart Solutions
</h1>
<p class="hero-modern-business__desc">
Unlock growth and efficiency with our cutting-edge business platform. Streamline operations, boost productivity, and stay ahead of the competition—all in one place.
</p>
<div class="hero-modern-business__actions">
<a href="#get-started" class="hero-modern-business__button hero-modern-business__button--primary" role="button" aria-label="Get Started">
Get Started
</a>
<a href="#learn-more" class="hero-modern-business__button hero-modern-business__button--secondary" role="button" aria-label="Learn More">
Learn More
</a>
</div>
<div class="hero-modern-business__avatars">
<div class="hero-modern-business__avatar-group">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" class="hero-modern-business__avatar" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" class="hero-modern-business__avatar" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" class="hero-modern-business__avatar" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-11.webp" class="hero-modern-business__avatar" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-9.webp" class="hero-modern-business__avatar" alt="Profile">
</div>
<div class="hero-modern-business__rating">
<div class="hero-modern-business__stars">
<svg class="hero-modern-business__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="hero-modern-business__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="hero-modern-business__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="hero-modern-business__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="hero-modern-business__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
<div class="hero-modern-business__rating-text"><span class="font-semibold">5/5</span> <span>(1200 customers)</span></div>
</div>
</div>
</div>
<div class="hero-modern-business__image-wrapper">
<img src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" width="540" height="360" loading="lazy" alt="Modern business team collaborating in a bright office" class="hero-modern-business__image" />
</div>
</div>
</section>
<!--
@type: Hero
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="w-full bg-slate-50 font-inter font-sans py-12 px-4 sm:px-8 md:py-20" aria-label="Business Hero Section">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-8 md:gap-16">
<div class="w-full md:w-1/2 flex flex-col items-start justify-center text-left">
<span class="inline-block px-4 py-1 mb-4 rounded-full bg-indigo-100 text-indigo-700 text-sm font-medium tracking-wide shadow-sm">
Welcome to the business of the future
</span>
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-slate-900 leading-tight mb-6">
Empower Your Business<br class="hidden sm:inline" /> with Smart Solutions
</h1>
<p class="text-lg sm:text-xl text-slate-600 mb-8 max-w-xl">
Unlock growth and efficiency with our cutting-edge business platform. Streamline operations, boost productivity, and stay ahead of the competition—all in one place.
</p>
<div class="flex flex-row gap-4 mb-4">
<a href="#get-started" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg text-base font-semibold shadow-lg hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="button" aria-label="Get Started">
Get Started
</a>
<a href="#learn-more" class="inline-block bg-white text-indigo-600 px-6 py-3 rounded-lg text-base font-semibold border border-indigo-200 shadow hover:bg-indigo-50 hover:text-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2" role="button" aria-label="Learn More">
Learn More
</a>
</div>
<div class="flex items-center gap-4 max-w-4xl py-4 justify-center">
<div class="flex items-center">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-11.webp" class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-9.webp" class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
</div>
<div class="flex flex-col gap-1">
<div class="flex items-center gap-1">
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
<div class="text-sm"><span class='font-semibold'>5/5</span> <span>(1200 customers)</span></div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 flex items-center justify-center mb-8 md:mb-0">
<!-- Business image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" width="540" height="360" loading="lazy" alt="Modern business team collaborating in a bright office" class="rounded-xl shadow-lg border border-slate-200 object-cover w-full h-auto max-h-[360px]" />
</div>
</div>
</section>
