From 426c5ab303e2358461339745ee37e854c98df38a Mon Sep 17 00:00:00 2001
From: Lalit <lalitkumarsingh3716@gmail.com>
Date: Fri, 28 Oct 2022 14:11:47 +0530
Subject: [PATCH] ui(landing-page): Added astro section (#150)

---
 .../landing-page/src/components/copynpm.astro |  1 +
 apps/landing-page/src/components/splash.astro |  2 +-
 .../src/components/starfield.astro            |  2 +-
 apps/landing-page/src/pages/index.astro       |  6 +--
 .../src/sections/astro-section.astro          | 46 +++++++++++++++++++
 package-lock.json                             |  2 +-
 6 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 apps/landing-page/src/sections/astro-section.astro

diff --git a/apps/landing-page/src/components/copynpm.astro b/apps/landing-page/src/components/copynpm.astro
index 399df22..f1e776e 100644
--- a/apps/landing-page/src/components/copynpm.astro
+++ b/apps/landing-page/src/components/copynpm.astro
@@ -13,6 +13,7 @@ import { Icon } from "astro-icon";
 <style>
   .copy-btn {
     /* max-width: 50%; */
+    color: #fff;
     background-color: #2f2f2f;
     border: 1px solid #e0e0e0;
     border-radius: 4px;
diff --git a/apps/landing-page/src/components/splash.astro b/apps/landing-page/src/components/splash.astro
index a7564ff..e47c450 100644
--- a/apps/landing-page/src/components/splash.astro
+++ b/apps/landing-page/src/components/splash.astro
@@ -20,7 +20,7 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
 ---
 
 <section class="relative h-full bg-black">
-  <Starfield />
+  <!-- <Starfield /> -->
   <div
     class="relative flex flex-col-reverse justify-end pt-16 h-full astro-lg:grid-cols-2 place-items-center astro-lg:grid astro-lg:pt-0 astro-img:pt-10"
   >
diff --git a/apps/landing-page/src/components/starfield.astro b/apps/landing-page/src/components/starfield.astro
index 4f995b9..8aa18b3 100644
--- a/apps/landing-page/src/components/starfield.astro
+++ b/apps/landing-page/src/components/starfield.astro
@@ -1,4 +1,4 @@
-<div id="starfield" class="absolute inset-0">
+<div id="starfield" class="absolute -z-10 inset-0">
   <canvas id="starfield-canvas"></canvas>
 </div>
 
diff --git a/apps/landing-page/src/pages/index.astro b/apps/landing-page/src/pages/index.astro
index fe41d91..3ddc71a 100644
--- a/apps/landing-page/src/pages/index.astro
+++ b/apps/landing-page/src/pages/index.astro
@@ -1,7 +1,9 @@
 ---
 import Header from "~/components/header.astro";
+import Icon from "astro-icon";
 import Splash from "~/components/splash.astro";
 import "~/styles/index.css";
+import AstroSection from "~/sections/astro-section.astro";
 
 const { site } = Astro;
 const image = new URL("social.jpg", site);
@@ -76,8 +78,6 @@ const description =
   >
     <Header />
     <Splash />
-    <div class="h-screen">
-      <h1>This section is added just to test the sticky header :)</h1>
-    </div>
+    <AstroSection />
   </body>
 </html>
diff --git a/apps/landing-page/src/sections/astro-section.astro b/apps/landing-page/src/sections/astro-section.astro
new file mode 100644
index 0000000..7daeb85
--- /dev/null
+++ b/apps/landing-page/src/sections/astro-section.astro
@@ -0,0 +1,46 @@
+---
+import { Icon } from "astro-icon";
+import Starfield from "~/components/starfield.astro";
+---
+
+<section class="h-screen flex flex-col px-10 astro relative">
+  <Starfield />
+  <div class="flex">
+    <div class="flex-1">
+      <h1 class="text-6xl font-extrabold gradient-text">
+        Native Astro Components
+      </h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere,
+        culpa corporis aspernatur obcaecati autem fugiat excepturi, possimus
+        mollitia est veritatis eaque officiis quia porro nesciunt esse unde
+        consequuntur in nobis at earum dolore quod magni ipsam. Quo
+        necessitatibus modi sequi quas perspiciatis laborum enim
+      </p>
+    </div>
+    <div class="flex-1 items-center justify-center md:flex hidden">
+      <h1 class="sr-only">Astro</h1>
+      <Icon name="logomark" class="astro-logo" />
+      <Icon name="wordmark" class="h-10" />
+    </div>
+  </div>
+  <div
+    class="benefits flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 my-10"
+  >
+    <img src="https://via.placeholder.com/200" alt="benefit 1" />
+    <img src="https://via.placeholder.com/200" alt="benefit 2" />
+    <img src="https://via.placeholder.com/200" alt="benefit 3" />
+    <img src="https://via.placeholder.com/200" alt="benefit 4" />
+  </div>
+</section>
+
+<style>
+  .astro {
+    padding-top: 7rem;
+  }
+
+  .astro-logo {
+    width: 10rem;
+    height: 10rem;
+  }
+</style>
diff --git a/package-lock.json b/package-lock.json
index 7b8189f..7ff6a6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10478,7 +10478,7 @@
     },
     "packages/form": {
       "name": "@astro-reactive/form",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "license": "MIT",
       "dependencies": {
         "@astro-reactive/validator": "^0.1.0"