CRIMIS TIIIIIIIIIIIIIIIME

src/components/RootLayout.tsx

@@ -17,6 +17,24 @@ type LayoutProps = {
 
 export default function RootLayout({ children, protectedPage }: LayoutProps) {
     const {status} = useSession()
+    const snowflakeElements = []
+
+    for (let i = 0; i < 50; i++) {
+        snowflakeElements.push(
+            <div
+                className="snowflake text-white"
+                style={
+                    {
+                        left: `${Math.random() * 100}%`,
+                        animationDuration: `${Math.random() *5 + 5}s`,
+                        fontSize: `${Math.random() * 1.5 + 0.5}em`
+                    }
+                }
+            >
+            ❅
+            </div>
+        )
+      }
 
     if (protectedPage) {
         if (status === "loading") {
@@ -36,6 +54,7 @@ export default function RootLayout({ children, protectedPage }: LayoutProps) {
             return (
                 <main className="min-h-screen bg-black">
                     <Head />
+                    {snowflakeElements}
                     <Header />
                     {children}
                     <Footer />
@@ -46,6 +65,7 @@ export default function RootLayout({ children, protectedPage }: LayoutProps) {
         return (
             <main className="min-h-screen bg-black">
                 <Head />
+                {snowflakeElements}
                 <Header />
                 {children}
                 <Footer />

src/pages/reviews/index.tsx

@@ -60,7 +60,7 @@ export default function Reviews() {
     return (
         <RootLayout>
             <div className="w-1/2 mx-auto text-white">
-                <p className="text-center font-bold text-2xl hover:cursor-pointer hover:underline pb-2" onClick={onCatClick}>
+                <p className="text-center font-bold text-2xl hover:cursor-pointer hover:underline pb-2 select-none" onClick={onCatClick}>
                     {type}
                 </p>
 

src/styles/globals.css

@@ -3,5 +3,18 @@
 @tailwind utilities;
 
 body {
-    font-family: 'Poppins', sans-serif
+    font-family: 'Poppins', sans-serif;
+    overflow-y:hidden;
+    overflow-x:hidden;
+}
+
+@keyframes fall {
+    0% { transform: translateY(0); opacity: 1; }
+    100% { transform: translateY(90vh); opacity: 0; }
+}
+
+.snowflake {
+  animation: fall linear infinite;
+  position:absolute;
+  user-select:none;
 }