<!--
@type: Team
@industry: Product
@style: Light
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--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;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.team-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
}
.team-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: 1.125rem;
color: var(--color-gray-600);
max-width: var(--content-max-width);
margin: 0 auto;
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.team-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
text-align: center;
}
.member-image-wrapper {
width: 6rem;
height: 6rem;
border-radius: 9999px;
margin: 0 auto var(--spacing-6) auto;
overflow: hidden;
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-name {
font-size: 1.25rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-1);
}
.member-title {
color: var(--color-blue-600);
margin-bottom: var(--spacing-4);
}
.member-bio {
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.social-links {
display: flex;
justify-content: center;
gap: var(--spacing-4);
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s ease;
}
.social-link:hover {
color: var(--color-blue-600);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.team-section {
padding: var(--spacing-24) 0;
}
.team-container {
padding: 0 var(--spacing-6);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-container {
padding: 0 var(--spacing-8);
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="team-section">
<div class="team-container">
<!-- Section header -->
<div class="section-header">
<h2 class="section-title">Meet Our Leadership</h2>
<p class="section-description">Our diverse team brings decades of experience from design, technology, and business.</p>
</div>
<div>
<div class="team-grid">
<!-- Team member 1 -->
<div class="team-card">
<div class="member-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Chen, CEO"
class="member-image"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="member-name">Sarah Chen</h4>
<p class="member-title">CEO & Co-founder</p>
<p class="member-bio">Former design lead at Figma with 15+ years of experience in product design and UX strategy.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Sarah Chen's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Sarah Chen's Twitter profile">
<svg xmlns="http://www.w3.org/2000/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-card">
<div class="member-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Marcus Johnson, CTO"
class="member-image"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="member-name">Marcus Johnson</h4>
<p class="member-title">CTO & Co-founder</p>
<p class="member-bio">Previously engineering lead at Adobe with expertise in WebGL, Canvas APIs, and performance optimization.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Marcus Johnson's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Marcus Johnson's GitHub profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Team member 3 -->
<div class="team-card">
<div class="member-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="Aisha Patel, COO"
class="member-image"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="member-name">Aisha Patel</h4>
<p class="member-title">COO</p>
<p class="member-bio">Former operations director at Canva with expertise in scaling design-focused SaaS businesses globally.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Aisha Patel's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Aisha Patel's Twitter profile">
<svg xmlns="http://www.w3.org/2000/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>
</div>
</div>
</div>
</section>
<!--
@type: Team
@industry: Product
@style: Light
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section header -->
<div class="text-center mb-16">
<h2 class="text-3xl font-medium text-gray-800 mb-4">Meet Our Leadership</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Our diverse team brings decades of experience from design, technology, and business.</p>
</div>
<div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Team member 1 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center">
<div class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden">
<!-- Team member image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Chen, CEO"
class="w-full h-full object-cover"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="text-xl font-normal text-gray-800 mb-1">Sarah Chen</h4>
<p class="text-blue-600 mb-4">CEO & Co-founder</p>
<p class="text-gray-600 mb-6">Former design lead at Figma with 15+ years of experience in product design and UX strategy.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Sarah Chen's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Sarah Chen's Twitter profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-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="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center">
<div class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden">
<!-- Team member image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Marcus Johnson, CTO"
class="w-full h-full object-cover"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="text-xl font-normal text-gray-800 mb-1">Marcus Johnson</h4>
<p class="text-blue-600 mb-4">CTO & Co-founder</p>
<p class="text-gray-600 mb-6">Previously engineering lead at Adobe with expertise in WebGL, Canvas APIs, and performance optimization.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Marcus Johnson's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Marcus Johnson's GitHub profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Team member 3 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center">
<div class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden">
<!-- Team member image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="Aisha Patel, COO"
class="w-full h-full object-cover"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="text-xl font-normal text-gray-800 mb-1">Aisha Patel</h4>
<p class="text-blue-600 mb-4">COO</p>
<p class="text-gray-600 mb-6">Former operations director at Canva with expertise in scaling design-focused SaaS businesses globally.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Aisha Patel's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Aisha Patel's Twitter profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-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>
</div>
</div>
</div>
</section>
