<div class="font-medium">Mockup</div>
<div class="flex flex-row gap-6">
<div class="flex flex-col gap-5 border border-dashed border-violet-700 rounded-lg">
<!-- Audio -->
<div class="flex flex-row justify-center gap-2 mt-4">
<div class="flex">
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
</div>
<!-- Audio with around BG -->
<div class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-audio-700/5 rounded-full">
<div class="flex">
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
</div>
<!-- Optique -->
<div class="flex flex-row justify-center gap-2">
<div class="flex">
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
</div>
<!-- Optique with around BG -->
<div class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-black/5 rounded-full">
<div class="flex">
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
</div>
<div class="bg-[#393939] rounded-b-lg">
<!-- Optique with dark background -->
<div class="flex flex-row justify-center gap-2 my-4">
<div class="flex">
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
<!-- Optique with around BG -->
<div class="flex flex-row items-center gap-2 mx-3 my-4 h-10 px-4 bg-white/5 rounded-full">
<div class="flex">
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-5 border border-dashed border-violet-700 rounded-lg h-fit">
<!-- Audio -->
<div class="flex flex-row justify-center gap-2 mt-4 mx-2">
<div class="flex">
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
</div>
<div class="flex flex-row justify-start gap-2 ml-2">
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
<!-- Optique -->
<div class="flex flex-row justify-center gap-2 mx-2">
<div class="flex">
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
</div>
<!-- Optique with around BG -->
<div class="flex flex-row justify-start gap-2 ml-2">
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
<!-- Optique with dark background -->
<div class="bg-[#393939] rounded-b-lg">
<div class="flex flex-row justify-center gap-2 my-4">
<div class="flex">
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
</div>
<div class="flex flex-row justify-start gap-2 mb-4 ml-2">
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
</div>
</div>
<div class="font-medium py-6">Template</div>
<div class="flex flex-col gap-5 w-fit">
<!-- Audio -->
<div class="flex flex-row justify-center gap-2 ">
<div class="flex">
<!-- Active Dot -->
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
</div>
<!-- Audio with Background -->
<div class="flex flex-row justify-center gap-2 items-center justify-center mx-2 h-10 px-4 bg-audio-700/5 rounded-full">
<div class="flex">
<!-- Active Dot -->
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
</div>
<!-- Optique -->
<div class="flex flex-row justify-center gap-2 ">
<div class="flex">
<!-- Active Dot -->
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
</div>
<!-- Optique with Background -->
<div class="flex flex-row justify-center gap-2 items-center justify-center mx-2 h-10 px-4 bg-black/5 rounded-full">
<div class="flex">
<!-- Active Dot -->
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
</div>
<!-- Optique with Dark Background -->
<div class="flex flex-row justify-center gap-2 bg-[#393939] rounded-b-lg my-4 py-8">
<div class="flex">
<!-- Active Dot -->
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
<!-- Optique with Dark Background and Border -->
<div class="flex flex-row justify-center gap-2 items-center gap-2 m-6 h-10 px-4 bg-white/5 rounded-full">
<div class="flex">
<!-- Active Dot -->
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
</div>
<div class="font-medium">Mockup</div>
<div class="flex flex-row gap-6">
<div class="flex flex-col gap-5 border border-dashed border-violet-700 rounded-lg">
<!-- Audio -->
<div class="flex flex-row justify-center gap-2 mt-4">
<div class="flex">
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
</div>
<!-- Audio with around BG -->
<div class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-audio-700/5 rounded-full">
<div class="flex">
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
</div>
<!-- Optique -->
<div class="flex flex-row justify-center gap-2">
<div class="flex">
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
</div>
<!-- Optique with around BG -->
<div class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-black/5 rounded-full">
<div class="flex">
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
</div>
<div class="bg-[#393939] rounded-b-lg">
<!-- Optique with dark background -->
<div class="flex flex-row justify-center gap-2 my-4">
<div class="flex">
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
<!-- Optique with around BG -->
<div class="flex flex-row items-center gap-2 mx-3 my-4 h-10 px-4 bg-white/5 rounded-full">
<div class="flex">
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-5 border border-dashed border-violet-700 rounded-lg h-fit">
<!-- Audio -->
<div class="flex flex-row justify-center gap-2 mt-4 mx-2">
<div class="flex">
<span class="w-8 h-2 bg-audio-900 rounded-full"></span>
</div>
</div>
<div class="flex flex-row justify-start gap-2 ml-2">
<span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
</div>
<!-- Optique -->
<div class="flex flex-row justify-center gap-2 mx-2">
<div class="flex">
<span class="w-8 h-2 bg-black rounded-full"></span>
</div>
</div>
<!-- Optique with around BG -->
<div class="flex flex-row justify-start gap-2 ml-2">
<span class="w-2 h-2 bg-black/60 rounded-full"></span>
</div>
<!-- Optique with dark background -->
<div class="bg-[#393939] rounded-b-lg">
<div class="flex flex-row justify-center gap-2 my-4">
<div class="flex">
<span class="w-8 h-2 bg-white rounded-full"></span>
</div>
</div>
<div class="flex flex-row justify-start gap-2 mb-4 ml-2">
<span class="w-2 h-2 bg-white/60 rounded-full"></span>
</div>
</div>
</div>
</div>
<div class="font-medium py-6">Template</div>
<div class="flex flex-col gap-5 w-fit">
{% for carousel in carousels %}
<!-- {{ carousel.name }} -->
<div class="flex flex-row justify-center gap-2 {{ carousel.containerClass }}">
<div class="flex">
<!-- Active Dot -->
<span class="{{ carousel.activeDot.width }} {{ carousel.activeDot.height }} {{ carousel.activeDot.color }} rounded-full"></span>
</div>
<div class="flex flex-row gap-2">
<!-- Inactive Dots -->
{% for i in range(1, 7) %}
{% for dot in carousel.inactiveDots %}
<span class="{{ dot.width }} {{ dot.height }} {{ dot.color }} rounded-full"></span>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{
"carousels": [
{
"name": "Audio",
"activeDot": {
"width": "w-8",
"height": "h-2",
"color": "bg-audio-900"
},
"inactiveDots": [
{
"width": "w-2",
"height": "h-2",
"color": "bg-audio-700/60"
}
],
"containerClass": ""
},
{
"name": "Audio with Background",
"activeDot": {
"width": "w-8",
"height": "h-2",
"color": "bg-audio-900"
},
"inactiveDots": [
{
"width": "w-2",
"height": "h-2",
"color": "bg-audio-700/60"
}
],
"containerClass": "items-center justify-center mx-2 h-10 px-4 bg-audio-700/5 rounded-full"
},
{
"name": "Optique",
"activeDot": {
"width": "w-8",
"height": "h-2",
"color": "bg-black"
},
"inactiveDots": [
{
"width": "w-2",
"height": "h-2",
"color": "bg-black/60"
}
],
"containerClass": ""
},
{
"name": "Optique with Background",
"activeDot": {
"width": "w-8",
"height": "h-2",
"color": "bg-black"
},
"inactiveDots": [
{
"width": "w-2",
"height": "h-2",
"color": "bg-black/60"
}
],
"containerClass": "items-center justify-center mx-2 h-10 px-4 bg-black/5 rounded-full"
},
{
"name": "Optique with Dark Background",
"activeDot": {
"width": "w-8",
"height": "h-2",
"color": "bg-white"
},
"inactiveDots": [
{
"width": "w-2",
"height": "h-2",
"color": "bg-white/60"
}
],
"containerClass": "bg-[#393939] rounded-b-lg my-4 py-8"
},
{
"name": "Optique with Dark Background and Border",
"activeDot": {
"width": "w-8",
"height": "h-2",
"color": "bg-white"
},
"inactiveDots": [
{
"width": "w-2",
"height": "h-2",
"color": "bg-white/60"
}
],
"containerClass": "items-center gap-2 m-6 h-10 px-4 bg-white/5 rounded-full"
}
]
}
No notes defined.