make sponsor look better

Greasy-Projects · May 9, 2024 · 7ad7758 · 7ad7758
1 parent b8c88a7
commit 7ad7758
Showing 1 changed file with 29 additions and 30 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -40,18 +40,15 @@ import type { z } from "zod";
 import Sponsor from "~/schemas/sponsor";
 const sponsor = ref<z.infer<typeof Sponsor>>();
 try {
-	sponsor.value = JSON.parse(
-		(
+	sponsor.value = JSON.parse((
 			await GqlGetContent({
 				path: "/website/sponsor",
-			})
-		).content
+			})).content
 	);
 } catch {
 	//
 }
 
-// sponsor.value = { ...sponsor.value, enabled: false };
 </script>
 <template>
 	<main
@@ -67,16 +64,17 @@ try {
 					v-if="sponsor && sponsor.enabled"
 					class="flex flex-col gap-0 row-span-2"
 				>
-					<div class="flex h-4/6 relative row-span-4">
+					<div class="flex h-full relative row-span-4">
 						<NuxtImg
 							width="600"
 							height="200"
 							densities="x1 x2"
 							:src="$ContentImage(sponsor.image)"
-							class="rounded-t-2xl rounded-tl-10vw sm:rounded-tl-10vw w-full h-full object-left object-cover"
+							class="rounded-t-2xl w-full h-full object-left object-cover"
 							:style="'object-position:' + sponsor.imageCoverMode"
 						>
 						</NuxtImg>
+						<div class="absolute inset-0 bg-gradient-to-t from-black from-5% to-transparent"></div>
 						<div
 							v-if="sponsor.code"
 							class="absolute bg-secondary text-nowrap overflow-hidden lt-sm:text-xs max-w-9/10 h-8 flex color-gray-100 items-center px-2 top-0 right-0 rounded-tr-xl rounded-bl-xl"
@@ -87,33 +85,34 @@ try {
 							>&nbsp;to get<span class="lt-sm:hidden">&nbsp;in-game</span
 							>&nbsp;rewards!
 						</div>
-						<div class="absolute bottom-2 right-2">
-							<NuxtLink
-								:href="sponsor.url"
-								target="_blank"
-								class="w-full lg:w-80 select-none"
+						<div class="absolute flex bottom-0 px-4 py-6 gap-2">
+							<div
+						class="rounded-b-xl row-span-2 h-2/6 flex justify-center items-center"
+					>
+							<p
+								class="flex drop-shadow-lg rounded-xl items-center text-sm sm:text-base lg:leading-normal leading-4 sm:leading-2.5vw mx-auto"
 							>
-								<div
-									class="rounded-xl px-4 flex bg-secondary hover:bg-button transition-colors h-15 justify-center items-center"
-								>
-									<p
-										class="font-600 sm:text-sm lg:text-1.4vw xl:text-lg tracking-widest uppercase"
+						{{ sponsor.description }}
+
+					</p>
+							</div>
+							<NuxtLink
+										:href="sponsor.url"
+										target="_blank"
+										class="w-70 select-none my-auto"
 									>
-										PLAY GAME
-									</p>
-								</div>
-							</NuxtLink>
+										<div
+											class="rounded-xl px-4 flex bg-secondary hover:bg-button transition-colors h-12 justify-center items-center"
+										>
+											<p
+												class="font-600 sm:text-sm lg:text-1.4vw xl:text-lg tracking-widest uppercase"
+											>
+												PLAY GAME
+											</p>
+										</div>
+									</NuxtLink>
 						</div>
 					</div>
-					<div
-						class="bg-secondary rounded-b-xl row-span-2 px-4 h-2/6 px-4 py-2 gap-1 flex justify-center items-center"
-					>
-						<p
-							class="flex items-center text-sm sm:text-base lg:leading-normal leading-4 sm:leading-2.5vw"
-						>
-							{{ sponsor.description }}
-						</p>
-					</div>
 				</div>
 				<div
 					:class="{