Files
mariosant.dev/src/components/hero.astro
2023-02-17 01:09:31 +02:00

55 lines
1.7 KiB
Plaintext

---
import { Picture } from "@astrojs/image/components";
import heroImage from "assets/hero.png";
import Link from "@components/ui/link.astro";
import { Icon } from "astro-icon";
---
<main
class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24">
<div class="py-6 md:order-1 hidden md:block">
<Picture
src={heroImage}
alt="Astronaut in the air"
widths={[200, 400, 600]}
aspectRatio="4:3"
sizes="(max-width: 800px) 100vw, 620px"
loading="eager"
format="avif"
/>
</div>
<div>
<h1
class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight xl:tracking-tighter">
Marketing website done with Astro
</h1>
<p class="text-lg mt-4 text-slate-600 max-w-xl">
Astroship is a starter template for startups, marketing websites & landing
pages.<wbr /> Built with Astro.build and TailwindCSS. You can quickly create
any website with this starter.
</p>
<div class="mt-6 flex flex-col sm:flex-row gap-3">
<Link
href="#"
href="https://web3templates.com/templates/astroship-starter-website-template-for-astro"
target="_blank"
class="flex gap-1 items-center justify-center"
rel="noopener">
<Icon class="text-white w-5 h-5" name="bx:bxs-cloud-download" />
Download for Free
</Link>
<Link
size="lg"
style="outline"
rel="noopener"
href="https://github.com/surjithctly/astroship"
class="flex gap-1 items-center justify-center"
target="_blank">
<Icon class="text-black w-4 h-4" name="bx:bxl-github" />
GitHub Repo
</Link>
</div>
</div>
</main>