ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Develop to Staging

#55
Merged harlekoy wants to merge develop into staging
9 files +378 -181

Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.

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.

src/components/AppHeader.vuemodified+33-138
@@ -4,25 +4,11 @@
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 "
11 class="p-3 rounded-md hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
2612 ><img class="w-32" src="/images/logo.svg" alt="Hoodratz logo"
2713 /></router-link>
2814
@@ -52,15 +38,7 @@
5238 >
5339 <a
5440 :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 "
41 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
6442 @click="navigate"
6543 :href="href"
6644 >About</a
@@ -80,15 +58,7 @@
8058 <a
8159 @click="navigate"
8260 :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 "
61 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
9262 :href="href"
9363 >Roadmap</a
9464 >
@@ -108,15 +78,7 @@
10878 <a
10979 @click="navigate"
11080 :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 "
81 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
12082 :href="href"
12183 >Influencers</a
12284 >
@@ -136,15 +98,7 @@
13698 <a
13799 @click="navigate"
138100 :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 "
101 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
148102 :href="href"
149103 >White Paper</a
150104 >
@@ -155,13 +109,26 @@
155109 </router-link>
156110 </li>
157111
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
112 <li class="relative flex flex-col items-center mx-2 lg:mx-4">
113 <router-link
114 to="/rarities"
115 custom
116 v-slot="{ href, route, navigate, isActive, isExactActive }"
163117 >
118 <a
119 @click="navigate"
120 :class="{ 'text-pink-3': isActive }"
121 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
122 :href="href"
123 >Rarities</a
124 >
125 <div
126 v-if="isActive"
127 class="absolute bottom-0 w-2 h-2 -mb-3 rounded bg-pink-gradient"
128 ></div>
129 </router-link>
164130 </li>
131
165132 <li class="mx-2 text-gray-4 lg:mx-4" v-tooltip="`Coming January`">
166133 Merchandise
167134 <span
@@ -187,114 +154,42 @@
187154 <li>
188155 <router-link
189156 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 "
157 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"
203158 >About</router-link
204159 >
205160 </li>
206161 <li>
207162 <router-link
208163 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 "
164 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"
222165 >Roadmap</router-link
223166 >
224167 </li>
225168 <li>
226169 <router-link
227170 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 "
171 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"
241172 >Influencers</router-link
242173 >
243174 </li>
244175 <li>
245176 <router-link
246177 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 "
178 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"
260179 >White Paper</router-link
261180 >
262181 </li>
263182 <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
183 <router-link
184 to="/rarities"
185 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"
186 >Rarities</router-link
280187 >
281188 </li>
282189 <li>
283190 <a
284191 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 "
192 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"
298193 >Merchandise</a
299194 >
300195 </li>
src/routes.jsmodified+7-0
@@ -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/Rarities.vueadded+256-0
@@ -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>