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

feat(landing-page): call-to-actions buttons (#116)

Browse source
This commit is contained in:
Lalit 2022-10-19 20:05:38 +05:30 committed by GitHub
parent 6e39c882ae
commit 8d7ef9e879
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
apps/landing-page/src/components/copynpm.astro Normal file
View file

@ -0,0 +1,32 @@
---
import { Icon } from "astro-icon";
---
<button class="copy-btn flex items-center">
<span>npm install @astro-reactive/form @astro-reactive/validator</span>
<Icon name="mdi:content-copy" width="40px" height="40px" />
</button>
<style>
.copy-btn {
max-width: 50%;
background-color: #2f2f2f;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.copy-btn > span {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.copy-btn:hover {
background-color: #3f3f3f;
}
</style>

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

@ -2,6 +2,7 @@
import { generateImage } from "astro-eleventy-img"; import { generateImage } from "astro-eleventy-img";
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
import Starfield from "~/components/starfield.astro"; import Starfield from "~/components/starfield.astro";
import Copynpm from "~/components/copynpm.astro";
const widths = [450, 800]; const widths = [450, 800];
const sizes = "(min-width: 640px) 42vw, 67vw"; const sizes = "(min-width: 640px) 42vw, 67vw";
@ -21,10 +22,10 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
<section class="relative h-full bg-black"> <section class="relative h-full bg-black">
<Starfield /> <Starfield />
<div class="relative grid h-full sm:grid-cols-2 place-items-center"> <div class="relative grid h-full sm:grid-cols-2 place-items-center">
<div class="flex flex-col">
<h2 <h2
class="flex flex-col self-end gap-2 sm:gap-4 sm:self-auto sm:justify-self-end" class="flex flex-col self-end gap-2 sm:gap-4 sm:self-auto sm:justify-self-end"
> >
<Icon name="logomark" class="h-24 text-white md:h-32" />
<div <div
class="font-extrabold tracking-tighter text-center text-8xl gradient-text" class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
> >
@ -33,6 +34,16 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
<br /> faster. <br /> faster.
</div> </div>
</h2> </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 <picture
class="self-start w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start" class="self-start w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start"
> >