Basic dark mode implemented

src/layout/Layout.tsx

@@ -1,19 +1,30 @@
+import { ReactNode, useEffect } from "react";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import { ReactNode } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 type LayoutProps = {
-    children: ReactNode;
-  };
-  
-  const Layout = ({ children }: LayoutProps) => {
-    return (
-      <div className="min-h-screen bg-white flex flex-col">
-        <Navbar />
-        <main className="flex-1 pt-16">{children}</main>
-        <Footer />
-      </div>
-    );
-  };
-  
-  export default Layout;
+  children: ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
+  useEffect(() => {
+    AOS.init({
+      duration: 800,        // Dauer der Animationen
+      once: true,           // nur einmal pro Element
+      offset: 100,          // wie weit gescrollt werden muss
+      easing: "ease-out-cubic",
+    });
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col">
+      <Navbar />
+      <main className="flex-1 pt-16">{children}</main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;