also looking at this
Staging Update - Nov 28, 2021
#17
20 files
+386
-342
Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.
| @@ -39,13 +39,12 @@ import AppFooter from "@/components/AppFooter.vue"; | ||
| 39 | 39 | <div class="grid grid-cols-1 mx-4 lg:grid-cols-2"> |
| 40 | 40 | <div class="flex flex-col justify-center md:ml-0 lg:ml-10 xl:ml-36"> |
| 41 | 41 | <h1 class="text-white font-kumbh-bold xl:text-h1 lg:text-h2 text-h3"> |
| 42 | Hoodratz. <br class="hidden xl:block lg:block" /> | |
| 43 | The first cross-chain collection. Ever. | |
| 42 | The first native NFT cross-chain collection. Ever. | |
| 44 | 43 | </h1> |
| 45 | 44 | <p |
| 46 | class="mt-5 font-semibold leading-8 md:text-body font-sora text-gray-2 text-body-2" | |
| 45 | class="mt-5 font-semibold leading-8 md:text-body font-sora text-gray-1 text-body-2" | |
| 47 | 46 | > |
| 48 | A limited edition of 10,000 rare hoodratz. | |
| 47 | A limited edition of 10,000 rare Hoodratz. | |
| 49 | 48 | </p> |
| 50 | 49 | <div |
| 51 | 50 | class="flex flex-col items-center w-full lg:flex-row lg:justify-start md:flex-row md:justify-center" |
| @@ -96,11 +96,52 @@ import AppFooter from "@/components/AppFooter.vue"; | ||
| 96 | 96 | |
| 97 | 97 | <div class="relative mx-auto md:w-2/3"> |
| 98 | 98 | <div class="relative mx-4 my-20 text-center md:text-left"> |
| 99 | <div | |
| 100 | v-for="(item, index) in roadmap" | |
| 101 | class="relative rounded-4xl bg-gray-7 font-sora" | |
| 102 | :class="{ 'p-6 md:p-8': index === 0, 'my-8 p-6': index }" | |
| 103 | > | |
| 99 | <div class="relative p-6 rounded-4xl bg-gray-7 font-sora md:p-8"> | |
| 100 | <div | |
| 101 | class="absolute inset-x-0 top-0 flex justify-center -mt-6 md:-top-0 md:hidden" | |
| 102 | > | |
| 103 | <div | |
| 104 | class="flex items-center justify-center w-12 h-12 text-xl text-white rounded-full " | |
| 105 | :class="{ | |
| 106 | 'bg-gray-6': !item.done, | |
| 107 | 'bg-pink-gradient': item.done, | |
| 108 | }" | |
| 109 | > | |
| 110 | <div v-if="item.done"> | |
| 111 | <img src="/images/check.svg" alt="" /> | |
| 112 | </div> | |
| 113 | <div v-else>{{ $date(item.date).format("D") }}</div> | |
| 114 | </div> | |
| 115 | </div> | |
| 116 | <div | |
| 117 | class="absolute inset-y-0 left-0 z-10 flex justify-center hidden md:block" | |
| 118 | > | |
| 119 | <div class="flex items-center h-full -ml-16"> | |
| 120 | <div | |
| 121 | v-if="item.done" | |
| 122 | class="flex items-center justify-center w-12 h-12 text-xl text-white rounded-full bg-pink-gradient" | |
| 123 | > | |
| 124 | <div><img src="/images/check.svg" alt="" /></div> | |
| 125 | </div> | |
| 126 | <div | |
| 127 | v-else | |
| 128 | class="flex items-center justify-center w-12 h-12 text-xl text-white border-2 rounded-full bg-pink-1 border-pink-3" | |
| 129 | ></div> | |
| 130 | </div> | |
| 131 | </div> | |
| 132 | ||
| 133 | <div> | |
| 134 | <div class="flex justify-center md:justify-between"> | |
| 135 | <div class="hidden md:block text-pink-3">Title</div> | |
| 136 | <div class="uppercase">description</div> | |
| 137 | </div> | |
| 138 | ||
| 139 | <div class="my-4 text-2xl font-bold text-white">Title</div> | |
| 140 | <p class="leading-8">description</p> | |
| 141 | </div> | |
| 142 | </div> | |
| 143 | ||
| 144 | <div class="relative p-6 my-8 rounded-4xl bg-gray-7 font-sora"> | |
| 104 | 145 | <div |
| 105 | 146 | class="absolute inset-x-0 top-0 flex justify-center -mt-6 md:-top-0 md:hidden" |
| 106 | 147 | > |