frontend: add snowflakes

frontend/src/components/Snowflakes.css

@@ -0,0 +1,39 @@
+.snowflakes {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Make snowflakes non-interactive */
+    overflow: hidden; /* Hide overflow */
+    z-index: 1000; /* Ensure snowflakes are above other content */
+}
+
+.snowflake {
+    position: absolute;
+    top: -10%; /* Start above the top of the screen */
+    color: white; /* Snowflake color */
+    font-size: 1em; /* Size of the snowflake; adjust as needed */
+    opacity: 0.8; /* Transparency */
+    animation: fall linear infinite; /* Apply the fall animation */
+}
+
+/* Falling animation */
+@keyframes fall {
+    0% {
+        transform: translateX(0) translateY(0); /* Start position */
+    }
+    100% {
+        transform: translateX(-5vw) translateY(120vh); /* End position */
+        opacity: 0.1; /* Optional: fade out */
+    }
+}
+
+/* Randomize snowflake size and animation */
+.snowflake:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
+.snowflake:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
+.snowflake:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
+.snowflake:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
+.snowflake:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
+
+/* Add more child selectors for additional snowflakes */