99 lines
3.9 KiB
Plaintext
99 lines
3.9 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:pb-6 md:pr-16">
|
|
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
|
|
Sed ac magna sit amet risus tristique interdum.
|
|
hac.
|
|
</h2>
|
|
<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> |