ui(landing-page): Added astro section (#150)

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;

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"
   >

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>
 

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">
+    <AstroSection />
-      <h1>This section is added just to test the sticky header :)</h1>
-    </div>
   </body>
 </html>

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>

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"