42 lines
2.8 KiB
PHP
42 lines
2.8 KiB
PHP
<section class="max-w-[1400px] mx-auto px-6 py-16 lg:py-24">
|
|
<div class="rounded-3xl bg-white/70 ring-1 ring-gray-100 shadow-sm px-6 py-12 sm:px-12">
|
|
<div class="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 class="text-3xl font-extrabold text-gray-900">How it works</h2>
|
|
<p class="mt-3 text-gray-600">Create your perfect critter in four simple steps.</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-10 sm:gap-4">
|
|
<div class="flex-1 text-center">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-pink-100 text-pink-600">
|
|
<i data-lucide="wand" class="h-6 w-6"></i>
|
|
</div>
|
|
<h3 class="mt-4 font-semibold text-gray-900">1. Choose an Adjective</h3>
|
|
<p class="mt-1 text-gray-500 text-sm">Set the mood</p>
|
|
</div>
|
|
<div class="hidden sm:flex items-center justify-center text-gray-300 pt-5"><i data-lucide="arrow-right" class="h-5 w-5"></i></div>
|
|
<div class="flex-1 text-center">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-blue-100 text-blue-600">
|
|
<i data-lucide="paw-print" class="h-6 w-6"></i>
|
|
</div>
|
|
<h3 class="mt-4 font-semibold text-gray-900">2. Pick an Animal</h3>
|
|
<p class="mt-1 text-gray-500 text-sm">From cute to wild</p>
|
|
</div>
|
|
<div class="hidden sm:flex items-center justify-center text-gray-300 pt-5"><i data-lucide="arrow-right" class="h-5 w-5"></i></div>
|
|
<div class="flex-1 text-center">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-100 text-green-600">
|
|
<i data-lucide="play" class="h-6 w-6"></i>
|
|
</div>
|
|
<h3 class="mt-4 font-semibold text-gray-900">3. Add an Action</h3>
|
|
<p class="mt-1 text-gray-500 text-sm">What are they doing?</p>
|
|
</div>
|
|
<div class="hidden sm:flex items-center justify-center text-gray-300 pt-5"><i data-lucide="arrow-right" class="h-5 w-5"></i></div>
|
|
<div class="flex-1 text-center">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-purple-100 text-purple-600">
|
|
<i data-lucide="map-pin" class="h-6 w-6"></i>
|
|
</div>
|
|
<h3 class="mt-4 font-semibold text-gray-900">4. Select a Location</h3>
|
|
<p class="mt-1 text-gray-500 text-sm">Where do they live?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|