add gradient and section box anim

website/components/Landing/LandingHero.vue

@@ -21,20 +21,20 @@ onMounted(() => {
 				.timeline()
 				.fromTo(item, { opacity: 0, y: -75 }, { ...ease, opacity: 1, y: 0 })
 				.delay(i * 0.15)
-      })
+		})
 
-			gsap
-				.timeline({
-					scrollTrigger: {
-						trigger: relContainer,
-						start: "top top",
-						end: "bottom center",
-						scrub: 0.75,
-					},
-				})
-				.to(artItems[0], { y: -75 })
-				.to(artItems[1], { y: -75 * 2 }, "<")
-				.to(artItems[2], { y: -75 * 3 }, "<")
+		gsap
+			.timeline({
+				scrollTrigger: {
+					trigger: relContainer,
+					start: "top top",
+					end: "bottom center",
+					scrub: 0.75,
+				},
+			})
+			.to(artItems[2], { y: -150 })
+			.to(artItems[1], { y: -125 * 2 }, "<")
+			.to(artItems[0], { y: -125 * 3 }, "<")
 	}, profileContainer.value)
 })
 
@@ -47,14 +47,14 @@ onUnmounted(() => ctx.value.revert())
 			<IconMono class="w-[12rem] h-[12rem] -translate-x-5 text-white" />
 			<h1 class="my-6 text-5xl font-bold font-inter">MyFursona</h1>
 			<p class="w-2/4 text-xl">
-				An open-source platform where you can manage and share your
-				amazing, adorable, and fluffy characters and show them off to your
-				friends and family!
+				An open-source platform where you can manage and share your amazing,
+				adorable, and fluffy characters and show them off to your friends and
+				family!
 			</p>
 		</article>
 		<div class="profile-container" ref="profileContainer">
 			<div id="wrapper" class="relative top-5">
-				<figure class="art-item" style="top: 9rem; right: 25vw">
+				<figure class="art-item" style="top: 5.5rem; right: 25vw">
 					<NuxtPicture
 						src="/images/hero/vulpo.jpg"
 						sizes="lg:375px"
@@ -67,7 +67,7 @@ onUnmounted(() => ctx.value.revert())
 				<figure
 					class="art-item"
 					id="sona-subcaption"
-					style="bottom: 6rem; right: 8vw"
+					style="bottom: 10rem; right: 8vw"
 				>
 					<NuxtPicture
 						src="/images/hero/ivo.png"
@@ -81,7 +81,7 @@ onUnmounted(() => ctx.value.revert())
 						Ivo | <strong>{{ author }}</strong>
 					</figcaption>
 				</figure>
-				<figure class="art-item" style="bottom: 15rem; right: 21vw">
+				<figure class="art-item" style="bottom: 18rem; right: 21vw">
 					<NuxtPicture
 						src="/images/hero/renzo.jpg"
 						sizes="lg:330px"
@@ -102,6 +102,14 @@ onUnmounted(() => ctx.value.revert())
 <style lang="scss">
 .gradient-hero {
 	@apply relative;
+	background: linear-gradient(
+		173.6deg,
+		rgba(33, 218, 255, 0.65) 0%,
+		rgba(154, 33, 255, 0.65) 10%,
+		rgba(255, 33, 222, 0.1) 50%,
+		rgba(225, 33, 255, 0) 80%
+	);
+	background-position: top top;
 }
 
 .profile-container {

website/components/Landing/LandingSecond.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import gsap from "gsap"
+
+const ctx = ref()
+const animationRoot = ref<HTMLElement>()
+
+onMounted(() => {
+	ctx.value = gsap.context((self) => {}, animationRoot.value)
+})
+
+onUnmounted(() => ctx.value.revert())
+</script>
+
+<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">
+				Keep 'em all in one place
+			</h1>
+			<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!
+			</p>
+		</article>
+    <div id="box-animation" ref="animationRoot">
+      <div class="sonas-box">
+        <IconMono class="w-[8rem] h-[8rem] text-white" />
+      </div>
+    </div>
+	</section>
+</template>
+
+<style lang="scss">
+.sonas-box {
+	@apply flex justify-center items-center mx-auto w-[12rem] h-[12rem] rounded-xl bg-orange-400;
+}
+</style>

website/components/TheBaseNavbar.vue

@@ -13,7 +13,7 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 <template>
 	<header :class="['navbar-sticky', isScrolled ? 'scrolled' : '']">
 		<nav class="flex items-center justify-between px-8 py-4">
-			<div class="flex items-center gap-x-6">
+			<div class="flex items-center">
 				<NuxtLink to="/" class="logo">
 					<div
 						role="img"
@@ -25,11 +25,17 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 					</div>
 				</NuxtLink>
 			</div>
-			<ul>
+			<ul class="flex items-center gap-x-8">
+        <li>
+          <NuxtLink to="/browse">Browse</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/about">About</NuxtLink>
+        </li>
 				<li class="font-inter">
 					<NuxtLink
           to="/login"
-						class="px-4 py-2.5 rounded-md hover:bg-purple-900 border-zinc-700 border"
+						class="px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-zinc-200 border font-bold"
 					>
 						Sign In
 					</NuxtLink>

website/pages/index.vue

@@ -1,8 +1,6 @@
 <template>
 	<Container title="MyFursona | A place where everyone belongs.">
 		<LandingHero />
-    <section class="h-[50vh]">
-      Section filler
-    </section>
+    <LandingSecond />
 	</Container>
 </template>