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