From 121850b27ee2f1a02f2e2bf0e59b2540e507fa28 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Thu, 27 Jan 2022 12:16:40 -0800
Subject: [PATCH] basic landing page responsive now

---
 components/Layouts/LandingPageLayout.tsx |  4 +--
 components/demo/LandingPageActionBar.tsx |  4 +--
 pages/index.js                           | 38 ++++++++++++------------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/components/Layouts/LandingPageLayout.tsx b/components/Layouts/LandingPageLayout.tsx
index aba8caf..97cfb1e 100644
--- a/components/Layouts/LandingPageLayout.tsx
+++ b/components/Layouts/LandingPageLayout.tsx
@@ -173,8 +173,8 @@ export default function LangingPageLayout({ children }) {
       </div>
 
       {/* footer */}
-      <div className="bg-black w-full px-[10rem] py-[5rem]">
-        <span className="flex flex-row items-start justify-between">
+      <div className="bg-black w-full lg:px-[10rem] px-[5rem] py-[5rem] ">
+        <span className="flex md:flex-row md:space-x-5 space-y-5 flex-col items-start justify-between">
           <span className="flex flex-col">
             <MainLogo className="text-white text-3xl" />
 
diff --git a/components/demo/LandingPageActionBar.tsx b/components/demo/LandingPageActionBar.tsx
index 95a90cb..72256db 100644
--- a/components/demo/LandingPageActionBar.tsx
+++ b/components/demo/LandingPageActionBar.tsx
@@ -3,13 +3,13 @@ import { FaAngleRight } from "react-icons/fa";
 
 export default function LandingPageActionBar() {
   return (
-    <span className="flex my-20 mx-auto flex-row items-center max-w-screen-md p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
+    <span className="flex md:my-20 mx-auto md:flex-row flex-col items-center max-w-screen-md p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
       <span className="flex flex-col items-start text-3xl font-bold">
         <span>Ready to Focus?</span>
         <span className="text-teal-600">{"It's now or never."}</span>
       </span>
 
-      <span className="flex flex-row items-center space-x-5 ml-auto">
+      <span className="flex flex-row items-center space-x-5 md:ml-auto">
         <Link href="/features">Features</Link>
 
         <button
diff --git a/pages/index.js b/pages/index.js
index a5cfa06..7708270 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -49,36 +49,36 @@ export default function Home() {
     <LangingPageLayout>
       {/* header text */}
       <div className="flex flex-col items-center backdrop-blur-lg p-10">
-        <span className="flex flex-col items-center">
-          <span className="text-5xl font-bold">
+        <span className="flex flex-col items-center text-center text-3xl md:text-5xl font-bold ">
+          <span>
             <span className="text-teal-800">Minimal </span>
             Communication Tool for
           </span>
 
-          <span className="text-5xl font-bold text-left">
+          <span className="">
             <span className="text-red-800">Messy, Distracted</span> Remote
             Teams.
           </span>
         </span>
 
-        <span className="my-5 text-xl text-center text-black font-semibold w-max">
+        <span className="my-5 text-lg md:text-xl text-center text-black font-semibold w-max">
           A <span className="text-teal-600">&apos;less is more&apos;</span>{" "}
           approach.
           <br></br>
           Skip{" "}
           <img
             src="/icons/zoom-logo.svg"
-            className="inline w-[4rem] h-[2rem] px-1"
+            className="w-[4rem] inline-block h-[2rem] px-1"
           />{" "}
-          scheduling,{" "}
+          scheduling, <br className="md:hidden"></br>
           <img
             src="/icons/slack-logo.svg"
-            className="inline w-[5rem] h-[2rem] px-1"
+            className="inline-block w-[5rem] h-[2rem] px-1"
           />{" "}
-          notifications, and{" "}
+          notifications, <br className="md:hidden"></br> and{" "}
           <img
             src="/icons/gmail-logo.svg"
-            className="inline w-[2rem] h-[1rem]"
+            className="inline-block w-[2rem] h-[1rem]"
           />{" "}
           threads,
           <br></br>
@@ -108,13 +108,13 @@ export default function Home() {
       <span className="flex w-full justify-evenly">
         <img
           src="/screenshots/frame_safari_dark.png"
-          className="h-[80rem] w-[85rem] shrink-0"
+          className="lg:min-h-[80rem] lg:min-w-[85rem] min-h-[30rem] min-w-[40rem]"
         />
       </span>
 
       {/* voice line section */}
-      <span className="flex flex-row py-32">
-        <span className="flex flex-col grow max-w-sm rounded-lg shadow-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
+      <span className="flex flex-row md:py-32 py-10 flex-wrap">
+        <span className="mx-auto flex flex-col grow max-w-sm rounded-lg shadow-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
           <span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
             VOICE ONLY
           </span>
@@ -183,22 +183,22 @@ export default function Home() {
           </span>
         </span>
 
-        <span className="flex flex-row justify-end relative items-baseline flex-1 md:flex hidden">
+        <span className="flex-row justify-end relative items-baseline flex-1 md:flex hidden">
           <VoiceLineConceptDemo />
         </span>
       </span>
 
       {/* bond/team/collaborate section */}
-      <span className="flex flex-row items-center py-20">
+      <span className="flex flex-row items-center md:py-20 flex-wrap">
         <span className="flex-1 flex flex-row flex-wrap backdrop-blur-md p-10 rounded">
           {/* illustration of collaborating */}
           <img
             src="/illustrations/undraw_team_collaboration_re_ow29.svg"
-            className="h-[20rem] shrink-0"
+            className="min-h-[20rem] min-w-[20rem] shrink-0"
           />
         </span>
         {/* description text */}
-        <span className="text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
+        <span className="mx-auto text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
           <span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
             TEAM
           </span>
@@ -278,9 +278,9 @@ export default function Home() {
       </span>
 
       {/* focus on today section */}
-      <span className="flex flex-row items-center py-20">
+      <span className="flex flex-row items-center md:py-20 py-10 flex-wrap">
         {/* description card */}
-        <span className="text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
+        <span className="mx-auto text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
           <span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
             CLARITY
           </span>
@@ -358,7 +358,7 @@ export default function Home() {
           {/* illustration of collaborating */}
           <img
             src="/illustrations/undraw_freelancer_re_irh4.svg"
-            className="h-[20rem] shrink-0"
+            className="min-h-[20rem] min-w-[20rem] shrink-0"
           />
         </span>
       </span>