Updated animation

Dockerfile

@@ -1,9 +1,16 @@
-FROM node:20-alpine AS builder
+FROM node:20-slim AS builder
 WORKDIR /app
+
 COPY package*.json ./
-RUN npm install
+COPY pnpm-lock.yaml ./
+
+RUN npm install -g pnpm
+
+RUN pnpm install
+
 COPY . .
-RUN npm run build
+
+RUN pnpm run build
 
 FROM nginx:alpine
 COPY --from=builder /app/dist /usr/share/nginx/html

src/App.jsx

@@ -7,6 +7,20 @@ import {Team} from './sections/Team';
 import Snowfall from 'react-snowfall'
 import { DateTime } from 'luxon';
 
+// Determines if the current date is within the snowfall season (November 15th to January 31st)
+function isSnowfallSeason(date = DateTime.now()) {
+    const year = date.year;
+    const start = DateTime.local(year, 11, 15);
+    const end = DateTime.local(year + 1, 1, 31);
+    // If we're on or after November 15th, check if we're before January 31st of the next year
+    if (date >= start) {
+        return date <= end;
+    }
+    // If we're before November 15th, check if we're after January 1st of the current year
+    const prevEnd = DateTime.local(year, 1, 31);
+    return date <= prevEnd;
+}
+
 export default function LiquidDevelopment() {
     return (
         <div
@@ -20,12 +34,7 @@ export default function LiquidDevelopment() {
                 pointerEvents: 'none',
                 zIndex: 9999,
             }}>
-                {(() => {
+                {isSnowfallSeason() && <Snowfall snowflakeCount={80} />}
-                    const now = DateTime.now();
-                    return (now.month === 11 && now.day >= 15) ||
-                        (now.month === 12) ||
-                        (now.month === 1);
-                })() && <Snowfall snowflakeCount={80} />}
             </div>
 
             <Navbar/>

src/sections/Hero.jsx

@@ -27,9 +27,9 @@ export const Hero = () => {
 
             <div className="relative z-10 text-center px-6 max-w-6xl mx-auto">
                 <motion.div
-                    initial={{ scale: 0.8, opacity: 0 }}
+                    initial={{scale: 0.5, opacity: 0}}
                     animate={{scale: 1, opacity: 1}}
-                    transition={{ duration: 0.8 }}
+                    transition={{duration: 0.5}}
                     className="mx-auto mb-8 w-24 h-24 md:w-32 md:h-32 rounded-full bg-[#00A3FF]/5 flex items-center justify-center border border-[#00A3FF]/30 shadow-[0_0_60px_-10px_rgba(0,163,255,0.4)]"
                 >
                     <BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]"/>
@@ -41,15 +41,11 @@ export const Hero = () => {
                     transition={{delay: 0.2}}
                 >
                     <h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
-                        <ObfuscatedMail
-                            email={rawEmail}
-                            className="cursor-pointer hover:opacity-80 transition-opacity duration-300 bg-transparent border-none p-0 font-extrabold tracking-tighter text-4xl md:text-7xl text-white"
-                        >
                         LIQUID
-                            <span className="ml-3 text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">
+                        <span
+                            className="ml-3 text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">
                                 DEVELOPMENT
                         </span>
-                        </ObfuscatedMail>
                     </h1>
                 </motion.div>