92 lines
3.8 KiB
Plaintext
92 lines
3.8 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-secondary-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-secondary-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-secondary-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-primary-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>
|