also looking at this
Develop to Staging
#55
9 files
+378
-181
| @@ -64,5 +64,32 @@ | ||
| 64 | 64 | <body> |
| 65 | 65 | <div id="app"></div> |
| 66 | 66 | <script type="module" src="/src/main.js"></script> |
| 67 | <script type="text/javascript"> | |
| 68 | !(function (e, t, n) { | |
| 69 | function a() { | |
| 70 | var e = t.getElementsByTagName("script")[0], | |
| 71 | n = t.createElement("script"); | |
| 72 | (n.type = "text/javascript"), | |
| 73 | (n.async = !0), | |
| 74 | (n.src = "https://beacon-v2.helpscout.net"), | |
| 75 | e.parentNode.insertBefore(n, e); | |
| 76 | } | |
| 77 | if ( | |
| 78 | ((e.Beacon = n = | |
| 79 | function (t, n, a) { | |
| 80 | e.Beacon.readyQueue.push({ method: t, options: n, data: a }); | |
| 81 | }), | |
| 82 | (n.readyQueue = []), | |
| 83 | "complete" === t.readyState) | |
| 84 | ) | |
| 85 | return a(); | |
| 86 | e.attachEvent | |
| 87 | ? e.attachEvent("onload", a) | |
| 88 | : e.addEventListener("load", a, !1); | |
| 89 | })(window, document, window.Beacon || function () {}); | |
| 90 | </script> | |
| 91 | <script type="text/javascript"> | |
| 92 | window.Beacon("init", "cf6c270e-a60d-4241-af97-212d7c7b7ee1"); | |
| 93 | </script> | |
| 67 | 94 | </body> |
| 68 | 95 | </html> |
Binary file. Nothing to show line by line.
Binary file. Nothing to show line by line.
Binary file. Nothing to show line by line.
| @@ -4,27 +4,21 @@ | ||
| 4 | 4 | :class="transparent ? 'bg-transparent' : 'bg-gray-7'" |
| 5 | 5 | > |
| 6 | 6 | <div |
| 7 | class=" | |
| 8 | container | |
| 9 | flex | |
| 10 | items-center | |
| 11 | justify-between | |
| 12 | h-16 | |
| 13 | px-6 | |
| 14 | mx-auto | |
| 15 | md:h-24 | |
| 16 | " | |
| 7 | class="container flex items-center justify-between h-16 px-6 mx-auto md:h-24" | |
| 17 | 8 | > |
| 18 | 9 | <router-link |
| 19 | 10 | to="/" |
| 20 | class=" | |
| 21 | p-3 | |
| 22 | rounded-md | |
| 23 | hover:text-pink-3 | |
| 24 | focus:outline-none focus:bg-pink-custom-2 | |
| 25 | " | |
| 26 | ><img class="w-32" src="/images/logo.svg" alt="Hoodratz logo" | |
| 27 | /></router-link> | |
| 11 | class="flex p-3 rounded-md hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2" | |
| 12 | ><img class="w-36" src="/images/logo.svg" alt="Hoodratz logo" /> | |
| 13 | <div class="flex items-center ml-2 animate-pulse"> | |
| 14 | <div | |
| 15 | class="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-pink-3 blink" | |
| 16 | aria-hidden="true" | |
| 17 | ></div> | |
| 18 | ||
| 19 | <span class="ml-2 mr-1 text-xs">Minting Live</span> | |
| 20 | </div> | |
| 21 | </router-link> | |
| 28 | 22 | |
| 29 | 23 | <div class="lg:hidden"> |
| 30 | 24 | <img |
| @@ -52,15 +46,7 @@ | ||
| 52 | 46 | > |
| 53 | 47 | <a |
| 54 | 48 | :class="{ 'text-pink-3': isActive }" |
| 55 | class=" | |
| 56 | transition | |
| 57 | duration-150 | |
| 58 | ease-in-out | |
| 59 | rounded-md | |
| 60 | lg:px-2 | |
| 61 | hover:text-pink-3 | |
| 62 | focus:outline-none focus:bg-pink-custom-2 | |
| 63 | " | |
| 49 | class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2" | |
| 64 | 50 | @click="navigate" |
| 65 | 51 | :href="href" |
| 66 | 52 | >About</a |
| @@ -80,15 +66,7 @@ | ||
| 80 | 66 | <a |
| 81 | 67 | @click="navigate" |
| 82 | 68 | :class="{ 'text-pink-3': isActive }" |
| 83 | class=" | |
| 84 | transition | |
| 85 | duration-150 | |
| 86 | ease-in-out | |
| 87 | rounded-md | |
| 88 | lg:px-2 | |
| 89 | hover:text-pink-3 | |
| 90 | focus:outline-none focus:bg-pink-custom-2 | |
| 91 | " | |
| 69 | class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2" | |
| 92 | 70 | :href="href" |
| 93 | 71 | >Roadmap</a |
| 94 | 72 | > |
| @@ -108,15 +86,7 @@ | ||
| 108 | 86 | <a |
| 109 | 87 | @click="navigate" |
| 110 | 88 | :class="{ 'text-pink-3': isActive }" |
| 111 | class=" | |
| 112 | transition | |
| 113 | duration-150 | |
| 114 | ease-in-out | |
| 115 | rounded-md | |
| 116 | lg:px-2 | |
| 117 | hover:text-pink-3 | |
| 118 | focus:outline-none focus:bg-pink-custom-2 | |
| 119 | " | |
| 89 | class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2" | |
| 120 | 90 | :href="href" |
| 121 | 91 | >Influencers</a |
| 122 | 92 | > |
| @@ -136,15 +106,7 @@ | ||
| 136 | 106 | <a |
| 137 | 107 | @click="navigate" |
| 138 | 108 | :class="{ 'text-pink-3': isActive }" |
| 139 | class=" | |
| 140 | transition | |
| 141 | duration-150 | |
| 142 | ease-in-out | |
| 143 | rounded-md | |
| 144 | lg:px-2 | |
| 145 | hover:text-pink-3 | |
| 146 | focus:outline-none focus:bg-pink-custom-2 | |
| 147 | " | |
| 109 | class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2" | |
| 148 | 110 | :href="href" |
| 149 | 111 | >White Paper</a |
| 150 | 112 | > |
| @@ -155,13 +117,26 @@ | ||
| 155 | 117 | </router-link> |
| 156 | 118 | </li> |
| 157 | 119 | |
| 158 | <li class="mx-2 lg:mx-4 text-gray-4" v-tooltip="`Dropping 12/07/12`"> | |
| 159 | Rarity | |
| 160 | <span | |
| 161 | class="px-2 py-0.5 mx-2 text-xs bg-white rounded-full text-gray-6" | |
| 162 | >soon</span | |
| 120 | <li class="relative flex flex-col items-center mx-2 lg:mx-4"> | |
| 121 | <router-link | |
| 122 | to="/rarities" | |
| 123 | custom | |
| 124 | v-slot="{ href, route, navigate, isActive, isExactActive }" | |
| 163 | 125 | > |
| 126 | <a | |
| 127 | @click="navigate" | |
| 128 | :class="{ 'text-pink-3': isActive }" | |
| 129 | class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2" | |
| 130 | :href="href" | |
| 131 | >Rarities</a | |
| 132 | > | |
| 133 | <div | |
| 134 | v-if="isActive" | |
| 135 | class="absolute bottom-0 w-2 h-2 -mb-3 rounded bg-pink-gradient" | |
| 136 | ></div> | |
| 137 | </router-link> | |
| 164 | 138 | </li> |
| 139 | ||
| 165 | 140 | <li class="mx-2 text-gray-4 lg:mx-4" v-tooltip="`Coming January`"> |
| 166 | 141 | Merchandise |
| 167 | 142 | <span |
| @@ -187,114 +162,49 @@ | ||
| 187 | 162 | <li> |
| 188 | 163 | <router-link |
| 189 | 164 | to="/about" |
| 190 | class=" | |
| 191 | block | |
| 192 | px-3 | |
| 193 | py-6 | |
| 194 | text-lg | |
| 195 | font-medium | |
| 196 | transition | |
| 197 | duration-150 | |
| 198 | ease-in-out | |
| 199 | rounded-md | |
| 200 | text-gray-8 | |
| 201 | hover:text-pink-3 | |
| 202 | " | |
| 165 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-8 hover:text-pink-3" | |
| 203 | 166 | >About</router-link |
| 204 | 167 | > |
| 205 | 168 | </li> |
| 206 | 169 | <li> |
| 207 | 170 | <router-link |
| 208 | 171 | to="/roadmap" |
| 209 | class=" | |
| 210 | block | |
| 211 | px-3 | |
| 212 | py-6 | |
| 213 | text-lg | |
| 214 | font-medium | |
| 215 | transition | |
| 216 | duration-150 | |
| 217 | ease-in-out | |
| 218 | rounded-md | |
| 219 | text-gray-8 | |
| 220 | hover:text-pink-3 | |
| 221 | " | |
| 172 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-8 hover:text-pink-3" | |
| 222 | 173 | >Roadmap</router-link |
| 223 | 174 | > |
| 224 | 175 | </li> |
| 225 | 176 | <li> |
| 226 | 177 | <router-link |
| 227 | 178 | to="/influencers" |
| 228 | class=" | |
| 229 | block | |
| 230 | px-3 | |
| 231 | py-6 | |
| 232 | text-lg | |
| 233 | font-medium | |
| 234 | transition | |
| 235 | duration-150 | |
| 236 | ease-in-out | |
| 237 | rounded-md | |
| 238 | text-gray-8 | |
| 239 | hover:text-pink-3 | |
| 240 | " | |
| 179 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-8 hover:text-pink-3" | |
| 241 | 180 | >Influencers</router-link |
| 242 | 181 | > |
| 243 | 182 | </li> |
| 244 | 183 | <li> |
| 245 | 184 | <router-link |
| 246 | 185 | to="/white-paper" |
| 247 | class=" | |
| 248 | block | |
| 249 | px-3 | |
| 250 | py-6 | |
| 251 | text-lg | |
| 252 | font-medium | |
| 253 | transition | |
| 254 | duration-150 | |
| 255 | ease-in-out | |
| 256 | rounded-md | |
| 257 | text-gray-8 | |
| 258 | hover:text-pink-3 | |
| 259 | " | |
| 186 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-8 hover:text-pink-3" | |
| 260 | 187 | >White Paper</router-link |
| 261 | 188 | > |
| 262 | 189 | </li> |
| 263 | 190 | <li> |
| 264 | <a | |
| 265 | href="#" | |
| 266 | class=" | |
| 267 | block | |
| 268 | px-3 | |
| 269 | py-6 | |
| 270 | text-lg | |
| 271 | font-medium | |
| 272 | transition | |
| 273 | duration-150 | |
| 274 | ease-in-out | |
| 275 | rounded-md | |
| 276 | text-gray-4 | |
| 277 | hover:text-pink-3 | |
| 278 | " | |
| 279 | >Rarity</a | |
| 191 | <router-link | |
| 192 | to="/rarities" | |
| 193 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-8 hover:text-pink-3" | |
| 194 | >Rarities</router-link | |
| 280 | 195 | > |
| 281 | 196 | </li> |
| 197 | <li> | |
| 198 | <a | |
| 199 | href="https://hoodratz.nakednfts.io" | |
| 200 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-8 hover:text-pink-3" | |
| 201 | >Minting Now! | |
| 202 | </a> | |
| 203 | </li> | |
| 282 | 204 | <li> |
| 283 | 205 | <a |
| 284 | 206 | href="#" |
| 285 | class=" | |
| 286 | block | |
| 287 | px-3 | |
| 288 | py-6 | |
| 289 | text-lg | |
| 290 | font-medium | |
| 291 | transition | |
| 292 | duration-150 | |
| 293 | ease-in-out | |
| 294 | rounded-md | |
| 295 | text-gray-4 | |
| 296 | hover:text-pink-3 | |
| 297 | " | |
| 207 | class="block px-3 py-6 text-lg font-medium transition duration-150 ease-in-out rounded-md text-gray-4 hover:text-pink-3" | |
| 298 | 208 | >Merchandise</a |
| 299 | 209 | > |
| 300 | 210 | </li> |
| @@ -1,6 +1,7 @@ | ||
| 1 | 1 | import Home from "./views/Home.vue"; |
| 2 | 2 | import About from "./views/About.vue"; |
| 3 | 3 | import Roadmap from "./views/Roadmap.vue"; |
| 4 | import Rarities from "./views/Rarities.vue"; | |
| 4 | 5 | import NotFound from "./views/NotFound.vue"; |
| 5 | 6 | import PrivacyPolicy from "./views/PrivacyPolicy.vue"; |
| 6 | 7 | import Giveaway from "./views/Giveaway.vue"; |
| @@ -22,6 +23,12 @@ export const routes = [ | ||
| 22 | 23 | meta: { title: "Roadmap" }, |
| 23 | 24 | component: Roadmap, |
| 24 | 25 | }, |
| 26 | { | |
| 27 | path: "/rarities", | |
| 28 | name: "rarities", | |
| 29 | meta: { title: "Rarities" }, | |
| 30 | component: Rarities, | |
| 31 | }, | |
| 25 | 32 | { |
| 26 | 33 | path: "/privacy-policy", |
| 27 | 34 | name: "privacy-policy", |
| @@ -38,7 +38,7 @@ import AppFooter from "@/components/AppFooter.vue"; | ||
| 38 | 38 | What’s this hype all about?! |
| 39 | 39 | </h2> |
| 40 | 40 | <p class="leading-7 font-sora"> |
| 41 | Are you ready to join the pack / our DAO vai this governance | |
| 41 | Are you ready to join the pack / our DAO via this governance | |
| 42 | 42 | token? Hold us and become part of the next big NFT marketplace |
| 43 | 43 | & decentralized file manager. "Think of Dropbox for web3" |
| 44 | 44 | </p> |
| @@ -232,7 +232,7 @@ import AppFooter from "@/components/AppFooter.vue"; | ||
| 232 | 232 | > |
| 233 | 233 | <img |
| 234 | 234 | class="duration-150 rounded-full hover:transform hover:scale-125" |
| 235 | src="https://pbs.twimg.com/profile_images/1466187175771451393/i_WlaN5B_400x400.jpg" | |
| 235 | src="https://pbs.twimg.com/profile_images/1467870974582222850/HaEsVIQX_400x400.png" | |
| 236 | 236 | /> |
| 237 | 237 | </div> |
| 238 | 238 | <a |
| @@ -271,7 +271,7 @@ import AppFooter from "@/components/AppFooter.vue"; | ||
| 271 | 271 | <div class="w-8 h-8"> |
| 272 | 272 | <img |
| 273 | 273 | class="rounded-full" |
| 274 | src="https://pbs.twimg.com/profile_images/1466978133270319113/5OFI3lr5_400x400.jpg" | |
| 274 | src="https://pbs.twimg.com/profile_images/1469158914033922053/r1kEfBul_400x400.jpg" | |
| 275 | 275 | /> |
| 276 | 276 | </div> |
| 277 | 277 | <a |
| @@ -50,49 +50,47 @@ import AppFooter from "@/components/AppFooter.vue"; | ||
| 50 | 50 | A limited edition of 10,000 rare Hoodratz. |
| 51 | 51 | </p> |
| 52 | 52 | <div |
| 53 | class="flex flex-col items-center w-full lg:flex-row lg:justify-start md:flex-row md:justify-center" | |
| 53 | class="flex flex-col max-w-3xl" | |
| 54 | 54 | > |
| 55 | <a | |
| 56 | :href="social.discord" | |
| 57 | target="_blank" | |
| 58 | class="z-10 px-8 py-4 mt-5 mr-4 text-white uppercase rounded-full cta cta-gradient font-sora shadow-hoodratz-btn text-button" | |
| 59 | > | |
| 60 | Join Discord | |
| 61 | </a> | |
| 55 | <div class="grid grid-cols-1 md:grid-cols-2"> | |
| 56 | <a | |
| 57 | :href="social.discord" | |
| 58 | target="_blank" | |
| 59 | class="flex-1 z-10 px-8 py-4 mt-5 md:mr-4 text-white uppercase rounded-full cta cta-gradient font-sora shadow-hoodratz-btn text-button" | |
| 60 | > | |
| 61 | Join Discord | |
| 62 | </a> | |
| 62 | 63 | |
| 64 | <a | |
| 65 | :href="social.twitter" | |
| 66 | target="_blank" | |
| 67 | class="flex-1 z-10 inline-flex items-center justify-center px-8 py-3 mt-5 text-white uppercase transition duration-150 ease-in-out border border-white rounded-full text-button font-sora backdrop-blur-sm hover:text-pink-3" | |
| 68 | > | |
| 69 | Follow Us | |
| 70 | <svg | |
| 71 | class="fill-current ml-2.5" | |
| 72 | width="15" | |
| 73 | height="15" | |
| 74 | viewBox="0 0 20 20" | |
| 75 | fill="currentColor" | |
| 76 | xmlns="http://www.w3.org/2000/svg" | |
| 77 | > | |
| 78 | <path | |
| 79 | d="M6.2918 18.1251C13.8371 18.1251 17.9652 11.8724 17.9652 6.45167C17.9652 6.27589 17.9613 6.0962 17.9535 5.92042C18.7566 5.33967 19.4496 4.62033 20 3.7962C19.2521 4.12896 18.458 4.34627 17.6449 4.44074C18.5011 3.92755 19.1421 3.12135 19.4492 2.17159C18.6438 2.64892 17.763 2.98563 16.8445 3.1673C16.2257 2.50976 15.4075 2.07439 14.5164 1.9285C13.6253 1.78261 12.711 1.93433 11.9148 2.3602C11.1186 2.78607 10.4848 3.46238 10.1115 4.28455C9.73825 5.10672 9.64619 6.02897 9.84961 6.9087C8.21874 6.82686 6.62328 6.40321 5.16665 5.6652C3.71002 4.9272 2.42474 3.89132 1.39414 2.62472C0.870333 3.52782 0.710047 4.59649 0.945859 5.61353C1.18167 6.63057 1.79589 7.51966 2.66367 8.10011C2.01219 8.07943 1.37498 7.90402 0.804688 7.58839V7.63917C0.804104 8.58691 1.13175 9.50561 1.73192 10.2391C2.3321 10.9726 3.16777 11.4756 4.09687 11.6626C3.49338 11.8277 2.85999 11.8518 2.2457 11.7329C2.50788 12.548 3.01798 13.2609 3.70481 13.7721C4.39164 14.2833 5.22093 14.5673 6.07695 14.5845C4.62369 15.726 2.82848 16.3452 0.980469 16.3423C0.652739 16.3418 0.325333 16.3217 0 16.2821C1.87738 17.4866 4.06128 18.1263 6.2918 18.1251Z" | |
| 80 | fill="currentColor" | |
| 81 | /> | |
| 82 | </svg> | |
| 83 | </a> | |
| 84 | </div> | |
| 63 | 85 | <a |
| 64 | :href="social.twitter" | |
| 86 | href="https://hoodratz.nakednfts.io/" | |
| 65 | 87 | target="_blank" |
| 66 | class="z-10 inline-flex items-center justify-center w-full px-8 py-3 mt-5 text-white uppercase transition duration-150 ease-in-out border border-white rounded-full md:w-3/4 lg:w-auto text-button font-sora backdrop-blur-sm hover:text-pink-3" | |
| 88 | class="mt-5 cta-gradient flex items-center justify-center text-white border-4 border-white rounded-full px-8 py-3 uppercase font-sora z-10 text-button" | |
| 67 | 89 | > |
| 68 | Follow Us | |
| 69 | <svg | |
| 70 | class="fill-current ml-2.5" | |
| 71 | width="15" | |
| 72 | height="15" | |
| 73 | viewBox="0 0 20 20" | |
| 74 | fill="currentColor" | |
| 75 | xmlns="http://www.w3.org/2000/svg" | |
| 76 | > | |
| 77 | <path | |
| 78 | d="M6.2918 18.1251C13.8371 18.1251 17.9652 11.8724 17.9652 6.45167C17.9652 6.27589 17.9613 6.0962 17.9535 5.92042C18.7566 5.33967 19.4496 4.62033 20 3.7962C19.2521 4.12896 18.458 4.34627 17.6449 4.44074C18.5011 3.92755 19.1421 3.12135 19.4492 2.17159C18.6438 2.64892 17.763 2.98563 16.8445 3.1673C16.2257 2.50976 15.4075 2.07439 14.5164 1.9285C13.6253 1.78261 12.711 1.93433 11.9148 2.3602C11.1186 2.78607 10.4848 3.46238 10.1115 4.28455C9.73825 5.10672 9.64619 6.02897 9.84961 6.9087C8.21874 6.82686 6.62328 6.40321 5.16665 5.6652C3.71002 4.9272 2.42474 3.89132 1.39414 2.62472C0.870333 3.52782 0.710047 4.59649 0.945859 5.61353C1.18167 6.63057 1.79589 7.51966 2.66367 8.10011C2.01219 8.07943 1.37498 7.90402 0.804688 7.58839V7.63917C0.804104 8.58691 1.13175 9.50561 1.73192 10.2391C2.3321 10.9726 3.16777 11.4756 4.09687 11.6626C3.49338 11.8277 2.85999 11.8518 2.2457 11.7329C2.50788 12.548 3.01798 13.2609 3.70481 13.7721C4.39164 14.2833 5.22093 14.5673 6.07695 14.5845C4.62369 15.726 2.82848 16.3452 0.980469 16.3423C0.652739 16.3418 0.325333 16.3217 0 16.2821C1.87738 17.4866 4.06128 18.1263 6.2918 18.1251Z" | |
| 79 | fill="currentColor" | |
| 80 | /> | |
| 81 | </svg> | |
| 90 | <span>Mint Now</span> | |
| 91 | <svg class="fill-current w-6 ml-2.5 animate-pulse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M461.8 53.6c-.4-1.7-1.6-3-3.3-3.4-54.4-13.3-180.1 34.1-248.2 102.2-13.3 13.3-24.2 26.4-33.1 39.1-21-1.9-42-.3-59.9 7.5-50.5 22.2-65.2 80.2-69.3 105.1-1 5.9 3.9 11 9.8 10.4l81.1-8.9c.1 7.8.6 14 1.1 18.3.4 4.2 2.3 8.1 5.3 11.1l31.4 31.4c3 3 6.9 4.9 11.1 5.3 4.3.5 10.5 1 18.2 1.1l-8.9 81c-.6 5.9 4.5 10.8 10.4 9.8 24.9-4 83-18.7 105.1-69.2 7.8-17.9 9.4-38.8 7.6-59.7 12.7-8.9 25.9-19.8 39.2-33.1 68.4-68 115.5-190.9 102.4-248zM298.6 213.5c-16.7-16.7-16.7-43.7 0-60.4 16.7-16.7 43.7-16.7 60.4 0 16.7 16.7 16.7 43.7 0 60.4-16.7 16.7-43.7 16.7-60.4 0z"/><path d="M174.5 380.5c-4.2 4.2-11.7 6.6-19.8 8-18.2 3.1-34.1-12.8-31-31 1.4-8.1 3.7-15.6 7.9-19.7l.1-.1c2.3-2.3.4-6.1-2.8-5.7-9.8 1.2-19.4 5.6-26.9 13.1-18 18-19.7 84.8-19.7 84.8s66.9-1.7 84.9-19.7c7.6-7.6 11.9-17.1 13.1-26.9.3-3.2-3.6-5.1-5.8-2.8z"/></svg> | |
| 82 | 92 | </a> |
| 83 | 93 | </div> |
| 84 | <div | |
| 85 | class="absolute items-center hidden xl:bottom-0 lg:-bottom-36 lg:flex" | |
| 86 | > | |
| 87 | <p class="text-button text-gray-4 font-sora"> | |
| 88 | Launching on <span class="text-pink-3">12/12 @ 11am PST!</span> | |
| 89 | </p> | |
| 90 | <img | |
| 91 | class="mt-10 w-28 h-28" | |
| 92 | src="/images/home/hoodratz-rocket.svg" | |
| 93 | alt="" | |
| 94 | /> | |
| 95 | </div> | |
| 96 | 94 | </div> |
| 97 | 95 | <div class="flex justify-center order-first mt-20 lg:order-last"> |
| 98 | 96 | <img |
| @@ -1109,7 +1107,6 @@ export default { | ||
| 1109 | 1107 | } |
| 1110 | 1108 | |
| 1111 | 1109 | .cta-gradient { |
| 1112 | border: 0; | |
| 1113 | 1110 | text-shadow: 0 0 5px rgba(0, 0, 0, 0.25); |
| 1114 | 1111 | background: #f05281; |
| 1115 | 1112 | background-image: linear-gradient( |
| @@ -0,0 +1,256 @@ | ||
| 1 | <script setup> | |
| 2 | import AppHeader from "@/components/AppHeader.vue"; | |
| 3 | import AppFooter from "@/components/AppFooter.vue"; | |
| 4 | </script> | |
| 5 | ||
| 6 | <template> | |
| 7 | <div | |
| 8 | class="w-full h-full bg-gray-8 text-gray-4 selection:bg-pink-3 selection:text-white" | |
| 9 | > | |
| 10 | <AppHeader /> | |
| 11 | ||
| 12 | <div class="container pb-24 mx-auto"> | |
| 13 | <div class="relative mx-auto md:mt-32"> | |
| 14 | <div class="mx-auto md:w-2/3"> | |
| 15 | <img | |
| 16 | class="absolute hidden xl:left-3/4 xl:-top-10 lg:block lg:-top-16 lg:right-0" | |
| 17 | src="/images/home/hoodratz-ellipse-97.png" | |
| 18 | alt="" | |
| 19 | /> | |
| 20 | <div class="relative w-full my-4"> | |
| 21 | <div class="w-full"> | |
| 22 | <img src="/images/rarities-bg.png" alt="About" /> | |
| 23 | </div> | |
| 24 | <div | |
| 25 | class="absolute inset-0 flex items-center justify-center -top-10" | |
| 26 | > | |
| 27 | <h1 class="tracking-widest uppercase text-pink-3 font-sora"> | |
| 28 | Rarities | |
| 29 | </h1> | |
| 30 | </div> | |
| 31 | </div> | |
| 32 | ||
| 33 | <div class="relative mx-4 text-center -top-24 lg:-top-32 xl:-top-36"> | |
| 34 | <div class="mb-20"> | |
| 35 | <h2 | |
| 36 | class="mb-4 text-3xl text-white lg:-mt-6 font-kumbh-bold md:text-5xl" | |
| 37 | > | |
| 38 | How rare are the ratz? | |
| 39 | </h2> | |
| 40 | <p class="leading-7 font-sora"> | |
| 41 | Check out our common, rare, and mythic attributes! | |
| 42 | </p> | |
| 43 | </div> | |
| 44 | </div> | |
| 45 | </div> | |
| 46 | </div> | |
| 47 | ||
| 48 | <div class="relative mx-auto md:mb-32"> | |
| 49 | <img | |
| 50 | class="absolute hidden xl:top-0 xl:-left-12 lg:top-0 lg:-left-5 lg:block" | |
| 51 | src="/images/home/hoodratz-ellipse-1424.svg" | |
| 52 | alt="background particle image" | |
| 53 | /> | |
| 54 | <img | |
| 55 | class="absolute hidden xl:top-0 left-90 lg:top-0 lg:-left-5 lg:block" | |
| 56 | src="/images/home/hoodratz-inverted-cone.png" | |
| 57 | alt="" | |
| 58 | /> | |
| 59 | <img | |
| 60 | class="absolute hidden left-85 xl:top-72 lg:block lg:top-72 lg:left-0" | |
| 61 | src="/images/home/hoodratz-ellipse-88.png" | |
| 62 | alt="background particle image" | |
| 63 | /> | |
| 64 | <img | |
| 65 | class="absolute hidden left-90 xl:top-3/4 lg:block lg:top-3/4 lg:left-0" | |
| 66 | src="/images/home/hoodratz-ellipse-88.png" | |
| 67 | alt="background particle image" | |
| 68 | /> | |
| 69 | <img | |
| 70 | class="absolute hidden xl:left-10 xl:top-1/4 lg:block lg:top-1/2 lg:left-0" | |
| 71 | src="/images/home/hoodratz-ellipse-97.png" | |
| 72 | alt="background particle image" | |
| 73 | /> | |
| 74 | <img | |
| 75 | class="absolute hidden xl:left-2 xl:top-1/2 lg:block lg:top-3/4 lg:left-0" | |
| 76 | src="/images/home/hoodratz-ellipse-88.png" | |
| 77 | alt="background particle image" | |
| 78 | /> | |
| 79 | <img | |
| 80 | class="absolute hidden xl:top-1/2 left-85 lg:top-1/3 lg:block" | |
| 81 | src="/images/home/hoodratz-ellipse-1424.svg" | |
| 82 | alt="background particle image" | |
| 83 | /> | |
| 84 | <img | |
| 85 | class="absolute hidden xl:top-3/4 xl:left-2 lg:top-3/4 lg:-left-10 lg:block" | |
| 86 | src="/images/home/hoodratz-ellipse-1424.svg" | |
| 87 | alt="" | |
| 88 | /> | |
| 89 | <img | |
| 90 | class="absolute hidden left-90 xl:top-full lg:block lg:top-full" | |
| 91 | src="/images/home/hoodratz-ellipse-97.png" | |
| 92 | alt="background particle image" | |
| 93 | /> | |
| 94 | <img | |
| 95 | class="absolute hidden xl:-left-24 xl:top-full lg:block lg:top-full" | |
| 96 | src="/images/home/hoodratz-ellipse-88.png" | |
| 97 | alt="background particle image" | |
| 98 | /> | |
| 99 | ||
| 100 | <div class="relative mx-auto"> | |
| 101 | <div class="max-w-5xl mx-auto mt-12"> | |
| 102 | <img src="/images/rarity-chart.png" alt="Rarity Chart" /> | |
| 103 | </div> | |
| 104 | </div> | |
| 105 | ||
| 106 | <p | |
| 107 | class="pt-48 mb-4 -mt-6 text-3xl text-center text-white font-kumbh-bold md:text-3xl" | |
| 108 | > | |
| 109 | And a whole lot more to come... | |
| 110 | </p> | |
| 111 | <p | |
| 112 | class="pt-4 mb-4 -mt-6 text-3xl text-center text-pink-3 font-kumbh-bold md:text-3xl" | |
| 113 | > | |
| 114 | Rat pack, stay tuned and #stayhood | |
| 115 | </p> | |
| 116 | ||
| 117 | <!-- <div class="relative mx-auto md:w-2/3"> | |
| 118 | <div class="relative mx-4 my-20 text-center md:text-left"> | |
| 119 | <div | |
| 120 | v-for="(item, index) in roadmap" | |
| 121 | class="relative p-6 my-8 rounded-4xl bg-gray-7 font-sora" | |
| 122 | > | |
| 123 | <div | |
| 124 | class="absolute inset-x-0 top-0 flex justify-center -mt-6 md:-top-0 md:hidden" | |
| 125 | > | |
| 126 | <div | |
| 127 | class="flex items-center justify-center w-12 h-12 text-xl text-white rounded-full " | |
| 128 | :class="{ | |
| 129 | 'bg-gray-6': !item.done, | |
| 130 | 'bg-pink-gradient': item.done, | |
| 131 | }" | |
| 132 | > | |
| 133 | <div v-if="item.done"> | |
| 134 | <img src="/images/check.svg" alt="" /> | |
| 135 | </div> | |
| 136 | <div v-else>{{ $date(item.date).format("D") }}</div> | |
| 137 | </div> | |
| 138 | </div> | |
| 139 | ||
| 140 | <div | |
| 141 | class="absolute inset-y-0 left-0 z-10 flex justify-center hidden md:block" | |
| 142 | > | |
| 143 | <div class="flex items-center h-full -ml-16"> | |
| 144 | <div | |
| 145 | v-if="item.done" | |
| 146 | class="flex items-center justify-center w-12 h-12 text-xl text-white rounded-full bg-pink-gradient" | |
| 147 | > | |
| 148 | <div><img src="/images/check.svg" alt="" /></div> | |
| 149 | </div> | |
| 150 | <div | |
| 151 | v-else | |
| 152 | class="flex items-center justify-center w-12 h-12 text-xl text-white border-2 rounded-full bg-pink-1 border-pink-3" | |
| 153 | ></div> | |
| 154 | </div> | |
| 155 | </div> | |
| 156 | ||
| 157 | <div> | |
| 158 | <div class="flex justify-center md:justify-between"> | |
| 159 | <div class="hidden md:block text-pink-3"> | |
| 160 | {{ $date(item.date).format("DD") }} | |
| 161 | </div> | |
| 162 | <div class="uppercase"> | |
| 163 | {{ $date(item.date).format("MMM YYYY @ hh:mm A Z") }} | |
| 164 | </div> | |
| 165 | </div> | |
| 166 | <div class="my-4 text-2xl font-bold text-white"> | |
| 167 | {{ item.title }} | |
| 168 | </div> | |
| 169 | <p v-html="item.description" class="leading-8"></p> | |
| 170 | </div> | |
| 171 | </div> | |
| 172 | ||
| 173 | <div | |
| 174 | class="absolute top-0 hidden h-full -ml-10 border-l border-dashed border-gray-4 md:block" | |
| 175 | ></div> | |
| 176 | </div> | |
| 177 | </div> --> | |
| 178 | </div> | |
| 179 | </div> | |
| 180 | ||
| 181 | <AppFooter /> | |
| 182 | </div> | |
| 183 | </template> | |
| 184 | ||
| 185 | <script> | |
| 186 | import { roadmap } from "@/content/app.json"; | |
| 187 | ||
| 188 | export default { | |
| 189 | data() { | |
| 190 | return { | |
| 191 | roadmap, | |
| 192 | }; | |
| 193 | }, | |
| 194 | }; | |
| 195 | </script> | |
| 196 | ||
| 197 | <style scoped> | |
| 198 | .left-90 { | |
| 199 | left: 90% !important; | |
| 200 | } | |
| 201 | .left-85 { | |
| 202 | left: 85% !important; | |
| 203 | } | |
| 204 | code { | |
| 205 | color: #f05b88; | |
| 206 | font-weight: 400; | |
| 207 | font-size: 0.875em; | |
| 208 | background-color: #f5f7fa; | |
| 209 | border-radius: 0.25rem; | |
| 210 | } | |
| 211 | ||
| 212 | .cta { | |
| 213 | display: inline-block; | |
| 214 | vertical-align: middle; | |
| 215 | -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; | |
| 216 | transition: background-color 0.25s ease-out, color 0.25s ease-out; | |
| 217 | font-family: inherit; | |
| 218 | -webkit-appearance: none; | |
| 219 | line-height: 1; | |
| 220 | text-align: center; | |
| 221 | cursor: pointer; | |
| 222 | background-color: #6e7f91; | |
| 223 | color: #fefefe; | |
| 224 | } | |
| 225 | ||
| 226 | .cta:hover, | |
| 227 | .cta:focus { | |
| 228 | text-decoration: none; | |
| 229 | } | |
| 230 | ||
| 231 | .cta-gradient { | |
| 232 | border: 0; | |
| 233 | text-shadow: 0 0 5px rgba(0, 0, 0, 0.25); | |
| 234 | background: #f05281; | |
| 235 | background-image: linear-gradient( | |
| 236 | to right, | |
| 237 | #f05281, | |
| 238 | #ed9db9, | |
| 239 | #ed9db9, | |
| 240 | #f05281 | |
| 241 | ); | |
| 242 | background-size: 300% 100%; | |
| 243 | -moz-transition: all 0.4s ease-in-out; | |
| 244 | -o-transition: all 0.4s ease-in-out; | |
| 245 | -webkit-transition: all 0.4s ease-in-out; | |
| 246 | transition: all 0.4s ease-in-out; | |
| 247 | } | |
| 248 | ||
| 249 | .cta-gradient:hover { | |
| 250 | background-position: 100% 0; | |
| 251 | -moz-transition: all 0.4s ease-in-out; | |
| 252 | -o-transition: all 0.4s ease-in-out; | |
| 253 | -webkit-transition: all 0.4s ease-in-out; | |
| 254 | transition: all 0.4s ease-in-out; | |
| 255 | } | |
| 256 | </style> | |