ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Staging Update - Particles

#14
Merged glennmichael123 wants to merge develop into staging
9 files +356 -74
public/images/home/hoodratz-ellipse-103.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/home/hoodratz-ellipse-1425.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/home/hoodratz-ellipse-88.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/home/hoodratz-ellipse-97.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/home/hoodratz-inverted-cone.pngadded+0-0

Binary file. Nothing to show line by line.

public/images/home/hoodratz-plain-cone.pngadded+0-0

Binary file. Nothing to show line by line.

src/views/About.vuemodified+57-6
@@ -15,10 +15,20 @@ import AppFooter from "@/components/AppFooter.vue";
1515 </div>
1616
1717 <!-- Content -->
18 <div class="mx-4 md:container md:mx-auto">
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>
18 <div class="relative mx-4 md:container md:mx-auto">
19 <img
20 class="absolute hidden xl:left-1/2 xl:top-0 lg:block lg:top-0 lg:left-1/2"
21 src="/images/home/hoodratz-ellipse-97.png"
22 alt=""
23 />
24 <div class="md:grid md:grid-cols-2 md:mx-4 md:mt-24">
25 <div class="relative flex mb-8 md:mb-0 md:items-center">
26 <img
27 class="absolute hidden xl:top-96 xl:-left-44 lg:top-3/4 lg:-left-56 lg:block"
28 src="/images/home/hoodratz-ellipse-1424.svg"
29 alt=""
30 />
31 <div class="relative">
2232 <div class="relative">
2333 <div class="w-64 -ml-4">
2434 <img src="/images/about-txt.svg" alt="About" />
@@ -51,6 +61,12 @@ import AppFooter from "@/components/AppFooter.vue";
5161 unique Hoodratz - but with only 10,000 being minted, some are more
5262 unique and rare than others.
5363 </p>
64
65 <img
66 class="absolute hidden xl:left-3/4 xl:top-full lg:block lg:top-3/4 lg:left-full"
67 src="/images/home/hoodratz-ellipse-103.png"
68 alt=""
69 />
5470 </div>
5571 </div>
5672
@@ -64,9 +80,14 @@ import AppFooter from "@/components/AppFooter.vue";
6480 </div>
6581 </div>
6682
67 <div class="lg:grid lg:grid-cols-2 md:mx-32">
83 <div class="relative lg:grid lg:grid-cols-2 md:mx-32">
6884 <div>
6985 <div class="relative">
86 <img
87 class="absolute hidden xl:left-36 xl:-top-14 lg:block lg:-top-14 lg:left-36"
88 src="/images/home/hoodratz-ellipse-88.png"
89 alt=""
90 />
7091 <div class="absolute inset-x-0 top-0 -ml-4">
7192 <img src="/images/the-team.svg" alt="The Team" />
7293 </div>
@@ -84,10 +105,20 @@ import AppFooter from "@/components/AppFooter.vue";
84105 utility.
85106 </p>
86107 </div>
108 <img
109 class="absolute top-0 right-0 md:hidden lg:block"
110 src="/images/home/hoodratz-plain-cone.png"
111 alt=""
112 />
113 <img
114 class="absolute hidden xl:left-1/2 xl:-top-14 lg:block lg:top-24 lg:left-1/2"
115 src="/images/home/hoodratz-ellipse-97.png"
116 alt=""
117 />
87118 </div>
88119
89120 <div
90 class="mt-12 mb-20 md:grid md:grid-cols-3 xl:grid-cols-4 md:gap-6 md:mx-4"
121 class="relative mt-12 mb-20 md:grid md:grid-cols-3 xl:grid-cols-4 md:gap-6 md:mx-4"
91122 >
92123 <div
93124 class="flex px-8 py-6 my-6 md:flex-col bg-gray-7 rounded-4xl"
@@ -107,6 +138,26 @@ import AppFooter from "@/components/AppFooter.vue";
107138 </div>
108139 </div>
109140 </div>
141 <img
142 class="absolute hidden xl:left-0 xl:-top-14 lg:block lg:-top-16 lg:left-0"
143 src="/images/home/hoodratz-ellipse-97.png"
144 alt=""
145 />
146 <img
147 class="absolute hidden xl:left-3/4 xl:-top-14 lg:block lg:-top-16 lg:left-3/4"
148 src="/images/home/hoodratz-ellipse-88.png"
149 alt=""
150 />
151 <img
152 class="absolute hidden xl:left-1/2 xl:top-52 lg:block lg:top-52 lg:left-3/4"
153 src="/images/home/hoodratz-ellipse-97.png"
154 alt=""
155 />
156 <img
157 class="absolute hidden xl:left-full xl:top-72 lg:block lg:top-96 lg:left-1/2"
158 src="/images/home/hoodratz-ellipse-88.png"
159 alt=""
160 />
110161 </div>
111162 </div>
112163
src/views/Home.vuemodified+138-8
@@ -16,6 +16,26 @@ import AppFooter from "@/components/AppFooter.vue";
1616 src="/images/home/hoodratz-ellipse-1424.svg"
1717 alt=""
1818 />
19 <img
20 class="absolute hidden xl:right-0 xl:top-1/2 lg:block lg:top-1/2 lg:right-0"
21 src="/images/home/hoodratz-ellipse-103.png"
22 alt=""
23 />
24 <img
25 class="absolute hidden xl:left-0 xl:top-3/4 lg:block lg:top-32 lg:left-36"
26 src="/images/home/hoodratz-ellipse-103.png"
27 alt=""
28 />
29 <img
30 class="absolute hidden xl:left-1/2 xl:top-3/4 lg:block lg:top-2/3 lg:left-1/2"
31 src="/images/home/hoodratz-ellipse-1425.png"
32 alt=""
33 />
34 <img
35 class="absolute hidden xl:left-1/2 xl:top-3/4 lg:block lg:top-2/3 lg:left-1/2"
36 src="/images/home/hoodratz-ellipse-97.png"
37 alt=""
38 />
1939 <div class="grid grid-cols-1 mx-4 lg:grid-cols-2">
2040 <div class="flex flex-col justify-center md:ml-0 lg:ml-10 xl:ml-36">
2141 <h1 class="text-white font-kumbh-bold xl:text-h1 lg:text-h2 text-h3">
@@ -82,6 +102,21 @@ import AppFooter from "@/components/AppFooter.vue";
82102 </section>
83103
84104 <section id="about-us-desktop" class="relative hidden h-full lg:block">
105 <img
106 class="absolute hidden xl:left-36 xl:top-20 lg:block lg:top-24 lg:left-36"
107 src="/images/home/hoodratz-ellipse-88.png"
108 alt=""
109 />
110 <img
111 class="absolute hidden xl:left-1/2 xl:top-20 lg:block lg:top-24 lg:left-1/2"
112 src="/images/home/hoodratz-ellipse-97.png"
113 alt=""
114 />
115 <img
116 class="absolute hidden xl:left-36 xl:top-2/3 lg:block lg:top-96 lg:left-36"
117 src="/images/home/hoodratz-ellipse-97.png"
118 alt=""
119 />
85120 <div>
86121 <img src="/images/home/hoodratz-about-us-lg.png" alt="" />
87122 </div>
@@ -104,6 +139,11 @@ import AppFooter from "@/components/AppFooter.vue";
104139 src="/images/home/hoodratz-josephine.png"
105140 alt=""
106141 />
142 <img
143 class="absolute block left-24 w-80 top-full xl:hidden lg:block"
144 src="/images/home/hoodratz-cone.svg"
145 alt=""
146 />
107147 <div class="relative flex w-full">
108148 <img
109149 class="absolute lg:right-0 xl:right-96 -top-36 w-60"
@@ -135,7 +175,7 @@ import AppFooter from "@/components/AppFooter.vue";
135175 </p>
136176 </div>
137177 <div
138 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"
178 class="absolute flex flex-col p-6 mt-10 xl:-bottom-24 lg:-bottom-64 w-72 left-1 bg-hoodratz-grey-7 rounded-4xl font-sora"
139179 >
140180 <div class="flex items-center">
141181 <div
@@ -160,7 +200,6 @@ import AppFooter from "@/components/AppFooter.vue";
160200 <!-- TODO ONCE MINTING: Grab yours while you still can! -->
161201 </p>
162202 </div>
163 <!-- absolute xl:right-0 xl:top-48 lg:top-48 lg:-left-16 lg:right-5 -->
164203 <div
165204 class="absolute xl:right-0 xl:left-72 xl:top-48 lg:top-48 lg:-left-16 lg:right-5"
166205 >
@@ -170,6 +209,11 @@ import AppFooter from "@/components/AppFooter.vue";
170209 </div>
171210 </div>
172211 </div>
212 <img
213 class="absolute hidden xl:left-36 xl:top-full lg:block lg:top-full lg:left-3/4"
214 src="/images/home/hoodratz-ellipse-88.png"
215 alt=""
216 />
173217 </section>
174218
175219 <section id="about-us-mobile" class="relative block h-full lg:hidden">
@@ -239,7 +283,30 @@ import AppFooter from "@/components/AppFooter.vue";
239283 </div>
240284 </section>
241285
242 <section id="proposition-desktop" class="hidden h-full lg:block lg:mt-64">
286 <section
287 id="proposition-desktop"
288 class="relative hidden h-full lg:block lg:mt-64"
289 >
290 <img
291 class="absolute hidden xl:left-36 xl:top-20 lg:block lg:top-24 lg:left-36"
292 src="/images/home/hoodratz-ellipse-88.png"
293 alt=""
294 />
295 <img
296 class="absolute hidden xl:left-3/4 xl:-top-40 lg:block lg:top-5 lg:left-3/4"
297 src="/images/home/hoodratz-ellipse-103.png"
298 alt=""
299 />
300 <img
301 class="absolute hidden xl:left-1/2 xl:top-20 lg:block lg:top-64 lg:left-1/2"
302 src="/images/home/hoodratz-ellipse-97.png"
303 alt=""
304 />
305 <img
306 class="absolute hidden xl:left-36 xl:top-2/3 lg:block lg:-bottom-3/4 lg:left-36"
307 src="/images/home/hoodratz-ellipse-97.png"
308 alt=""
309 />
243310 <div>
244311 <img src="/images/home/hoodratz-proposition-lg.png" alt="" />
245312 </div>
@@ -454,6 +521,7 @@ import AppFooter from "@/components/AppFooter.vue";
454521 </div>
455522 <div>
456523 <img
524 class="xl:mt-0 lg:mt-52"
457525 src="/images/home/hoodratz-proposition-illustration.png"
458526 alt=""
459527 />
@@ -630,11 +698,39 @@ import AppFooter from "@/components/AppFooter.vue";
630698 <section
631699 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"
632700 >
701 <img
702 class="absolute hidden xl:left-36 xl:top-20 lg:block lg:top-24 lg:left-36"
703 src="/images/home/hoodratz-ellipse-88.png"
704 alt=""
705 />
706 <img
707 class="absolute hidden xl:left-0 xl:top-40 lg:block lg:top-5 lg:left-3/4"
708 src="/images/home/hoodratz-ellipse-103.png"
709 alt=""
710 />
711 <img
712 class="absolute hidden xl:left-1/2 xl:top-20 lg:block lg:top-64 lg:left-1/2"
713 src="/images/home/hoodratz-ellipse-97.png"
714 alt=""
715 />
716 <img
717 class="absolute hidden xl:left-36 xl:top-3/4 lg:block lg:top-full lg:left-36"
718 src="/images/home/hoodratz-ellipse-97.png"
719 alt=""
720 />
721 <img
722 class="absolute hidden xl:right-0 xl:top-10 lg:block lg:top-5 lg:left-3/4"
723 src="/images/home/hoodratz-ellipse-103.png"
724 alt=""
725 />
633726 <div class="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
727 <img
728 class="absolute hidden xl:left-20 xl:top-3/4 lg:block lg:top-3/4 lg:left-20"
729 src="/images/home/hoodratz-ellipse-103.png"
730 alt=""
731 />
634732 <div class="relative">
635 <div
636 class="relative z-10 max-w-screen-lg mx-auto text-center xl:max-w-screen-xl"
637 >
733 <div class="relative z-10 max-w-screen-lg mx-auto text-center">
638734 <h2
639735 class="mb-8 text-3xl font-extrabold leading-none tracking-tight text-gray-1 sm:text-5xl lg:text-6xl font-kumbh-bold"
640736 >
@@ -682,7 +778,42 @@ import AppFooter from "@/components/AppFooter.vue";
682778 </div>
683779 </section>
684780
685 <section id="future-desktop" class="hidden h-full py-36 lg:block">
781 <section id="future-desktop" class="relative hidden h-full py-36 lg:block">
782 <img
783 class="absolute hidden xl:left-36 xl:top-20 lg:block lg:top-24 lg:left-36"
784 src="/images/home/hoodratz-ellipse-88.png"
785 alt=""
786 />
787 <img
788 class="absolute hidden xl:left-0 xl:top-40 lg:block lg:top-5 lg:left-3/4"
789 src="/images/home/hoodratz-ellipse-103.png"
790 alt=""
791 />
792 <img
793 class="absolute hidden xl:left-1/2 xl:top-20 lg:block lg:top-64 lg:left-3/4"
794 src="/images/home/hoodratz-ellipse-97.png"
795 alt=""
796 />
797 <img
798 class="absolute hidden xl:left-96 xl:top-3/4 lg:block lg:top-3/4 lg:left-36"
799 src="/images/home/hoodratz-ellipse-97.png"
800 alt=""
801 />
802 <img
803 class="absolute hidden xl:left-3/4 xl:top-3/4 lg:block lg:top-3/4 lg:left-3/4"
804 src="/images/home/hoodratz-ellipse-88.png"
805 alt=""
806 />
807 <img
808 class="absolute hidden xl:left-3/4 xl:top-3/4 lg:block lg:top-3/4 lg:left-3/4"
809 src="/images/home/hoodratz-ellipse-97.png"
810 alt=""
811 />
812 <img
813 class="absolute hidden xl:right-0 xl:top-10 lg:block lg:top-5 lg:left-3/4"
814 src="/images/home/hoodratz-ellipse-103.png"
815 alt=""
816 />
686817 <div class="relative">
687818 <img src="/images/home/hoodratz-future-lg.png" alt="" />
688819 <div class="absolute inset-0 flex flex-col items-center left-7 top-12">
@@ -733,7 +864,6 @@ import AppFooter from "@/components/AppFooter.vue";
733864 All hoodratz are stored on the Solana blockchain and their URL is
734865 secured by Meema. NFT world has never seen this before!
735866 </p>
736 <img src="/images/home/hoodratz-circle.svg" alt="" />
737867 </div>
738868 <div class="flex items-center justify-center">
739869 <img class="mr-5" src="/images/home/hoodratz-solana.svg" alt="" />
src/views/Roadmap.vuemodified+161-60
@@ -1,82 +1,183 @@
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
10 <div class="container mx-auto md:mt-32">
11 <div class="md:w-2/3 mx-auto">
12 <div class="relative w-full my-4">
13 <div class="w-full"><img src="/images/roadmap.png" alt="About"></div>
14 <div class="absolute inset-0 flex items-center justify-center">
15 <h1 class="text-pink-3 uppercase font-sora mt-8 tracking-widest -mt-2">Roadmap</h1>
16 </div>
17 </div>
10 <div class="container relative mx-auto md:mt-32">
11 <div class="mx-auto md:w-2/3">
12 <img
13 class="absolute hidden xl:left-3/4 xl:-top-10 lg:block lg:-top-16 lg:right-0"
14 src="/images/home/hoodratz-ellipse-97.png"
15 alt=""
16 />
17 <div class="relative w-full my-4">
18 <div class="w-full">
19 <img src="/images/roadmap.png" alt="About" />
20 </div>
21 <div class="absolute inset-0 flex items-center justify-center">
22 <h1
23 class="mt-8 -mt-2 tracking-widest uppercase text-pink-3 font-sora"
24 >
25 Roadmap
26 </h1>
27 </div>
28 </div>
1829
19 <div class="text-center mx-4">
20 <div class="mb-20">
21 <h2 class="text-white font-kumbh-bold text-3xl md:text-5xl mb-4 -mt-6">Find out what's the plan!</h2>
22 <p class="font-sora leading-7">
23 There’s a long road ahead, but we like keeping deadlines.
24 </p>
25 </div>
26 </div>
30 <div class="mx-4 text-center">
31 <div class="mb-20">
32 <h2
33 class="mb-4 -mt-6 text-3xl text-white font-kumbh-bold md:text-5xl"
34 >
35 Find out what's the plan!
36 </h2>
37 <p class="leading-7 font-sora">
38 There’s a long road ahead, but we like keeping deadlines.
39 </p>
40 </div>
2741 </div>
42 </div>
2843 </div>
2944
30 <div class="container mx-auto md:mb-32">
31 <div class="md:w-2/3 mx-auto">
32 <div class="text-center md:text-left mx-4 my-20 relative">
33 <div v-for="(item, index) in roadmap"
34 class="rounded-4xl bg-gray-7 font-sora relative"
35 :class="{ 'p-6 md:p-8': index === 0, 'my-8 p-6': index }">
36 <div class="absolute inset-x-0 top-0 md:-top-0 flex justify-center -mt-6 md:hidden">
37 <div class="w-12 h-12 rounded-full flex items-center justify-center text-xl text-white"
38 :class="{ 'bg-gray-6': !item.done, 'bg-pink-gradient': item.done }">
39 <div v-if="item.done"><img src="/images/check.svg" alt=""></div>
40 <div v-else>{{ $date(item.date).format('D') }}</div>
41 </div>
42 </div>
43 <div class="absolute inset-y-0 left-0 flex justify-center hidden md:block z-10">
44 <div class="-ml-16 h-full flex items-center">
45 <div v-if="item.done" class="bg-pink-gradient w-12 h-12 rounded-full flex items-center justify-center text-xl text-white">
46 <div><img src="/images/check.svg" alt=""></div>
47 </div>
48 <div v-else class="bg-pink-1 border-2 border-pink-3 w-12 h-12 rounded-full flex items-center justify-center text-xl text-white"></div>
49 </div>
50 </div>
51 <div class="mt-6">
52 <div class="flex justify-center md:justify-between">
53 <div class="hidden md:block text-pink-3">{{ $date(item.date).format('DD') }}</div>
54 <div class="uppercase">{{ $date(item.date).format('MMMM YYYY') }}</div>
55 </div>
56 <div class="text-white text-2xl font-bold my-4">{{ item.title }}</div>
57 <p class="leading-8">
58 {{ item.description }}
59 </p>
60 </div>
45 <div class="container relative mx-auto md:mb-32">
46 <img
47 class="absolute hidden xl:top-0 xl:-left-12 lg:top-0 lg:-left-5 lg:block"
48 src="/images/home/hoodratz-ellipse-1424.svg"
49 alt=""
50 />
51 <img
52 class="absolute hidden xl:top-0 left-90 lg:top-0 lg:-left-5 lg:block"
53 src="/images/home/hoodratz-inverted-cone.png"
54 alt=""
55 />
56 <img
57 class="absolute hidden left-85 xl:top-72 lg:block lg:top-72 lg:left-0"
58 src="/images/home/hoodratz-ellipse-88.png"
59 alt=""
60 />
61 <img
62 class="absolute hidden left-90 xl:top-3/4 lg:block lg:top-3/4 lg:left-0"
63 src="/images/home/hoodratz-ellipse-88.png"
64 alt=""
65 />
66 <img
67 class="absolute hidden xl:left-10 xl:top-1/4 lg:block lg:top-1/2 lg:left-0"
68 src="/images/home/hoodratz-ellipse-97.png"
69 alt=""
70 />
71 <img
72 class="absolute hidden xl:left-2 xl:top-1/2 lg:block lg:top-3/4 lg:left-0"
73 src="/images/home/hoodratz-ellipse-88.png"
74 alt=""
75 />
76 <img
77 class="absolute hidden xl:top-1/2 left-85 lg:top-1/3 lg:block"
78 src="/images/home/hoodratz-ellipse-1424.svg"
79 alt=""
80 />
81 <img
82 class="absolute hidden xl:top-3/4 xl:left-2 lg:top-3/4 lg:-left-10 lg:block"
83 src="/images/home/hoodratz-ellipse-1424.svg"
84 alt=""
85 />
86 <img
87 class="absolute hidden left-90 xl:top-full lg:block lg:top-full"
88 src="/images/home/hoodratz-ellipse-97.png"
89 alt=""
90 />
91 <img
92 class="absolute hidden xl:-left-24 xl:top-full lg:block lg:top-full"
93 src="/images/home/hoodratz-ellipse-88.png"
94 alt=""
95 />
96 <div class="relative mx-auto md:w-2/3">
97 <div class="relative mx-4 my-20 text-center md:text-left">
98 <div
99 v-for="(item, index) in roadmap"
100 class="relative rounded-4xl bg-gray-7 font-sora"
101 :class="{ 'p-6 md:p-8': index === 0, 'my-8 p-6': index }"
102 >
103 <div
104 class="absolute inset-x-0 top-0 flex justify-center -mt-6 md:-top-0 md:hidden"
105 >
106 <div
107 class="flex items-center justify-center w-12 h-12 text-xl text-white rounded-full "
108 :class="{
109 'bg-gray-6': !item.done,
110 'bg-pink-gradient': item.done,
111 }"
112 >
113 <div v-if="item.done">
114 <img src="/images/check.svg" alt="" />
61115 </div>
62
63 <div class="h-full border-l border-gray-4 -ml-10 border-dashed absolute top-0 hidden md:block"></div>
116 <div v-else>{{ $date(item.date).format("D") }}</div>
117 </div>
118 </div>
119 <div
120 class="absolute inset-y-0 left-0 z-10 flex justify-center hidden md:block"
121 >
122 <div class="flex items-center h-full -ml-16">
123 <div
124 v-if="item.done"
125 class="flex items-center justify-center w-12 h-12 text-xl text-white rounded-full bg-pink-gradient"
126 >
127 <div><img src="/images/check.svg" alt="" /></div>
128 </div>
129 <div
130 v-else
131 class="flex items-center justify-center w-12 h-12 text-xl text-white border-2 rounded-full bg-pink-1 border-pink-3"
132 ></div>
133 </div>
64134 </div>
135 <div class="mt-6">
136 <div class="flex justify-center md:justify-between">
137 <div class="hidden md:block text-pink-3">
138 {{ $date(item.date).format("DD") }}
139 </div>
140 <div class="uppercase">
141 {{ $date(item.date).format("MMMM YYYY") }}
142 </div>
143 </div>
144 <div class="my-4 text-2xl font-bold text-white">
145 {{ item.title }}
146 </div>
147 <p class="leading-8">
148 {{ item.description }}
149 </p>
150 </div>
151 </div>
152
153 <div
154 class="absolute top-0 hidden h-full -ml-10 border-l border-dashed border-gray-4 md:block"
155 ></div>
65156 </div>
157 </div>
66158 </div>
67159
68160 <AppFooter />
69</div>
161 </div>
70162</template>
71163
72164<script>
73import { roadmap } from '@/content/app.json'
165import { roadmap } from "@/content/app.json";
74166
75167export default {
76 data () {
77 return {
78 roadmap,
79 }
80 }
81}
168 data() {
169 return {
170 roadmap,
171 };
172 },
173};
82174</script>
175
176<style scoped>
177.left-90 {
178 left: 90% !important;
179}
180.left-85 {
181 left: 85% !important;
182}
183</style>