120 lines
4.1 KiB
Plaintext
120 lines
4.1 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon";
|
|
import Picture from "~/components/core/Picture.astro";
|
|
|
|
const {} = Astro.props;
|
|
---
|
|
|
|
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
|
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
|
|
<div class="md:py-6 md:pr-16 text-gray-700 dark:text-gray-400">
|
|
<div class="flex">
|
|
<div class="flex flex-col items-center mr-4">
|
|
<div>
|
|
<div
|
|
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
|
>
|
|
<Icon
|
|
name="tabler:arrow-down"
|
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
|
</div>
|
|
<div class="pt-1 pb-8">
|
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
|
|
Step 1
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed
|
|
porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt
|
|
vehicula. Fusce sit amet dui tellus.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="flex flex-col items-center mr-4">
|
|
<div>
|
|
<div
|
|
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
|
>
|
|
<Icon
|
|
name="tabler:arrow-down"
|
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
|
</div>
|
|
<div class="pt-1 pb-8">
|
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
|
|
Step 2
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed
|
|
porttitor est nibh at nulla.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="flex flex-col items-center mr-4">
|
|
<div>
|
|
<div
|
|
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
|
>
|
|
<Icon
|
|
name="tabler:arrow-down"
|
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
|
</div>
|
|
<div class="pt-1 pb-8">
|
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
|
|
Step 3
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed
|
|
porttitor est nibh at nulla.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="flex flex-col items-center mr-4">
|
|
<div>
|
|
<div
|
|
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
|
|
>
|
|
<Icon
|
|
name="tabler:check"
|
|
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-1">
|
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
|
|
Ready!
|
|
</p>
|
|
<p class="text-gray-700"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<Picture
|
|
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
|
|
src={import("~/assets/images/astronaut.jpg")}
|
|
widths={[400, 768]}
|
|
sizes="(max-width: 768px) 100vw, 432px"
|
|
alt="Astronaut"
|
|
aspectRatio="432:768"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|