From d4674bd5a0333226a9d490762c08ded41e85f393 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Sat, 11 Jun 2022 13:49:15 -0500
Subject: [PATCH] Adjust dashboard to be more responsive

---
 .../src/{components => pages}/Puddles.vue     |   8 +-
 apps/website/src/pages/index/index.vue        | 236 +++++++++---------
 2 files changed, 121 insertions(+), 123 deletions(-)
 rename apps/website/src/{components => pages}/Puddles.vue (98%)

diff --git a/apps/website/src/components/Puddles.vue b/apps/website/src/pages/Puddles.vue
similarity index 98%
rename from apps/website/src/components/Puddles.vue
rename to apps/website/src/pages/Puddles.vue
index af73b5289..2f6e20508 100644
--- a/apps/website/src/components/Puddles.vue
+++ b/apps/website/src/pages/Puddles.vue
@@ -15,8 +15,8 @@ onMounted(() => {
     })
     const randomPuddle = Math.floor(Math.random() * puddleStyles.value.length)
     puddleStyles.value[randomPuddle] = {
-      'fill': 'rgba(249, 158, 76, 0.80)',
-      'filter': 'drop-shadow( 12px 0px 2px rgba(0, 0, 0, .45))',
+      'fill': 'rgba(249, 158, 76, 10)',
+      'filter': 'drop-shadow( 12px 0px 2px rgba(0, 0, 0, .65))',
       'transition': ' all 3.5s ease-out',
     }
   }, 3000)
@@ -393,7 +393,9 @@ onMounted(() => {
   0% {
     opacity: 0;
   }
-
+  25% {
+    opacity: 1;
+  }
   100% {
     opacity: 1;
   }
diff --git a/apps/website/src/pages/index/index.vue b/apps/website/src/pages/index/index.vue
index 14c588ba8..371fa92d6 100644
--- a/apps/website/src/pages/index/index.vue
+++ b/apps/website/src/pages/index/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ArrowRightIcon } from '@heroicons/vue/solid'
 import { ref, onMounted } from 'vue'
-import Puddles from '@/components/Puddles.vue'
+import Puddles from '../Puddles.vue'
 
 const email = ref('')
 async function onSubmit() {
@@ -45,6 +45,7 @@ const hideMessages = () => {
 
 // Create function that does email validation
 function validateEmail(email: string) {
+  
   const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
   const valid = re.test(String(email).toLowerCase())
   console.log('valid :>> ', valid)
@@ -66,9 +67,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pb-[50px]">
+  <div class="p-[50px]">
     <div class="flex flex-wrap">
-      <div class="pl-[100px] pt-[80px] basis-1/2 ">
+      <div class="min-w-[375px] w-1/2">
         <button
           class="flex bg-[#F36F38]/[0.13] hover:bg-[#F36F38]/[0.25] py-1 rounded-3xl text-[#F36F38] w-[270px] text-sm"
           @click="$router.push('/whitepaper')"
@@ -107,7 +108,7 @@ onMounted(() => {
             <input
               v-model="email"
               type="text"
-              placeholder="Enter your email"
+              placeholder="Sign up for early access"
               class="border border-[#D0D5DD] rounded-md px-4 py-2 col-span-3 input-text text-[#F36F38]"
               @click="hideMessages"
             >
@@ -115,7 +116,7 @@ onMounted(() => {
               type="submit"
               class="bg-[#F36F38] button-text text-white py-2 px-4 rounded-md w-[130px] hover:bg-[#F36F38]/[.75]"
             >
-              Get Started
+              Early Access
             </button>
           </div>
           <div
@@ -125,6 +126,7 @@ onMounted(() => {
             Thank you for submitting!
           </div>
           <div
+            v-show="email.length > 0"
             id="invalid-message"
             class="small-text text-[#7d0101] pl-[5px]"
           >
@@ -133,138 +135,132 @@ onMounted(() => {
           <span class="small-text text-[#667085] pl-[5px]">We won't spam you. We promise.</span>
         </form>
       </div>
-      <div class="basis-1/2 relative">
+      <div class="min-w-[370px] w-1/2 h-[500px] relative overflow-hidden">
         <Puddles class="absolute right-[-300px] top-[-200px]" />
       </div>
-      <div class="w-full h-[400px] relative my-[100px]">
-        <div
-          v-if="currentSlide === 0"
-          class="slideshow"
-        >
-          <div
-            class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
+    </div>
+
+    <div class="border w-full p-[50px] bg-[#c4c4c4]/[.5] mt-[100px] min-w-[395px]">
+      <div
+        v-if="currentSlide === 0"
+        class="flex flex-wrap slideshow"
+      >
+        <div class="min-w-[375px] w-1/2 pl-[50px] pt-[50px] slideshow">
+          <img
+            src="/Dashboard.png"
+            class="p-[5%] h-[90%] object-cover"
+            alt=""
           >
-            <div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
-              <img
-                src="/Dashboard.png"
-                class="p-[5%] h-[90%] object-cover"
-                alt=""
-              >
-            </div>
-            <div class="min-w-[50%] w-[50%] text-center">
-              <h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
-                <span class="text-[#F36F38] font-extrabold">Manage</span> your
-                assets and earnings across chains. See all of your coins and NFTs
-                in one dashboard.
-              </h1>
-            </div>
-          </div>
         </div>
+        <div class="min-w-[375px] w-1/2 pt-[50px] pr-[50px]">
+          <h1 class="text-[42px] text-left ">
+            <span class="text-[#F36F38] font-extrabold">Manage</span> your
+            assets and earnings across chains. See all of your coins and NFTs
+            in one dashboard.
+          </h1>
+        </div>
+      </div>
+      <div
+        v-if="currentSlide === 1"
+        class="flex flex-wrap slideshow"
+      >
         <div
-          v-if="currentSlide === 1"
-          class="slideshow"
+          class="min-w-[375px] w-1/2 pl-[50px] pt-[50px]"
         >
-          <div
-            class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
+          <img
+            src="/earn.png"
+            class="p-[5%] h-[90%] object-cover"
+            alt=""
           >
-            <div class="min-w-[50%] w-[50%] text-center">
-              <h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
-                <span class="text-[#F36F38] font-extrabold">Earn</span> by staking
-                your assets to high performing validators. Participate in
-                liquidity pools. Help keep staking decentralized with a strong set
-                of independent validators.
-              </h1>
-            </div>
-            <div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
-              <img
-                src="/earn.png"
-                class="p-[5%] h-[90%] object-cover"
-                alt=""
-              >
-            </div>
-          </div>
         </div>
+        <div class="min-w-[375px] w-1/2 pt-[50px] pr-[50px]">
+          <h1 class="text-[42px] text-left ">
+            <span class="text-[#F36F38] font-extrabold">Earn</span> by staking
+            your assets to high performing validators. Participate in
+            liquidity pools. Help keep staking decentralized with a strong set
+            of independent validators.
+          </h1>
+        </div>
+      </div>
+      <div
+        v-if="currentSlide === 2"
+        class="flex flex-wrap slideshow"
+      >
         <div
-          v-if="currentSlide === 2"
-          class="slideshow"
+          class="min-w-[375px] w-1/2 pl-[50px] pt-[50px]"
         >
-          <div
-            class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
+          <img
+            src="/earn3.png"
+            class="p-[5%] h-[90%] object-cover"
+            alt=""
           >
-            <div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
-              <img
-                src="/earn3.png"
-                class="p-[5%] h-[90%] object-cover"
-                alt=""
-              >
-            </div>
-            <div class="min-w-[50%] w-[50%] text-center">
-              <h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
-                <span class="text-[#F36F38] font-extrabold">Learn</span> about the
-                latest airdops, mints, and protocol news. Stay safe with built-in
-                security features like smart contract scanning.
-              </h1>
-            </div>
-          </div>
         </div>
-        <div class="w-full h-1 border border-red ">
-          <div
-            class="bg-[#F36F38]/[.5] h-full"
-            :style="{ width: slideshowProgress + '%' }"
-          />
+        <div class="min-w-[375px] w-1/2 pt-[50px] pr-[50px]">
+          <h1 class="text-[42px] text-left ">
+            <span class="text-[#F36F38] font-extrabold">Learn</span> about the
+            latest airdops, mints, and protocol news. Stay safe with built-in
+            security features like smart contract scanning.
+          </h1>
         </div>
-        <div class="grid grid-rows-2 text-center py-[50px]">
-          <div class="flex justify-center gap-4">
-            <a
-              href="https://mobile.twitter.com/CasimirAssets"
-              target="_blank"
-              class="w-[25px]"
-            >
-              <img
-                src="/twitter.svg"
-                alt=""
-                class="border"
-              >
-            </a>
+      </div>
+      <div class="w-full h-1 border border-red ">
+        <div
+          class="bg-[#F36F38]/[.5] h-full"
+          :style="{ width: slideshowProgress + '%' }"
+        />
+      </div>
+    </div>
 
-            <a
-              href="https://discord.gg/hkJD9gnN"
-              target="_blank"
-              class="w-[25px]"
-            >
-              <img
-                src="/discord.svg"
-                alt=""
-              >
-            </a>
+    <div class="flex flex-wrap justify-center mt-[200px]">
+      <div class="flex justify-center gap-4">
+        <a
+          href="https://mobile.twitter.com/CasimirAssets"
+          target="_blank"
+          class="w-[25px]"
+        >
+          <img
+            src="/twitter.svg"
+            alt=""
+            class="border"
+          >
+        </a>
 
-            <a
-              href="https://github.com/consensusnetworks/casimir"
-              target="_blank"
-              class="w-[25px]"
-            >
-              <img
-                src="/github.svg"
-                alt=""
-              >
-            </a>
-          </div>
-          <div class="flex justify-center w-full pt-4">
-            <img
-              src="/copyrightIcon.svg"
-              alt=""
-              class="w-[20px]"
-            >
-            <a
-              href="https://consensusnetworks.com/"
-              target="_blank"
-              class="text-[#F36F38] mx-4"
-            >Consensus Networks</a>
-            <span> | All Right Reserved</span>
-          </div>
-        </div>
+        <a
+          href="https://discord.gg/hkJD9gnN"
+          target="_blank"
+          class="w-[25px]"
+        >
+          <img
+            src="/discord.svg"
+            alt=""
+          >
+        </a>
+
+        <a
+          href="https://github.com/consensusnetworks/casimir"
+          target="_blank"
+          class="w-[25px]"
+        >
+          <img
+            src="/github.svg"
+            alt=""
+          >
+        </a>
       </div>
     </div>
+    <div class="flex flex-wrap justify-center">
+      <img
+        src="/copyrightIcon.svg"
+        alt=""
+        class="w-[20px]"
+      >
+      <a
+        href="https://consensusnetworks.com/"
+        target="_blank"
+        class="text-[#F36F38] mx-4"
+      >Consensus Networks</a>
+      <span> | All Right Reserved</span>
+    </div>
   </div>
 </template>