100 lines
2.6 KiB
Text
100 lines
2.6 KiB
Text
---
|
|
import { generateImage } from "astro-eleventy-img";
|
|
import { Icon } from "astro-icon";
|
|
import Starfield from "~/components/starfield.astro";
|
|
import Copynpm from "~/components/copynpm.astro";
|
|
|
|
const widths = [450, 800];
|
|
const sizes = "(min-width: 640px) 42vw, 67vw";
|
|
|
|
const { webp, avif, png } = generateImage("src/assets/astronaut.png", {
|
|
widths,
|
|
formats: ["webp", "avif", "png"],
|
|
outputDir: "public/assets/images/astronaut",
|
|
urlPath: "/assets/images/astronaut",
|
|
});
|
|
|
|
const avifSrcset = avif.map(({ srcset }) => srcset).join(",");
|
|
const webpSrcset = webp.map(({ srcset }) => srcset).join(",");
|
|
const pngSrcset = png.map(({ srcset }) => srcset).join(",");
|
|
---
|
|
|
|
<section class="relative h-full bg-black">
|
|
<Starfield />
|
|
<div class="relative grid h-full sm:grid-cols-2 place-items-center">
|
|
<div class="flex flex-col">
|
|
<h2
|
|
class="flex flex-col self-end gap-2 sm:gap-4 sm:self-auto sm:justify-self-end"
|
|
>
|
|
<div
|
|
class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
|
|
>
|
|
Build fast
|
|
<br /> websites,
|
|
<br /> faster.
|
|
</div>
|
|
</h2>
|
|
<div class="flex space-x-2 mt-8 justify-center">
|
|
<button
|
|
class="flex space-x-2 items-center bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors"
|
|
>
|
|
<span>Get Started</span>
|
|
<Icon name="mdi:arrow-right" width="20px" height="20px" />
|
|
</button>
|
|
<Copynpm />
|
|
</div>
|
|
</div>
|
|
<picture
|
|
class="self-start w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start"
|
|
>
|
|
<source type="image/avif" srcset={avifSrcset} sizes={sizes} />
|
|
<source type="image/webp" srcset={webpSrcset} sizes={sizes} />
|
|
<source type="image/png" srcset={pngSrcset} sizes={sizes} />
|
|
<img
|
|
class="object-cover w-full h-full"
|
|
src={png[0].url}
|
|
width={png[0].width}
|
|
height={png[0].height}
|
|
alt="A floating astronaut in a space suit"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
</section>
|
|
|
|
<noscript>
|
|
<style>
|
|
#splash-bg-fallback {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
|
|
<style>
|
|
@keyframes float {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(0, 30px, 0);
|
|
}
|
|
}
|
|
|
|
picture {
|
|
animation: float linear 2.5s infinite alternate;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
picture {
|
|
@apply animate-none;
|
|
}
|
|
|
|
:global(#starfield) {
|
|
@apply hidden;
|
|
}
|
|
|
|
#splash-bg-fallback {
|
|
@apply block;
|
|
}
|
|
}
|
|
</style>
|