add cool hover card thing

website/components/Landing/LandingSecond.vue

@@ -14,9 +14,9 @@ onUnmounted(() => ctx.value.revert())
 <template>
 	<section class="h-[90vh] grid place-items-center">
 		<article class="px-8 relative z-[2] text-center flex flex-col items-center">
-			<h1 class="my-6 text-5xl font-bold font-inter">
+			<h2 class="my-6 text-5xl font-bold font-inter">
 				Keep 'em all in one place
-			</h1>
+			</h2>
 			<p class="w-2/4 text-xl 2xl:w-2/3">
 				If you have multiple characters, you can have them all in one account
 				and you're free to change them as you wish!

website/components/Landing/LandingThird.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+const gridItems = [
+	{
+		heading: "Manage your ref sheets",
+		description:
+			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in sapien dictum, maximus mi et, convallis dui. In vitae cursus elit.",
+	},
+	{
+		heading: "Organize your commissions and photos",
+		description:
+			"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+	},
+	{
+		heading: "Maybe open commissions and stuff",
+		description:
+			"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+	},
+]
+
+const cardContainer = ref<HTMLDivElement>()
+const cards = ref<HTMLDivElement[]>()
+
+onMounted(() => {
+	const container = cardContainer.value!
+
+	container.onmouseenter = () => {
+		container.classList.add("active")
+	}
+
+	container.onmouseleave = () => {
+		container.classList.remove("active")
+	}
+
+	container.onmousemove = ({ clientX, clientY }: MouseEvent) => {
+		for (const item of cards.value!) {
+			const rekt = item.getBoundingClientRect()
+			const posX = clientX - rekt.left
+			const posY = clientY - rekt.top
+
+			item.style.setProperty("--pos-x", `${posX}px`)
+			item.style.setProperty("--pos-y", `${posY}px`)
+		}
+	}
+})
+</script>
+
+<template>
+	<section class="px-12 h-[80vh]">
+		<h1 class="my-6 mt-[6.5rem] text-5xl font-bold text-center font-inter">
+			You're in control
+		</h1>
+		<div ref="cardContainer" class="card-container">
+			<div
+				ref="cards"
+				class="card-item"
+				v-for="(item, index) in gridItems"
+				:key="index"
+			>
+				<div id="card-contents">
+					<div class="border h-[14rem] rounded-md border-dashed"></div>
+					<article>
+						<h2 class="my-3 text-2xl font-bold font-inter">
+							{{ item.heading }}
+						</h2>
+						<p>{{ item.description }}</p>
+					</article>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<style lang="scss" scoped>
+.card {
+	&-container {
+		@apply py-16 grid grid-cols-3 gap-6 mx-auto max-w-[1440px];
+
+		&.active > .card-item::before {
+			opacity: 1;
+		}
+
+		> .card-item::before {
+			opacity: 0;
+		}
+	}
+
+	&-item {
+		@apply rounded-md relative;
+		background: rgb(50, 2, 86);
+    height: 30rem;
+
+		&::before {
+			content: "";
+			@apply w-full h-full absolute inset-0 z-[0];
+			border-radius: inherit;
+			transition: opacity 300ms ease;
+			background: radial-gradient(
+				450px circle at var(--pos-x) var(--pos-y),
+				rgb(211, 100, 254),
+				#0000 100%
+			);
+		}
+	}
+}
+
+#card-contents {
+	@apply bg-zinc-900 p-5 absolute inset-0.5 bottom-10 z-[1] m-[0.01rem];
+	height: 99.125%;
+	border-radius: inherit;
+}
+</style>

website/pages/index.vue

@@ -2,5 +2,6 @@
 	<Container title="MyFursona | A place where everyone belongs.">
 		<LandingHero />
     <LandingSecond />
+    <LandingThird />
 	</Container>
 </template>