Component:
About-us Business Modern
Colors:
Description:
This carefully crafted About us 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: About Us
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-300: #cbd5e1;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
--content-max-width: 48rem; /* max-w-3xl */
}
/* Reset */
* {
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";
}
/* Component styles */
.about-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) 0;
}
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
max-width: var(--content-max-width);
margin: 0 auto var(--spacing-10);
text-align: center;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
line-height: 1;
}
.section-description {
font-size: 1.125rem;
color: var(--color-slate-600);
}
.content-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-12);
align-items: center;
margin-bottom: var(--spacing-16);
}
.content-text {
order: 2;
}
.content-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.content-text p {
color: var(--color-slate-600);
margin-bottom: var(--spacing-6);
line-height: 1.5;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
margin-top: var(--spacing-8);
}
.primary-button {
display: inline-flex;
align-items: center;
background-color: var(--color-indigo-600);
color: var(--color-white);
padding: var(--spacing-4) var(--spacing-6);
border-radius: 0.5rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s;
}
.primary-button:hover {
background-color: var(--color-indigo-700);
}
.primary-button svg {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
.secondary-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-4) var(--spacing-6);
border: 1px solid var(--color-slate-300);
color: var(--color-slate-700);
border-radius: 0.5rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s;
}
.secondary-button:hover {
background-color: var(--color-slate-50);
}
.content-image {
order: 1;
}
.content-image img {
width: 100%;
height: auto;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
object-fit: cover;
}
/* Responsive styles */
@media (min-width: 768px) {
.about-section {
padding: var(--spacing-24) 0;
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.content-grid {
grid-template-columns: 1fr 1fr;
}
.content-text {
order: 1;
}
.content-image {
order: 2;
}
}
</style>
<section class="about-section">
<div class="container">
<!-- Section heading -->
<div class="section-header">
<h2 class="section-title">Our mission is to empower businesses with innovative solutions</h2>
<p class="section-description">We combine industry expertise with cutting-edge technology to drive growth and success for our clients.</p>
</div>
<!-- Company story -->
<div class="content-grid">
<div class="content-text">
<h3>Our Story</h3>
<p>Founded in 2015, Modern Business Solutions began with a simple vision: to help companies navigate the increasingly complex digital landscape. What started as a small consulting firm has grown into a comprehensive business services provider with clients across multiple industries.</p>
<p>Our team of experts brings decades of combined experience in business strategy, technology implementation, and operational excellence. We believe in building long-term partnerships with our clients, understanding their unique challenges, and delivering tailored solutions that drive measurable results.</p>
<div class="button-group">
<a href="#" class="primary-button">
Learn more about us
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="secondary-button">Contact our team</a>
</div>
</div>
<div class="content-image">
<!-- Team image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-4.webp"
alt="Our leadership team discussing business strategy"
width="1620"
height="1080"
loading="lazy"
/>
</div>
</div>
</div>
</section>
<!--
@type: About Us
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 md:py-24">
<div class="container mx-auto px-4 max-w-7xl">
<!-- Section heading -->
<div class="max-w-3xl mx-auto text-center mb-10">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Our mission is to empower businesses with innovative solutions</h2>
<p class="text-lg text-slate-600">We combine industry expertise with cutting-edge technology to drive growth and success for our clients.</p>
</div>
<!-- Company story -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
<div class="order-2 lg:order-1">
<h3 class="text-2xl font-bold text-slate-900 mb-4">Our Story</h3>
<p class="text-slate-600 mb-6">Founded in 2015, Modern Business Solutions began with a simple vision: to help companies navigate the increasingly complex digital landscape. What started as a small consulting firm has grown into a comprehensive business services provider with clients across multiple industries.</p>
<p class="text-slate-600 mb-6">Our team of experts brings decades of combined experience in business strategy, technology implementation, and operational excellence. We believe in building long-term partnerships with our clients, understanding their unique challenges, and delivering tailored solutions that drive measurable results.</p>
<div class="flex flex-wrap gap-4 mt-8">
<a href="#" class="inline-flex items-center bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium">
Learn more about us
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="inline-flex items-center px-6 py-3 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-100 transition-colors font-medium">
Contact our team
</a>
</div>
</div>
<div class="order-1 lg:order-2">
<!-- Team image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-4.webp"
alt="Our leadership team discussing business strategy"
class="rounded-xl shadow-lg w-full h-auto object-cover"
width="1620"
height="1080"
loading="lazy"
/>
</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