ReviewOS

also looking at this

meemalabs/hoodratz.io

Develop to Staging

#55
Merged harlekoy wants to merge develop into staging
9 files +378 -181
index.htmlmodified+27-0
Changes to index.html
@@ -64,5 +64,32 @@
6464 <body>
6565 <div id="app"></div>
6666 <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>
6794 </body>
6895</html>
public/images/rarities-bg.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/rarity-chart.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/white-paper_v2.pngmodified+0-0

Binary file. Nothing to show line by line.

src/components/AppHeader.vuemodified+50-140
Changes to src/components/AppHeader.vue
@@ -4,27 +4,21 @@
44 :class="transparent ? 'bg-transparent' : 'bg-gray-7'"
55 >
66 <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"
178 >
189 <router-link
1910 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>
2822
2923 <div class="lg:hidden">
3024 <img
@@ -52,15 +46,7 @@
5246 >
5347 <a
5448 :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"
6450 @click="navigate"
6551 :href="href"
6652 >About</a
@@ -80,15 +66,7 @@
8066 <a
8167 @click="navigate"
8268 :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"
9270 :href="href"
9371 >Roadmap</a
9472 >
@@ -108,15 +86,7 @@
10886 <a
10987 @click="navigate"
11088 :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"
12090 :href="href"
12191 >Influencers</a
12292 >
@@ -136,15 +106,7 @@
136106 <a
137107 @click="navigate"
138108 :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"
148110 :href="href"
149111 >White Paper</a
150112 >
@@ -155,13 +117,26 @@
155117 </router-link>
156118 </li>
157119
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 }"
163125 >
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>
164138 </li>
139
165140 <li class="mx-2 text-gray-4 lg:mx-4" v-tooltip="`Coming January`">
166141 Merchandise
167142 <span
@@ -187,114 +162,49 @@
187162 <li>
188163 <router-link
189164 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"
203166 >About</router-link
204167 >
205168 </li>
206169 <li>
207170 <router-link
208171 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"
222173 >Roadmap</router-link
223174 >
224175 </li>
225176 <li>
226177 <router-link
227178 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"
241180 >Influencers</router-link
242181 >
243182 </li>
244183 <li>
245184 <router-link
246185 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"
260187 >White Paper</router-link
261188 >
262189 </li>
263190 <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
280195 >
281196 </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>
282204 <li>
283205 <a
284206 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"
298208 >Merchandise</a
299209 >
300210 </li>
src/routes.jsmodified+7-0
Changes to src/routes.js
@@ -1,6 +1,7 @@
11import Home from "./views/Home.vue";
22import About from "./views/About.vue";
33import Roadmap from "./views/Roadmap.vue";
4import Rarities from "./views/Rarities.vue";
45import NotFound from "./views/NotFound.vue";
56import PrivacyPolicy from "./views/PrivacyPolicy.vue";
67import Giveaway from "./views/Giveaway.vue";
@@ -22,6 +23,12 @@ export const routes = [
2223 meta: { title: "Roadmap" },
2324 component: Roadmap,
2425 },
26 {
27 path: "/rarities",
28 name: "rarities",
29 meta: { title: "Rarities" },
30 component: Rarities,
31 },
2532 {
2633 path: "/privacy-policy",
2734 name: "privacy-policy",
src/views/Giveaway.vuemodified+3-3
Changes to src/views/Giveaway.vue
@@ -38,7 +38,7 @@ import AppFooter from "@/components/AppFooter.vue";
3838 What’s this hype all about?!
3939 </h2>
4040 <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
4242 token? Hold us and become part of the next big NFT marketplace
4343 &amp; decentralized file manager. "Think of Dropbox for web3"
4444 </p>
@@ -232,7 +232,7 @@ import AppFooter from "@/components/AppFooter.vue";
232232 >
233233 <img
234234 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"
236236 />
237237 </div>
238238 <a
@@ -271,7 +271,7 @@ import AppFooter from "@/components/AppFooter.vue";
271271 <div class="w-8 h-8">
272272 <img
273273 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"
275275 />
276276 </div>
277277 <a
src/views/Home.vuemodified+35-38
Changes to src/views/Home.vue
@@ -50,49 +50,47 @@ import AppFooter from "@/components/AppFooter.vue";
5050 A limited edition of 10,000 rare Hoodratz.
5151 </p>
5252 <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"
5454 >
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>
6263
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>
6385 <a
64 :href="social.twitter"
86 href="https://hoodratz.nakednfts.io/"
6587 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"
6789 >
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>
8292 </a>
8393 </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>
9694 </div>
9795 <div class="flex justify-center order-first mt-20 lg:order-last">
9896 <img
@@ -1109,7 +1107,6 @@ export default {
11091107}
11101108
11111109.cta-gradient {
1112 border: 0;
11131110 text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
11141111 background: #f05281;
11151112 background-image: linear-gradient(
formatting only · 5 hidden lines
Changes to src/views/Home.vue
@@ -1133,4 +1130,4 @@ export default { formatting only
11331130 -webkit-transition: all 0.4s ease-in-out;
11341131 transition: all 0.4s ease-in-out;
11351132}
1136</style>⧵
1133</style>
src/views/Rarities.vueadded+256-0
Changes to src/views/Rarities.vue
@@ -0,0 +1,256 @@
1<script setup>
2import AppHeader from "@/components/AppHeader.vue";
3import 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>
186import { roadmap } from "@/content/app.json";
187
188export 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}
204code {
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>