ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Production Update - Nov 27, 2021

#13
Merged glennmichael123 wants to merge staging into main
22 files +1290 -433

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.

src/components/AppFooter.vuemodified+197-122
@@ -1,138 +1,213 @@
11<template>
2<footer class="text-gray-3 font-sora bg-gray-6">
2 <footer class="text-gray-3 font-sora bg-gray-6">
33 <div class="container mx-auto">
4 <div class="md:hidden bg-gray-8">
5 <h3 class="bg-gray-7 text-white uppercase px-4 py-3 text-sm">Company</h3>
6 <ul class="divide-y divide-gray-7 text-xs">
7 <li class="p-4">
8 <router-link to="/about" class="flex items-center justify-between">
9 <div>About</div>
10 <div><img src="/images/chevron.svg" alt=""></div>
11 </router-link>
12 </li>
13 <li class="p-4">
14 <router-link to="/roadmap" class="flex items-center justify-between">
15 <div>Roadmap</div>
16 <div><img src="/images/chevron.svg" alt=""></div>
17 </router-link>
18 </li>
4 <div class="md:hidden bg-gray-8">
5 <h3 class="px-4 py-3 text-sm text-white uppercase bg-gray-7">
6 Company
7 </h3>
8 <ul class="text-xs divide-y divide-gray-7">
9 <li class="p-4">
10 <router-link to="/about" class="flex items-center justify-between">
11 <div>About</div>
12 <div><img src="/images/chevron.svg" alt="" /></div>
13 </router-link>
14 </li>
15 <li class="p-4">
16 <router-link
17 to="/roadmap"
18 class="flex items-center justify-between"
19 >
20 <div>Roadmap</div>
21 <div><img src="/images/chevron.svg" alt="" /></div>
22 </router-link>
23 </li>
24 </ul>
25 <h3 class="px-4 py-3 text-sm text-white uppercase bg-gray-7">
26 Hoodratz
27 </h3>
28 <ul class="text-xs divide-y divide-gray-7">
29 <li class="flex items-center justify-between p-4">
30 <div>
31 Attributes
32 <small class="px-1 uppercase bg-white rounded-full text-gray-7"
33 >Soon</small
34 >
35 </div>
36 <div><img src="/images/chevron.svg" alt="" /></div>
37 </li>
38 <li class="flex items-center justify-between p-4">
39 <div>
40 Merch
41 <small class="px-1 uppercase bg-white rounded-full text-gray-7"
42 >Soon</small
43 >
44 </div>
45 <div><img src="/images/chevron.svg" alt="" /></div>
46 </li>
47 </ul>
48 <h3 class="px-4 py-3 text-sm text-white uppercase bg-gray-7">
49 Policies
50 </h3>
51 <ul class="text-xs divide-y divide-gray-7">
52 <li class="flex items-center justify-between p-4">
53 <div>
54 <router-link to="/privacy-policy">Privacy policy</router-link>
55 </div>
56 <div><img src="/images/chevron.svg" alt="" /></div>
57 </li>
58 <li class="flex items-center justify-between p-4">
59 <div>Cookie policy</div>
60 <div><img src="/images/chevron.svg" alt="" /></div>
61 </li>
62 </ul>
63 </div>
64 <div class="px-3 py-8 text-sm md:grid md:grid-cols-3 md:gap-4">
65 <div>
66 <div class="flex justify-center my-6 md:justify-start">
67 <router-link
68 to="/"
69 class="p-2 rounded-md focus:outline-none focus:bg-pink-custom-2"
70 >
71 <img src="/images/logo-light.svg" alt="Hoodratz" />
72 </router-link>
73 </div>
74 <p
75 class="my-4 text-sm leading-6 text-center md:text-left md:text-xs lg:text-base"
76 >
77 Hodratz are uniquely generated and collectible NFTs. Each of them is
78 one-of-a-kind and 100% owned by you.
79 </p>
80 <div class="flex justify-center mb-4 md:hidden">
81 <ul class="flex">
82 <li
83 class="flex items-center justify-center p-4 mx-3 border rounded-full border-gray-5"
84 >
85 <a :href="social.discord" target="_blank">
86 <img src="/images/discord.svg" alt="Discord" />
87 </a>
88 </li>
89 <li
90 class="flex items-center justify-center p-4 mx-3 border rounded-full border-gray-5"
91 >
92 <a :href="social.twitter" target="_blank">
93 <img src="/images/twitter.svg" alt="Twitter" />
94 </a>
95 </li>
96 <li
97 class="flex items-center justify-center p-4 mx-3 border rounded-full border-gray-5"
98 >
99 <a :href="social.instagram" target="_blank">
100 <img src="/images/insta.svg" alt="Instagram" />
101 </a>
102 </li>
19103 </ul>
20 <h3 class="bg-gray-7 text-white uppercase px-4 py-3 text-sm">Hoodratz</h3>
21 <ul class="divide-y divide-gray-7 text-xs">
22 <li class="p-4 flex items-center justify-between">
23 <div>Attributes <small class="uppercase bg-white rounded-full text-gray-7 px-1">Soon</small></div>
24 <div><img src="/images/chevron.svg" alt=""></div>
104 </div>
105 <div class="text-center md:text-left text-gray-4">
106 <small>© 2021 Hoodratz Inc. All right reserved</small>
107 </div>
108 </div>
109 <div class="hidden col-span-2 md:block">
110 <div class="grid grid-cols-4 mt-6">
111 <div>
112 <h3 class="px-2 mb-8 text-white uppercase">Company</h3>
113 <ul>
114 <li class="my-2">
115 <router-link
116 class="px-2 rounded-md hover:text-white focus:outline-none focus:bg-pink-custom-2"
117 to="/about"
118 >About</router-link
119 >
25120 </li>
26 <li class="p-4 flex items-center justify-between">
27 <div>Merch <small class="uppercase bg-white rounded-full text-gray-7 px-1">Soon</small></div>
28 <div><img src="/images/chevron.svg" alt=""></div>
121 <li class="my-2">
122 <router-link
123 class="px-2 rounded-md hover:text-white focus:outline-none focus:bg-pink-custom-2"
124 to="/roadmap"
125 >Roadmap</router-link
126 >
29127 </li>
30 </ul>
31 <h3 class="bg-gray-7 text-white uppercase px-4 py-3 text-sm">Policies</h3>
32 <ul class="divide-y divide-gray-7 text-xs">
33 <li class="p-4 flex items-center justify-between">
34 <div><router-link to="/privacy-policy">Privacy policy</router-link></div>
35 <div><img src="/images/chevron.svg" alt=""></div>
128 </ul>
129 </div>
130 <div>
131 <h3 class="mb-8 text-white uppercase">Hoodratz</h3>
132 <ul>
133 <li class="my-2 cursor-not-allowed">Attributes</li>
134 <li class="my-2 cursor-not-allowed">Merch</li>
135 </ul>
136 </div>
137 <div>
138 <h3 class="px-2 mb-8 text-white uppercase">Policies</h3>
139 <ul>
140 <li class="my-2">
141 <router-link
142 class="px-2 rounded-md hover:text-white focus:outline-none focus:bg-pink-custom-2"
143 to="/privacy-policy"
144 >Privacy policy</router-link
145 >
36146 </li>
37 <li class="p-4 flex items-center justify-between">
38 <div>Cookie policy</div>
39 <div><img src="/images/chevron.svg" alt=""></div>
147 <li class="my-2">
148 <a
149 class="px-2 rounded-md cursor-not-allowed hover:text-white focus:outline-none focus:bg-pink-custom-2"
150 href="#"
151 >Cookie policy</a
152 >
40153 </li>
41 </ul>
42 </div>
43 <div class="py-8 px-3 text-sm md:grid md:grid-cols-3 md:gap-4">
44 <div>
45 <div class="flex justify-center md:justify-start my-6">
46 <router-link to="/">
47 <img src="/images/logo-light.svg" alt="Hoodratz">
48 </router-link>
49 </div>
50 <p class="my-4 text-center md:text-left leading-6 text-sm md:text-xs lg:text-base">
51 Hodratz are uniquely generated and collectible NFTs. Each of them is one-of-a-kind and 100% owned by you.
52 </p>
53 <div class="flex justify-center mb-4 md:hidden">
54 <ul class="flex">
55 <li class="mx-3 rounded-full border p-4 flex items-center justify-center border-gray-5">
56 <a :href="social.discord" target="_blank">
57 <img src="/images/discord.svg" alt="Discord">
58 </a>
59 </li>
60 <li class="mx-3 rounded-full border p-4 flex items-center justify-center border-gray-5">
61 <a :href="social.twitter" target="_blank">
62 <img src="/images/twitter.svg" alt="Twitter">
63 </a>
64 </li>
65 <li class="mx-3 rounded-full border p-4 flex items-center justify-center border-gray-5">
66 <a :href="social.instagram" target="_blank">
67 <img src="/images/insta.svg" alt="Instagram">
68 </a>
69 </li>
70 </ul>
71 </div>
72 <div class="text-center md:text-left text-gray-4">
73 <small>© 2021 Hoodratz Inc. All right reserved</small>
74 </div>
154 </ul>
75155 </div>
76 <div class="col-span-2 hidden md:block">
77 <div class="grid grid-cols-4 mt-6">
78 <div>
79 <h3 class="uppercase text-white mb-8">Company</h3>
80 <ul>
81 <li class="my-2"><router-link class="hover:text-white" to="/about">About</router-link></li>
82 <li class="my-2"><router-link class="hover:text-white" to="/roadmap">Roadmap</router-link></li>
83 </ul>
84 </div>
85 <div>
86 <h3 class="uppercase text-white mb-8">Hoodratz</h3>
87 <ul>
88 <li class="my-2 cursor-not-allowed">Attributes</li>
89 <li class="my-2 cursor-not-allowed">Merch</li>
90 </ul>
91 </div>
92 <div>
93 <h3 class="uppercase text-white mb-8">Policies</h3>
94 <ul>
95 <li class="my-2"><router-link class="hover:text-white" to="/privacy-policy">Privacy policy</router-link></li>
96 <li class="my-2"><a class="cursor-not-allowed" href="#">Cookie policy</a></li>
97 </ul>
98 </div>
99 <div>
100 <h3 class="text-white mb-8">Connect</h3>
101 <div class="flex justify-center mb-4">
102 <ul class="grid grid-cols-3 gap-1 lg:gap-3 xl:gap-4">
103 <li class="rounded-full border flex items-center justify-center border-gray-5 md:w-10 md:h-10 lg:w-12 lg:h-12">
104 <a :href="social.discord" target="_blank" class="block">
105 <img class="w-4" src="/images/discord.svg" alt="Discord">
106 </a>
107 </li>
108 <li class="rounded-full border flex items-center justify-center border-gray-5 md:w-10 md:h-10 lg:w-12 lg:h-12">
109 <a :href="social.twitter" target="_blank" class="block">
110 <img class="w-4" src="/images/twitter.svg" alt="Twitter">
111 </a>
112 </li>
113 <li class="rounded-full border flex items-center justify-center border-gray-5 md:w-10 md:h-10 lg:w-12 lg:h-12">
114 <a :href="social.instagram" target="_blank" class="block">
115 <img class="w-4" src="/images/insta.svg" alt="Instagram">
116 </a>
117 </li>
118 </ul>
119 </div>
120 </div>
121 </div>
156 <div>
157 <h3 class="mb-8 text-white">Connect</h3>
158 <div class="flex justify-center mb-4">
159 <ul class="grid grid-cols-3 gap-1 lg:gap-3 xl:gap-4">
160 <li
161 class="flex items-center justify-center border rounded-full border-gray-5 md:w-10 md:h-10 lg:w-12 lg:h-12"
162 >
163 <a :href="social.discord" target="_blank" class="block">
164 <img
165 class="w-4"
166 src="/images/discord.svg"
167 alt="Discord"
168 />
169 </a>
170 </li>
171 <li
172 class="flex items-center justify-center border rounded-full border-gray-5 md:w-10 md:h-10 lg:w-12 lg:h-12"
173 >
174 <a :href="social.twitter" target="_blank" class="block">
175 <img
176 class="w-4"
177 src="/images/twitter.svg"
178 alt="Twitter"
179 />
180 </a>
181 </li>
182 <li
183 class="flex items-center justify-center border rounded-full border-gray-5 md:w-10 md:h-10 lg:w-12 lg:h-12"
184 >
185 <a :href="social.instagram" target="_blank" class="block">
186 <img
187 class="w-4"
188 src="/images/insta.svg"
189 alt="Instagram"
190 />
191 </a>
192 </li>
193 </ul>
194 </div>
122195 </div>
196 </div>
123197 </div>
124 </div>
125</footer>
198 </div>
199 </div>
200 </footer>
126201</template>
127202
128203<script>
129import { social } from '@/content/app.json'
204import { social } from "@/content/app.json";
130205
131206export default {
132 data () {
133 return {
134 social
135 }
136 }
137}
207 data() {
208 return {
209 social,
210 };
211 },
212};
138213</script>
src/components/AppHeader.vuemodified+14-12
@@ -6,8 +6,10 @@
66 <div
77 class="container flex items-center justify-between h-16 px-6 mx-auto md:h-24"
88 >
9 <router-link to="/" class="w-32"
10 ><img src="/images/logo.svg" alt=""
9 <router-link
10 to="/"
11 class="p-3 rounded-md hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
12 ><img class="w-32" src="/images/logo.svg" alt=""
1113 /></router-link>
1214 <div class="md:hidden">
1315 <img
@@ -26,7 +28,7 @@
2628 </div>
2729 <div class="hidden text-white md:block">
2830 <ul class="flex">
29 <li class="relative flex flex-col items-center mx-4">
31 <li class="relative flex flex-col items-center mx-2">
3032 <router-link
3133 to="/"
3234 custom
@@ -34,7 +36,7 @@
3436 >
3537 <a
3638 :class="{ 'text-pink-3': isActive }"
37 class="rounded-md hover:text-pink-3 focus:px-2 focus:outline-none focus:bg-pink-custom-2"
39 class="rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
3840 @click="navigate"
3941 :href="href"
4042 >Home</a
@@ -45,7 +47,7 @@
4547 ></div>
4648 </router-link>
4749 </li>
48 <li class="relative flex flex-col items-center mx-4">
50 <li class="relative flex flex-col items-center mx-2">
4951 <router-link
5052 to="/about"
5153 custom
@@ -53,7 +55,7 @@
5355 >
5456 <a
5557 :class="{ 'text-pink-3': isActive }"
56 class="rounded-md hover:text-pink-3 focus:px-2 focus:outline-none focus:bg-pink-custom-2"
58 class="rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
5759 @click="navigate"
5860 :href="href"
5961 >About</a
@@ -64,7 +66,7 @@
6466 ></div>
6567 </router-link>
6668 </li>
67 <li class="relative flex flex-col items-center mx-4">
69 <li class="relative flex flex-col items-center mx-2">
6870 <router-link
6971 to="/roadmap"
7072 custom
@@ -73,7 +75,7 @@
7375 <a
7476 @click="navigate"
7577 :class="{ 'text-pink-3': isActive }"
76 class="rounded-md hover:text-pink-3 focus:px-2 focus:outline-none focus:bg-pink-custom-2"
78 class="rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
7779 :href="href"
7880 >Roadmap</a
7981 >
@@ -83,17 +85,17 @@
8385 ></div>
8486 </router-link>
8587 </li>
86 <li class="mx-4 cursor-not-allowed">
88 <li class="mx-2 cursor-not-allowed">
8789 Rarity
8890 <span
89 class="px-1 text-xs uppercase bg-white rounded-full text-gray-6"
91 class="px-1 mx-1 text-xs uppercase bg-white rounded-full text-gray-6"
9092 >Soon</span
9193 >
9294 </li>
93 <li class="mx-4 cursor-not-allowed">
95 <li class="mx-2 cursor-not-allowed">
9496 Merch
9597 <span
96 class="px-1 text-xs uppercase bg-white rounded-full text-gray-6"
98 class="px-1 mx-1 text-xs uppercase bg-white rounded-full text-gray-6"
9799 >Soon</span
98100 >
99101 </li>