<div class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 dark:shadow-none dark:border-gray-700 dark:bg-gray-800 bg-opacity-50 shadow-2xl shadow-gray-600/10">
<div class="space-y-12 text-center">
<img src="https://cdn-icons-png.flaticon.com/512/4341/4341069.png" class="w-16 mx-auto" width="512" height="512" alt="burger illustration"/>
<div class="space-y-6">
<h3 class="text-2xl font-semibold text-gray-800 transition dark:text-white">
First feature
</h3>
<p class="text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nesciunt neque culpa hic illum ab qui error repellendus asperiores unde ut ipsam perferendis nemo fuga cum, eum consectetur, magnam doloremque!
</p>
<a href="#" class="group relative flex mx-auto h-12 w-12 items-center justify-center before:absolute before:inset-0 before:rounded-full before:border before:border-gray-200 before:bg-gray-50 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-gray-700 dark:before:bg-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="relative w-5 h-5 text-gray-600 dark:text-white transition duration-300 group-hover:translate-x-1">
<path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</div>
<button aria-label="edit" class="relative flex h-9 w-9 items-center justify-center before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 disabled:before:scale-100 disabled:before:bg-gray-300">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="relative h-4 w-4 text-white">
<path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z" />
</svg>
</button>
<button class="w-max relative flex h-9 items-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 disabled:before:bg-gray-300 disabled:before:scale-100">
<span class="w-max relative text-sm font-semibold text-white">
Button
</span>
</button>
<div class="w-72 relative p-8 rounded-xl group border border-gray-100 dark:border-gray-700 bg-white shadow-2xl shadow-sky-900/10 dark:bg-gray-800">
<div class="relative">
<img src="../../assets/images/banana.png" alt="art cover" loading="lazy" width="1000" height="667" class="w-32 mx-auto object-cover">
<div class="absolute z-[1] w-max h-max right-0">
<button class="relative mx-auto flex h-10 w-10 items-center before:absolute before:inset-0 before:rounded-full before:bg-white dark:before:bg-gray-700 before:border before:border-gray-100 dark:before:border-gray-600 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="relative h-5 w-5 text-gray-600 dark:text-gray-300 m-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
</div>
<div class="relative mt-4 space-y-4">
<p class="text-gray-600 dark:text-gray-400">Dolorum nulla ipsam.</p>
<div class="flex justify-between items-center">
<h3 class="text-4xl mt-1 font-semibold text-gray-900 dark:text-white">
$12.35
</h3>
<div class="flex items-center gap-0.5 text-yellow-500 dark:text-yellow-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
</div>
<p class="text-gray-500">Some text here</p>
</div>
</div>
<div class="group p-6 rounded-xl border border-gray-100 bg-white shadow-2xl shadow-gray-600/10 sm:p-8 dark:shadow-none dark:border-gray-700 dark:bg-gray-800">
<div class="relative overflow-hidden rounded-xl">
<img src="https://images.unsplash.com/photo-1661749711934-492cd19a25c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="art cover" loading="lazy" width="1000" height="667" class="h-40 w-full object-cover object-top transition duration-500 group-hover:scale-105"/>
</div>
<div class="mt-6 relative">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">
De fuga fugiat lorem ispum laboriosam expedita.
</h3>
<p class="mt-6 mb-8 text-gray-600 dark:text-gray-300">
Voluptates harum aliquam totam, doloribus eum impedit atque! Temporibus...
</p>
<a class="inline-block" href="#">
<span class="text-primary">Read more</span>
</a>
</div>
</div>
<header class="bg-white dark:bg-gray-900">
<nav class="absolute inset-x-0 top-0 z-10 w-full border-b border-gray-100 shadow-lg shadow-gray-200/10 dark:shadow-none dark:border-gray-700">
<div class="container mx-auto px-8">
<div class="relative flex flex-wrap items-center justify-between gap-6 py-2">
<input checked aria-hidden="true" type="checkbox" name="toggle_nav" id="toggle_nav" class="peer hidden" />
<div class="relative z-20 flex w-full justify-between">
<a href="#" aria-label="logo" class="flex items-center space-x-2">
<div aria-hidden="true" class="flex space-x-1">
<div class="h-4 w-4 rounded-full bg-gray-900 dark:bg-white"></div>
<div class="h-6 w-2 bg-primary"></div>
</div>
<span class="text-2xl font-bold text-gray-900 dark:text-white">Brand</span>
</a>
<div class="relative flex max-h-10 items-center">
<label role="button" for="toggle_nav" aria-label="humburger" id="hamburger" class="relative -mr-6 p-6">
<div aria-hidden="true" id="line" class="m-auto h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"></div>
<div aria-hidden="true" id="line2" class="m-auto mt-2 h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"></div>
</label>
</div>
</div>
<label aria-hidden="true" for="toggle_nav" class="absolute -left-8 inset-0 z-10 h-screen w-screen origin-bottom scale-y-0 bg-white/70 backdrop-blur-2xl transition duration-500 peer-checked:origin-top peer-checked:scale-y-100 dark:bg-gray-900/70"></label>
<div class="invisible absolute top-full left-0 z-20 w-full origin-top translate-y-1 scale-95 flex-col flex-wrap justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 peer-checked:visible peer-checked:scale-100 peer-checked:opacity-100 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none">
<div class="w-full text-gray-600 dark:text-gray-300">
<ul class="flex flex-col gap-6 font-medium tracking-wide">
<li>
<a href="#" class="block transition hover:text-primary">
<span>Teams</span>
</a>
</li>
<li>
<a href="#" class="block transition hover:text-primary">
<span>Enterprise</span>
</a>
</li>
<li>
<a href="#" class="block transition hover:text-primary">
<span>Ressources</span>
</a>
</li>
<li>
<a href="#" class="block transition hover:text-primary">
<span>Pricing</span>
</a>
</li>
<li>
<a href="#" class="block transition hover:text-primary">
<span>Blog</span>
</a>
</li>
</ul>
</div>
<div class="mt-12">
<a href="#" class="relative flex h-9 w-full items-center justify-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-sm font-semibold text-white">Get Started</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
