From 70ae327f023d3900496cdcbf40639e35afda5218 Mon Sep 17 00:00:00 2001
From: Preet Sojitra <preet.dev373@gmail.com>
Date: Sat, 22 Oct 2022 13:48:59 +0530
Subject: [PATCH] fix responsiveness of landing-page (#125)

---
 apps/landing-page/src/components/copynpm.astro |  8 +++++---
 apps/landing-page/src/components/splash.astro  | 17 +++++++++++------
 apps/landing-page/tailwind.config.cjs          |  7 +++++++
 package-lock.json                              |  5 +++++
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/landing-page/src/components/copynpm.astro b/apps/landing-page/src/components/copynpm.astro
index d0d9ede..6076278 100644
--- a/apps/landing-page/src/components/copynpm.astro
+++ b/apps/landing-page/src/components/copynpm.astro
@@ -2,18 +2,20 @@
 import { Icon } from "astro-icon";
 ---
 
-<button class="copy-btn flex items-center">
+<button
+  class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3"
+>
   <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%;
+    /* max-width: 50%; */
     background-color: #2f2f2f;
     border: 1px solid #e0e0e0;
     border-radius: 4px;
-    padding: 8px 16px;
+    padding: 6px 16px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
diff --git a/apps/landing-page/src/components/splash.astro b/apps/landing-page/src/components/splash.astro
index f4b946b..a7564ff 100644
--- a/apps/landing-page/src/components/splash.astro
+++ b/apps/landing-page/src/components/splash.astro
@@ -21,10 +21,13 @@ 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">
+  <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"
+  >
+    <!-- <div class="relative grid h-full astro-lg:grid-cols-2 place-items-center"> -->
     <div class="flex flex-col">
       <h2
-        class="flex flex-col self-end gap-2 sm:gap-4 sm:self-auto sm:justify-self-end"
+        class="flex flex-col items-center gap-2 sm:gap-4 sm:self-auto sm:justify-self-end w-screen"
       >
         <div
           class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
@@ -34,9 +37,11 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
           <br /> faster.
         </div>
       </h2>
-      <div class="flex space-x-2 mt-8 justify-center">
+      <div
+        class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center astro-sm:w-screen"
+      >
         <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"
+          class="flex items-center w-4/5 astro-md:w-1/2 justify-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 astro-lg:w-auto"
         >
           <span>Get Started</span>
           <Icon name="mdi:arrow-right" width="20px" height="20px" />
@@ -45,13 +50,13 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
       </div>
     </div>
     <picture
-      class="self-start w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start"
+      class="w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start flex justify-center"
     >
       <source type="image/avif" srcset={avifSrcset} sizes={sizes} />
       <source type="image/webp" srcset={webpSrcset} sizes={sizes} />
       <source type="image/png" srcset={pngSrcset} sizes={sizes} />
       <img
-        class="object-cover w-full h-full"
+        class="object-cover w-full h-full ml-[-3rem] astro-lg:ml-0 astro-img:w-[50%]"
         src={png[0].url}
         width={png[0].width}
         height={png[0].height}
diff --git a/apps/landing-page/tailwind.config.cjs b/apps/landing-page/tailwind.config.cjs
index b96b16b..0f0108d 100644
--- a/apps/landing-page/tailwind.config.cjs
+++ b/apps/landing-page/tailwind.config.cjs
@@ -3,6 +3,13 @@ const defaultTheme = require("tailwindcss/defaultTheme");
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
   theme: {
+    screens: {
+      "astro-sm": { max: "1000px" },
+      "astro-md": { min: "640px", max: "1000px" },
+      "astro-img": { min: "600px", max: "1000px" },
+      "astro-lg": { min: "1000px" },
+      ...defaultTheme.screens,
+    },
     extend: {
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
diff --git a/package-lock.json b/package-lock.json
index b61cad0..374100f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
       }
     },
     "apps/demo": {
+      "name": "demo-astro-reactive-library",
       "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
@@ -40,6 +41,7 @@
     "apps/demo/packages/form": {},
     "apps/demo/packages/validator": {},
     "apps/docs": {
+      "name": "docs-astro-reactive-library",
       "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
@@ -59,6 +61,7 @@
       "devDependencies": {}
     },
     "apps/landing-page": {
+      "name": "astro-reactive-library-landing-page",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -10474,6 +10477,7 @@
       "devDependencies": {}
     },
     "packages/form": {
+      "name": "@astro-reactive/form",
       "version": "0.4.6",
       "license": "MIT",
       "devDependencies": {
@@ -10508,6 +10512,7 @@
       "dev": true
     },
     "packages/validator": {
+      "name": "@astro-reactive/validator",
       "version": "0.0.5",
       "license": "MIT",
       "devDependencies": {