<section class="pt-20 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
<div class="relative container mx-auto px-4 mb-20">
<img class="absolute top-1/2 left-0 -mt-8 ml-24 transform scale-125" src="boldui-assets/elements/shadow-team-light-blue.svg" alt="">
<div class="relative z-10 flex flex-wrap justify-center items-center">
<div class="flex-shrink-0 order-first">
<div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
<button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null">
<svg class="w-6 h-6 md:w-5 md:h-5" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99 3.13846H16V5.23077H3.99V8.36923L0 4.18462L3.99 0V3.13846Z" fill="#FFEC3E"></path>
</svg>
</button>
</div>
</div>
<div class="w-full lg:max-w-xl text-center mx-auto">
<span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
<h2 class="mt-6 text-2xl text-white uppercase font-heading">EXECUTE PROVEN TACTICS TO ELEVATE YOUR BRAND'S STEADY PROFITS.</h2>
</div>
<div class="flex-shrink-0 order-first lg:order-last">
<div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
<button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1">
<svg class="w-6 h-6 md:w-5 md:h-5" width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9902 3.70731H0.980225V5.79962H12.9902V8.93808L16.9802 4.75346L12.9902 0.568848V3.70731Z" fill="#FFEC3E"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="overflow-hidden">
<div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
<div x-ref="slide1" class="flex-shrink-0 w-full max-w-md">
<div class="border-b border-t border-r">
<div class="px-8 py-10 text-center">
<span class="block mb-8">
<svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
</svg>
</span>
<img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-1.png" alt="">
<h3 class="text-lg text-white font-heading mb-1">Tom Clarks</h3>
<p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">Product Designer</p>
<p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
</div>
</div>
</div>
<div x-ref="slide2" class="flex-shrink-0 w-full max-w-md">
<div class="border-b border-t border-r">
<div class="px-8 py-10 text-center">
<span class="block mb-8">
<svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
</svg>
</span>
<img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-6.png" alt="">
<h3 class="text-lg text-white font-heading mb-1">Kathy Ramsey</h3>
<p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">Web Developer</p>
<p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
</div>
</div>
</div>
<div x-ref="slide3" class="flex-shrink-0 w-full max-w-md">
<div class="border-b border-t border-r">
<div class="px-8 py-10 text-center">
<span class="block mb-8">
<svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
</svg>
</span>
<img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-2.png" alt="">
<h3 class="text-lg text-white font-heading mb-1">Craig Hoffmann</h3>
<p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">UI Designer</p>
<p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
</div>
</div>
</div>
<div x-ref="slide4" class="flex-shrink-0 w-full max-w-md">
<div class="border-b border-t border-r">
<div class="px-8 py-10 text-center">
<span class="block mb-8">
<svg class="mx-auto" width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.8203 25.7201C29.5781 25.7201 28.4297 25.5209 27.375 25.1224C26.3438 24.724 25.4531 24.1498 24.7031 23.3998C23.9531 22.6263 23.3672 21.7006 22.9453 20.6224C22.5234 19.5443 22.3125 18.3256 22.3125 16.9662C22.3125 13.8959 23.3555 10.9662 25.4414 8.17712C27.5508 5.36462 30.6094 2.86853 34.6172 0.688843L38.4844 6.20837C37.4297 6.77087 36.4922 7.32166 35.6719 7.86072C34.875 8.39978 34.1719 8.95056 33.5625 9.51306C32.9766 10.0756 32.4609 10.6615 32.0156 11.2709C31.5938 11.8568 31.207 12.4896 30.8555 13.1693C32.0039 13.1693 33.0352 13.3334 33.9492 13.6615C34.8867 13.9896 35.6836 14.4467 36.3398 15.0326C37.0195 15.5951 37.5352 16.2631 37.8867 17.0365C38.2617 17.7865 38.4492 18.5951 38.4492 19.4623C38.4492 20.3295 38.2617 21.1498 37.8867 21.9232C37.5352 22.6732 37.0195 23.3295 36.3398 23.892C35.6836 24.4545 34.8867 24.8998 33.9492 25.2279C33.0117 25.556 31.9688 25.7201 30.8203 25.7201ZM8.95312 25.7201C7.71094 25.7201 6.5625 25.5209 5.50781 25.1224C4.47656 24.724 3.58594 24.1498 2.83594 23.3998C2.08594 22.6263 1.5 21.7006 1.07812 20.6224C0.65625 19.5443 0.445312 18.3256 0.445312 16.9662C0.445312 13.8959 1.48828 10.9662 3.57422 8.17712C5.68359 5.36462 8.74219 2.86853 12.75 0.688843L16.6172 6.20837C15.5625 6.77087 14.625 7.32166 13.8047 7.86072C13.0078 8.39978 12.3047 8.95056 11.6953 9.51306C11.1094 10.0756 10.5938 10.6615 10.1484 11.2709C9.72656 11.8568 9.33984 12.4896 8.98828 13.1693C10.1367 13.1693 11.168 13.3334 12.082 13.6615C13.0195 13.9896 13.8164 14.4467 14.4727 15.0326C15.1523 15.5951 15.668 16.2631 16.0195 17.0365C16.3945 17.7865 16.582 18.5951 16.582 19.4623C16.582 20.3295 16.3945 21.1498 16.0195 21.9232C15.668 22.6732 15.1523 23.3295 14.4727 23.892C13.8164 24.4545 13.0195 24.8998 12.082 25.2279C11.1445 25.556 10.1016 25.7201 8.95312 25.7201Z" fill="#FFEC3E"></path>
</svg>
</span>
<img class="h-64 mx-auto mb-4" src="boldui-assets/images/team-3.png" alt="">
<h3 class="text-lg text-white font-heading mb-1">Eric Farrel</h3>
<p class="mb-4 text-sm text-gray-500 uppercase font-semibold tracking-widest">Product Designer</p>
<p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
</div>
</div>
</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
