From 339581ca593a4c25feabecc49d619656eb864a8b Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Fri, 21 Jan 2022 00:00:46 -0800
Subject: [PATCH] responsive ness>?

---
 components/demo/Announcements.tsx        | 2 +-
 components/demo/TeamVoiceLine.tsx        | 2 +-
 components/demo/VoiceLineConceptDemo.tsx | 2 +-
 pages/index.js                           | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/demo/Announcements.tsx b/components/demo/Announcements.tsx
index 991b264..8ea6c47 100644
--- a/components/demo/Announcements.tsx
+++ b/components/demo/Announcements.tsx
@@ -37,7 +37,7 @@ export default function Announcements(props: IVoiceDemoProps) {
 
   return (
     <section
-      className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md absolute right-0 backdrop-blur-xl ${
+      className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-32 backdrop-blur-xl ${
         isAnnouncementsTurn ? " z-20 " : "blur-sm"
       }`}
     >
diff --git a/components/demo/TeamVoiceLine.tsx b/components/demo/TeamVoiceLine.tsx
index 1181ffc..38b1d3d 100644
--- a/components/demo/TeamVoiceLine.tsx
+++ b/components/demo/TeamVoiceLine.tsx
@@ -142,7 +142,7 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
 
   return (
     <section
-      className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl absolute top-32 left-10 z-10 backdrop-blur-xl transition-all duration-300 ${
+      className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl z-10 translate-y-24 translate-x-20 backdrop-blur-xl transition-all duration-300 ${
         !isVoiceLineTurn ? "blur-sm" : ""
       } ${props.demoStep == DemoStep.doneDemo ? "z-30" : ""}`}
     >
diff --git a/components/demo/VoiceLineConceptDemo.tsx b/components/demo/VoiceLineConceptDemo.tsx
index c237dd2..12fd068 100644
--- a/components/demo/VoiceLineConceptDemo.tsx
+++ b/components/demo/VoiceLineConceptDemo.tsx
@@ -44,7 +44,7 @@ export default function VoiceLineConceptDemo() {
             onClick={() => setDemoStep(DemoStep.playIncomingMessage)}
             className="absolute mx-auto my-auto left-1/2 top-1/2 
       bg-gray-200 py-2 px-2 rounded font-semibold inline-flex items-center text-teal-600
-      space-x-2 animate-bounce"
+      space-x-2 animate-bounce z-50"
           >
             <FaPlay /> <span>Play Demo</span>
           </button>
diff --git a/pages/index.js b/pages/index.js
index d878e3b..d7e0e9e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -48,7 +48,7 @@ export default function Home() {
 
   return (
     <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat">
-      <div className="container mx-auto md:pb-10 px-5">
+      <div className="container mx-auto md:pb-10 px-5 lg:px-20">
         {/* header */}
         <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
           <MainLogo className="mr-auto text-3xl" />
@@ -71,7 +71,7 @@ export default function Home() {
         </div>
 
         {/* above fold main */}
-        <div className="flex flex-row flex-wrap md:flex-nowrap md:mt-20">
+        <div className="flex flex-row flex-wrap md:flex-nowrap md:mt-20 space-x-10">
           <span className="flex flex-col max-w-screen-sm justify-start items-baseline backdrop-blur-xl rounded-lg">
             <span className="flex flex-row text-left md:text-6xl text-5xl space-x-5 h-[5rem] overflow-hidden">
               <span className="font-semibold text-black py-4">No</span>
@@ -124,7 +124,7 @@ export default function Home() {
             </span>
           </span>
 
-          <span className="flex flex-row relative items-baseline flex-1 md:block hidden">
+          <span className="flex flex-row justify-end relative items-baseline flex-1 md:flex hidden">
             <VoiceLineConceptDemo />
           </span>
         </div>