<!--
@type: Team Section
@industry: SaaS
@style: Minimal
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-600: #2563eb;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--max-width-3xl: 48rem;
--max-width-7xl: 80rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
.team-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
font-family: var(--font-sans);
}
.team-container {
max-width: var(--max-width-7xl);
margin: 0 auto;
}
/* Header Styles */
.team-header {
text-align: center;
max-width: var(--max-width-3xl);
margin: 0 auto var(--spacing-16);
}
.team-label {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--color-blue-600);
text-transform: uppercase;
margin-bottom: var(--spacing-3);
}
.team-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-4);
}
.team-description {
font-size: 1.125rem;
color: var(--color-gray-600);
}
/* Team Grid */
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-12);
margin-bottom: var(--spacing-16);
}
/* Team Member Card */
.team-member {
display: flex;
flex-direction: column;
align-items: center;
}
.member-image-container {
position: relative;
width: 100%;
margin-bottom: var(--spacing-6);
aspect-ratio: 4/5;
border-radius: 0.5rem;
overflow: hidden;
background-color: var(--color-gray-100);
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-name {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 0.25rem;
}
.member-role {
font-size: 0.875rem;
color: var(--color-blue-600);
margin-bottom: var(--spacing-3);
}
.member-bio {
font-size: 1rem;
color: var(--color-gray-600);
text-align: center;
margin-bottom: var(--spacing-4);
}
/* Social Links */
.social-links {
display: flex;
gap: var(--spacing-4);
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s ease;
}
.social-link:hover {
color: var(--color-gray-600);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.team-section {
padding: 4rem var(--spacing-6);
}
.team-title {
font-size: 2.25rem;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-section {
padding: 5rem var(--spacing-8);
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="team-section" aria-labelledby="team-heading">
<div class="team-container">
<!-- Section Header -->
<div class="team-header">
<p class="team-label">Our Team</p>
<h2 id="team-heading" class="team-title">Meet the innovators behind our success</h2>
<p class="team-description">We're a diverse team of talented individuals working together to revolutionize the SaaS industry with innovative solutions.</p>
</div>
<!-- Leadership Team Grid -->
<div class="team-grid">
<!-- Team Member 1 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
alt="Sarah Johnson - CEO"
class="member-image"
loading="lazy">
</div>
<h3 class="member-name">Sarah Johnson</h3>
<p class="member-role">Chief Executive Officer</p>
<p class="member-bio">Former VP of Product at Salesforce with 15+ years of SaaS experience.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Sarah Johnson's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Sarah Johnson's Twitter profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 2 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp"
alt="Michael Chen - CTO"
class="member-image"
loading="lazy">
</div>
<h3 class="member-name">Michael Chen</h3>
<p class="member-role">Chief Technology Officer</p>
<p class="member-bio">Ex-Google engineer specializing in AI and cloud infrastructure.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Michael Chen's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Michael Chen's GitHub profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp"
alt="Emily Rodriguez - Head of Design"
class="member-image"
loading="lazy">
</div>
<h3 class="member-name">Emily Rodriguez</h3>
<p class="member-role">Head of Design</p>
<p class="member-bio">Award-winning designer focused on creating intuitive user experiences.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Emily Rodriguez's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Emily Rodriguez's Dribbble profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Team Section
@industry: SaaS
@style: Minimal
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" aria-labelledby="team-heading">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<p class="text-sm font-semibold tracking-wide text-blue-600 uppercase mb-3">Our Team</p>
<h2 id="team-heading" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Meet the innovators behind our success</h2>
<p class="text-lg text-gray-600">We're a diverse team of talented individuals working together to revolutionize the SaaS industry with innovative solutions.</p>
</div>
<!-- Leadership Team Grid -->
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3 mb-16">
<!-- Team Member 1 -->
<div class="flex flex-col items-center">
<div class="relative mb-6 w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-100">
<!-- Team member image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
alt="Sarah Johnson - CEO"
class="w-full h-full object-cover"
loading="lazy">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Sarah Johnson</h3>
<p class="text-sm text-blue-600 mb-3">Chief Executive Officer</p>
<p class="text-base text-gray-600 text-center mb-4">Former VP of Product at Salesforce with 15+ years of SaaS experience.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Sarah Johnson's LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Sarah Johnson's Twitter profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 2 -->
<div class="flex flex-col items-center">
<div class="relative mb-6 w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-100">
<!-- Team member image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp"
alt="Michael Chen - CTO"
class="w-full h-full object-cover"
loading="lazy">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Michael Chen</h3>
<p class="text-sm text-blue-600 mb-3">Chief Technology Officer</p>
<p class="text-base text-gray-600 text-center mb-4">Ex-Google engineer specializing in AI and cloud infrastructure.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Michael Chen's LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Michael Chen's GitHub profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="flex flex-col items-center">
<div class="relative mb-6 w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-100">
<!-- Team member image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp"
alt="Emily Rodriguez - Head of Design"
class="w-full h-full object-cover"
loading="lazy">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Emily Rodriguez</h3>
<p class="text-sm text-blue-600 mb-3">Head of Design</p>
<p class="text-base text-gray-600 text-center mb-4">Award-winning designer focused on creating intuitive user experiences.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Emily Rodriguez's LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Emily Rodriguez's Dribbble profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
