Component:
About-us Software Minimal
Colors:
Description:
This carefully crafted About us component is perfect for Software landing pages, featuring a Minimal 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: About Us, Team
@industry: Software
@style: Minimal
@category: Page Section, Company
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-50: #eef2ff;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-green-500: #22c55e;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.about-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.about-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.about-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.timeline {
position: relative;
max-width: 64rem;
margin: 0 auto;
}
.timeline-line {
position: absolute;
top: 0;
height: 100%;
width: 1px;
background-color: var(--color-gray-300);
display: none;
}
@media (min-width: 1024px) {
.timeline-line {
display: block;
left: 50%;
transform: translateX(-50%);
}
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
}
@media (min-width: 1024px) {
.timeline-item {
margin-bottom: 4rem;
}
.timeline-item-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.timeline-item:nth-child(even) .timeline-content {
grid-column-start: 2;
}
}
.timeline-content {
position: relative;
padding-left: 4rem;
}
@media (min-width: 1024px) {
.timeline-item:nth-child(even) .timeline-content {
padding-left: 0;
}
}
.timeline-number {
position: absolute;
left: 0;
top: 0;
height: 3.5rem;
width: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--color-indigo-50);
}
@media (min-width: 1024px) {
.timeline-item:nth-child(even) .timeline-number {
left: auto;
right: 100%;
margin-right: 2rem;
}
}
.timeline-number span {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.timeline-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.timeline-description {
margin-top: 0.5rem;
font-size: 1rem;
color: var(--color-gray-600);
}
.about-us-team-section {
margin-top: 6rem;
}
.team-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 3rem;
}
.team-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gray-900);
}
.team-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 640px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.team-member {
text-align: center;
}
.member-image-wrapper {
position: relative;
width: 10rem;
height: 10rem;
margin: 0 auto;
overflow: hidden;
border-radius: 9999px;
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-name {
margin-top: 1rem;
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.member-role {
font-size: 1rem;
color: var(--color-gray-600);
}
.member-bio {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
.cta-section {
margin-top: 3rem;
text-align: center;
}
.status-badge {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-gray-200);
border-radius: 9999px;
background-color: var(--color-white);
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.status-dot {
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background-color: var(--color-green-500);
margin-right: 0.5rem;
}
.about-us-cta-button-wrapper {
margin-top: 2rem;
}
.about-us-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
border-radius: 0.375rem;
background-color: var(--color-indigo-600);
color: var(--color-white);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: background-color 0.2s;
}
.about-us-cta-button:hover {
background-color: var(--color-indigo-700);
}
.about-us-cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.about-us-cta-note {
margin-top: 0.75rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
</style>
<section class="about-section" aria-labelledby="about-heading">
<div class="container">
<!-- Section Header -->
<div class="about-header">
<span class="header-badge">Our Story</span>
<h2 id="about-heading" class="header-title">
Built by small business owners, for small business owners
</h2>
<p class="header-description">
We understand the unique challenges of running a small business because we've been there ourselves
</p>
</div>
<!-- Story Timeline -->
<div class="timeline">
<div class="timeline-line" aria-hidden="true"></div>
<!-- Timeline Item 1 -->
<div class="timeline-item">
<div class="timeline-item-content">
<div class="timeline-content">
<div class="timeline-number">
<span>1</span>
</div>
<h3 class="timeline-title">The Beginning</h3>
<p class="timeline-description">
Started in 2019 by three small business owners who were frustrated with complex, expensive software that wasn't built for their needs.
</p>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item">
<div class="timeline-item-content">
<div class="timeline-content">
<div class="timeline-number">
<span>2</span>
</div>
<h3 class="timeline-title">First Version Launch</h3>
<p class="timeline-description">
Released our first version in 2020, focusing on the core features that small businesses actually need, without the enterprise complexity.
</p>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item">
<div class="timeline-item-content">
<div class="timeline-content">
<div class="timeline-number">
<span>3</span>
</div>
<h3 class="timeline-title">Growing Community</h3>
<p class="timeline-description">
Today, we serve over 3,000 small businesses worldwide, with a focus on making business operations simple and efficient.
</p>
</div>
</div>
</div>
</div>
<!-- Team Section -->
<div class="about-us-team-section">
<div class="team-header">
<h3 class="team-title">Meet Our Leadership</h3>
<p class="team-description">
A team of entrepreneurs who understand the challenges of running a small business
</p>
</div>
<div class="team-grid">
<!-- Team Member 1 -->
<div class="team-member">
<div class="member-image-wrapper">
<img class="member-image" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Chen" loading="lazy">
</div>
<h4 class="member-name">Sarah Chen</h4>
<p class="member-role">CEO & Co-founder</p>
<p class="member-bio">Former small business owner with 15 years of experience in retail</p>
</div>
<!-- Team Member 2 -->
<div class="team-member">
<div class="member-image-wrapper">
<img class="member-image" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="Michael Rodriguez" loading="lazy">
</div>
<h4 class="member-name">Michael Rodriguez</h4>
<p class="member-role">CTO & Co-founder</p>
<p class="member-bio">20+ years in software development and small business solutions</p>
</div>
<!-- Team Member 3 -->
<div class="team-member">
<div class="member-image-wrapper">
<img class="member-image" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Emily Taylor" loading="lazy">
</div>
<h4 class="member-name">Emily Taylor</h4>
<p class="member-role">COO & Co-founder</p>
<p class="member-bio">Former consultant specializing in small business operations</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<div class="status-badge">
<span class="status-dot"></span>
<span>Currently supporting 3,000+ small businesses</span>
</div>
<div class="about-us-cta-button-wrapper">
<a href="#contact" class="about-us-cta-button" role="button" aria-label="Get in touch with our team">
Get in touch with our team
</a>
<p class="about-us-cta-note">Let's discuss how we can help your business grow</p>
</div>
</div>
</div>
</section>
<!--
@type: About Us, Team
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="about-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Our Story</span>
<h2
id="about-heading"
class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
>
Built by small business owners, for small business owners
</h2>
<p class="mt-4 text-lg text-gray-600">
We understand the unique challenges of running a small business because
we've been there ourselves
</p>
</div>
<!-- Story Timeline -->
<div class="relative mx-auto max-w-4xl">
<div
class="absolute top-0 hidden lg:block left-12 h-full w-px bg-gray-300 lg:left-1/2 lg:-ml-px"
aria-hidden="true"
></div>
<!-- Timeline Item 1 -->
<div class="relative mb-12 lg:mb-16">
<div class="lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
<div class="relative lg:col-start-2">
<div class="relative pl-16 lg:pl-0">
<div
class="flex absolute left-0 top-0 -ml h-14 w-14 items-center justify-center rounded-full bg-indigo-50 lg:ml-0 lg:left-auto lg:right-full lg:mr-8"
>
<span class="text-xl font-semibold text-indigo-600">1</span>
</div>
<h3 class="text-lg font-medium text-gray-900">The Beginning</h3>
<p class="mt-2 text-base text-gray-600">
Started in 2019 by three small business owners who were
frustrated with complex, expensive software that wasn't built
for their needs.
</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative mb-12 lg:mb-16">
<div class="lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
<div class="relative">
<div class="relative pl-16">
<div
class="flex absolute left-0 top-0 -ml h-14 w-14 items-center justify-center rounded-full bg-indigo-50"
>
<span class="text-xl font-semibold text-indigo-600">2</span>
</div>
<h3 class="text-lg font-medium text-gray-900">
First Version Launch
</h3>
<p class="mt-2 text-base text-gray-600">
Released our first version in 2020, focusing on the core
features that small businesses actually need, without the
enterprise complexity.
</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative mb-12 lg:mb-16">
<div class="lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
<div class="relative lg:col-start-2">
<div class="relative pl-16 lg:pl-0">
<div
class="flex absolute left-0 top-0 -ml h-14 w-14 items-center justify-center rounded-full bg-indigo-50 lg:ml-0 lg:left-auto lg:right-full lg:mr-8"
>
<span class="text-xl font-semibold text-indigo-600">3</span>
</div>
<h3 class="text-lg font-medium text-gray-900">
Growing Community
</h3>
<p class="mt-2 text-base text-gray-600">
Today, we serve over 3,000 small businesses worldwide, with a
focus on making business operations simple and efficient.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Team Section -->
<div class="mt-24">
<div class="mx-auto max-w-3xl text-center mb-12">
<h3 class="text-2xl font-bold text-gray-900">Meet Our Leadership</h3>
<p class="mt-4 text-lg text-gray-600">
A team of entrepreneurs who understand the challenges of running a
small business
</p>
</div>
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<!-- Team Member 1 -->
<div class="text-center">
<div class="relative mx-auto h-40 w-40 overflow-hidden rounded-full">
<img
class="h-full w-full object-cover"
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Chen"
loading="lazy"
/>
</div>
<h4 class="mt-4 text-lg font-medium text-gray-900">Sarah Chen</h4>
<p class="text-base text-gray-600">CEO & Co-founder</p>
<p class="mt-2 text-sm text-gray-500">
Former small business owner with 15 years of experience in retail
</p>
</div>
<!-- Team Member 2 -->
<div class="text-center">
<div class="relative mx-auto h-40 w-40 overflow-hidden rounded-full">
<img
class="h-full w-full object-cover"
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Michael Rodriguez"
loading="lazy"
/>
</div>
<h4 class="mt-4 text-lg font-medium text-gray-900">
Michael Rodriguez
</h4>
<p class="text-base text-gray-600">CTO & Co-founder</p>
<p class="mt-2 text-sm text-gray-500">
20+ years in software development and small business solutions
</p>
</div>
<!-- Team Member 3 -->
<div class="text-center">
<div class="relative mx-auto h-40 w-40 overflow-hidden rounded-full">
<img
class="h-full w-full object-cover"
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="Emily Taylor"
loading="lazy"
/>
</div>
<h4 class="mt-4 text-lg font-medium text-gray-900">Emily Taylor</h4>
<p class="text-base text-gray-600">COO & Co-founder</p>
<p class="mt-2 text-sm text-gray-500">
Former consultant specializing in small business operations
</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 text-center">
<div
class="inline-flex items-center rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-600"
>
<span class="flex h-2 w-2 rounded-full bg-green-500"></span>
<span class="ml-2">Currently supporting 3,000+ small businesses</span>
</div>
<div class="mt-8">
<a
href="#contact"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
role="button"
aria-label="Get in touch with our team"
>
Get in touch with our team
</a>
<p class="mt-3 text-sm text-gray-500">
Let's discuss how we can help your business grow
</p>
</div>
</div>
</div>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page