add more sona images, inject msft clarity

website/components/Landing/LandingHero.vue

@@ -9,30 +9,33 @@ const profileContainer = ref<HTMLDivElement>()
 onMounted(() => {
 	ctx.value = gsap.context((self) => {
 		const artItems = self.selector!(".art-item")
-		const relContainer = self.selector!(".profile-container #wrapper")
+		const scrollWrapper = self.selector!(".profile-container #wrapper")
 
 		const ease: gsap.TweenVars = {
 			ease: "elastic.out(1, 0.75)",
 			duration: 0.75,
 		}
 
+		// Trigger onload
 		artItems.forEach((item: HTMLElement | any, i: number) => {
 			gsap
 				.timeline()
 				.fromTo(item, { opacity: 0, y: -75 }, { ...ease, opacity: 1, y: 0 })
 				.delay(i * 0.15)
 		})
 
+		// Trigger on-scroll
 		gsap
 			.timeline({
 				scrollTrigger: {
-					trigger: relContainer,
+					trigger: scrollWrapper,
 					start: "top top",
 					end: "bottom center",
-					scrub: 0.75,
+					scrub: 1,
+          markers: true
 				},
 			})
-			.to(artItems[2], { y: -150 })
+			.to(artItems[2], { y: -145 })
 			.to(artItems[1], { y: -125 * 2 }, "<")
 			.to(artItems[0], { y: -125 * 3 }, "<")
 	}, profileContainer.value)
@@ -47,29 +50,44 @@ 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,
+				An 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 class="profile-container" ref="profileContainer" aria-hidden="true">
 			<div id="wrapper" class="relative top-5">
 				<figure class="art-item" style="top: 5.5rem; right: 25vw">
-					<NuxtImg src="/images/hero/vulpo.jpg" sizes="lg:375px" quality="75" />
+					<NuxtImg
+						src="/images/hero/renzo.jpg"
+						sizes="lg:400px"
+						quality="75"
+						preload
+					/>
 					<figcaption class="label -bottom-7">
-						Vulpo | <strong>{{ author }}</strong>
+						Renzo | <strong>{{ author }}</strong>
 					</figcaption>
 				</figure>
-				<figure class="art-item" style="bottom: 10rem; right: 8vw">
-					<NuxtImg src="/images/hero/ivo.png" sizes="lg:375px" quality="75" />
+				<figure class="art-item" style="bottom: 5rem; right: 8vw">
+					<NuxtImg
+						src="/images/hero/ivo.png"
+						sizes="lg:400px"
+						quality="75"
+						preload
+					/>
 					<figcaption class="right-0 text-right label -bottom-7">
 						Ivo | <strong>{{ author }}</strong>
 					</figcaption>
 				</figure>
-				<figure class="art-item" style="bottom: 18rem; right: 21vw">
-					<NuxtImg src="/images/hero/renzo.jpg" sizes="lg:375px" quality="75" />
+				<figure class="art-item" style="bottom: 15rem; right: 22vw">
+					<NuxtImg
+						src="/images/hero/vulpo.jpg"
+						sizes="lg:400px"
+						quality="75"
+						preload
+					/>
 					<figcaption class="text-left -right-[9.25rem] bottom-1 label">
-						Renzo | <strong>{{ author }}</strong>
+						Vulpo | <strong>{{ author }}</strong>
 					</figcaption>
 				</figure>
 			</div>
@@ -96,7 +114,7 @@ onUnmounted(() => ctx.value.revert())
 
 .art-item {
 	@apply relative;
-	width: 350px !important;
+	width: 400px !important;
 
 	img {
 		@apply rounded-2xl;

website/nuxt.config.ts

@@ -21,9 +21,17 @@ export default defineNuxtConfig({
 					rel: "manifest",
 					href: "./manifest.json",
 				},
+			],
+			script: [
 				{
-					rel: "stylesheet",
-					href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",
+					type: "text/javascript",
+					children: `
+          (function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "frdjdgrmiy");
+          `,
 				},
 			],
 		},