<section x-data="{ activeSlide: 1, slideCount: 3 }" class="bg-neutral-50 py-12 md:py-24">
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-4 mb-14">
<div class="w-full lg:w-1/2 p-4">
<h1 class="text-6xl sm:text-9xl xl:text-11xl font-semibold mb-16 font-heading">Team</h1>
<p class="text-neutral-600 text-2xl font-semibold tracking-tight max-w-md">At the heart of our success is a diverse and talented team.</p>
</div>
<div class="w-full lg:w-1/2 p-4">
<h2 class="text-3xl sm:text-4xl xl:text-6xl font-semibold relative mb-12 max-w-md sm:max-w-lg lg:max-w-2xl tracking-tight font-heading">
<span class="mr-1.5">Our dedicated team of experts collaborates passionately to drive innovation and achieve</span>
<span class="relative inline-block">
<span class="relative z-10">outstanding results.</span>
<span class="absolute -bottom-4 left-0 h-2.5 w-full bg-green-100 rounded-full"></span>
</span>
</h2>
<p class="text-neutral-600 text-2xl font-semibold max-w-2xl tracking-tight">At the heart of our success is a diverse and talented team, united by a shared commitment to excellence.</p>
</div>
</div>
<div class="relative">
<div class="absolute z-10 right-6 md:left-0 top-14 h-112 w-full md:flex md:flex-col md:justify-center md:ml-6">
<div class="relative">
<a x-show="activeSlide > 1" x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="visibility-item absolute top-1/2 right-14 transform -translate-y-1/2 flex items-center justify-center w-12 h-16 bg-neutral-900 hover:bg-opacity-80 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 18L10.2915 16.7463L3.4452 9.9L18 9.9L18 8.1L3.4452 8.1L10.2726 1.2726L9 3.02789e-06L7.86805e-07 9L9 18Z" fill="white"></path>
</svg>
</a>
<a x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="absolute top-1/2 right-0 transform -translate-y-1/2 flex items-center justify-center w-12 h-16 bg-neutral-900 hover:bg-opacity-80 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0L7.7085 1.2537L14.5548 8.1L0 8.1L0 9.9L14.5548 9.9L7.7274 16.7274L9 18L18 9L9 0Z" fill="white"></path>
</svg>
</a>
</div>
</div>
<div class="mb-20 relative overflow-hidden">
<div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
<div class="inline-block w-full h-full whitespace-normal">
<div class="flex flex-wrap -m-5">
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/faq/picture4.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Laureen Smith</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image2.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Hanna I. Keaton</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image3.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Henrick Beeman</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Art Director</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
</div>
</div>
<div class="visibility-item inline-block w-full h-full whitespace-normal">
<div class="flex flex-wrap -m-5">
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/faq/picture4.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Oliver Hawthorne</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image2.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Cola Puncanno</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image3.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Mason Archer</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Art Director</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
</div>
</div>
<div class="visibility-item inline-block w-full h-full whitespace-normal">
<div class="flex flex-wrap -m-5">
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/faq/picture4.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Maya Winslow</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image2.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Isabella Sterling</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Co-Founder</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<img class="rounded-4xl h-112 w-full object-cover" src="mirga-assets/images/team/card-image3.png" alt="">
<div class="bg-white rounded-5xl p-10">
<h6 class="text-3xl font-semibold mb-4 tracking-tight font-heading">Mark Johanson Jr</h6>
<p class="text-neutral-600 text-xl font-medium mb-8 tracking-tight">Art Director</p>
<a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="w-auto"><a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">More</a></div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
