improve organization page

src/lib/components/3dCard/CardContainer.svelte

@@ -5,6 +5,7 @@
 	import { setContext } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import type { Card3dContext } from './Types'
+	import { animateIn } from '$lib/Helper.mjs'
 
 	export let containerClass: string | undefined = undefined
 
@@ -34,7 +35,10 @@
 	}
 </script>
 
-<div class="flex items-center justify-center [perspective:1000px]">
+<div
+	class="flex items-center justify-center [perspective:1000px]"
+	use:animateIn={{ slide: 24, fade: 0 }}
+>
 	<div
 		class={`${containerClass} group/card translate flex w-max  items-center  justify-center transition-all  [transform-style:preserve-3d]  `}
 		on:mouseenter={handleMouseEnter}

src/routes/organization/+page.svelte

@@ -13,13 +13,11 @@
 			<div slot="subtitle" class="max-w-[40ch]">The HyprWm Organization</div>
 		</Title>
 	</div>
-	<section
+	<section class="flex flex-col items-center">
-		class="flex flex-col items-center [animation-duration:2800ms] [&>*]:animate-in [&>*]:fade-in-0 [&>*]:slide-in-from-bottom-6 [&>*]:fill-mode-backwards"
-	>
 		<h2 class="mb-4 text-4xl font-bold [animation-delay:300ms]">Teams</h2>
 
 		<div
-			class="flex max-w-full flex-wrap items-center justify-center gap-8 px-8 [animation-delay:500ms] lg:grid lg:grid-cols-2 xl:grid-cols-3"
+			class="flex max-w-full flex-wrap items-center justify-center gap-8 px-8 lg:grid lg:grid-cols-2 xl:grid-cols-3 [&>*]:animate-in [&>*]:fade-in-0 [&>*]:slide-in-from-bottom-6 [&>*]:fill-mode-backwards [&>*]:[animation-duration:1400ms]"
 		>
 			<!-- RFC -->
 			<CardContainer containerClass="mt-20">
@@ -49,7 +47,12 @@
 			</CardContainer>
 
 			<!-- Uhay Web -->
-			<CardContainer let:hasMouseEntered containerClass="mt-20">
+			<CardContainer
+				let:hasMouseEntered
+				containerClass="mt-20"
+				style="animation-delay:640ms"
+				animateInDelay={150}
+			>
 				<CardBody
 					class="group/card relative  h-auto w-[21rem] rounded-3xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-cyan-500/[0.1] "
 				>
@@ -68,7 +71,7 @@
 					<CardItem class="h-6  w-full  text-base text-white" translateZ={90}>
 						<div class=" font-medium text-slate-400">
 							<p class="group-hover/web:visible">
-								{hasMouseEntered ? 'Most awesome obviously' : 'Web. JS. Design.'}
+								{hasMouseEntered ? 'Hello world' : 'Web. JS. Design.'}
 							</p>
 						</div>
 					</CardItem>
@@ -78,32 +81,6 @@
 					class="absolute inset-[-1px] -z-10 rounded-3xl bg-gradient-to-tl from-blue-500 to-cyan-500 opacity-50 transition-opacity duration-200 group-hover/card:opacity-100"
 				></div>
 			</CardContainer>
-
-			<CardContainer containerClass="mt-20">
-				<CardBody
-					class="group/card relative  h-auto w-[21rem] rounded-3xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-cyan-500/[0.1] "
-				>
-					<CardItem class="w-full text-xl font-bold  text-white" translateZ={30}>
-						<div class="mb-4 flex w-full items-center justify-center">
-							<img
-								src="https://media.discordapp.net/attachments/1233710054729842729/1235516223819878420/visualdawg_logo_black_background_globe_minimalistic_illustratio_addd6568-b95f-40ec-8de6-e90366f66bea.png?ex=6636a1e6&is=66355066&hm=83c0f90353c3a748589b25ac919c3e1acd56029efbdc9c86b2f5a5427d12d563&=&format=webp&quality=lossless&width=560&height=560"
-								class="-mt-20 size-64 rounded-xl shadow-2xl shadow-blue-500 outline outline-blue-500/20 group-hover/card:outline-cyan-500/50"
-								alt="RFC Team logo"
-							/>
-						</div>
-					</CardItem>
-					<CardItem class="mb-1 text-xl font-bold  text-white" translateZ={50}>
-						<h3 class="">Uhay</h3>
-					</CardItem>
-					<CardItem class="text-base  text-white" translateZ={90}>
-						<p class="font-medium text-slate-400">Web. JS. Design.</p>
-					</CardItem>
-				</CardBody>
-
-				<div
-					class="absolute inset-[-1px] -z-10 rounded-3xl bg-gradient-to-tl from-blue-500 to-cyan-500 opacity-50 transition-opacity duration-200 group-hover/card:opacity-100"
-				></div>
-			</CardContainer>
 		</div>
 	</section>
 </main>