Загрузка...
Адаптивная сетка (1-4 колонки) с иконками и карточками для отображения преимуществ продукта на лендингах. Tailwind UI.
<div class="max-w-6xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4 edit-mode-selected" id="aura-emers5c9k">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<div class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-4 backdrop-blur">
<div class="flex gap-3 items-start">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4 text-white/90"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
</span>
<div class="">
<p class="text-sm font-semibold tracking-tight font-geist">AI routecraft</p>
<p class="text-xs text-white/70 font-geist">Smart suggestions that match your vibe.</p>
</div>
</div>
</div>
<div class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-4 backdrop-blur">
<div class="flex gap-3 items-start">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-4 w-4 text-white/90"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
</span>
<div class="">
<p class="text-sm font-semibold tracking-tight font-geist">Real‑time timing</p>
<p class="text-xs text-white/70 font-geist">Shifts with weather and crowds.</p>
</div>
</div>
</div>
<div class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-4 backdrop-blur">
<div class="flex gap-3 items-start">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wallet" class="lucide lucide-wallet h-4 w-4 text-white/90"><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"></path><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"></path></svg>
</span>
<div class="">
<p class="text-sm font-semibold tracking-tight font-geist">Budget aware</p>
<p class="text-xs text-white/70 font-geist">Optimize for value without the guesswork.</p>
</div>
</div>
</div>
<div class="ring-1 ring-white/10 bg-white/5 rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur">
<div class="flex gap-3 items-start">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4 text-white/90"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>
</span>
<div class="">
<p class="text-sm font-semibold tracking-tight font-geist">Privacy first</p>
<p class="text-xs text-white/70 font-geist">Your trip data stays with you.</p>
</div>
</div>
</div>
</div>
</div>