ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Staging Update - Nov 27, 2021

#12
Merged glennmichael123 wants to merge develop into staging
13 files +619 -264
.vscode/settings.jsonmodified+0-3
@@ -16,9 +16,6 @@
1616 },
1717 "css.validate": false,
1818 "editor.formatOnSave": true,
19 "search.exclude": {
20 "lib/**": true,
21 },
2219 "vetur.validation.template": false,
2320 "vetur.format.defaultFormatter.html": "prettier",
2421 "vetur.format.defaultFormatter.js": "prettier-eslint",
netlify.tomldeleted+0-15
@@ -1,15 +0,0 @@
1[build]
2 command = "npm run build"
3 publish = "dist"
4 environment = { NODE_VERSION = "16" }
5
6[[redirects]]
7 from = "/*"
8 to = "/index.html"
9 status = 200
10
11# Opting your Website out of Google's FLoC Network
12[[headers]]
13 for = "/*"
14 [headers.values]
15 Permissions-Policy = "interest-cohort=()"
public/images/chris.jpegadded+0-0

Binary file. Nothing to show line by line.

public/images/solana-logo.svgadded+11-0
@@ -0,0 +1,11 @@
1<svg width="180" height="45" viewBox="0 0 180 45" fill="none" xmlns="http://www.w3.org/2000/svg">
2<path d="M65.1642 23.8648H70.9379C71.7498 23.8648 72.4076 24.5296 72.4076 25.3414C72.4076 26.1603 71.7498 26.8181 70.9379 26.8181H63.9745C63.8625 26.8181 63.7575 26.8601 63.6806 26.9301L61.581 28.7427C61.2591 29.0226 61.4551 29.5475 61.875 29.5475H70.588C70.588 29.5475 70.595 29.5475 70.595 29.5405C70.595 29.5335 70.602 29.5335 70.602 29.5335C70.714 29.5405 70.819 29.5475 70.9309 29.5475C73.2404 29.5475 75.116 27.6649 75.116 25.3414C75.116 23.1369 73.4294 21.3243 71.2739 21.1494C71.2739 21.1494 71.2669 21.1494 71.2669 21.1424C71.2669 21.1354 71.2669 21.1354 71.2599 21.1354H65.0453C64.2334 21.1354 63.5756 20.4705 63.5756 19.6587C63.5756 18.8399 64.2334 18.182 65.0453 18.182H71.9947C72.1067 18.182 72.2187 18.14 72.3026 18.0631L74.2552 16.2505C74.5631 15.9635 74.3602 15.4526 73.9473 15.4526H65.1642C65.1292 15.4526 65.0872 15.4526 65.0523 15.4526C62.7428 15.4526 60.8672 17.3352 60.8672 19.6587C60.8672 21.9822 62.7428 23.8648 65.0523 23.8648C65.0872 23.8648 65.1222 23.8648 65.1642 23.8648Z" fill="#D6D3D9"/>
3<path d="M98.7713 15.4457C98.5194 15.4457 98.3164 15.6487 98.3164 15.9076V29.0927C98.3164 29.3446 98.5194 29.5546 98.7713 29.5546H109.339C109.465 29.5546 109.584 29.4986 109.675 29.4076L110.998 27.9869C111.271 27.693 111.068 27.2101 110.662 27.2101H101.438C101.186 27.2101 100.983 27.0071 100.983 26.7482V15.9006C100.983 15.6487 100.78 15.4387 100.528 15.4387H98.7713V15.4457Z" fill="#D6D3D9"/>
4<path fill-rule="evenodd" clip-rule="evenodd" d="M81.8461 15.4456C81.8461 15.4526 81.8461 15.4526 81.8461 15.4456C80.4954 15.5085 79.4106 16.5933 79.3477 17.944V26.811C79.3477 26.846 79.3477 26.888 79.3477 26.923C79.3477 28.3297 80.4534 29.4774 81.8461 29.5334H91.434C92.8197 29.4704 93.9324 28.3227 93.9324 26.923C93.9324 26.888 93.9324 26.846 93.9324 26.811V17.951C93.8764 16.6003 92.7917 15.5085 91.441 15.4526H81.8461V15.4456ZM83.6377 17.951C83.6307 17.951 83.6307 17.951 83.6377 17.951C82.7909 17.986 82.112 18.6718 82.077 19.5257V25.1034C82.077 25.1244 82.077 25.1524 82.077 25.1734C82.077 26.0552 82.7699 26.783 83.6377 26.818H89.6494C90.5172 26.783 91.21 26.0552 91.21 25.1734C91.21 25.1524 91.21 25.1244 91.21 25.1034V19.5257C91.175 18.6718 90.4962 17.993 89.6494 17.951H83.6377Z" fill="#D6D3D9"/>
5<path fill-rule="evenodd" clip-rule="evenodd" d="M126.357 29.0927C126.357 29.3446 126.56 29.5546 126.812 29.5546H128.603C128.855 29.5546 129.058 29.3516 129.058 29.0927V18.1821C129.058 18.1471 129.058 18.1051 129.058 18.0701C129.058 16.6635 127.96 15.5157 126.588 15.4597H117.385C117.35 15.4597 117.308 15.4597 117.273 15.4597C115.845 15.4597 114.691 16.6285 114.691 18.0771C114.691 18.1121 114.691 18.1541 114.691 18.1891V29.0997C114.691 29.3516 114.894 29.5616 115.145 29.5616H116.937C117.189 29.5616 117.392 29.3586 117.392 29.0997V24.5577C117.392 24.3058 117.595 24.0958 117.847 24.0958H125.923C126.175 24.0958 126.378 24.2988 126.378 24.5577V29.0927H126.357ZM117.378 21.5834V19.3159C117.378 18.4341 118.085 17.7202 118.953 17.7202H124.789C125.657 17.7202 126.364 18.4341 126.364 19.3159V21.5834C126.364 21.8353 126.161 22.0453 125.909 22.0453H117.833C117.581 22.0453 117.378 21.8423 117.378 21.5834Z" fill="#D6D3D9"/>
6<path fill-rule="evenodd" clip-rule="evenodd" d="M164.181 29.5545C163.929 29.5545 163.726 29.3515 163.726 29.0926V24.5506C163.726 24.2987 163.523 24.0887 163.271 24.0887H155.104C154.852 24.0887 154.649 24.2917 154.649 24.5506V29.0926C154.649 29.3445 154.446 29.5545 154.194 29.5545H152.388C152.137 29.5545 151.934 29.3515 151.934 29.0926V18.182C151.934 18.147 151.934 18.105 151.934 18.0701C151.934 16.6284 153.102 15.4526 154.544 15.4526C154.579 15.4526 154.621 15.4526 154.656 15.4526H163.957C165.343 15.5156 166.455 16.6634 166.455 18.0631C166.455 18.098 166.455 18.14 166.455 18.175V29.0856C166.455 29.3376 166.252 29.5475 166 29.5475H164.181V29.5545ZM154.649 19.3158V21.5833C154.649 21.8352 154.852 22.0452 155.104 22.0452H163.271C163.523 22.0452 163.726 21.8422 163.726 21.5833V19.3158C163.726 18.434 163.012 17.7201 162.137 17.7201H156.238C155.356 17.7201 154.649 18.434 154.649 19.3158Z" fill="#D6D3D9"/>
7<path d="M135.805 15.4456C135.938 15.4456 136.064 15.5015 136.148 15.6065L144.182 25.1874C144.455 25.5093 144.98 25.3134 144.98 24.8865V15.9075C144.98 15.6555 145.183 15.4456 145.435 15.4456H147.226C147.478 15.4456 147.681 15.6485 147.681 15.9075V29.0925C147.681 29.3445 147.478 29.5544 147.226 29.5544H145.001C144.994 29.5544 144.987 29.5474 144.987 29.5404C144.987 29.5334 144.987 29.5334 144.98 29.5264L136.805 20.0155C136.533 19.6936 136.008 19.8966 136.008 20.3165V29.0995C136.008 29.3515 135.805 29.5614 135.553 29.5614H133.747C133.495 29.5614 133.292 29.3585 133.292 29.0995V15.9075C133.292 15.6555 133.495 15.4456 133.747 15.4456H135.805Z" fill="#D6D3D9"/>
8<path d="M19.2028 30.0374C19.4267 29.8135 19.7276 29.6875 20.0426 29.6875H49.1911C49.723 29.6875 49.9889 30.3314 49.611 30.7023L43.8513 36.462C43.6273 36.6859 43.3264 36.8119 43.0115 36.8119H13.863C13.3311 36.8119 13.0651 36.1681 13.443 35.7971L19.2028 30.0374Z" fill="#D6D3D9"/>
9<path d="M19.2028 8.53791C19.4267 8.31396 19.7276 8.18799 20.0426 8.18799H49.1911C49.723 8.18799 49.9889 8.83185 49.611 9.20276L43.8513 14.9555C43.6273 15.1794 43.3264 15.3054 43.0115 15.3054H13.863C13.3311 15.3054 13.0651 14.6615 13.443 14.2906L19.2028 8.53791Z" fill="#D6D3D9"/>
10<path d="M43.8513 19.2178C43.6273 18.9939 43.3264 18.8679 43.0115 18.8679H13.863C13.3311 18.8679 13.0651 19.5118 13.443 19.8827L19.2028 25.6354C19.4267 25.8594 19.7276 25.9853 20.0426 25.9853H49.1911C49.723 25.9853 49.9889 25.3415 49.611 24.9706L43.8513 19.2178Z" fill="#D6D3D9"/>
11</svg>
src/components/AppFooter.vuemodified+28-32
@@ -37,7 +37,7 @@
3737 </li>
3838 <li class="flex items-center justify-between p-4">
3939 <div>
40 Merch
40 Merchandise
4141 <small class="px-1 uppercase bg-white rounded-full text-gray-7"
4242 >Soon</small
4343 >
@@ -51,14 +51,10 @@
5151 <ul class="text-xs divide-y divide-gray-7">
5252 <li class="flex items-center justify-between p-4">
5353 <div>
54 <router-link to="/privacy-policy">Privacy policy</router-link>
54 <router-link to="/privacy-policy">Privacy Policy</router-link>
5555 </div>
5656 <div><img src="/images/chevron.svg" alt="" /></div>
5757 </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>
6258 </ul>
6359 </div>
6460 <div class="px-3 py-8 text-sm md:grid md:grid-cols-3 md:gap-4">
@@ -74,8 +70,9 @@
7470 <p
7571 class="my-4 text-sm leading-6 text-center md:text-left md:text-xs lg:text-base"
7672 >
77 Hodratz are uniquely generated and collectible NFTs. Each of them is
78 one-of-a-kind and 100% owned by you.
73 Hoodratz are uniquely generated and collectible NFTs. Inspired by
74 New York City’s underground, each of them is one-of-a-kind and 100%
75 owned by you.
7976 </p>
8077 <div class="flex justify-center mb-4 md:hidden">
8178 <ul class="flex">
@@ -131,7 +128,7 @@
131128 <h3 class="mb-8 text-white uppercase">Hoodratz</h3>
132129 <ul>
133130 <li class="my-2 cursor-not-allowed">Attributes</li>
134 <li class="my-2 cursor-not-allowed">Merch</li>
131 <li class="my-2 cursor-not-allowed">Merchandise</li>
135132 </ul>
136133 </div>
137134 <div>
@@ -144,47 +141,46 @@
144141 >Privacy policy</router-link
145142 >
146143 </li>
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 >
153 </li>
154144 </ul>
155145 </div>
156146 <div>
157 <h3 class="mb-8 text-white">Connect</h3>
147 <h3 class="mb-8 text-center text-white">Connect</h3>
158148 <div class="flex justify-center mb-4">
159149 <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">
150 <li class="flex items-center justify-center">
151 <a
152 :href="social.discord"
153 target="_blank"
154 class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
155 >
164156 <img
165 class="w-4"
157 class="w-full h-full"
166158 src="/images/discord.svg"
167159 alt="Discord"
168160 />
169161 </a>
170162 </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">
163 <li class="flex items-center justify-center">
164 <a
165 :href="social.twitter"
166 target="_blank"
167 class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
168 >
175169 <img
176 class="w-4"
170 class="w-full h-full"
177171 src="/images/twitter.svg"
178172 alt="Twitter"
179173 />
180174 </a>
181175 </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">
176 <li class="flex items-center justify-center">
177 <a
178 :href="social.instagram"
179 target="_blank"
180 class="block w-8 h-8 p-2 transition duration-150 ease-in-out border rounded-full lg:w-12 lg:h-12 lg:p-4 hover:bg-gray-4 border-gray-5"
181 >
186182 <img
187 class="w-4"
183 class="w-full h-full"
188184 src="/images/insta.svg"
189185 alt="Instagram"
190186 />
src/components/AppHeader.vuemodified+28-2
@@ -85,14 +85,33 @@
8585 ></div>
8686 </router-link>
8787 </li>
88 <li class="mx-2 cursor-not-allowed">
88 <li class="relative flex flex-col items-center mx-2">
89 <router-link
90 to="/faq"
91 custom
92 v-slot="{ href, route, navigate, isActive, isExactActive }"
93 >
94 <a
95 @click="navigate"
96 :class="{ 'text-pink-3': isActive }"
97 class="transition duration-150 ease-in-out rounded-md lg:px-2 hover:text-pink-3 focus:outline-none focus:bg-pink-custom-2"
98 :href="href"
99 >FAQ</a
100 >
101 <div
102 v-if="isActive"
103 class="absolute bottom-0 w-2 h-2 -mb-3 rounded bg-pink-gradient"
104 ></div>
105 </router-link>
106 </li>
107 <li class="mx-2 cursor-wait">
89108 Rarity
90109 <span
91110 class="px-1 mx-1 text-xs uppercase bg-white rounded-full text-gray-6"
92111 >Soon</span
93112 >
94113 </li>
95 <li class="mx-2 cursor-not-allowed">
114 <li class="mx-2 cursor-wait">
96115 Merch
97116 <span
98117 class="px-1 mx-1 text-xs uppercase bg-white rounded-full text-gray-6"
@@ -128,6 +147,13 @@
128147 >Roadmap</router-link
129148 >
130149 </li>
150 <li>
151 <router-link
152 to="/faq"
153 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"
154 >FAQ</router-link
155 >
156 </li>
131157 <li>
132158 <a
133159 href="#"
src/content/app.jsonmodified+86-62
@@ -1,65 +1,89 @@
11{
2 "social": {
3 "twitter": "https://twitter.com/nakednfts/",
4 "instagram": "https://www.instagram.com/nakednfts/",
5 "discord": "https://discord.gg/jsahnpyr4X"
2 "social": {
3 "twitter": "https://twitter.com/nakednfts/",
4 "instagram": "https://www.instagram.com/nakednfts/",
5 "discord": "https://discord.gg/jsahnpyr4X"
6 },
7 "roadmap": [
8 {
9 "date": "2021-12-01",
10 "title": "First generation drop",
11 "description": "Launch all 10,000 algorithmically generated Hoodratz to our awesome community.",
12 "done": true
613 },
7 "roadmap": [
8 {
9 "date": "2021-12-01",
10 "title": "First generation drop",
11 "description": "Launch all 10,000 algorithmically generated Hoodratz to our awesome community.",
12 "done": true
13 }, {
14 "date": "2022-01-02",
15 "title": "Marketplace integration",
16 "description": "Buy, sell and trade Hoodratz on nakednft.com and opensea.com",
17 "done": false
18 }, {
19 "date": "2022-02-03",
20 "title": "Merch",
21 "description": "Exclusive Hoodratz merch will be available in our store... Our team has been working on this one a lot so we are sure you will love it!",
22 "done": false
23 }, {
24 "date": "2022-03-04",
25 "title": "Marketplace integration",
26 "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
27 "done": false
28 }, {
29 "date": "2022-05-04",
30 "title": "Lorem ipsum",
31 "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
32 "done": false
33 }
34 ],
35 "team": [
36 {
37 "name": "Chris",
38 "role": "CEO",
39 "image": "/images/team/chris.png",
40 "twitter_url": "",
41 "linkedin_url": ""
42 },
43 {
44 "name": "Avery",
45 "role": "PM",
46 "image": "/images/team/avery.png",
47 "twitter_url": "",
48 "linkedin_url": ""
49 },
50 {
51 "name": "Kyle",
52 "role": "Developer",
53 "image": "/images/team/chris.png",
54 "twitter_url": "",
55 "linkedin_url": ""
56 },
57 {
58 "name": "Denis",
59 "role": "Designer",
60 "image": "/images/team/chris.png",
61 "twitter_url": "",
62 "linkedin_url": ""
63 }
64 ]
14 {
15 "date": "2022-01-02",
16 "title": "Marketplace integration",
17 "description": "Buy, sell and trade Hoodratz on nakednft.com and opensea.com",
18 "done": false
19 },
20 {
21 "date": "2022-02-03",
22 "title": "Merch",
23 "description": "Exclusive Hoodratz merch will be available in our store... Our team has been working on this one a lot so we are sure you will love it!",
24 "done": false
25 },
26 {
27 "date": "2022-03-04",
28 "title": "Marketplace integration",
29 "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
30 "done": false
31 },
32 {
33 "date": "2022-05-04",
34 "title": "Lorem ipsum",
35 "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
36 "done": false
37 }
38 ],
39 "team": [
40 {
41 "name": "Chris",
42 "role": "Co-Founder",
43 "image": "/images/chris.jpeg",
44 "twitter_url": "https://twitter.com/chrisbreuer1904",
45 "linkedin_url": ""
46 },
47 {
48 "name": "Kyle",
49 "role": "Co-Founder",
50 "image": "/images/chris.jpeg",
51 "twitter_url": "https://twitter.com/chrisbreuer1904",
52 "linkedin_url": ""
53 },
54 {
55 "name": "Avery",
56 "role": "PM",
57 "image": "/images/team/avery.png",
58 "twitter_url": "",
59 "linkedin_url": ""
60 },
61
62 {
63 "name": "Denis",
64 "role": "Designer",
65 "image": "/images/team/chris.png",
66 "twitter_url": "",
67 "linkedin_url": ""
68 }
69 ],
70
71 "faq": [
72 {
73 "question": "Tempor excepteur commodo dolore qui.",
74 "answer": "Consequat et adipisicing cillum mollit non occaecat fugiat ex ut. Aliquip pariatur commodo irure duis. Officia in sunt qui ut nulla in quis non qui officia laboris tempor minim. Enim irure amet reprehenderit sint id excepteur voluptate aute nisi culpa esse."
75 },
76 {
77 "question": "In est sunt non occaecat minim.",
78 "answer": "Ea pariatur pariatur labore id consectetur cupidatat quis veniam est laboris irure mollit anim. Lorem ad dolore cillum do consectetur excepteur dolor non duis ipsum mollit ad deserunt. Est aliquip consectetur duis elit culpa voluptate dolor anim anim reprehenderit voluptate Lorem duis. Labore in culpa tempor qui minim. Pariatur aliqua proident amet veniam."
79 },
80 {
81 "question": "Reprehenderit aute exercitation minim duis.",
82 "answer": "Velit do laborum excepteur eiusmod enim enim nisi labore cillum ipsum laborum ex aute. Ullamco mollit in Lorem velit proident voluptate id voluptate mollit. Nulla deserunt pariatur laboris laboris occaecat voluptate esse. Esse velit esse sunt nisi labore est veniam."
83 },
84 {
85 "question": "Proident in est non proident dolore dolor aute commodo enim sunt labore consequat.",
86 "answer": "Exercitation eu non consectetur esse dolore nostrud duis veniam et adipisicing qui. Deserunt sit adipisicing aliquip irure aute ut aliquip ullamco. Laborum et officia ex qui et. In officia elit sint deserunt anim quis ad aliqua do occaecat pariatur fugiat id."
87 }
88 ]
6589}
src/routes.jsmodified+7-0
@@ -3,6 +3,7 @@ import About from "./views/About.vue";
33import Roadmap from "./views/Roadmap.vue";
44import NotFound from "./views/NotFound.vue";
55import PrivacyPolicy from "./views/PrivacyPolicy.vue";
6import Faq from "./views/Faq.vue";
67
78/** @type {import('vue-router').RouterOptions['routes']} */
89export const routes = [
@@ -25,5 +26,11 @@ export const routes = [
2526 meta: { title: "Privacy Policy" },
2627 component: PrivacyPolicy,
2728 },
29 {
30 path: "/faq",
31 name: "faq",
32 meta: { title: "FAQ" },
33 component: Faq,
34 },
2835 { path: "/:path(.*)", component: NotFound },
2936];
src/tailwind.cssmodified+4-3
@@ -1,9 +1,10 @@
1@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@700&display=swap');
2@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
3@import url('https://fonts.googleapis.com/css2?family=Sora+Semibold:wght@600&display=swap');
41
52@import 'tailwindcss/base';
63
74@import 'tailwindcss/components';
85
96@import 'tailwindcss/utilities';
7
8@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@700&display=swap');
9@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
10@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap');
src/views/About.vuemodified+101-57
@@ -1,82 +1,126 @@
11<script setup>
2import AppHeader from '@/components/AppHeader.vue'
3import AppFooter from '@/components/AppFooter.vue'
2import AppHeader from "@/components/AppHeader.vue";
3import AppFooter from "@/components/AppFooter.vue";
44</script>
55
66<template>
7<div class="bg-gray-8 w-screen h-full text-gray-4">
7 <div class="w-screen h-full bg-gray-8 text-gray-4">
88 <AppHeader />
99 <div class="md:hidden">
10 <img class="object-cover w-full" src="/images/about.png" alt="Hoodratz about">
10 <img
11 class="object-cover w-full"
12 src="/images/about.png"
13 alt="Hoodratz about"
14 />
1115 </div>
16
1217 <!-- Content -->
1318 <div class="mx-4 md:container md:mx-auto">
14 <div class="md:grid md:grid-cols-2 md:mx-4">
15 <div class="mb-8 md:mb-0 flex md:items-center">
16 <div>
17 <div class="relative">
18 <div class="w-64 -ml-4"><img src="/images/about-txt.svg" alt="About"></div>
19 <h1 class="text-pink-3 uppercase font-sora mt-8 absolute inset-0 tracking-widest">About</h1>
20 </div>
21 <h2 class="text-white font-kumbh-bold text-3xl md:text-5xl mb-4">The Hoodratz story</h2>
22 <p class="font-sora leading-7">
23 Hoodratz are uniquely generated, cute and collectible rats with proof of ownership stored on the Solana blockchain. All individual pieces of the Hoodratz world have been created by hand and algorithmically generated using custom code. There are 165 attributes across 18 categories: These categories include background, body, type, pattern, tail, expression, mouth, eyes, skin, glasses, facial hair, hat/hair, mouth accessories, earring, neck, blankets, flags and best of all, cigars! With these combined, it gives a total mathematical combination of millions of unique Hoodratz - but with only 10,000 being minted, some are more unique and rare than others.
24 </p>
25 </div>
19 <div class="md:grid md:grid-cols-2 md:mx-32">
20 <div class="flex mb-8 md:mb-0 md:items-center">
21 <div>
22 <div class="relative">
23 <div class="w-64 -ml-4">
24 <img src="/images/about-txt.svg" alt="About" />
25 </div>
26 <h1
27 class="absolute inset-0 mt-8 tracking-widest uppercase text-pink-3 font-sora"
28 >
29 About
30 </h1>
2631 </div>
27 <div class="relative hidden md:block md:-ml-20">
28 <div><img src="/images/about-cover.png" alt=""></div>
29 <div class="absolute inset-0 flex items-center justify-center">
30 <div class="w-80 lg:w-96 xl:w-108">
31 <img src="/images/about-desktop.png" alt="">
32 </div>
33 </div>
32
33 <h2 class="mb-4 text-3xl text-white font-kumbh-bold md:text-5xl">
34 The Hoodratz Story
35 </h2>
36
37 <p class="leading-7 font-sora">
38 Hoodratz are uniquely generated, cute and collectible rats with
39 proof of ownership stored on the Solana blockchain. All individual
40 pieces of the Hoodratz world have been created by hand and were
41 algorithmically generated using custom code that we created to
42 share with the community.
43 </p>
44
45 <p class="mt-3 leading-7 font-sora">
46 There are 165 attributes across 18 categories: These categories
47 include background, body, type, pattern, tail, expression, mouth,
48 eyes, skin, glasses, facial hair, hat/hair, mouth accessories,
49 earring, neck, blankets, flags and best of all, cigars! With these
50 combined, it gives a total mathematical combination of millions of
51 unique Hoodratz - but with only 10,000 being minted, some are more
52 unique and rare than others.
53 </p>
54 </div>
55 </div>
56
57 <div class="relative hidden md:block md:-ml-20">
58 <div><img src="/images/about-cover.png" alt="" /></div>
59 <div class="absolute inset-0 flex items-center justify-center">
60 <div class="w-80 lg:w-96 xl:w-108">
61 <img src="/images/about-desktop.png" alt="" />
3462 </div>
63 </div>
3564 </div>
65 </div>
3666
37 <div class="lg:grid lg:grid-cols-2 md:mx-4">
38 <div>
39 <div class="relative">
40 <div class="-ml-4 absolute inset-x-0 top-0"><img src="/images/the-team.svg" alt="The Team"></div>
41 <h1 class="text-pink-3 uppercase font-sora mt-8 tracking-widest">The Team</h1>
42 </div>
43 <h2 class="text-white font-kumbh-bold text-3xl md:text-5xl my-4">Who's behind it all?</h2>
44 <p class="font-sora leading-7">
45 We are a small group of friends with the same vision and goal. Our core principles have always been to deliver the best possible NFT user experience from launch as well as creating collectible art with utility.
46 </p>
67 <div class="lg:grid lg:grid-cols-2 md:mx-32">
68 <div>
69 <div class="relative">
70 <div class="absolute inset-x-0 top-0 -ml-4">
71 <img src="/images/the-team.svg" alt="The Team" />
4772 </div>
73 <h1 class="mt-8 tracking-widest uppercase text-pink-3 font-sora">
74 The Team
75 </h1>
76 </div>
77 <h2 class="my-4 text-3xl text-white font-kumbh-bold md:text-5xl">
78 Who's behind it all?
79 </h2>
80 <p class="leading-7 font-sora">
81 We are a small group of friends with the same vision and goal. Our
82 core principles have always been to deliver the best possible NFT
83 user experience from launch as well as creating collectible art with
84 utility.
85 </p>
4886 </div>
87 </div>
4988
50 <div class="mt-12 mb-20 md:grid md:grid-cols-3 xl:grid-cols-4 md:gap-6 md:mx-4">
51 <div class="flex md:flex-col bg-gray-7 my-6 px-8 py-6 rounded-4xl" v-for="(item, index) in team">
52 <div class="w-16 mr-4">
53 <img :src="item.image" alt="Chris Breuer">
54 </div>
55 <div class="flex flex-1 md:items-center md:mt-8">
56 <div class="flex flex-col flex-1">
57 <span class="text-white text-2xl">{{ item.name }}</span>
58 <span>{{ item.role }}</span>
59 </div>
60 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
61 <img src="/images/twitter.svg" alt="Twitter">
62 <img src="/images/linkedin.svg" alt="Linkedin">
63 </div>
64 </div>
89 <div
90 class="mt-12 mb-20 md:grid md:grid-cols-3 xl:grid-cols-4 md:gap-6 md:mx-4"
91 >
92 <div
93 class="flex px-8 py-6 my-6 md:flex-col bg-gray-7 rounded-4xl"
94 v-for="(item, index) in team"
95 >
96 <div class="w-16 mr-4">
97 <img class="rounded-full" :src="item.image" alt="Chris Breuer" />
98 </div>
99 <div class="flex flex-1 md:items-center md:mt-8">
100 <div class="flex flex-col flex-1">
101 <span class="text-2xl text-white">{{ item.name }}</span>
102 <span>{{ item.role }}</span>
65103 </div>
104 <div class="grid items-center grid-cols-1 gap-4 md:grid-cols-2">
105 <img src="/images/twitter.svg" alt="Twitter" />
106 <img src="/images/linkedin.svg" alt="Linkedin" />
107 </div>
108 </div>
66109 </div>
67 </div>
110 </div>
111 </div>
68112
69113 <AppFooter />
70</div>
114 </div>
71115</template>
72116<script>
73import { team } from '@/content/app.json'
117import { team } from "@/content/app.json";
74118
75119export default {
76 data () {
77 return {
78 team,
79 }
80 }
81}
120 data() {
121 return {
122 team,
123 };
124 },
125};
82126</script>
src/views/Faq.vueadded+127-0
@@ -0,0 +1,127 @@
1<script setup>
2import AppHeader from "@/components/AppHeader.vue";
3import AppFooter from "@/components/AppFooter.vue";
4</script>
5
6<template>
7 <div class="w-screen h-full bg-gray-8 text-gray-4">
8 <AppHeader />
9
10 <div class="container px-2 mx-auto mt-20 md:mt-24">
11 <div class="mx-auto md:w-2/3">
12 <div class="w-full my-4">
13 <div class="flex items-center justify-center">
14 <h1
15 class="mt-8 -mt-2 tracking-widest uppercase text-pink-3 font-sora"
16 >
17 Hoodratz
18 </h1>
19 </div>
20 </div>
21
22 <div class="mx-4 text-center">
23 <div class="mb-20">
24 <h2
25 class="mb-4 -mt-6 text-3xl text-white font-kumbh-bold md:text-5xl"
26 >
27 Frequently Asked Questions
28 </h2>
29 </div>
30 </div>
31
32 <div
33 v-for="(item, index) in faq"
34 class="mb-8 border rounded-md border-pink-2 bg-gray-5"
35 >
36 <div class="px-4 py-4 mx-auto max-w-7xl sm:py-4 sm:px-6 lg:px-8">
37 <div class="max-w-3xl mx-auto divide-y-2 divide-gray-200">
38 <dl class="space-y-6 divide-y divide-gray-200">
39 <div>
40 <dt class="text-lg">
41 <!-- Expand/collapse question button -->
42 <button
43 @click="toggleFaqAnswer(index)"
44 type="button"
45 class="flex items-start justify-between w-full text-left text-gray-400 "
46 aria-controls="faq-0"
47 aria-expanded="false"
48 >
49 <span class="font-medium text-gray-100">
50 {{ item.question }}
51 </span>
52 <span class="flex items-center ml-6 h-7">
53 <svg
54 v-if="!faqAnswer[index]"
55 class="w-6 h-6 text-gray-100 transform rotate-0"
56 xmlns="http://www.w3.org/2000/svg"
57 fill="none"
58 viewBox="0 0 24 24"
59 stroke="currentColor"
60 aria-hidden="true"
61 >
62 <path
63 stroke-linecap="round"
64 stroke-linejoin="round"
65 stroke-width="2"
66 d="M19 9l-7 7-7-7"
67 />
68 </svg>
69 <svg
70 v-else
71 class="w-6 h-6 text-gray-100"
72 fill="none"
73 stroke="currentColor"
74 viewBox="0 0 24 24"
75 xmlns="http://www.w3.org/2000/svg"
76 >
77 <path
78 stroke-linecap="round"
79 stroke-linejoin="round"
80 stroke-width="2"
81 d="M5 15l7-7 7 7"
82 ></path>
83 </svg>
84 </span>
85 </button>
86 </dt>
87 <dd v-show="faqAnswer[index]" class="pr-12 mt-2" id="faq-0">
88 <p class="text-base text-gray-300">
89 {{ item.answer }}
90 </p>
91 </dd>
92 </div>
93 <!-- More questions... -->
94 </dl>
95 </div>
96 </div>
97 </div>
98 </div>
99 </div>
100
101 <div class="mb-32"></div>
102
103 <AppFooter />
104 </div>
105</template>
106
107<script>
108import { faq } from "@/content/app.json";
109export default {
110 data() {
111 return {
112 faq,
113 faqAnswer: [],
114 };
115 },
116 mounted() {
117 faq.forEach((item, index) => {
118 this.faqAnswer[index] = false;
119 });
120 },
121 methods: {
122 toggleFaqAnswer(index) {
123 this.faqAnswer[index] = !this.faqAnswer[index];
124 },
125 },
126};
127</script>
src/views/Home.vuemodified+190-62
@@ -19,13 +19,13 @@ import AppFooter from "@/components/AppFooter.vue";
1919 <div class="grid grid-cols-1 mx-4 lg:grid-cols-2">
2020 <div class="flex flex-col justify-center md:ml-0 lg:ml-10 xl:ml-36">
2121 <h1 class="text-white font-kumbh-bold xl:text-h1 lg:text-h2 text-h3">
22 Discover HoodRatz, <br class="hidden xl:block lg:block" />a new NFT
23 collection
22 Hoodratz. <br class="hidden xl:block lg:block" />
23 The first cross-chain collection. Ever.
2424 </h1>
2525 <p
26 class="mt-5 leading-8 md:text-body font-sora text-gray-2 text-body-2"
26 class="mt-5 font-semibold leading-8 md:text-body font-sora text-gray-2 text-body-2"
2727 >
28 A limited edition of 10.000 collectible pixel rats.
28 A limited edition of 10,000 rare hoodratz.
2929 </p>
3030 <div
3131 class="flex flex-col items-center w-full lg:flex-row lg:justify-start md:flex-row md:justify-center"
@@ -33,20 +33,20 @@ import AppFooter from "@/components/AppFooter.vue";
3333 <a
3434 :href="social.discord"
3535 target="_blank"
36 class="flex items-center justify-center w-full px-8 py-3 mt-5 text-white rounded-full md:w-3/4 lg:w-auto lg:mr-10 md:mr-10 bg-pink-gradient md:shadow-none text-a font-sora shadow-hoodratz-btn hover:bg-pink-3"
36 class="flex items-center justify-center w-full px-8 py-3 mt-5 mr-4 text-white uppercase transition duration-150 ease-in-out rounded-full bg-pink-gradient md:shadow-none text-a font-sora shadow-hoodratz-btn hover:bg-pink-3 md:w-3/4 lg:w-auto text-button backdrop-blur-sm"
3737 >
38 JOIN DISCORD
38 Join Discord
3939 </a>
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 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"
43 class="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"
4444 >
45 FOLLOW US
45 Follow Us
4646 <svg
4747 class="fill-current ml-2.5"
48 width="20"
49 height="20"
48 width="15"
49 height="15"
5050 viewBox="0 0 20 20"
5151 fill="currentColor"
5252 xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ import AppFooter from "@/components/AppFooter.vue";
6262 class="absolute items-center hidden xl:bottom-0 lg:-bottom-36 lg:flex"
6363 >
6464 <p class="text-button text-gray-4 font-sora">
65 Launching on <span class="text-pink-3">Dec 24!</span>
65 Launching on <span class="text-pink-3">12/12!</span>
6666 </p>
6767 <img
6868 class="mt-10 w-28 h-28"
formatting only · 7 hidden lines
@@ -80,6 +80,7 @@ import AppFooter from "@/components/AppFooter.vue"; formatting only
8080 </div>
8181 </div>
8282 </section>
83
8384 <section id="about-us-desktop" class="relative hidden h-full lg:block">
8485 <div>
8586 <img src="/images/home/hoodratz-about-us-lg.png" alt="" />
@@ -92,8 +93,9 @@ import AppFooter from "@/components/AppFooter.vue";
9293 What are Hoodratz?
9394 </h1>
9495 <p class="mt-5 text-gray-4 font-sora text-body-2">
95 Hodratz are uniquely generated and collectible NFTs. <br />Each of
96 them is one-of-a-kind and 100% owned by you.
96 Hoodratz are uniquely generated &amp; collectible NFTs.
97 <br />Inspired by the global New York City NFT hub, each of these
98 rats is <br />one-of-a-kind and 100% owned by you.
9799 </p>
98100 </div>
99101 <div class="flex mt-24">
@@ -128,8 +130,8 @@ import AppFooter from "@/components/AppFooter.vue";
128130 </div>
129131 </div>
130132 <p class="mt-6 text-gray-4 text-body-2 font-sora">
131 Hoodratz come with various rare attributes. <br />The rarer
132 the attribute, the rarer is your rat!
133 Hoodratz come in various rarity attributes. <br />The rarer
134 the attribute, the more collectible is your rat!
133135 </p>
134136 </div>
135137 <div
@@ -146,14 +148,16 @@ import AppFooter from "@/components/AppFooter.vue";
146148 />
147149 </div>
148150 <div class="flex flex-col ml-auto text-right">
149 <h1 class="text-pink-3 font-sora text-caption">AMOUNT</h1>
151 <h1 class="uppercase text-pink-3 font-sora text-caption">
152 Amount
153 </h1>
150154 <h1 class="text-white font-sora text-title">10 000</h1>
151155 </div>
152156 </div>
153157 <p class="mt-6 text-gray-4 text-body-2 font-sora">
154 Remember that our stock is limited! There will only ever be 10
155 thousand Hoodratz created. <br />Grab yours while you still
156 can!
158 Our stock is limited! There will only ever be 10,000 Hoodratz
159 created.
160 <!-- TODO ONCE MINTING: Grab yours while you still can! -->
157161 </p>
158162 </div>
159163 <!-- absolute xl:right-0 xl:top-48 lg:top-48 lg:-left-16 lg:right-5 -->
@@ -176,8 +180,9 @@ import AppFooter from "@/components/AppFooter.vue";
176180 What are Hoodratz?
177181 </h1>
178182 <p class="mt-5 text-gray-4 font-sora text-body-2">
179 Hodratz are uniquely generated and collectible NFTs. <br />Each of
180 them is one-of-a-kind and 100% owned by you.
183 Hoodratz are uniquely generated and collectible NFTs. <br />Inspired
184 by New York City’s underground, each of them is one-of-a-kind and 100%
185 owned by you.
181186 </p>
182187 </div>
183188 <div class="flex flex-col items-center mx-4 mt-16">
@@ -241,20 +246,23 @@ import AppFooter from "@/components/AppFooter.vue";
241246 <div class="xl:mx-auto max-w-7xl lg:mx-20">
242247 <div class="grid grid-cols-2">
243248 <div class="flex flex-col mr-24 -mt-72">
244 <h1 class="text-pink-3 font-sora text-h4">VALUE PROPOSITION</h1>
249 <h1 class="uppercase text-pink-3 font-sora text-h4">Utility</h1>
245250 <h1 class="mt-3 text-white font-kumbh-bold text-h2">
246 What makes them so special?
251 Why are the Hoodratz so special?
247252 </h1>
248253 <p class="mt-5 text-gray-4 font-sora text-body-2">
249 We are NFT and crypto lovers and created a collection drop that we
250 would like to buy ourselves! Check this out:
254 We are NFT &amp; blockchain technology lovers through and through.
255 created a collection drop that we would like to buy ourselves!
256 Check this out:
251257 </p>
252258 <div class="flex flex-col p-6 mt-20 bg-hoodratz-grey-7 rounded-3xl">
253259 <div class="flex items-center justify-between">
254260 <div class="flex flex-col">
255 <h1 class="text-pink-nude text-caption font-sora">VARIETY</h1>
261 <h1 class="uppercase text-pink-nude text-caption font-sora">
262 Variety
263 </h1>
256264 <h1 class="text-white text-body font-sora">
257 Over 200 attributes
265 7 Traits &amp; Over 50 Attributes
258266 </h1>
259267 </div>
260268 <button
@@ -277,23 +285,69 @@ import AppFooter from "@/components/AppFooter.vue";
277285 v-show="accordion.variety"
278286 class="mt-6 text-gray-4 font-sora text-body-2"
279287 >
280 Creativity is our second name! We designed over 200 attributes
288 Creativity is our second name! We designed over 50 attributes
281289 for our Hoodratz so that each and every one of them would be
282 amazing and one-of-a-kind!
290 beautiful and one-of-a-kind!
291 </p>
292 </div>
293
294 <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl">
295 <div class="flex items-center justify-between">
296 <div class="flex flex-col">
297 <h1 class="uppercase text-pink-nude font-sora text-caption">
298 Free 12 Months
299 </h1>
300 <h1 class="text-white text-body font-sora">
301 Decentralized File Manager
302 </h1>
303 </div>
304 <button
305 v-if="!accordion.free"
306 @click="accordion.free = !accordion.free"
307 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
308 >
309 <img src="/images/home/chevron-down.svg" alt="" />
310 </button>
311
312 <button
313 v-else
314 @click="accordion.free = !accordion.free"
315 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
316 >
317 <img src="/images/home/chevron-up.svg" alt="" />
318 </button>
319 </div>
320 <p
321 v-show="accordion.free"
322 class="mt-6 text-gray-4 font-sora text-body-2"
323 >
324 Think of Dropbox for Web 3. For the past 2 years, we have been
325 working on a custom file management experience &amp; ecosystem
326 that ensures a blazing fast media delivery. Public launch
327 February 2022. Every holder will receive 12 months of service
328 for free!
329 </p>
330 <p
331 v-show="accordion.free"
332 class="mt-3 italic text-gray-4 font-sora text-body-2"
333 >
334 This is a value of at least 120 USD per year.
283335 </p>
284336 </div>
285337
286338 <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl">
287339 <div class="flex items-center justify-between">
288340 <div class="flex flex-col">
289 <h1 class="text-pink-nude font-sora text-caption">RARITY</h1>
341 <h1 class="uppercase text-pink-nude font-sora text-caption">
342 Reduced Trading Fees
343 </h1>
290344 <h1 class="text-white text-body font-sora">
291 4 rarity levels
345 Cross-Chain NFT Marketplace
292346 </h1>
293347 </div>
294348 <button
295 v-if="!accordion.rarity"
296 @click="accordion.rarity = !accordion.rarity"
349 v-if="!accordion.marketplace"
350 @click="accordion.marketplace = !accordion.marketplace"
297351 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
298352 >
299353 <img src="/images/home/chevron-down.svg" alt="" />
@@ -301,27 +355,39 @@ import AppFooter from "@/components/AppFooter.vue";
301355
302356 <button
303357 v-else
304 @click="accordion.rarity = !accordion.rarity"
358 @click="accordion.marketplace = !accordion.marketplace"
305359 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
306360 >
307361 <img src="/images/home/chevron-up.svg" alt="" />
308362 </button>
309363 </div>
310364 <p
311 v-show="accordion.rarity"
365 v-show="accordion.marketplace"
312366 class="mt-6 text-gray-4 font-sora text-body-2"
313367 >
314 Excepteur labore mollit esse minim ullamco cillum anim est
315 ipsum. Cillum consequat Lorem elit cillum cupidatat mollit et
316 laboris amet reprehenderit dolor aliqua.
368 Our brand
369 <a
370 href="https://www.instagram.com/nakednfts/"
371 target="_blank"
372 class="text-gray-2 hover:text-gray-1"
373 >@NakedNFTs</a
374 >
375 is releasing an incredibly thoroughly designed &amp; architected
376 NFT marketplace on 12/12 as well! As a holder, any time you sell
377 or purchase a digital collectible through our marketplace, you
378 automatically pay fewer taxes.
317379 </p>
318380 </div>
319381
320382 <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl">
321383 <div class="flex items-center justify-between">
322384 <div class="flex flex-col">
323 <h1 class="text-pink-nude text-caption">POPULARITY</h1>
324 <h1 class="text-white text-body">Amazing NFT community</h1>
385 <h1 class="uppercase text-pink-nude text-caption">
386 Popularity
387 </h1>
388 <h1 class="text-white text-body">
389 The Most Rat NFT Community
390 </h1>
325391 </div>
326392 <button
327393 v-if="!accordion.popularity"
@@ -343,20 +409,19 @@ import AppFooter from "@/components/AppFooter.vue";
343409 v-show="accordion.popularity"
344410 class="mt-6 text-gray-4 font-sora text-body-2"
345411 >
346 Excepteur labore mollit esse minim ullamco cillum anim est
347 ipsum. Cillum consequat Lorem elit cillum cupidatat mollit et
348 laboris amet reprehenderit dolor aliqua.
412 We love building &amp; scaling growing, successful communities.
413 We have a
349414 </p>
350415 </div>
351416
352417 <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl">
353418 <div class="flex items-center justify-between">
354419 <div class="flex flex-col">
355 <h1 class="text-pink-nude text-caption font-sora">
356 OUR MISSION
420 <h1 class="uppercase text-pink-nude text-caption font-sora">
421 Giving Back
357422 </h1>
358423 <h1 class="text-white text-body font-sora">
359 Helping charities worldwide
424 Helping good causes worldwide
360425 </h1>
361426 </div>
362427 <button
@@ -379,9 +444,11 @@ import AppFooter from "@/components/AppFooter.vue";
379444 v-show="accordion.mission"
380445 class="mt-6 text-gray-4 font-sora text-body-2"
381446 >
382 Excepteur labore mollit esse minim ullamco cillum anim est
383 ipsum. Cillum consequat Lorem elit cillum cupidatat mollit et
384 laboris amet reprehenderit dolor aliqua.
447 Our passion and focus lies and lives on the intersection of
448 where technology meets humanity. We try to connect and improve
449 lives by leveraging our creative and technological skills by
450 working with educational &amp; environmental nonprofits all
451 throughout the world.
385452 </p>
386453 </div>
387454 </div>
@@ -405,9 +472,10 @@ import AppFooter from "@/components/AppFooter.vue";
405472 <h1 class="mt-3 text-white font-kumbh-bold text-h3">
406473 What makes them so special?
407474 </h1>
475
408476 <p class="mt-4 text-gray-4 font-sora text-body-2">
409477 We are NFT and crypto lovers and created a collection drop that we
410 would like to buy ourselves! Check this out:
478 would like to buy ourselves!
411479 </p>
412480 </div>
413481 <div class="mx-4 mt-5 md:flex md:flex-col md:items-center">
@@ -416,7 +484,7 @@ import AppFooter from "@/components/AppFooter.vue";
416484 >
417485 <div class="flex items-center justify-between">
418486 <div class="flex flex-col">
419 <h1 class="text-pink-nude text-caption font-sora">VARIETY</h1>
487 <h1 class="text-pink-nude text-caption font-sora">Variety</h1>
420488 <h1 class="text-white text-body font-sora">
421489 Over 200 attributes
422490 </h1>
@@ -452,7 +520,7 @@ import AppFooter from "@/components/AppFooter.vue";
452520 >
453521 <div class="flex items-center justify-between">
454522 <div class="flex flex-col">
455 <h1 class="text-pink-nude font-sora text-caption">RARITY</h1>
523 <h1 class="text-pink-nude font-sora text-caption">Rarity</h1>
456524 <h1 class="text-white font-sora text-body">4 rarity levels</h1>
457525 </div>
458526 <button
@@ -559,31 +627,89 @@ import AppFooter from "@/components/AppFooter.vue";
559627 </div>
560628 </section>
561629
630 <section
631 class="relative max-w-screen-lg pt-20 mx-auto overflow-hidden text-center md:pt-24 lg:pt-64 xl:max-w-screen-xl"
632 >
633 <div class="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
634 <div class="relative">
635 <div
636 class="relative z-10 max-w-screen-lg mx-auto text-center xl:max-w-screen-xl"
637 >
638 <h2
639 class="mb-8 text-3xl font-extrabold leading-none tracking-tight text-gray-1 sm:text-5xl lg:text-6xl font-kumbh-bold"
640 >
641 A truly unique NFT collection.<br />
642 In several ways.
643 </h2>
644 </div>
645 <blockquote class="mt-10">
646 <p
647 class="max-w-5xl mx-auto mb-6 space-y-6 text-lg font-medium text-gray-3 sm:text-2xl sm:leading-10 font-sora"
648 >
649 We created Hoodratz as a.
650 <span
651 class="font-semibold text-pink-600"
652 style="
653 box-shadow: inset 0 -0.1666666667em 0 0 #fff,
654 inset 0 -0.3333333333em 0 0 #bae6fd;
655 "
656 >How many times have you created an API .</span
657 >
658 How many times have you created an API endpoint to handle your
659 file uploads? Are your images &amp; videos utilizing a modern
660 web-optimized format? Do you use differently encoded videos to
661 ensure that no matter the internet connection — or device — there
662 will be as little buffering as possible? The list is long which is
663 why we try to create a set of standards to simplify your
664 management process.
665 </p>
666 </blockquote>
667 <figcaption
668 class="flex flex-col items-center mt-12 font-medium sm:text-xl"
669 >
670 <div class="p-1 mb-3 border-2 border-pink-900 rounded-full">
671 <img
672 src="/images/chris.jpeg"
673 alt=""
674 class="w-10 h-10 bg-indigo-100 rounded-full"
675 loading="lazy"
676 />
677 </div>
678 <div class="text-gray-1">Chris Breuer</div>
679 <div class="text-gray-5">Creator of Hoodratz</div>
680 </figcaption>
681 </div>
682 </div>
683 </section>
684
562685 <section id="future-desktop" class="hidden h-full py-36 lg:block">
563686 <div class="relative">
564687 <img src="/images/home/hoodratz-future-lg.png" alt="" />
565688 <div class="absolute inset-0 flex flex-col items-center left-7 top-12">
566689 <img src="/images/home/hoodratz-future-tech-lg.png" alt="" />
567690 <h1
568 class="mt-5 tracking-widest text-center text-pink-3 font-sora text-h4"
691 class="mt-5 tracking-widest text-center uppercase text-pink-3 font-sora text-h4"
569692 >
570 NEWSET TECH
693 Interoperable Tech
571694 </h1>
572695 <h1 class="my-5 text-white text-h3 font-kumbh-bold">
573 Become a part of the future of NFT
696 We are in it for the long run. Are you?
574697 </h1>
575698 <p class="text-center text-body-2 text-gray-4 font-sora">
576 All hoodratz are stored on the Solana blockchain and their URL is
577 secured by <br />
578 Meema. NFT world has never seen this before!
699 Initially, we launch on the Solana blockchain.
700 </p>
701 <p class="text-center text-body-2 text-gray-4 font-sora">
702 We will then expand into Ethereum and the Cardano blockchain.
579703 </p>
704 <div class="flex items-center mt-5">
705 <img class="mr-5" src="/images/solana-logo.svg" alt="" />
706 </div>
580707 <div class="flex items-center mt-5">
581708 <img
582 class="mr-5"
709 class="mr-5 opacity-10"
583710 src="/images/home/hoodratz-solana-lg.png"
584711 alt=""
585712 />
586 <img src="/images/home/hoodratz-meema-lg.png" alt="" />
587713 </div>
588714 </div>
589715 </div>
formatting only · 7 hidden lines
@@ -615,6 +741,7 @@ import AppFooter from "@/components/AppFooter.vue"; formatting only
615741 </div>
616742 </div>
617743 </section>
744
618745 <AppFooter />
619746 </div>
620747</template>
@@ -628,7 +755,8 @@ export default {
628755 return {
629756 accordion: {
630757 variety: false,
631 rarity: false,
758 free: false,
759 marketplace: false,
632760 popularity: false,
633761 mission: false,
634762 },
formatting only · 5 hidden lines
@@ -636,4 +764,4 @@ export default { formatting only
636764 };
637765 },
638766};
639</script>
767</script>
src/views/PrivacyPolicy.vuemodified+37-28
@@ -1,48 +1,57 @@
11<script setup>
2import AppHeader from '@/components/AppHeader.vue'
3import AppFooter from '@/components/AppFooter.vue'
2import AppHeader from "@/components/AppHeader.vue";
3import AppFooter from "@/components/AppFooter.vue";
44</script>
55
66<template>
7<div class="bg-gray-8 w-screen h-full text-gray-4">
7 <div class="w-screen h-full bg-gray-8 text-gray-4">
88 <AppHeader />
99
1010 <div class="container mx-auto mt-20 md:mt-24">
11 <div class="md:w-2/3 mx-auto">
12 <div class="w-full my-4">
13 <div class="flex items-center justify-center">
14 <h1 class="text-pink-3 uppercase font-sora mt-8 tracking-widest -mt-2">Privacy</h1>
15 </div>
16 </div>
11 <div class="mx-auto md:w-2/3">
12 <div class="w-full my-4">
13 <div class="flex items-center justify-center">
14 <h1
15 class="mt-8 -mt-2 tracking-widest uppercase text-pink-3 font-sora"
16 >
17 Privacy
18 </h1>
19 </div>
20 </div>
1721
18 <div class="text-center mx-4">
19 <div class="mb-20">
20 <h2 class="text-white font-kumbh-bold text-3xl md:text-5xl mb-4 -mt-6">Hoodratz Policy</h2>
21 <p class="font-sora leading-7">
22 We take privacy serious.
23 </p>
24 </div>
25 </div>
22 <div class="mx-4 text-center">
23 <div class="mb-20">
24 <h2
25 class="mb-4 -mt-6 text-3xl text-white font-kumbh-bold md:text-5xl"
26 >
27 Hoodratz Policy
28 </h2>
29 <p class="leading-7 font-sora">We take privacy serious.</p>
30 </div>
2631 </div>
32 </div>
2733 </div>
2834
2935 <!-- Content -->
30 <div id="privacy-policy" class="mx-4 md:container md:mx-auto mt-8 mb-20 font-sora">
31 <div class="md:w-2/3 mx-auto">
32 <Content />
33 </div>
34 </div>
36 <div
37 id="privacy-policy"
38 class="mx-4 mt-8 mb-20 md:container md:mx-auto font-sora"
39 >
40 <div class="mx-auto md:w-2/3">
41 <Content />
42 </div>
43 </div>
3544
3645 <AppFooter />
37</div>
46 </div>
3847</template>
3948
4049<script>
41import Content from '@/content/privacy-policy.md'
50import Content from "@/content/privacy-policy.md";
4251
4352export default {
44 components: {
45 Content
46 }
47 }
53 components: {
54 Content,
55 },
56};
4857</script>