ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: remove fart (#259)

Browse source
This commit is contained in:
Ayo Ayco 2023-02-01 17:28:00 +01:00 committed by GitHub
parent d0ff3fecea
commit a4db6e4680
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
apps/landing-page/src/components/splash.astro
View file

@ -1,54 +1,50 @@
---
import { Icon } from "astro-icon";
import Copynpm from "~/components/copynpm.astro";
import { Icon } from 'astro-icon';
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"
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>
<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);
}
@keyframes float {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
100% {
transform: translate3d(0, 30px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
:global(#starfield) {
@apply hidden;
}
@media (prefers-reduced-motion: reduce) {
:global(#starfield) {
@apply hidden;
}
#splash-bg-fallback {
@apply block;
}
}
#splash-bg-fallback {
@apply block;
}
}
</style>