Files
blog/src/components/widgets/Hero.astro
2022-09-04 03:21:44 -04:00

62 lines
2.3 KiB
Plaintext

---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
const {} = Astro.props;
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="text-center pb-10 md:pb-16">
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
Your website with
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
>Tailwind CSS
</span>
</h1>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
designed following Best Practices, SEO, Accessibility, Dark Mode, great Page Speed, image optimization,
sitemap generation and more.
</p>
<div class="max-w-none flex justify-center">
<div>
<a
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0 font-bold"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5 hidden sm:inline-block" /> Get template
</a>
</div>
<div>
<a
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
href="#features"
>Learn more
</a>
</div>
</div>
</div>
</div>
<div>
<div class="relative mb-8 m-auto max-w-3xl">
<Picture
src={import("~/assets/images/hero.jpg")}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px"
alt="Hero Image"
aspectRatio="16:9"
/>
</div>
</div>
</div>
</div>
</section>