Add fade in animation

src/Client/src/index.css

@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.fade-in {
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/Client/src/pages/Layout.tsx

@@ -5,7 +5,7 @@ import Footer from "../components/Footer";
 export default function Layout() {
   return (
     <div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
-      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in ">
+      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
         <NavBar />
         <div className="flex-1 py-8">
           <Outlet />