add in fade in animation

src/components/elements/Card.astro

@@ -1,9 +1,10 @@
 ---
 interface Props {
 	primaryColor: string;
-	bgColor?: string | undefined;
-	scaleOnHover?: boolean | undefined;
-	pixelHeight?: string | undefined;
+	bgColor?: string;
+	scaleOnHover?: boolean;
+	pixelHeight?: string;
+	className?: string;
 }
 
 const {
@@ -11,10 +12,11 @@ const {
 	bgColor = "#282828",
 	scaleOnHover = false,
 	pixelHeight = "70px",
+	className = "",
 } = Astro.props;
 ---
 
-<div class="card z-10" class:list={[{ scale: scaleOnHover }]}>
+<div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
 	<slot />
 </div>
 

src/pages/index.astro

@@ -19,7 +19,11 @@ import Footer from "../components/sections/FooterComponent.astro";
 	<NavBar />
 	<div id="home" class="pt-20 flex justify-center items-center">
 		<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
-			<Card bgColor="#252525" primaryColor="#BEADFA">
+			<Card
+				bgColor="#252525"
+				primaryColor="#BEADFA"
+				className="animate-fadeIn"
+			>
 				<Intro client:load />
 			</Card>
 		</div>

tailwind.config.cjs

@@ -15,9 +15,14 @@ module.exports = {
                         "background-position": "0% 50%",
                     },
                 },
+                fadeIn: {
+                    "0%": { opacity: 0 },
+                    "100%": { opacity: 1 },
+                },
             },
             animation: {
                 gradient: "gradient 15s ease infinite",
+                fadeIn: "fadeIn 1s ease",
             },
         },
     },