67 lines
2.2 KiB
Plaintext
67 lines
2.2 KiB
Plaintext
---
|
|
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-12 md:pb-16">
|
|
<h1
|
|
class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4"
|
|
>
|
|
Your website with
|
|
<span
|
|
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
|
|
>Astro
|
|
</span> +
|
|
<span
|
|
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-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-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
|
|
href="https://github.com/onwidget/astrowind"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>Get template
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
|
|
href="#features"
|
|
>Learn more
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="relative flex justify-center mb-8">
|
|
<div class="flex flex-col justify-center">
|
|
<Picture
|
|
src={import("~/assets/images/hero.jpg")}
|
|
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700"
|
|
widths={[400, 768]}
|
|
sizes=" (max-width: 767px) 400px, 768px"
|
|
alt="Hero Image"
|
|
aspectRatio="16:9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|