Component:

About-us SaaS Minimal

Name: About-us SaaS Minimal
Availability: InStock

Free

Tags: About us Page Section Content SaaS Minimal

Colors:

Description:

This carefully crafted About us component is perfect for SaaS 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
@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>

About-us SaaS Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions