ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Staging Update - Nov 27, 2021

#11
Merged glennmichael123 wants to merge develop into staging
6 files +220 -138
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 transition duration-150 ease-in-out 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 transition duration-150 ease-in-out 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 transition duration-150 ease-in-out 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 transition duration-150 ease-in-out 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+18-13
@@ -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,6 +36,7 @@
3436 >
3537 <a
3638 :class="{ 'text-pink-3': isActive }"
39 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
3740 @click="navigate"
3841 :href="href"
3942 >Home</a
@@ -44,7 +47,7 @@
4447 ></div>
4548 </router-link>
4649 </li>
47 <li class="relative flex flex-col items-center mx-4">
50 <li class="relative flex flex-col items-center mx-2">
4851 <router-link
4952 to="/about"
5053 custom
@@ -52,6 +55,7 @@
5255 >
5356 <a
5457 :class="{ 'text-pink-3': isActive }"
58 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
5559 @click="navigate"
5660 :href="href"
5761 >About</a
@@ -62,7 +66,7 @@
6266 ></div>
6367 </router-link>
6468 </li>
65 <li class="relative flex flex-col items-center mx-4">
69 <li class="relative flex flex-col items-center mx-2">
6670 <router-link
6771 to="/roadmap"
6872 custom
@@ -71,6 +75,7 @@
7175 <a
7276 @click="navigate"
7377 :class="{ 'text-pink-3': isActive }"
78 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
7479 :href="href"
7580 >Roadmap</a
7681 >
@@ -80,17 +85,17 @@
8085 ></div>
8186 </router-link>
8287 </li>
83 <li class="mx-4 cursor-not-allowed">
88 <li class="mx-2 cursor-not-allowed">
8489 Rarity
8590 <span
86 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"
8792 >Soon</span
8893 >
8994 </li>
90 <li class="mx-4 cursor-not-allowed">
95 <li class="mx-2 cursor-not-allowed">
9196 Merch
9297 <span
93 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"
9499 >Soon</span
95100 >
96101 </li>
@@ -112,28 +117,28 @@
112117 <li>
113118 <router-link
114119 to="/about"
115 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-8 hover:text-pink-3"
120 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"
116121 >About</router-link
117122 >
118123 </li>
119124 <li>
120125 <router-link
121126 to="/roadmap"
122 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-8 hover:text-pink-3"
127 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"
123128 >Roadmap</router-link
124129 >
125130 </li>
126131 <li>
127132 <a
128133 href="#"
129 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-4 hover:text-pink-3"
134 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"
130135 >Rarity</a
131136 >
132137 </li>
133138 <li>
134139 <a
135140 href="#"
136 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-4 hover:text-pink-3"
141 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"
137142 >Merch</a
138143 >
139144 </li>
src/components/ButtonRepo.vuemodifiedformatting only+1-1
@@ -3,7 +3,7 @@
33 <a
44 target="_blank"
55 href="https://github.com/web2033/vite-vue3-tailwind-starter"
6 class="inline-flex items-center justify-center px-5 py-3 text-base font-medium leading-6 text-indigo-600 transition duration-150 ease-in-out bg-white border border-transparent rounded-md hover:text-indigo-500 focus:outline-none"
6 class="inline-flex items-center justify-center px-5 py-3 text-base font-medium leading-6 text-indigo-600 transition duration-150 ease-in-out bg-white border border-transparent rounded-md hover:text-indigo-500 focus:outline-none"
77 >Learn more</a
88 >
99 </div>
src/content/app.jsonmodified+1-1
@@ -2,7 +2,7 @@
22 "social": {
33 "twitter": "https://twitter.com/nakednfts/",
44 "instagram": "https://www.instagram.com/nakednfts/",
5 "discord": "https://discord.com/invite/CgFmKx3z"
5 "discord": "https://discord.gg/jsahnpyr4X"
66 },
77 "roadmap": [
88 {
src/views/Home.vuemodified+1-1
@@ -40,7 +40,7 @@ import AppFooter from "@/components/AppFooter.vue";
4040 <a
4141 :href="social.twitter"
4242 target="_blank"
43 class="inline-flex items-center justify-center w-full px-8 py-3 mt-5 text-white border border-white rounded-full md:w-3/4 lg:w-auto text-button font-sora backdrop-blur-sm hover:text-pink-3"
43 class="inline-flex items-center justify-center w-full px-8 py-3 mt-5 text-white 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"
4444 >
4545 FOLLOW US
4646 <svg
tailwind.config.jsmodified+2-0
formatting only · 7 hidden lines
@@ -35,6 +35,7 @@ module.exports = { formatting only
3535 "pink-1": "#FAF3F5",
3636 "pink-2": "#F7CFDB",
3737 "pink-3": "#F05B88",
38
3839 nude: "#F1B1A3",
3940 },
4041 }),
@@ -61,6 +62,7 @@ module.exports = {
6162 2: "#F7CFDB",
6263 3: "#F05B88",
6364 nude: "#F1B1A3",
65 "custom-2": "rgb(247, 207, 219, 0.1)",
6466 gradient:
6567 "radial-gradient(82.01% 81.61% at 94.63% 16.78%, #ED9DB9 0%, #EC83A2 57.37%, #F05281 100%)",
6668 }),