frontend: add snowflakes

frontend/src/App.tsx

@@ -3,10 +3,12 @@ import Greeting from './components/Greeting'
 import Hosting from './components/Hosting'
 import InitialSetup from './components/InitialSetup'
 import Program from './components/Program'
+import Snowflakes from './components/Snowflakes'
 
 function App() {
   return (
     <>
+      <Snowflakes />
       <InitialSetup/>
       <Greeting/>
       <br/>

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 */

frontend/src/components/Snowflakes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Snowflakes.css';
+
+const Snowflakes: React.FC = () => {
+    // Adjust the number of snowflakes as needed
+    const snowflakeCount = Array.from({ length: 50 });
+
+    return (
+        <div className="snowflakes">
+            {snowflakeCount.map((_, index) => (
+                <div 
+                    key={index} 
+                    className="snowflake"
+                    style={{
+                        left: `${Math.random() * 100}vw`, // Random position across the full width
+                        animationDuration: `${Math.random() * 3 + 2}s`, // Random fall duration between 2s and 5s
+                    }}
+                >
+                    ❄️
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Snowflakes;