| @@ -8,13 +8,18 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 8 | 8 | <AppHeader class="block md:hidden" /> |
| 9 | 9 | <section |
| 10 | 10 | id="hero" |
| 11 | | - class="relative h-full bg-no-repeat bg-contain lg:h-screen md:bg-cover sm:bg-cover md:bg-hero bg-hero-sm" |
| 11 | + class="relative h-full bg-no-repeat bg-contain xl:h-screen xl:bg-cover lg:bg-contain sm:bg-cover md:bg-hero bg-hero-sm" |
| 12 | 12 | > |
| 13 | 13 | <AppHeader :transparent="true" class="hidden md:block" /> |
| 14 | + <img |
| 15 | + class="absolute hidden xl:top-36 xl:right-1/2 lg:top-10 lg:right-1/2 lg:block" |
| 16 | + src="/images/home/hoodratz-ellipse-1424.svg" |
| 17 | + alt="" |
| 18 | + /> |
| 14 | 19 | <div class="grid grid-cols-1 mx-4 lg:grid-cols-2"> |
| 15 | | - <div class="flex flex-col justify-center md:ml-0 lg:ml-36"> |
| 16 | | - <h1 class="text-white font-kumbh-bold md:text-h1 text-h3"> |
| 17 | | - Discover HoodRatz, <br class="hidden md:block" />a new NFT |
| 20 | + <div class="flex flex-col justify-center md:ml-0 lg:ml-10 xl:ml-36"> |
| 21 | + <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 |
| 18 | 23 | collection |
| 19 | 24 | </h1> |
| 20 | 25 | <p |
| @@ -22,26 +27,53 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 22 | 27 | > |
| 23 | 28 | A limited edition of 10.000 collectible pixel rats. |
| 24 | 29 | </p> |
| 25 | | - <div class="flex flex-col items-center w-full lg:flex-row"> |
| 30 | + <div |
| 31 | + class="flex flex-col items-center w-full lg:flex-row lg:justify-start md:flex-row md:justify-center" |
| 32 | + > |
| 26 | 33 | <a |
| 27 | 34 | :href="social.discord" |
| 28 | 35 | target="_blank" |
| 29 | | - class="w-full px-8 py-3 mt-5 text-white rounded-full lg:w-auto lg:mr-10 bg-pink-gradient md:shadow-none text-a font-sora shadow-hoodratz-btn" |
| 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" |
| 30 | 37 | > |
| 31 | 38 | JOIN DISCORD |
| 32 | 39 | </a> |
| 33 | 40 | <a |
| 34 | 41 | :href="social.twitter" |
| 35 | 42 | target="_blank" |
| 36 | | - class="w-full px-8 py-3 mt-5 text-white border border-white rounded-full lg:w-auto text-button font-sora hover:bg-white hover:text-gray-7" |
| 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" |
| 37 | 44 | > |
| 38 | 45 | FOLLOW US |
| 46 | + <svg |
| 47 | + class="fill-current ml-2.5" |
| 48 | + width="20" |
| 49 | + height="20" |
| 50 | + viewBox="0 0 20 20" |
| 51 | + fill="currentColor" |
| 52 | + xmlns="http://www.w3.org/2000/svg" |
| 53 | + > |
| 54 | + <path |
| 55 | + d="M6.2918 18.1251C13.8371 18.1251 17.9652 11.8724 17.9652 6.45167C17.9652 6.27589 17.9613 6.0962 17.9535 5.92042C18.7566 5.33967 19.4496 4.62033 20 3.7962C19.2521 4.12896 18.458 4.34627 17.6449 4.44074C18.5011 3.92755 19.1421 3.12135 19.4492 2.17159C18.6438 2.64892 17.763 2.98563 16.8445 3.1673C16.2257 2.50976 15.4075 2.07439 14.5164 1.9285C13.6253 1.78261 12.711 1.93433 11.9148 2.3602C11.1186 2.78607 10.4848 3.46238 10.1115 4.28455C9.73825 5.10672 9.64619 6.02897 9.84961 6.9087C8.21874 6.82686 6.62328 6.40321 5.16665 5.6652C3.71002 4.9272 2.42474 3.89132 1.39414 2.62472C0.870333 3.52782 0.710047 4.59649 0.945859 5.61353C1.18167 6.63057 1.79589 7.51966 2.66367 8.10011C2.01219 8.07943 1.37498 7.90402 0.804688 7.58839V7.63917C0.804104 8.58691 1.13175 9.50561 1.73192 10.2391C2.3321 10.9726 3.16777 11.4756 4.09687 11.6626C3.49338 11.8277 2.85999 11.8518 2.2457 11.7329C2.50788 12.548 3.01798 13.2609 3.70481 13.7721C4.39164 14.2833 5.22093 14.5673 6.07695 14.5845C4.62369 15.726 2.82848 16.3452 0.980469 16.3423C0.652739 16.3418 0.325333 16.3217 0 16.2821C1.87738 17.4866 4.06128 18.1263 6.2918 18.1251Z" |
| 56 | + fill="currentColor" |
| 57 | + /> |
| 58 | + </svg> |
| 39 | 59 | </a> |
| 40 | 60 | </div> |
| 61 | + <div |
| 62 | + class="absolute items-center hidden xl:bottom-0 lg:-bottom-36 lg:flex" |
| 63 | + > |
| 64 | + <p class="text-button text-gray-4 font-sora"> |
| 65 | + Launching on <span class="text-pink-3">Dec 24!</span> |
| 66 | + </p> |
| 67 | + <img |
| 68 | + class="mt-10 w-28 h-28" |
| 69 | + src="/images/home/hoodratz-rocket.svg" |
| 70 | + alt="" |
| 71 | + /> |
| 72 | + </div> |
| 41 | 73 | </div> |
| 42 | 74 | <div class="flex justify-center order-first mt-20 lg:order-last"> |
| 43 | 75 | <img |
| 44 | | - class="object-contain w-3/4 h-full" |
| 76 | + class="object-contain w-3/4 h-full xl:w-3/4 lg:w-full" |
| 45 | 77 | src="/images/home/hoodratz-card-sm.png" |
| 46 | 78 | alt="" |
| 47 | 79 | /> |
| @@ -52,7 +84,7 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 52 | 84 | <div> |
| 53 | 85 | <img src="/images/home/hoodratz-about-us-lg.png" alt="" /> |
| 54 | 86 | </div> |
| 55 | | - <div class="mx-auto max-w-7xl"> |
| 87 | + <div class="xl:mx-auto max-w-7xl lg:mx-20"> |
| 56 | 88 | <div class="flex flex-col"> |
| 57 | 89 | <div class="flex flex-col -mt-56"> |
| 58 | 90 | <h1 class="text-pink-3 font-sora text-h4">ABOUT US</h1> |
| @@ -66,13 +98,23 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 66 | 98 | </div> |
| 67 | 99 | <div class="flex mt-24"> |
| 68 | 100 | <img |
| 69 | | - class="mr-24 w-96 h-1/4" |
| 101 | + class="mr-24 w-96 h-1/43" |
| 70 | 102 | src="/images/home/hoodratz-josephine.png" |
| 71 | 103 | alt="" |
| 72 | 104 | /> |
| 73 | 105 | <div class="relative flex w-full"> |
| 106 | + <img |
| 107 | + class="absolute lg:right-0 xl:right-96 -top-36 w-60" |
| 108 | + src="/images/home/hoodratz-ellipse-93.svg" |
| 109 | + alt="" |
| 110 | + /> |
| 111 | + <img |
| 112 | + class="absolute right-0 w-80 -top-16 xl:block lg:hidden" |
| 113 | + src="/images/home/hoodratz-cone.svg" |
| 114 | + alt="" |
| 115 | + /> |
| 74 | 116 | <div |
| 75 | | - class="absolute flex flex-col h-56 p-6 mt-10 -top-24 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 117 | + class="absolute flex flex-col p-6 mt-10 xl:h-56 lg:h-64 -top-24 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 76 | 118 | > |
| 77 | 119 | <div class="flex items-center"> |
| 78 | 120 | <img |
| @@ -81,53 +123,43 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 81 | 123 | alt="" |
| 82 | 124 | /> |
| 83 | 125 | <div class="flex flex-col text-right"> |
| 84 | | - <h1 class="text-pink-3">RARITY</h1> |
| 85 | | - <h1 class="text-white">LEGENDARY</h1> |
| 126 | + <h1 class="text-pink-3 font-sora text-caption">RARITY</h1> |
| 127 | + <h1 class="text-white font-sora text-title">LEGENDARY</h1> |
| 86 | 128 | </div> |
| 87 | 129 | </div> |
| 88 | | - <p |
| 89 | | - class="mt-6 text-gray-4" |
| 90 | | - style="font-size: 16px; line-height: 30px; letter-spacing: 1%" |
| 91 | | - > |
| 130 | + <p class="mt-6 text-gray-4 text-body-2 font-sora"> |
| 92 | 131 | Hoodratz come with various rare attributes. <br />The rarer |
| 93 | 132 | the attribute, the rarer is your rat! |
| 94 | 133 | </p> |
| 95 | 134 | </div> |
| 96 | 135 | <div |
| 97 | | - class="absolute flex flex-col p-6 mt-10 -bottom-24 w-72 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 136 | + class="absolute flex flex-col p-6 mt-10 xl:-bottom-24 lg:-bottom-80 w-72 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 98 | 137 | > |
| 99 | 138 | <div class="flex items-center"> |
| 100 | 139 | <div |
| 101 | | - class="p-5 mr-auto" |
| 102 | | - style=" |
| 103 | | - background: linear-gradient( |
| 104 | | - 103.6deg, |
| 105 | | - rgba(255, 255, 255, 0.4) 1.67%, |
| 106 | | - rgba(255, 255, 255, 0.1) 81.8% |
| 107 | | - ); |
| 108 | | - border: 2px solid #463851; |
| 109 | | - box-sizing: border-box; |
| 110 | | - backdrop-filter: blur(40px); |
| 111 | | - border-radius: 20px; |
| 112 | | - " |
| 140 | + class="absolute p-5 mr-auto -top-8 bg-black-gradient rounded-3xl backdrop-blur-3xl" |
| 113 | 141 | > |
| 114 | | - <img src="/images/home/hoodratz-gift.svg" alt="" /> |
| 142 | + <img |
| 143 | + class="w-8 h-8" |
| 144 | + src="/images/home/hoodratz-gift.svg" |
| 145 | + alt="" |
| 146 | + /> |
| 115 | 147 | </div> |
| 116 | | - <div class="flex flex-col text-right"> |
| 117 | | - <h1 class="text-pink-3">AMOUNT</h1> |
| 118 | | - <h1 class="text-white">10 000</h1> |
| 148 | + <div class="flex flex-col ml-auto text-right"> |
| 149 | + <h1 class="text-pink-3 font-sora text-caption">AMOUNT</h1> |
| 150 | + <h1 class="text-white font-sora text-title">10 000</h1> |
| 119 | 151 | </div> |
| 120 | 152 | </div> |
| 121 | | - <p |
| 122 | | - class="mt-6 text-gray-4" |
| 123 | | - style="font-size: 16px; line-height: 30px; letter-spacing: 1%" |
| 124 | | - > |
| 153 | + <p class="mt-6 text-gray-4 text-body-2 font-sora"> |
| 125 | 154 | Remember that our stock is limited! There will only ever be 10 |
| 126 | 155 | thousand Hoodratz created. <br />Grab yours while you still |
| 127 | 156 | can! |
| 128 | 157 | </p> |
| 129 | 158 | </div> |
| 130 | | - <div class="absolute right-0 top-48"> |
| 159 | + <!-- absolute xl:right-0 xl:top-48 lg:top-48 lg:-left-16 lg:right-5 --> |
| 160 | + <div |
| 161 | + class="absolute xl:right-0 xl:left-72 xl:top-48 lg:top-48 lg:-left-16 lg:right-5" |
| 162 | + > |
| 131 | 163 | <img src="/images/home/hoodratz-bg-count.png" alt="" /> |
| 132 | 164 | </div> |
| 133 | 165 | </div> |
| @@ -140,56 +172,22 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 140 | 172 | <img src="/images/home/hoodratz-about-us.svg" alt="" /> |
| 141 | 173 | <div class="absolute flex flex-col mx-4 top-44"> |
| 142 | 174 | <h1 class="text-pink-3 font-sora">ABOUT US</h1> |
| 143 | | - <h1 |
| 144 | | - class="mt-3 text-white font-kumbh-bold" |
| 145 | | - style="font-size: 28px; line-height: 36px; letter-spacing: 1%" |
| 146 | | - > |
| 175 | + <h1 class="mt-3 text-white font-kumbh-bold text-h3"> |
| 147 | 176 | What are Hoodratz? |
| 148 | 177 | </h1> |
| 149 | | - <p |
| 150 | | - class="mt-5 text-gray-4 font-sora" |
| 151 | | - style="font-size: 16px; line-height: 30px; letter-spacing: 1%" |
| 152 | | - > |
| 178 | + <p class="mt-5 text-gray-4 font-sora text-body-2"> |
| 153 | 179 | Hodratz are uniquely generated and collectible NFTs. <br />Each of |
| 154 | 180 | them is one-of-a-kind and 100% owned by you. |
| 155 | 181 | </p> |
| 156 | 182 | </div> |
| 157 | | - <div class="mx-4 mt-5"> |
| 158 | | - <div |
| 159 | | - class="relative border border-white rounded-4xl" |
| 160 | | - style=" |
| 161 | | - background: radial-gradient( |
| 162 | | - 82.01% 81.61% at 94.63% 16.78%, |
| 163 | | - #ed9db9 0%, |
| 164 | | - #ec83a2 57.37%, |
| 165 | | - #f05584 100% |
| 166 | | - ); |
| 167 | | - " |
| 168 | | - > |
| 169 | | - <div |
| 170 | | - class="flex items-center justify-center bg-cover bg-hoodratz-card-bg h-80 rounded-4xl" |
| 171 | | - > |
| 172 | | - <img |
| 173 | | - class="object-contain w-64 h-64 mb-4" |
| 174 | | - src="/images/home/josephine.png" |
| 175 | | - alt="" |
| 176 | | - /> |
| 177 | | - </div> |
| 178 | | - <div |
| 179 | | - class="relative flex items-center w-full p-5 bg-white rounded-br-3xl rounded-bl-3xl" |
| 180 | | - > |
| 181 | | - <div class="p-3 mr-5 rounded-full bg-hoodratz-grey-7"> |
| 182 | | - <img src="/images/home/star.svg" alt="" /> |
| 183 | | - </div> |
| 184 | | - <div class="flex flex-col"> |
| 185 | | - <h1 class="text-gray-4 font-sora">Hoodrat #234</h1> |
| 186 | | - <h1 class="text-gray-8 font-sora">Josephine, the town rat</h1> |
| 187 | | - </div> |
| 188 | | - </div> |
| 189 | | - </div> |
| 190 | | - |
| 183 | + <div class="flex flex-col items-center mx-4 mt-16"> |
| 184 | + <img |
| 185 | + class="w-full h-full sm:w-3/4 md:w-3/4" |
| 186 | + src="/images/home/hoodratz-josephine.png" |
| 187 | + alt="" |
| 188 | + /> |
| 191 | 189 | <div |
| 192 | | - class="flex flex-col p-6 mt-10 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 190 | + class="flex flex-col w-full p-6 mt-10 sm:w-3/4 md:w-3/4 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 193 | 191 | > |
| 194 | 192 | <div class="flex items-center"> |
| 195 | 193 | <img |
| @@ -198,85 +196,49 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 198 | 196 | alt="" |
| 199 | 197 | /> |
| 200 | 198 | <div class="flex flex-col text-right"> |
| 201 | | - <h1 class="text-pink-3">RARITY</h1> |
| 202 | | - <h1 class="text-white">LEGENDARY</h1> |
| 199 | + <h1 class="text-pink-3 font-sora text-caption">RARITY</h1> |
| 200 | + <h1 class="text-white font-sora text-title">LEGENDARY</h1> |
| 203 | 201 | </div> |
| 204 | 202 | </div> |
| 205 | | - <p |
| 206 | | - class="mt-6 text-gray-4" |
| 207 | | - style="font-size: 16px; line-height: 30px; letter-spacing: 1%" |
| 208 | | - > |
| 203 | + <p class="mt-6 text-gray-4 text-body-2 font-sora"> |
| 209 | 204 | Hoodratz come with various rare attributes. <br />The rarer the |
| 210 | 205 | attribute, the rarer is your rat! |
| 211 | 206 | </p> |
| 212 | 207 | </div> |
| 213 | 208 | |
| 214 | 209 | <div |
| 215 | | - class="flex flex-col p-6 mt-10 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 210 | + class="flex flex-col w-full p-6 mt-10 sm:w-3/4 md:w-3/4 bg-hoodratz-grey-7 rounded-4xl font-sora" |
| 216 | 211 | > |
| 217 | 212 | <div class="flex items-center"> |
| 218 | 213 | <div |
| 219 | | - class="p-5 mr-auto" |
| 220 | | - style=" |
| 221 | | - background: linear-gradient( |
| 222 | | - 103.6deg, |
| 223 | | - rgba(255, 255, 255, 0.4) 1.67%, |
| 224 | | - rgba(255, 255, 255, 0.1) 81.8% |
| 225 | | - ); |
| 226 | | - border: 2px solid #463851; |
| 227 | | - box-sizing: border-box; |
| 228 | | - backdrop-filter: blur(40px); |
| 229 | | - border-radius: 20px; |
| 230 | | - " |
| 214 | + class="p-5 mr-auto bg-black-gradient rounded-3xl backdrop-blur-3xl" |
| 231 | 215 | > |
| 232 | 216 | <img src="/images/home/hoodratz-gift.svg" alt="" /> |
| 233 | 217 | </div> |
| 234 | 218 | <div class="flex flex-col text-right"> |
| 235 | | - <h1 class="text-pink-3">AMOUNT</h1> |
| 236 | | - <h1 class="text-white">10 000</h1> |
| 219 | + <h1 class="text-pink-3 font-sora text-caption">AMOUNT</h1> |
| 220 | + <h1 class="text-white font-sora text-title">10 000</h1> |
| 237 | 221 | </div> |
| 238 | 222 | </div> |
| 239 | | - <p |
| 240 | | - class="mt-6 text-gray-4" |
| 241 | | - style="font-size: 16px; line-height: 30px; letter-spacing: 1%" |
| 242 | | - > |
| 223 | + <p class="mt-6 text-gray-4 text-body-2 font-sora"> |
| 243 | 224 | Remember that our stock is limited! There will only ever be 10 |
| 244 | | - thousand Hoodratz created. <br />Grab yours while you still can! |
| 225 | + thousand Hoodratz created. Grab yours while you still can! |
| 245 | 226 | </p> |
| 246 | 227 | </div> |
| 247 | 228 | |
| 248 | | - <div |
| 249 | | - class="relative mt-10 rounded-4xl" |
| 250 | | - style=" |
| 251 | | - background: radial-gradient( |
| 252 | | - 82.01% 81.61% at 94.63% 16.78%, |
| 253 | | - #ed9db9 0%, |
| 254 | | - #ec83a2 57.37%, |
| 255 | | - #f05584 100% |
| 256 | | - ); |
| 257 | | - " |
| 258 | | - > |
| 259 | | - <div |
| 260 | | - class="flex flex-col w-full p-8 text-right bg-no-repeat bg-contain text-pink-1 h-72 bg-hoodratz-pink-bg rounded-4xl font-sora" |
| 261 | | - > |
| 262 | | - <h1 style="line-height: 22px; letter-spacing: 5px; font-size: 14px"> |
| 263 | | - BACKGROUNDS |
| 264 | | - </h1> |
| 265 | | - <h1 |
| 266 | | - style="font-size: 22px; line-height: 27.72px; letter-spacing: 5px" |
| 267 | | - > |
| 268 | | - 23 |
| 269 | | - </h1> |
| 270 | | - </div> |
| 271 | | - </div> |
| 229 | + <img |
| 230 | + class="w-full mt-10 sm:w-3/4 md:w-3/4" |
| 231 | + src="/images/home/hoodratz-bg-count-sm.png" |
| 232 | + alt="" |
| 233 | + /> |
| 272 | 234 | </div> |
| 273 | 235 | </section> |
| 274 | 236 | |
| 275 | | - <section id="proposition-desktop" class="hidden h-full lg:block"> |
| 237 | + <section id="proposition-desktop" class="hidden h-full lg:block lg:mt-64"> |
| 276 | 238 | <div> |
| 277 | 239 | <img src="/images/home/hoodratz-proposition-lg.png" alt="" /> |
| 278 | 240 | </div> |
| 279 | | - <div class="mx-auto max-w-7xl"> |
| 241 | + <div class="xl:mx-auto max-w-7xl lg:mx-20"> |
| 280 | 242 | <div class="grid grid-cols-2"> |
| 281 | 243 | <div class="flex flex-col mr-24 -mt-72"> |
| 282 | 244 | <h1 class="text-pink-3 font-sora text-h4">VALUE PROPOSITION</h1> |
| @@ -290,16 +252,8 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 290 | 252 | <div class="flex flex-col p-6 mt-20 bg-hoodratz-grey-7 rounded-3xl"> |
| 291 | 253 | <div class="flex items-center justify-between"> |
| 292 | 254 | <div class="flex flex-col"> |
| 293 | | - <h1 |
| 294 | | - class="text-pink-nude" |
| 295 | | - style="font-size: 14px; line-height: 22px" |
| 296 | | - > |
| 297 | | - VARIETY |
| 298 | | - </h1> |
| 299 | | - <h1 |
| 300 | | - class="text-white" |
| 301 | | - style="font-size: 20px; line-height: 30px" |
| 302 | | - > |
| 255 | + <h1 class="text-pink-nude text-caption font-sora">VARIETY</h1> |
| 256 | + <h1 class="text-white text-body font-sora"> |
| 303 | 257 | Over 200 attributes |
| 304 | 258 | </h1> |
| 305 | 259 | </div> |
| @@ -321,8 +275,7 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 321 | 275 | </div> |
| 322 | 276 | <p |
| 323 | 277 | v-show="accordion.variety" |
| 324 | | - class="mt-6 text-gray-4 font-sora" |
| 325 | | - style="font-size: 16px; line-height: 30px" |
| 278 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 326 | 279 | > |
| 327 | 280 | Creativity is our second name! We designed over 200 attributes |
| 328 | 281 | for our Hoodratz so that each and every one of them would be |
| @@ -333,16 +286,8 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 333 | 286 | <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl"> |
| 334 | 287 | <div class="flex items-center justify-between"> |
| 335 | 288 | <div class="flex flex-col"> |
| 336 | | - <h1 |
| 337 | | - class="text-pink-nude" |
| 338 | | - style="font-size: 14px; line-height: 22px" |
| 339 | | - > |
| 340 | | - RARITY |
| 341 | | - </h1> |
| 342 | | - <h1 |
| 343 | | - class="text-white" |
| 344 | | - style="font-size: 20px; line-height: 30px" |
| 345 | | - > |
| 289 | + <h1 class="text-pink-nude font-sora text-caption">RARITY</h1> |
| 290 | + <h1 class="text-white text-body font-sora"> |
| 346 | 291 | 4 rarity levels |
| 347 | 292 | </h1> |
| 348 | 293 | </div> |
| @@ -364,8 +309,7 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 364 | 309 | </div> |
| 365 | 310 | <p |
| 366 | 311 | v-show="accordion.rarity" |
| 367 | | - class="mt-6 text-gray-4 font-sora" |
| 368 | | - style="font-size: 16px; line-height: 30px" |
| 312 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 369 | 313 | > |
| 370 | 314 | Excepteur labore mollit esse minim ullamco cillum anim est |
| 371 | 315 | ipsum. Cillum consequat Lorem elit cillum cupidatat mollit et |
| @@ -376,18 +320,8 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 376 | 320 | <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl"> |
| 377 | 321 | <div class="flex items-center justify-between"> |
| 378 | 322 | <div class="flex flex-col"> |
| 379 | | - <h1 |
| 380 | | - class="text-pink-nude" |
| 381 | | - style="font-size: 14px; line-height: 22px" |
| 382 | | - > |
| 383 | | - POPULARITY |
| 384 | | - </h1> |
| 385 | | - <h1 |
| 386 | | - class="text-white" |
| 387 | | - style="font-size: 20px; line-height: 30px" |
| 388 | | - > |
| 389 | | - Amazing NFT community |
| 390 | | - </h1> |
| 323 | + <h1 class="text-pink-nude text-caption">POPULARITY</h1> |
| 324 | + <h1 class="text-white text-body">Amazing NFT community</h1> |
| 391 | 325 | </div> |
| 392 | 326 | <button |
| 393 | 327 | v-if="!accordion.popularity" |
| @@ -407,8 +341,7 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 407 | 341 | </div> |
| 408 | 342 | <p |
| 409 | 343 | v-show="accordion.popularity" |
| 410 | | - class="mt-6 text-gray-4 font-sora" |
| 411 | | - style="font-size: 16px; line-height: 30px" |
| 344 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 412 | 345 | > |
| 413 | 346 | Excepteur labore mollit esse minim ullamco cillum anim est |
| 414 | 347 | ipsum. Cillum consequat Lorem elit cillum cupidatat mollit et |
| @@ -419,16 +352,10 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 419 | 352 | <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl"> |
| 420 | 353 | <div class="flex items-center justify-between"> |
| 421 | 354 | <div class="flex flex-col"> |
| 422 | | - <h1 |
| 423 | | - class="text-pink-nude" |
| 424 | | - style="font-size: 14px; line-height: 22px" |
| 425 | | - > |
| 355 | + <h1 class="text-pink-nude text-caption font-sora"> |
| 426 | 356 | OUR MISSION |
| 427 | 357 | </h1> |
| 428 | | - <h1 |
| 429 | | - class="text-white" |
| 430 | | - style="font-size: 20px; line-height: 30px" |
| 431 | | - > |
| 358 | + <h1 class="text-white text-body font-sora"> |
| 432 | 359 | Helping charities worldwide |
| 433 | 360 | </h1> |
| 434 | 361 | </div> |
| @@ -450,8 +377,7 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 450 | 377 | </div> |
| 451 | 378 | <p |
| 452 | 379 | v-show="accordion.mission" |
| 453 | | - class="mt-6 text-gray-4 font-sora" |
| 454 | | - style="font-size: 16px; line-height: 30px" |
| 380 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 455 | 381 | > |
| 456 | 382 | Excepteur labore mollit esse minim ullamco cillum anim est |
| 457 | 383 | ipsum. Cillum consequat Lorem elit cillum cupidatat mollit et |
| @@ -475,47 +401,45 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 475 | 401 | > |
| 476 | 402 | <img src="/images/home/hoodratz-proposition.svg" alt="" /> |
| 477 | 403 | <div class="absolute mx-4 top-36"> |
| 478 | | - <h1 |
| 479 | | - class="text-pink-3" |
| 480 | | - style="font-size: 16px; line-height: 22px; letter-spacing: 10px" |
| 481 | | - > |
| 482 | | - VALUE PROPOSITION |
| 483 | | - </h1> |
| 484 | | - <h1 |
| 485 | | - class="mt-3 text-white font-kumbh-bold" |
| 486 | | - style="font-size: 28px; line-height: 36px" |
| 487 | | - > |
| 404 | + <h1 class="text-pink-3 text-h4">VALUE PROPOSITION</h1> |
| 405 | + <h1 class="mt-3 text-white font-kumbh-bold text-h3"> |
| 488 | 406 | What makes them so special? |
| 489 | 407 | </h1> |
| 490 | | - <p |
| 491 | | - class="mt-4 text-gray-4 font-sora" |
| 492 | | - style="font-size: 16px; line-height: 30px" |
| 493 | | - > |
| 408 | + <p class="mt-4 text-gray-4 font-sora text-body-2"> |
| 494 | 409 | We are NFT and crypto lovers and created a collection drop that we |
| 495 | 410 | would like to buy ourselves! Check this out: |
| 496 | 411 | </p> |
| 497 | 412 | </div> |
| 498 | | - <div class="mx-4 mt-5"> |
| 499 | | - <div class="flex flex-col p-6 bg-hoodratz-grey-7 rounded-3xl"> |
| 413 | + <div class="mx-4 mt-5 md:flex md:flex-col md:items-center"> |
| 414 | + <div |
| 415 | + class="flex flex-col p-6 bg-hoodratz-grey-7 rounded-3xl sm:w-full md:w-3/4" |
| 416 | + > |
| 500 | 417 | <div class="flex items-center justify-between"> |
| 501 | 418 | <div class="flex flex-col"> |
| 502 | | - <h1 |
| 503 | | - class="text-pink-nude" |
| 504 | | - style="font-size: 14px; line-height: 22px" |
| 505 | | - > |
| 506 | | - VARIETY |
| 507 | | - </h1> |
| 508 | | - <h1 class="text-white" style="font-size: 20px; line-height: 30px"> |
| 419 | + <h1 class="text-pink-nude text-caption font-sora">VARIETY</h1> |
| 420 | + <h1 class="text-white text-body font-sora"> |
| 509 | 421 | Over 200 attributes |
| 510 | 422 | </h1> |
| 511 | 423 | </div> |
| 512 | | - <div class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"> |
| 424 | + <button |
| 425 | + v-if="!accordion.variety" |
| 426 | + @click="accordion.variety = !accordion.variety" |
| 427 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 428 | + > |
| 429 | + <img src="/images/home/chevron-down.svg" alt="" /> |
| 430 | + </button> |
| 431 | + |
| 432 | + <button |
| 433 | + v-else |
| 434 | + @click="accordion.variety = !accordion.variety" |
| 435 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 436 | + > |
| 513 | 437 | <img src="/images/home/chevron-up.svg" alt="" /> |
| 514 | | - </div> |
| 438 | + </button> |
| 515 | 439 | </div> |
| 516 | 440 | <p |
| 517 | | - class="mt-6 text-gray-4 font-sora" |
| 518 | | - style="font-size: 16px; line-height: 30px" |
| 441 | + v-if="accordion.variety" |
| 442 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 519 | 443 | > |
| 520 | 444 | Creativity is our second name! We designed over 200 attributes for |
| 521 | 445 | our Hoodratz so that each and every one of them would be amazing and |
| @@ -523,61 +447,110 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 523 | 447 | </p> |
| 524 | 448 | </div> |
| 525 | 449 | |
| 526 | | - <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl"> |
| 450 | + <div |
| 451 | + class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl sm:w-full md:w-3/4" |
| 452 | + > |
| 527 | 453 | <div class="flex items-center justify-between"> |
| 528 | 454 | <div class="flex flex-col"> |
| 529 | | - <h1 |
| 530 | | - class="text-pink-nude" |
| 531 | | - style="font-size: 14px; line-height: 22px" |
| 532 | | - > |
| 533 | | - RARITY |
| 534 | | - </h1> |
| 535 | | - <h1 class="text-white" style="font-size: 20px; line-height: 30px"> |
| 536 | | - 4 rarity levels |
| 537 | | - </h1> |
| 455 | + <h1 class="text-pink-nude font-sora text-caption">RARITY</h1> |
| 456 | + <h1 class="text-white font-sora text-body">4 rarity levels</h1> |
| 538 | 457 | </div> |
| 539 | | - <div class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"> |
| 458 | + <button |
| 459 | + v-if="!accordion.rarity" |
| 460 | + @click="accordion.rarity = !accordion.rarity" |
| 461 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 462 | + > |
| 463 | + <img src="/images/home/chevron-down.svg" alt="" /> |
| 464 | + </button> |
| 465 | + |
| 466 | + <button |
| 467 | + v-else |
| 468 | + @click="accordion.rarity = !accordion.rarity" |
| 469 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 470 | + > |
| 540 | 471 | <img src="/images/home/chevron-up.svg" alt="" /> |
| 541 | | - </div> |
| 472 | + </button> |
| 542 | 473 | </div> |
| 474 | + <p |
| 475 | + v-if="accordion.rarity" |
| 476 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 477 | + > |
| 478 | + Excepteur labore mollit esse minim ullamco cillum anim est ipsum. |
| 479 | + Cillum consequat Lorem elit cillum cupidatat mollit et laboris amet |
| 480 | + reprehenderit dolor aliqua. |
| 481 | + </p> |
| 543 | 482 | </div> |
| 544 | 483 | |
| 545 | | - <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl"> |
| 484 | + <div |
| 485 | + class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl sm:w-full md:w-3/4" |
| 486 | + > |
| 546 | 487 | <div class="flex items-center justify-between"> |
| 547 | 488 | <div class="flex flex-col"> |
| 548 | | - <h1 |
| 549 | | - class="text-pink-nude" |
| 550 | | - style="font-size: 14px; line-height: 22px" |
| 551 | | - > |
| 552 | | - POPULARITY |
| 553 | | - </h1> |
| 554 | | - <h1 class="text-white" style="font-size: 20px; line-height: 30px"> |
| 489 | + <h1 class="text-pink-nude font-sora text-caption">POPULARITY</h1> |
| 490 | + <h1 class="text-white font-sora text-body-2"> |
| 555 | 491 | Amazing NFT community |
| 556 | 492 | </h1> |
| 557 | 493 | </div> |
| 558 | | - <div class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"> |
| 494 | + <button |
| 495 | + v-if="!accordion.popularity" |
| 496 | + @click="accordion.popularity = !accordion.popularity" |
| 497 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 498 | + > |
| 499 | + <img src="/images/home/chevron-down.svg" alt="" /> |
| 500 | + </button> |
| 501 | + |
| 502 | + <button |
| 503 | + v-else |
| 504 | + @click="accordion.popularity = !accordion.popularity" |
| 505 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 506 | + > |
| 559 | 507 | <img src="/images/home/chevron-up.svg" alt="" /> |
| 560 | | - </div> |
| 508 | + </button> |
| 561 | 509 | </div> |
| 510 | + <p |
| 511 | + v-if="accordion.popularity" |
| 512 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 513 | + > |
| 514 | + Excepteur labore mollit esse minim ullamco cillum anim est ipsum. |
| 515 | + Cillum consequat Lorem elit cillum cupidatat mollit et laboris amet |
| 516 | + reprehenderit dolor aliqua. |
| 517 | + </p> |
| 562 | 518 | </div> |
| 563 | 519 | |
| 564 | | - <div class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl"> |
| 520 | + <div |
| 521 | + class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl sm:w-full md:w-3/4" |
| 522 | + > |
| 565 | 523 | <div class="flex items-center justify-between"> |
| 566 | 524 | <div class="flex flex-col"> |
| 567 | | - <h1 |
| 568 | | - class="text-pink-nude" |
| 569 | | - style="font-size: 14px; line-height: 22px" |
| 570 | | - > |
| 571 | | - OUR MISSION |
| 572 | | - </h1> |
| 573 | | - <h1 class="text-white" style="font-size: 20px; line-height: 30px"> |
| 525 | + <h1 class="text-pink-nude text-caption font-sora">OUR MISSION</h1> |
| 526 | + <h1 class="text-white text-body font-sora"> |
| 574 | 527 | Helping charities worldwide |
| 575 | 528 | </h1> |
| 576 | 529 | </div> |
| 577 | | - <div class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"> |
| 530 | + <button |
| 531 | + v-if="!accordion.mission" |
| 532 | + @click="accordion.mission = !accordion.mission" |
| 533 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 534 | + > |
| 535 | + <img src="/images/home/chevron-down.svg" alt="" /> |
| 536 | + </button> |
| 537 | + |
| 538 | + <button |
| 539 | + v-else |
| 540 | + @click="accordion.mission = !accordion.mission" |
| 541 | + class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl" |
| 542 | + > |
| 578 | 543 | <img src="/images/home/chevron-up.svg" alt="" /> |
| 579 | | - </div> |
| 544 | + </button> |
| 580 | 545 | </div> |
| 546 | + <p |
| 547 | + v-if="accordion.mission" |
| 548 | + class="mt-6 text-gray-4 font-sora text-body-2" |
| 549 | + > |
| 550 | + Excepteur labore mollit esse minim ullamco cillum anim est ipsum. |
| 551 | + Cillum consequat Lorem elit cillum cupidatat mollit et laboris amet |
| 552 | + reprehenderit dolor aliqua. |
| 553 | + </p> |
| 581 | 554 | </div> |
| 582 | 555 | |
| 583 | 556 | <div class="flex items-center justify-center mt-5"> |
| @@ -586,7 +559,7 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 586 | 559 | </div> |
| 587 | 560 | </section> |
| 588 | 561 | |
| 589 | | - <section id="future-desktop" class="hidden h-full my-36 lg:block"> |
| 562 | + <section id="future-desktop" class="hidden h-full py-36 lg:block"> |
| 590 | 563 | <div class="relative"> |
| 591 | 564 | <img src="/images/home/hoodratz-future-lg.png" alt="" /> |
| 592 | 565 | <div class="absolute inset-0 flex flex-col items-center left-7 top-12"> |
| @@ -622,21 +595,15 @@ import AppFooter from "@/components/AppFooter.vue"; |
| 622 | 595 | > |
| 623 | 596 | <div class="flex flex-col items-center"> |
| 624 | 597 | <img src="/images/home/hoodratz-tech.svg" alt="" /> |
| 625 | | - <h1 |
| 626 | | - class="mt-5 text-center text-pink-3 font-sora" |
| 627 | | - style="font-size: 16px; line-height: 22px; letter-spacing: 10px" |
| 628 | | - > |
| 598 | + <h1 class="mt-5 text-center text-pink-3 font-sora text-h4"> |
| 629 | 599 | NEWSET TECH |
| 630 | 600 | </h1> |
| 631 | 601 | <img src="/images/home/hoodratz-future.svg" alt="" /> |
| 632 | 602 | <div class="-mt-32 text-center font-sora"> |
| 633 | | - <h1 class="text-white" style="font-size: 28px; line-height: 36px"> |
| 603 | + <h1 class="text-white text-h3 font-kumbh-bold"> |
| 634 | 604 | Become a part of the future of NFT |
| 635 | 605 | </h1> |
| 636 | | - <p |
| 637 | | - class="mt-5 text-gray-4" |
| 638 | | - style="font-size: 16px; line-height: 30px; letter-spacing: 1.6px" |
| 639 | | - > |
| 606 | + <p class="mt-5 text-gray-4 text-body-2 font-sora"> |
| 640 | 607 | All hoodratz are stored on the Solana blockchain and their URL is |
| 641 | 608 | secured by Meema. NFT world has never seen this before! |
| 642 | 609 | </p> |
