From a1e0c7ca9fffd86f5bd7c3e7d8a60c0842f787e6 Mon Sep 17 00:00:00 2001
From: BrightTheBackpack <100brightli@gmail.com>
Date: Mon, 16 Dec 2024 18:51:22 -0800
Subject: [PATCH] Switch to tailwind

Co-authored-by: BRUHisbackbois <Scott170c@users.noreply.github.com>
Co-authored-by: Ryan <talk@limeskey.com>
---
 app/components/FAQcard.tsx |  12 +-
 app/components/footer.tsx  |  29 +---
 app/components/top.tsx     |  92 +++----------
 app/globals.css            |   6 +-
 app/layout.tsx             |   2 +-
 app/page.tsx               | 262 +++++++++++--------------------------
 package-lock.json          | 255 ++++++++++++++++++++++++++++++------
 package.json               |   6 +-
 postcss.config.mjs         |   1 +
 tailwind.config.js         |  22 ++++
 yarn.lock                  | 166 +++++++++++++++--------
 11 files changed, 459 insertions(+), 394 deletions(-)
 create mode 100644 tailwind.config.js

diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx
index 02a4ec7..dec1742 100644
--- a/app/components/FAQcard.tsx
+++ b/app/components/FAQcard.tsx
@@ -10,10 +10,10 @@ interface CardProps {
 // Create the component
 const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
   return (
-    <Box sx={styles.card}>
-      <h3 style={styles.question}>{question}</h3>
+    <div className="">
+      <h3 className={styles.question}>{question}</h3>
       <p style={styles.answer}>{answer}</p>
-    </Box>
+    </div>
   );
 };
 
@@ -31,11 +31,7 @@ const styles = {
     overflow: 'hidden',
   },
   question: {
-    fontSize: 'calc(1.2vw + 1.2vh)',
-    fontWeight: 790,
-    color: '#FFFFFF',
-    textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-    paddingLeft: '2%',
+    "insert tailwind"
   },
   answer: {
     fontSize: 'calc(0.6vw + 0.6vh)',
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index 41419b8..0190d20 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -1,30 +1,7 @@
-import {
-    Box,
-    Button,
-    Image,
-    Grid,
-    Heading,
-    Text,
-  } from 'theme-ui';
-
- const footer = ()=> {
+const footer = ()=> {
     return (
-        <footer style={{
-            backgroundColor: '#100056',
-            height: '8vh',
-            width: '100%',
-            position: 'relative',
-            //bottom: '0',
-            display: 'flex',
-            //flexDirection: 'column',
-            alignItems: 'center',
-            // py: '10px',
-            justifyContent: 'center',
-            fontSize: '120%',
-            fontWeight: 700,
-            color: '#90C4FF'
-          }}>
-            Made with ❤️ by @bright li & @Scott
+        <footer className="bg-[#100056] h-[8vh] w-full relative flex items-center justify-center text-[120%] font-bold text-[#90C4FF]">
+            Made with ❤️ by Bright, Scott & Ryan
         </footer>
     )
 }
diff --git a/app/components/top.tsx b/app/components/top.tsx
index edcc86d..9349c5e 100644
--- a/app/components/top.tsx
+++ b/app/components/top.tsx
@@ -1,34 +1,11 @@
-import {
-    Box,
-    Button,
-    Image,
-    Grid,
-    Heading,
-    Text,
-  } from 'theme-ui';
-  import dynamic from 'next/dynamic';
+import dynamic from 'next/dynamic';
 
-  const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
+const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
 
  const tipitytopity = ()=> {
     return (
-        <Box
-        sx={{
-          display: 'flex',
-          flexDirection:['column','column', 'row'],
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '1rem',
-          paddingRight: ['0rem', '3rem'],
-          width: '100%',
-          margin: ['auto'],
-          
-          mt: ['10vh', '0vh'],
-          backgroundImage: '../public/background2.png',
-
-          height: ['2vh', '90vh'],
-        }}
-        >
+        <div className="flex flex-col md:flex-row items-center justify-center gap-4 pr-0 md:pr-12 w-full mx-auto mt-[10vh] md:mt-0 bg-[url('../public/background2.png')] bg-no-repeat bg-cover h-[2vh] md:h-[95vh]"
+      >
       {typeof window !== 'undefined' && <ModelViewer />}
       {/* 
           <Image 
@@ -39,68 +16,29 @@ import {
                 width: '300px',
                 height: '200px',
                 // borderRadius: '16px',
-                // boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
+                // divShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
                 '&:hover': {
                   transform: 'scale(1.1)',
                   transition: 'transform 0.3s ease-in-out',
                 },
               }}
           /> */}
-          <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'left',
-            // justifyContent: 'left',
-            ml: ['0vw','2vw'],
-            // mt: ['1%','12%'],
-            maxWidth: '100%',
-            // textAlign: 'center'
-          }}
-          >
-          <Heading as="h1" variant="styles.h1" 
-                sx={{ 
-                  fontFamily: 'var(--font-inter)', 
-                  fontSize: ['2rem', '6.5rem'], 
-                  fontWeight:800,
-                  textAlign: ['center','center','left'],
-                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
-                }}>
+          <div className="flex flex-col items-start ml-0 md:ml-[2vw] max-w-full">
+          <h1 className="font-[var(--font-inter)] text-[2rem] md:text-[7rem] font-extrabold text-center md:text-left text-white ">
             Hacky Holidays!
-          </Heading>
-          <Heading as="h2" variant="styles.h1" 
-                sx={{ 
-                  fontFamily: 'var(--font-inter)', 
-                  fontSize: ['0.5rem','1.9rem'], 
-                  fontWeight:800,
-                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
-                }}>
-            Design a PCB holiday decoration this winter, get one shipped!
-          </Heading>
+          </h1>
+          <h2 className="font-[var(--font-inter)] text-[0.5rem] md:text-[2.2rem] font-bold text-white">
+            Design a PCB holiday decoration this winter, get one shipped
+          </h2>
           <a href = "/guide">
-          <Button
-          sx={{
-            mx: ['auto',0],
-            fontFamily: 'var(--font-inter)',
-            fontSize: ['0.4rem', 'calc(0.6vw + 0.6vh)'],
-            fontWeight: 900,
-            color: 'white',
-            bg: '#f90b0b',
-            // width: 'fit-content',
-            borderRadius: '2rem',
-            padding: ['0.6rem 0.6rem', '1rem 2rem'],
-            mt: '1rem',
-
-          }}>
+          <button className="mx-auto md:mx-0 font-[var(--font-inter)] text-[0.4rem] md:text-[calc(0.6vw+0.6vh)] font-bold text-white bg-[#f90b0b] rounded-[2rem] px-[0.6rem] py-[0.6rem] md:px-[2rem] md:py-[1rem] mt-4">
               <b>&nbsp;Learn to Make a Decoration &nbsp; ➜</b>
-          </Button>
+          </button>
           </a>
 
 
-          </Box>
-     
-        </Box>
-   
+          </div>
+        </div>
 
     )
 }
diff --git a/app/globals.css b/app/globals.css
index 91c013f..e99bd68 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,16 +6,14 @@
   font-family: 'Inter';
   src: url('./fonts/Inter-VariableFont_opsz,wght.ttf') format('ttf');
   font-optical-sizing: auto;
-
-
  
 
 }
-body {
+/* body {
   color: #FFFFFF;
   background-color: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);';
   font-family: Arial, Helvetica, sans-serif;
   height: 100vh;
   margin: 0;
   min-width: none;
-}
+} */
diff --git a/app/layout.tsx b/app/layout.tsx
index 2d58199..b937184 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -29,7 +29,7 @@ const inter = localFont({
 
 export const metadata: Metadata = {
   title: "Hacky Holidays",
-  description: "Generated by create next app",
+  description: "Create a ",
 };
 
 export default function RootLayout({
diff --git a/app/page.tsx b/app/page.tsx
index d4b3987..e75c281 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,195 +1,93 @@
 "use client";
 
-
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { keyframes } from '@emotion/react';
-// import '@google/model-viewer';
-// import Script from 'next/script';
-import { useEffect } from 'react';
-//  import { tipitytopity } from './components/top'
-// import Image from "next/image";
-import {
-  Box,
-  Button,
-  Container,
-  Image,
-  Grid,
-  Heading,
-  Text,
-} from 'theme-ui';
-const Footer = dynamic(() => import('./components/footer'), { ssr: false });
-
-import dynamic from 'next/dynamic';
-const Top = dynamic(() => import('./components/top'), { ssr: false });
-const FAQcard = dynamic(() => import('./components/FAQcard'), {ssr: false});
-const ThreeGrid = dynamic(() => import('./components/3box'), { ssr: false });
-// const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false });
-const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false });
-
-const fall = (  rotationDirection: number) => keyframes`
-  from {
-    transform: translateY(-10%) rotate(0deg);
-  }
-  to {
-    transform: translateY(4700%) rotate(${rotationDirection * 360}deg);
-  }
-`;
+import { useEffect } from "react";
+import Snowfall from "react-snowfall";
+import dynamic from "next/dynamic";
 
-const faqItems = {question: 'What is Next.js?', answer: 'Next.js is a React framework for production.' };
+const Footer = dynamic(() => import("./components/footer"), { ssr: false });
+const Top = dynamic(() => import("./components/top"), { ssr: false });
+const FAQcard = dynamic(() => import("./components/FAQcard"), { ssr: false });
+const ThreeGrid = dynamic(() => import("./components/3box"), { ssr: false });
 
 export default function Home() {
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      import('@google/model-viewer');
+    if (typeof window !== "undefined") {
+      import("@google/model-viewer");
     }
   }, []);
-  return (
-  <Box>
-    <link rel="icon" href = "https://assets.hackclub.com/icon-rounded.svg"></link>
-  <Grid gap = {0} sx={{
-    background: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);', 
-    // background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))',
-    // // height: 'auto',
-    // display: 'block',
-    // display: 'flex',
-    // flexDirection: 'column',
-    // height:"100%",
-    // alignItems: 'center',
-    minHeight: ['340vh', '265vh'],
-    // background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))', 
-    // display: 'grid',
-    // gridTemplateRows: 'auto auto 1fr auto', // Allows more explicit control
-    // minHeight: '100vh',
-  
-  
-    // display: 'flex',
-    // minHeight: '100vh', // Ensure it covers at least the viewport height
-    // padding: '20px',
-    // display: 'flex',
-    // flexDirection: 'column',
-    // alignItems: 'center',
-    // justifyContent: 'flex-start', // Ensure content starts from the top
-
-    // flexDirection: 'column',
-    // alignItems: 'center',
-    // justifyContent: 'flex-start', // Ensure content starts from the top
-
-    // flexDirection: 'column',
- 
-    // overflow: 'auto',
-    // padding:'20px',
-  }}>
-
-        <Box //grid1
-        sx={{
-          position: 'absolute',
-          top: -10,
-          left: 0,
-        }}>
-          <a href="https://hackclub.com" target="_blank">
-          <Button  >
-            <Image src="https://assets.hackclub.com/flag-orpheus-top.svg" sx ={{
-              height:"10vh"
-            }}></Image>
-
-        
-          </Button>
 
+  return (
+    <div>
+      {/* Snowfall effect */}
+      <Snowfall
+        speed={[0.5, 3]}
+        radius={[2.0, 4.0]}
+        snowflakeCount={100}
+        wind={[-0.1, 0.1]}
+        style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", zIndex: 1 }}
+      />
+
+      {/* Main Content */}
+      <div className="grid gap-0 bg-gradient-to-b from-[rgba(0,153,255,1)] to-[rgba(130,205,255,1)] min-h-[340vh] md:min-h-[265vh] relative z-0">
+        {/* Header Section */}
+        <div className="absolute top-0 left-0">
+          <a href="https://hackclub.com" target="_blank" rel="noopener noreferrer">
+            <button>
+              <img
+                src="https://assets.hackclub.com/flag-orpheus-top.svg"
+                className="h-20"
+                alt="Hack Club Flag"
+              />
+            </button>
           </a>
-          
-
-        </Box>
-
-       
-    
-        
-        {Array.from({ length: 50 }).map((_, index) => {
-          const randomRotationDirection = Math.random() > 0.5 ? 1 : -1;
-          const randomSpeed = Math.random() * 10 + 5;
-          return(
-          <Text
-          key={index}
-          sx={{
-            position: 'absolute',
-            top: '-10%',
-            zIndex: 0,
-            left: `${Math.random() * 90}vw`,
-            animation: `${fall(randomRotationDirection)} ${randomSpeed}s linear infinite`,
-            color: 'white',
-            fontSize: `${Math.random() * 20 + 10}px`,
-            animationDelay: `${Math.random() * 10}s`,
-            transform: `rotate(${randomRotationDirection * 360}deg)`,
-
-
-
-          }}
-          >
-            ❄
-          </Text>)
-        })}
-      
-            <Top />
-
-       
-
-          <Box //section 2
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            // backgroundColor: 'white',
-            color: 'black',
-            width: '100%',
-            // margin: 'auto',
-            height:['auto', '100vh'],
-
-            // textAlign: 'center'
-          }}>
-              <Heading as="h3"   sx={{ 
-                    fontFamily: 'var(--font-inter)', 
-                    fontSize: ['0.9rem', '1.9rem'], 
-                    fontWeight:800,
-                    paddingLeft: '6vw',
-                    paddingRight: '6vw',
-                    textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                    color: 'white'
-                  }}>Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th!
-                  Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄</Heading>
-          
-         
-                  <ThreeGrid/>
-              <Heading as="h3"   sx={{ 
-                    margin: '3',
-                    paddingLeft: '4vw',
-                    paddingRight: '4vw',
-                    fontFamily: 'var(--font-inter)', 
-                    fontSize: ['0.8rem', '1.9rem'], 
-                    fontWeight:800,
-                    textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                    color: 'white'
-                  }}>At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts!<br></br><br></br> 
-          <Box sx={{fontsize: '5vw'}}>FAQ:</Box></Heading>
-          <Grid columns = {[1, 1, 1, 3]}gap = {[0]} sx = {{paddingTop: '1.5vh'}}>
-            <FAQcard question="What are the Requirements?" answer="Your PCB must be under 100mm x 100m in size, 
-                                                                  and all parts must come from the parts list.  Since
-                                                                  This is an addition to OnBoard, your project must 
-                                                                  also follow OnBoard Requirements." />
-            <FAQcard question="When are Submission deadlines?" answer="The deadline to submit is the 30th, but if we get higher demand there is a possibility to extend it. If you want to get your decoration in time for Christmas it is best to get it done before the 15th!" />
-            <FAQcard question="What about the OnBoard Grant?" answer="You can still apply for the OnBoard grant, but you cannot receive two grants for the same PCB design. Your new PCB must be a different design or a significant change to one you made for this." />
-          </Grid>
-          <Heading as="h2" variant="styles.h1" 
-                sx={{ 
-                  fontFamily: 'var(--font-inter)', 
-                  fontSize: ['0.9rem', '1.9rem'], 
-                  fontWeight:800,
-                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                  color: 'white'
-                }}>Any more questions? Ask in <a style={{color: 'rgba(90, 142, 248, 1)'}} href="https://hackclub.slack.com/archives/C083SK3G5D3">#hacky-holidays</a>!
-          </Heading>
-        </Box>
-    </Grid>
-    <Footer></Footer>
-    </Box>
+        </div>
+
+        {/* Top Component */}
+        <Top />
+
+        {/* Main Section */}
+        <div className="flex flex-col items-center justify-center text-center text-white px-6">
+          <h3 className="font-inter font-bold text-lg md:text-2xl drop-shadow-md">
+          Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄
+          </h3>
+          <ThreeGrid />
+          <h3 className="mt-6 font-inter font-bold text-lg md:text-2xl drop-shadow-md">
+            At the end, submissions will be peer-reviewed and voted for the top 3. The top 3 will
+            be re-made and can be given out as gifts!
+          </h3>
+
+          {/* FAQ Section */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+            <FAQcard
+              question="What are the Requirements?"
+              answer="Your PCB must be under 100mm x 100mm in size and all parts must come from the parts list."
+            />
+            <FAQcard
+              question="When are Submission deadlines?"
+              answer="The deadline to submit is the 30th. If you want your decoration in time for Christmas, submit before the 15th!"
+            />
+            <FAQcard
+              question="What about the OnBoard Grant?"
+              answer="You can still apply for the OnBoard grant, but you cannot receive two grants for the same PCB design."
+            />
+          </div>
+
+          <h2 className="font-inter font-bold text-lg md:text-2xl mt-6">
+            Any more questions? Ask in{" "}
+            <a
+              href="https://hackclub.slack.com/archives/C083SK3G5D3"
+              className="text-blue-400 underline"
+            >
+              #hacky-holidays
+            </a>
+            !
+          </h2>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <Footer />
+    </div>
   );
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8d26f8d..a98eca8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,11 @@
         "@mdx-js/react": "^3.1.0",
         "@next/mdx": "^15.0.3",
         "@types/mdx": "^2.0.13",
+        "autoprefixer": "^10.4.20",
         "next": "^15.0.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-snowfall": "^2.2.0",
         "theme-ui": "^0.17.1",
         "three": "^0.170.0"
       },
@@ -26,8 +28,8 @@
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "15.0.3",
-        "postcss": "^8",
-        "tailwindcss": "^3.4.1",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.16",
         "typescript": "^5"
       }
     },
@@ -1970,6 +1972,42 @@
         "astring": "bin/astring"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2066,6 +2104,37 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz",
+      "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -2114,9 +2183,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001678",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz",
-      "integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==",
+      "version": "1.0.30001689",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz",
+      "integrity": "sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g==",
       "funding": [
         {
           "type": "opencollective",
@@ -2559,6 +2628,11 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.74",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz",
+      "integrity": "sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw=="
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2780,6 +2854,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3501,6 +3583,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4550,12 +4644,15 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
     "node_modules/lines-and-columns": {
@@ -5555,6 +5652,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -5564,6 +5666,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5898,9 +6008,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "dev": true,
       "funding": [
         {
@@ -5918,7 +6028,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -5996,18 +6106,6 @@
         }
       }
     },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/postcss-nested": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
@@ -6049,8 +6147,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -6143,11 +6240,28 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-snowfall": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.2.0.tgz",
+      "integrity": "sha512-dRk7vEHq/ZUOG+JHk2k/hH3HmliOWGXr4rKRDeW4mjWuHeI1r5h0Lc1r2jnTtUS1im702d6tCmNGymlNTdhXYg==",
+      "dependencies": {
+        "react-fast-compare": "^3.2.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || 17.x || 18.x",
+        "react-dom": "^16.8 || 17.x || 18.x"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7000,33 +7114,33 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.14",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
-      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
+      "version": "3.4.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
+      "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -7036,6 +7150,34 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss/node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -7457,6 +7599,35 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index 02d6f12..1005dc9 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,11 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.0.3",
     "@types/mdx": "^2.0.13",
+    "autoprefixer": "^10.4.20",
     "next": "^15.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-snowfall": "^2.2.0",
     "theme-ui": "^0.17.1",
     "three": "^0.170.0"
   },
@@ -27,8 +29,8 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
     "typescript": "^5"
   }
 }
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2..b89de09 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -5,4 +5,5 @@ const config = {
   },
 };
 
+
 export default config;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..f8215e7
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",  // Path for all your pages and components in app directory
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        blue: {
+          500: "rgba(0, 153, 255, 1)",
+          200: "rgba(130, 205, 255, 1)",
+        },
+      },
+      minHeight: {
+        '265vh': '265vh',
+        '340vh': '340vh',
+      },
+    },
+  },
+  plugins: [],
+};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 822dfe6..119d63f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -959,6 +959,18 @@ astring@^1.8.0:
   resolved "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz"
   integrity sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==
 
+autoprefixer@^10.4.20:
+  version "10.4.20"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
+  dependencies:
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.1"
+    postcss-value-parser "^4.2.0"
+
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz"
@@ -1022,6 +1034,16 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
+browserslist@^4.23.3:
+  version "4.24.3"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz"
+  integrity sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==
+  dependencies:
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
+
 busboy@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
@@ -1050,10 +1072,10 @@ camelcase-css@^2.0.1:
   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001579:
-  version "1.0.30001678"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz"
-  integrity sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==
+caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688:
+  version "1.0.30001689"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz"
+  integrity sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -1088,7 +1110,7 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-chokidar@^3.5.3:
+chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -1318,6 +1340,11 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+electron-to-chromium@^1.5.73:
+  version "1.5.74"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz"
+  integrity sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -1480,6 +1507,11 @@ esast-util-from-js@^2.0.0:
     esast-util-from-estree "^2.0.0"
     vfile-message "^4.0.0"
 
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
@@ -1765,10 +1797,10 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.0, fast-glob@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz"
-  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -1776,10 +1808,10 @@ fast-glob@^3.3.0, fast-glob@3.3.1:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+fast-glob@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -1860,6 +1892,11 @@ foreground-child@^3.1.0:
     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
 
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -2409,7 +2446,7 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.0:
+jiti@^1.21.6:
   version "1.21.6"
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -2502,15 +2539,10 @@ lie@^3.0.2:
   dependencies:
     immediate "~3.0.5"
 
-lilconfig@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
-
-lilconfig@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz"
-  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
 
 lines-and-columns@^1.1.6:
   version "1.2.4"
@@ -2987,7 +3019,7 @@ micromark@^4.0.0:
     micromark-util-symbol "^2.0.0"
     micromark-util-types "^2.0.0"
 
-micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@^4.0.4, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -3066,11 +3098,21 @@ next@^15.0.3:
     "@next/swc-win32-x64-msvc" "15.0.3"
     sharp "^0.33.5"
 
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
@@ -3240,7 +3282,7 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1.0.0, picocolors@^1.1.0:
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -3281,7 +3323,7 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^4.0.1:
+postcss-load-config@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz"
   integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
@@ -3289,14 +3331,14 @@ postcss-load-config@^4.0.1:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
-postcss-nested@^6.0.1:
+postcss-nested@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz"
   integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
     postcss-selector-parser "^6.1.1"
 
-postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
+postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
   version "6.1.2"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -3304,18 +3346,18 @@ postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.0.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8, postcss@^8.4.23:
-  version "8.4.47"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz"
-  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
+postcss@^8.4.47, postcss@^8.4.49:
+  version "8.4.49"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.1.0"
+    picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
 postcss@8.4.31:
@@ -3372,11 +3414,23 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-snowfall@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.2.0.tgz"
+  integrity sha512-dRk7vEHq/ZUOG+JHk2k/hH3HmliOWGXr4rKRDeW4mjWuHeI1r5h0Lc1r2jnTtUS1im702d6tCmNGymlNTdhXYg==
+  dependencies:
+    react-fast-compare "^3.2.2"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -3514,7 +3568,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.2, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.4, resolve@^1.22.8:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -3871,7 +3925,7 @@ stylis@4.2.0:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-sucrase@^3.32.0:
+sucrase@^3.35.0:
   version "3.35.0"
   resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
@@ -3896,33 +3950,33 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-tailwindcss@^3.4.1:
-  version "3.4.14"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz"
-  integrity sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==
+tailwindcss@^3.4.16:
+  version "3.4.16"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz"
+  integrity sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
-    chokidar "^3.5.3"
+    chokidar "^3.6.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.21.0"
-    lilconfig "^2.1.0"
-    micromatch "^4.0.5"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
     postcss-import "^15.1.0"
     postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
-    postcss-nested "^6.0.1"
-    postcss-selector-parser "^6.0.11"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
 
 tapable@^2.2.0:
   version "2.2.1"
@@ -4142,6 +4196,14 @@ unist-util-visit@^5.0.0:
     unist-util-is "^6.0.0"
     unist-util-visit-parents "^6.0.0"
 
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"