<section class="relative py-20" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
<img class="hidden lg:block absolute top-0 left-0 mt-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<img class="hidden lg:block absolute bottom-0 right-0 mb-20" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
<div class="container px-4 mx-auto">
<div class="max-w-2xl mx-auto text-center mb-12">
<span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
<h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
<div class="max-w-max mb-6 md:mb-14 mx-auto text-center md:border-b">
<button x-ref="tab1" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold border-b-2 border-red-500" :class="{'border-b-2 border-red-500': $refs.tab1.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
<button x-ref="tab2" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab2.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab2.textContent != tab}" x-on:click="tab = $refs.tab2.textContent">Payments</button>
<button x-ref="tab3" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab3.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab3.textContent != tab}" x-on:click="tab = $refs.tab3.textContent">Returns</button>
<button x-ref="tab4" class="text-sm pb-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab4.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab4.textContent != tab}" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
</div>
<div class="max-w-3xl mx-auto">
<ul>
<li class="px-6 py-8 border-b" x-data="{ accordion: false }">
<button class="w-full flex justify-between items-center text-left font-semibold font-heading" x-on:click="accordion = !accordion">
<span class="text-2xl font-semibold font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
<span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
<svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</button>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-4 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</li>
<li class="px-6 py-8 border-b" x-data="{ accordion: false }">
<button class="w-full flex justify-between items-center text-left font-semibold font-heading" x-on:click="accordion = !accordion">
<span class="text-2xl font-semibold font-heading">Donec sed leo sit amet ante ornare laoreet in quis est?</span>
<span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
<svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</button>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-4 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
</div>
</li>
<li class="px-6 py-8 border-b" x-data="{ accordion: false }">
<button class="w-full flex justify-between items-center text-left font-semibold font-heading" x-on:click="accordion = !accordion">
<span class="text-2xl font-semibold font-heading">Mauris vitae ex ut lectus cursus ornare?</span>
<span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
<svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</button>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-4 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
</div>
</li>
<li class="px-6 py-8 border-b" x-data="{ accordion: false }">
<button class="w-full flex justify-between items-center text-left" x-on:click="accordion = !accordion">
<span class="text-2xl font-semibold font-heading">Nam consequat, augue sed rutrum faucibus?</span>
<span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
<svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</button>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-4 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</li>
<li class="px-6 py-8 border-b" x-data="{ accordion: false }">
<button class="w-full flex justify-between items-center text-left" x-on:click="accordion = !accordion">
<span class="text-2xl font-semibold font-heading">Cras at ante non ligula pharetra elementum?</span>
<span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
<svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</button>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-4 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
