<!--
@type: About Us
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--blue-600: #2563eb;
--gray-600: #4b5563;
--gray-900: #111827;
/* Spacing */
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
}
/* 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: white;
padding: 3rem 1rem;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 1rem;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-tag {
color: var(--blue-600);
font-weight: 500;
margin-bottom: var(--spacing-3);
}
.section-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--gray-900);
margin-bottom: 1rem;
}
.content-grid {
margin-bottom: 4rem;
}
.content-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.content-text p {
color: var(--gray-600);
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.feature-icon {
height: 1.5rem;
width: 1.5rem;
color: var(--blue-600);
margin-top: 0.25rem;
flex-shrink: 0;
}
.feature-text {
margin-left: 0.75rem;
color: var(--gray-600);
}
.content-image img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* Responsive styles */
@media (min-width: 640px) {
.about-section {
padding: 4rem 1.5rem;
}
.container {
padding: 0 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.section-header {
margin-bottom: 4rem;
}
.content-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
align-items: center;
}
.content-text {
order: 1;
}
.content-image {
order: 2;
}
}
@media (min-width: 1024px) {
.about-section {
padding: 5rem 2rem;
}
.container {
padding: 0 2rem;
}
}
</style>
<section class="about-section" aria-labelledby="about-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<p class="section-tag">Our Story</p>
<h2 id="about-heading" class="section-title">
Transforming Business Operations Through Intelligent Automation
</h2>
</div>
<!-- Content Grid -->
<div class="content-grid">
<div class="content-text">
<h3>Empowering Businesses with Smart Solutions</h3>
<p>
Founded in 2018, AutomatePro has been at the forefront of business process automation. We combine artificial intelligence with deep industry expertise to deliver solutions that transform how organizations operate.
</p>
<ul class="feature-list">
<li class="feature-item">
<svg class="feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="feature-text">Intelligent workflow automation that adapts to your business</span>
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="feature-text">Real-time analytics and performance insights</span>
</li>
<li class="feature-item">
<svg class="feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="feature-text">Enterprise-grade security and compliance</span>
</li>
</ul>
</div>
<div class="content-image">
<img
src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
alt="Our team collaborating on automation solutions"
width="1620"
height="1080"
loading="lazy"
/>
</div>
</div>
</div>
</section>
<!--
@type: About Us
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" aria-labelledby="about-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-12 md:mb-16">
<p class="text-blue-600 font-medium mb-3">Our Story</p>
<h2 id="about-heading" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Transforming Business Operations Through Intelligent Automation
</h2>
</div>
<!-- Content Grid -->
<div class="grid md:grid-cols-2 gap-12 items-center mb-16">
<div class="order-2 md:order-1">
<h3 class="text-2xl font-bold text-gray-900 mb-4">
Empowering Businesses with Smart Solutions
</h3>
<p class="text-gray-600 mb-6">
Founded in 2018, AutomatePro has been at the forefront of business process automation. We combine artificial intelligence with deep industry expertise to deliver solutions that transform how organizations operate.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-blue-600 mt-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="ml-3 text-gray-600">Intelligent workflow automation that adapts to your business</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-blue-600 mt-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="ml-3 text-gray-600">Real-time analytics and performance insights</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-blue-600 mt-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="ml-3 text-gray-600">Enterprise-grade security and compliance</span>
</li>
</ul>
</div>
<div class="order-1 md:order-2">
<!-- Team image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
alt="Our team collaborating on automation solutions"
class="rounded-lg shadow-lg w-full"
width="1620"
height="1080"
loading="lazy"
/>
</div>
</div>
</div>
</section>
