astro-reactive-form/apps/landing-page/src/components/splash.astro
Ayo Ayco 4d2a577b0e
chore: update deps (#305)
* chore: update deps

* chore: update deps for apps/docs

* chore: update landing-page deps

* chore: update monorepo deps

* chore: add astro as dep to config

* chore: update package lock

* fix: tailwind import on landing-page

* chore: type module

* chore: remove ci run for node 16

* chore: ci run ci

* chore: remove astro check from ci

* chore: remove lint check from ci

* fix: tailwindcss import

* fix: check errors on apps

* chore: fix npm run check

* chore: updat emonorepo deps

* chore: not a module

* chore: use astro-iconify instead

* chore: update prettier

* chore: use prettier formatter

* chore: update lint deps

* chore: run lint on ci

* chore: add changeset
2023-09-25 16:27:50 +02:00

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.dev/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>