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