92 lines
3.5 KiB
Plaintext
92 lines
3.5 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon';
|
|
import { Picture } from '@astrojs/image/components';
|
|
---
|
|
|
|
<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-primary-600 border-2">
|
|
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
|
</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 class="text-gray-600 dark:text-slate-400">
|
|
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-primary-600 border-2">
|
|
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
|
</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 class="text-gray-600 dark:text-slate-400">
|
|
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:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
|
</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 class="text-gray-600 dark:text-slate-400">
|
|
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 bg-primary-600"
|
|
>
|
|
<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
|
|
</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-600 dark:text-slate-400"></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>
|