responsive ness>?

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

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" : ""}`}
     >

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>

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>