Merge pull request #43 from meemalabs/develop

Staging Update - Dec 8, 2021
meemalabs · Dec 8, 2021 · f0f782d · f0f782d
2 parents a99aea5 + cc8c35b
commit f0f782d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 93 deletions.
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -83,7 +83,7 @@
             </router-link>
           </div>
           <p
-            class="my-4 mr-0 text-sm leading-6 text-center md:mr-8 md:text-left md:text-xs"
+            class="my-4 mr-0 text-sm leading-6 text-center  md:mr-8 md:text-left md:text-xs"
           >
             Crafted in Silicon Beach, CA, Hoodratz are uniquely generated &amp;
             collectible NFTs. Inspired by New York City’s underground, each of
@@ -92,21 +92,21 @@
           <div class="flex justify-center mb-4 md:hidden">
             <ul class="flex">
               <li
-                class="flex items-center justify-center p-4 mx-3 border rounded-full border-gray-5"
+                class="flex items-center justify-center p-4 mx-3 border rounded-full  border-gray-5"
               >
                 <a :href="social.discord" target="_blank">
                   <img src="/images/discord.svg" alt="Discord" />
                 </a>
               </li>
               <li
-                class="flex items-center justify-center p-4 mx-3 border rounded-full border-gray-5"
+                class="flex items-center justify-center p-4 mx-3 border rounded-full  border-gray-5"
               >
                 <a :href="social.twitter" target="_blank">
                   <img src="/images/twitter.svg" alt="Twitter" />
                 </a>
               </li>
               <li
-                class="flex items-center justify-center p-4 mx-3 border rounded-full border-gray-5"
+                class="flex items-center justify-center p-4 mx-3 border rounded-full  border-gray-5"
               >
                 <a :href="social.instagram" target="_blank">
                   <img src="/images/insta.svg" alt="Instagram" />
@@ -125,49 +125,55 @@
               <ul>
                 <li class="my-2">
                   <router-link
-                    class="px-2 transition duration-150 ease-in-out rounded-md hover:text-white focus:outline-none focus:bg-pink-custom-2"
+                    class="px-2 transition duration-150 ease-in-out rounded-md  hover:text-white focus:outline-none focus:bg-pink-custom-2"
                     to="/about"
                     >About</router-link
                   >
                 </li>
                 <li class="my-2">
                   <router-link
-                    class="px-2 transition duration-150 ease-in-out rounded-md hover:text-white focus:outline-none focus:bg-pink-custom-2"
+                    class="px-2 transition duration-150 ease-in-out rounded-md  hover:text-white focus:outline-none focus:bg-pink-custom-2"
                     to="/roadmap"
                     >Roadmap</router-link
                   >
                 </li>
-                <li class="px-2 my-2 text-gray-5">FAQ</li>
+                <li class="my-2">
+                  <router-link
+                    class="px-2 transition duration-150 ease-in-out rounded-md  hover:text-white focus:outline-none focus:bg-pink-custom-2"
+                    to="/faq"
+                    >FAQ
+                  </router-link>
+                </li>
               </ul>
             </div>
             <div>
               <h3 class="px-2 mb-8 text-white uppercase">Hoodratz</h3>
               <ul>
                 <li class="my-2">
                   <a
-                    class="px-2 transition duration-150 ease-in-out rounded-md hover:text-white focus:outline-none focus:bg-pink-custom-2"
+                    class="px-2 transition duration-150 ease-in-out rounded-md  hover:text-white focus:outline-none focus:bg-pink-custom-2"
                     href="/#utility"
                   >
                     Utility
                   </a>
                 </li>
                 <li class="my-2">
                   <span
-                    class="px-2 transition duration-150 ease-in-out rounded-md text-gray-5 focus:outline-none focus:bg-pink-custom-2"
+                    class="px-2 transition duration-150 ease-in-out rounded-md  text-gray-5 focus:outline-none focus:bg-pink-custom-2"
                   >
                     Attributes
                   </span>
                 </li>
                 <li class="my-2">
                   <span
-                    class="px-2 transition duration-150 ease-in-out rounded-md text-gray-5 focus:outline-none focus:bg-pink-custom-2"
+                    class="px-2 transition duration-150 ease-in-out rounded-md  text-gray-5 focus:outline-none focus:bg-pink-custom-2"
                   >
                     Merchandise
                   </span>
                 </li>
                 <li class="my-2">
                   <span
-                    class="px-2 transition duration-150 ease-in-out rounded-md text-gray-5 focus:outline-none focus:bg-pink-custom-2"
+                    class="px-2 transition duration-150 ease-in-out rounded-md  text-gray-5 focus:outline-none focus:bg-pink-custom-2"
                   >
                     White Paper
                   </span>
@@ -196,7 +202,7 @@
                     <a
                       :href="social.discord"
                       target="_blank"
-                      class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
+                      class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full  lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
                     >
                       <img
                         class="w-full h-full"
@@ -209,7 +215,7 @@
                     <a
                       :href="social.twitter"
                       target="_blank"
-                      class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
+                      class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full  lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
                     >
                       <img
                         class="w-full h-full"
@@ -222,7 +228,7 @@
                     <a
                       :href="social.instagram"
                       target="_blank"
-                      class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
+                      class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full  lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
                     >
                       <img
                         class="w-full h-full"

diff --git a/src/views/Giveaway.vue b/src/views/Giveaway.vue
@@ -21,22 +21,26 @@ import AppFooter from "@/components/AppFooter.vue";
             <div class="w-full">
               <img src="/images/honorary.png" alt="About" />
             </div>
-            <div class="absolute inset-0 flex items-center justify-center -top-10">
-              <h1 class="-mt-2 tracking-widest uppercase text-pink-3 font-sora">
+            <div
+              class="absolute inset-0 flex items-center justify-center -top-10"
+            >
+              <h1 class="tracking-widest uppercase text-pink-3 font-sora">
                 Influencers
               </h1>
             </div>
           </div>
 
-          <div class="mx-4 text-center relative -top-44">
+          <div class="relative mx-4 text-center -top-24 lg:-top-32 xl:-top-44">
             <div class="mb-20">
               <h2
-                class="mb-4 -mt-6 text-3xl text-white  font-kumbh-bold md:text-5xl"
+                class="mb-4 text-3xl text-white  lg:-mt-6 font-kumbh-bold md:text-5xl"
               >
                 What’s this hype all about?!
               </h2>
               <p class="leading-7 font-sora">
-                Join us in this mythic venture of improving this ecosystem.
+                Are you ready to join the pack / our DAO vai this governance
+                token? Hold us and become part of the next big NFT marketplace
+                &amp; decentralized file manager. "Think of Dropbox for web3"
               </p>
             </div>
           </div>
@@ -96,7 +100,7 @@ import AppFooter from "@/components/AppFooter.vue";
         />
 
         <div class="relative mx-auto">
-          <div class="max-w-5xl mx-auto mt-12">
+          <div class="max-w-5xl px-4 mx-auto mt-12">
             <div class="max-w-xl mx-auto">
               <h1
                 class="pl-4 mt-10 text-white underline  md:pl-0 font-kumbh-bold text-title"

diff --git a/src/views/Roadmap.vue b/src/views/Roadmap.vue
@@ -20,16 +20,16 @@ import AppFooter from "@/components/AppFooter.vue";
               <img src="/images/honorary.png" alt="About" />
             </div>
             <div class="absolute inset-0 flex items-center justify-center -top-10">
-              <h1 class="-mt-2 tracking-widest uppercase text-pink-3 font-sora">
+              <h1 class="tracking-widest uppercase text-pink-3 font-sora">
                 Roadmap
               </h1>
             </div>
           </div>
 
-          <div class="mx-4 text-center relative -top-44">
+          <div class="relative mx-4 text-center -top-24 lg:-top-32 xl:-top-44">
             <div class="mb-20">
               <h2
-                class="mb-4 -mt-6 text-3xl text-white font-kumbh-bold md:text-5xl"
+                class="mb-4 text-3xl text-white lg:-mt-6 font-kumbh-bold md:text-5xl"
               >
                 Find out the plan!
               </h2>

diff --git a/src/views/WhitePaper.vue b/src/views/WhitePaper.vue
@@ -5,50 +5,35 @@ import AppFooter from "@/components/AppFooter.vue";
 
 <template>
   <div
-    class="
-      w-full
-      h-full
-      bg-gray-8
-      text-gray-4
-      selection:bg-pink-3 selection:text-white
-    "
+    class="w-full h-full  bg-gray-8 text-gray-4 selection:bg-pink-3 selection:text-white"
   >
     <AppHeader />
 
     <div class="container pb-24 mx-auto">
       <div class="relative mx-auto md:mt-32">
         <div class="mx-auto md:w-2/3">
           <img
-            class="
-              absolute
-              hidden
-              xl:left-3/4 xl:-top-10
-              lg:block lg:-top-16 lg:right-0
-            "
+            class="absolute hidden  xl:left-3/4 xl:-top-10 lg:block lg:-top-16 lg:right-0"
             src="/images/home/hoodratz-ellipse-97.png"
             alt=""
           />
           <div class="relative w-full my-4">
             <div class="w-full">
               <img src="/images/white-paper-bg.png" alt="About" />
             </div>
-            <div class="absolute inset-0 flex items-center justify-center">
-              <h1 class="-mt-2 tracking-widest uppercase text-pink-3 font-sora">
+            <div
+              class="absolute inset-0 flex items-center justify-center -top-10"
+            >
+              <h1 class="tracking-widest uppercase text-pink-3 font-sora">
                 White Paper
               </h1>
             </div>
           </div>
 
-          <div class="mx-4 text-center">
+          <div class="relative mx-4 text-center -top-24 lg:-top-32 xl:-top-36">
             <div class="mb-20">
               <h2
-                class="
-                  mb-4
-                  -mt-6
-                  text-3xl text-white
-                  font-kumbh-bold
-                  md:text-5xl
-                "
+                class="mb-4 text-3xl text-white  lg:-mt-6 font-kumbh-bold md:text-5xl"
               >
                 What’s in it for the investors?
               </h2>
@@ -62,12 +47,7 @@ import AppFooter from "@/components/AppFooter.vue";
 
       <div class="relative mx-auto md:mb-32">
         <img
-          class="
-            absolute
-            hidden
-            xl:top-0 xl:-left-12
-            lg:top-0 lg:-left-5 lg:block
-          "
+          class="absolute hidden  xl:top-0 xl:-left-12 lg:top-0 lg:-left-5 lg:block"
           src="/images/home/hoodratz-ellipse-1424.svg"
           alt="background particle image"
         />
@@ -82,33 +62,17 @@ import AppFooter from "@/components/AppFooter.vue";
           alt="background particle image"
         />
         <img
-          class="
-            absolute
-            hidden
-            left-90
-            xl:top-3/4
-            lg:block lg:top-3/4 lg:left-0
-          "
+          class="absolute hidden  left-90 xl:top-3/4 lg:block lg:top-3/4 lg:left-0"
           src="/images/home/hoodratz-ellipse-88.png"
           alt="background particle image"
         />
         <img
-          class="
-            absolute
-            hidden
-            xl:left-10 xl:top-1/4
-            lg:block lg:top-1/2 lg:left-0
-          "
+          class="absolute hidden  xl:left-10 xl:top-1/4 lg:block lg:top-1/2 lg:left-0"
           src="/images/home/hoodratz-ellipse-97.png"
           alt="background particle image"
         />
         <img
-          class="
-            absolute
-            hidden
-            xl:left-2 xl:top-1/2
-            lg:block lg:top-3/4 lg:left-0
-          "
+          class="absolute hidden  xl:left-2 xl:top-1/2 lg:block lg:top-3/4 lg:left-0"
           src="/images/home/hoodratz-ellipse-88.png"
           alt="background particle image"
         />
@@ -118,12 +82,7 @@ import AppFooter from "@/components/AppFooter.vue";
           alt="background particle image"
         />
         <img
-          class="
-            absolute
-            hidden
-            xl:top-3/4 xl:left-2
-            lg:top-3/4 lg:-left-10 lg:block
-          "
+          class="absolute hidden  xl:top-3/4 xl:left-2 lg:top-3/4 lg:-left-10 lg:block"
           src="/images/home/hoodratz-ellipse-1424.svg"
           alt=""
         />
@@ -145,26 +104,12 @@ import AppFooter from "@/components/AppFooter.vue";
         </div>
 
         <p
-          class="
-            pt-48
-            mb-4
-            -mt-6
-            text-3xl text-center text-white
-            font-kumbh-bold
-            md:text-3xl
-          "
+          class="pt-48 mb-4 -mt-6 text-3xl text-center text-white  font-kumbh-bold md:text-3xl"
         >
           And a whole lot more to come...
         </p>
         <p
-          class="
-            pt-4
-            mb-4
-            -mt-6
-            text-3xl text-center text-pink-3
-            font-kumbh-bold
-            md:text-3xl
-          "
+          class="pt-4 mb-4 -mt-6 text-3xl text-center  text-pink-3 font-kumbh-bold md:text-3xl"
         >
           Rat pack, stay tuned and #stayhood
         </p>