Team UI Components – Flow Library

<section x-data="{ activeSlide: 1, slideCount: 2 }" class="py-12 lg:py-24 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center mb-12 md:mb-20 -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                    <div>
                        <h1 class="font-heading text-5xl sm:text-6xl mb-4">Meet our experts</h1>
                        <p class="text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide = 1" class="inline-block text-gray-800 mr-1">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g opacity="0.4">
                                <path d="M17.5 29.1667L8.33333 20.0001L17.5 10.8334" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M8.33329 20L31.6666 20" stroke="currentColor" stroke-width="1.5"></path>
                                </g>
                            </svg>                                
                        </button>
                        <button x-on:click.prevent="activeSlide = 2" class="inline-block text-black hover:text-lime-500">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.5 10.8333L31.6667 19.9999L22.5 29.1666" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M31.6666 20H8.33331" stroke="currentColor" stroke-width="1.5"></path>
                            </svg>                                
                        </button>
                    </div>
                </div>
            </div>
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="flex transition-transform duration-1000 ease-in-out">
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Jenny Wilson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-1.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Cameron Williamson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-2.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Courtney Henry</span>
                            <span class="text-sm text-gray-700">Energy Analysts</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-3.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Dianne Russell</span>
                            <span class="text-sm text-gray-700">Senior Renewable Energy Engineer</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-4.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Jenny Wilson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-1.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Cameron Williamson</span>
                            <span class="text-sm text-gray-700">Senior Sustainability Consultant</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-2.png" alt="">
                </div>
                <div class="relative flex-shrink-0 w-full sm:w-87 h-full sm:h-112 mr-8 overflow-hidden">
                    <div class="absolute bottom-0 left-0 w-full p-4">
                        <div class="p-4 bg-white rounded-xl">
                            <span class="block font-medium">Courtney Henry</span>
                            <span class="text-sm text-gray-700">Energy Analysts</span>
                        </div>
                    </div>
                    <img class="block w-full h-full object-cover rounded-2xl" src="flow-assets/team/photo-worker-3.png" alt="">
                </div>
            </div>
        </div>
    </section>