From 8d7ef9e879f8138f85e33550581b8e28a6314db6 Mon Sep 17 00:00:00 2001
From: Lalit <lalitkumarsingh3716@gmail.com>
Date: Wed, 19 Oct 2022 20:05:38 +0530
Subject: [PATCH] feat(landing-page): call-to-actions buttons (#116)

---
 .../landing-page/src/components/copynpm.astro | 32 +++++++++++++++++++
 apps/landing-page/src/components/splash.astro | 31 ++++++++++++------
 2 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 apps/landing-page/src/components/copynpm.astro

diff --git a/apps/landing-page/src/components/copynpm.astro b/apps/landing-page/src/components/copynpm.astro
new file mode 100644
index 0000000..d0d9ede
--- /dev/null
+++ b/apps/landing-page/src/components/copynpm.astro
@@ -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>
diff --git a/apps/landing-page/src/components/splash.astro b/apps/landing-page/src/components/splash.astro
index 6d1b7a8..f4b946b 100644
--- a/apps/landing-page/src/components/splash.astro
+++ b/apps/landing-page/src/components/splash.astro
@@ -2,6 +2,7 @@
 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";
@@ -21,18 +22,28 @@ 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">
-    <h2
-      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
-        class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
+    <div class="flex flex-col">
+      <h2
+        class="flex flex-col self-end gap-2 sm:gap-4 sm:self-auto sm:justify-self-end"
       >
-        Build fast
-        <br /> websites,
-        <br /> faster.
+        <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>
-    </h2>
+    </div>
     <picture
       class="self-start w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start"
     >