Component:

Hero Business Modern

Name: Hero Business Modern
Availability: InStock

Free

Tags: Hero Page Section Content Sale Business Modern

Colors:

Description:

This carefully crafted Hero component is perfect for Business landing pages, featuring a Modern 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: 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>

Hero Business Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions