<div class="flex flex-row gap-8 border border-dashed border-violet-700 rounded-lg w-fit">
<!-- Audio -->
<div class="flex flex-col gap-6 p-2">
<div class="flex gap-6">
<!-- Chevron Left disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#C70C0F" fill-opacity="0.6" />
</svg>
</div>
<!-- Chevron Right disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#C70C0F" fill-opacity="0.6" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Chevron Left -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#891315" />
</svg>
</div>
<!-- Chevron Right -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left hover -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/10 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="#891315" />
</svg>
</div>
<!-- Arrow Right hover -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/10 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="#891315" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="#891315" />
</svg>
</div>
<!-- Arrow Right pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="#891315" />
</svg>
</div>
</div>
</div>
<!-- Optique -->
<div class="flex flex-col gap-6 p-2">
<div class="flex gap-6">
<!-- Chevron Left disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.4" />
</svg>
</div>
<!-- Chevron Right disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" fill-opacity="0.4" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Chevron Left -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.8" />
</svg>
</div>
<!-- Chevron Right -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" fill-opacity="0.8" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left hover -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="black" fill-opacity="0.8" />
</svg>
</div>
<!-- Arrow Right hover -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="black" fill-opacity="0.8" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="black" fill-opacity="0.8" />
</svg>
</div>
<!-- Arrow Right pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="black" fill-opacity="0.8" />
</svg>
</div>
</div>
</div>
<!-- Optique Background Dark -->
<div class="bg-[#393939] rounded-r-lg">
<div class="flex flex-col gap-6 p-2">
<div class="flex gap-6">
<!-- Chevron Left disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" fill-opacity="0.5" />
</svg>
</div>
<!-- Chevron Right disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white" fill-opacity="0.5" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Chevron Left -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" />
</svg>
</div>
<!-- Chevron Right -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left hover-->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="white" />
</svg>
</div>
<!-- Arrow Right hover -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="white" />
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="white" />
</svg>
</div>
<!-- Arrow Right pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="white" />
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- Usable buttons -->
<div class="mt-10 p-2">
<h3>Try Us, We are usable</h3>
<div class="flex flex-row gap-8">
<!-- Audio -->
<div class="mt-4 flex gap-6">
<!-- Chevron Left usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer
bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20
rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#891315" />
</svg>
</div>
<!-- Chevron Right usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer
bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20
rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315" />
</svg>
</div>
</div>
<!-- Optique -->
<div class="mt-4 flex gap-6">
<!-- Chevron Left usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer
bg-black/5 hover:bg-black/10 active:bg-black/20
rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.8" />
</svg>
</div>
<!-- Chevron Right usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer bg-black/5 hover:bg-black/10 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" fill-opacity="0.8" />
</svg>
</div>
</div>
<!-- Optique background dark -->
<div class="flex items-center bg-[#393939] rounded-lg">
<div class="flex gap-6 p-0.5">
<!-- Chevron Left usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" fill-opacity="" />
</svg>
</div>
<!-- Chevron Right usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-8 border border-dashed border-violet-700 rounded-lg w-fit">
<!-- Audio -->
<div class="flex flex-col gap-6 p-2">
<div class="flex gap-6">
<!-- Chevron Left disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#C70C0F" fill-opacity="0.6"/>
</svg>
</div>
<!-- Chevron Right disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#C70C0F" fill-opacity="0.6"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Chevron Left -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#891315"/>
</svg>
</div>
<!-- Chevron Right -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left hover -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/10 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="#891315"/>
</svg>
</div>
<!-- Arrow Right hover -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/10 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="#891315"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="#891315"/>
</svg>
</div>
<!-- Arrow Right pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-audio-700/20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="#891315"/>
</svg>
</div>
</div>
</div>
<!-- Optique -->
<div class="flex flex-col gap-6 p-2">
<div class="flex gap-6">
<!-- Chevron Left disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.4"/>
</svg>
</div>
<!-- Chevron Right disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" fill-opacity="0.4"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Chevron Left -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.8"/>
</svg>
</div>
<!-- Chevron Right -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" fill-opacity="0.8"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left hover -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="black" fill-opacity="0.8"/>
</svg>
</div>
<!-- Arrow Right hover -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="black" fill-opacity="0.8"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="black" fill-opacity="0.8"/>
</svg>
</div>
<!-- Arrow Right pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-dark-20 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="black" fill-opacity="0.8"/>
</svg>
</div>
</div>
</div>
<!-- Optique Background Dark -->
<div class="bg-[#393939] rounded-r-lg">
<div class="flex flex-col gap-6 p-2">
<div class="flex gap-6">
<!-- Chevron Left disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" fill-opacity="0.5"/>
</svg>
</div>
<!-- Chevron Right disabled -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white" fill-opacity="0.5"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Chevron Left -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white"/>
</svg>
</div>
<!-- Chevron Right -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left hover-->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="white"/>
</svg>
</div>
<!-- Arrow Right hover -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="white"/>
</svg>
</div>
</div>
<div class="flex gap-6">
<!-- Arrow Left pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4664 11.473C4.39612 11.5441 4.34295 11.6258 4.30691 11.7129L4.4664 11.473ZM4.47007 11.4693L8.46967 7.46967C8.76256 7.17678 9.23744 7.17678 9.53033 7.46967C9.82322 7.76256 9.82322 8.23744 9.53033 8.53033L6.81066 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H6.81066L9.53033 15.4697C9.82322 15.7626 9.82322 16.2374 9.53033 16.5303C9.23744 16.8232 8.76256 16.8232 8.46967 16.5303L4.46967 12.5303C4.39776 12.4584 4.34351 12.3755 4.30691 12.2871C4.27024 12.1987 4.25 12.1017 4.25 12C4.25 11.8983 4.27024 11.8013 4.30691 11.7129" fill="white"/>
</svg>
</div>
<!-- Arrow Right pressed -->
<div class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="white"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- Usable buttons -->
<div class="mt-10 p-2">
<h3>Try Us, We are usable</h3>
<div class="flex flex-row gap-8">
<!-- Audio -->
<div class="mt-4 flex gap-6">
<!-- Chevron Left usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer
bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20
rounded-full"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#891315"/>
</svg>
</div>
<!-- Chevron Right usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer
bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20
rounded-full"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
</svg>
</div>
</div>
<!-- Optique -->
<div class="mt-4 flex gap-6">
<!-- Chevron Left usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer
bg-black/5 hover:bg-black/10 active:bg-black/20
rounded-full"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.8" />
</svg>
</div>
<!-- Chevron Right usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer bg-black/5 hover:bg-black/10 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black" fill-opacity="0.8" />
</svg>
</div>
</div>
<!-- Optique background dark -->
<div class="flex items-center bg-[#393939] rounded-lg">
<div class="flex gap-6 p-0.5">
<!-- Chevron Left usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" fill-opacity="" />
</svg>
</div>
<!-- Chevron Right usable -->
<div class="flex items-center justify-center w-10 h-10 cursor-pointer bg-neutral-500 rounded-full">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white" />
</svg>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
No notes defined.