50 lines
1.3 KiB
Text
50 lines
1.3 KiB
Text
---
|
|
import { Icon } from 'astro-iconify';
|
|
import Copynpm from '~/components/copynpm.astro';
|
|
---
|
|
|
|
<section class="h-screen flex flex-col astro relative">
|
|
<div class="relative flex flex-col-reverse justify-end h-full content-center grid pt-0">
|
|
<div class="flex flex-col w-screen p-8">
|
|
<h2 class="flex flex-col items-center gap-2">
|
|
<div class="font-extrabold tracking-tighter text-center text-8xl gradient-text">
|
|
Astro. Reactive.
|
|
</div>
|
|
</h2>
|
|
<div
|
|
class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center"
|
|
>
|
|
<a
|
|
href="https://docs.astro-reactive.js.org/en/api/form/form-component/"
|
|
class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 hover:text-white text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto"
|
|
>
|
|
<span class="pr-2">Get Started</span>
|
|
<Icon name="mdi:arrow-right" width="20px" height="20px" />
|
|
</a>
|
|
<Copynpm />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
@keyframes float {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(0, 30px, 0);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:global(#starfield) {
|
|
@apply hidden;
|
|
}
|
|
|
|
#splash-bg-fallback {
|
|
@apply block;
|
|
}
|
|
}
|
|
</style>
|