Bug fixes

Author: seraprogrammer

src/components/Welcome.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 
 function Welcome() {
   const [greeting, setGreeting] = useState("");
   const [currentTime, setCurrentTime] = useState("");
+  const [effectTime, setEffectTime] = useState(false);
 
   useEffect(() => {
     const updateGreeting = () => {
@@ -21,7 +22,14 @@ function Welcome() {
 
     const updateTime = () => {
       const now = new Date();
-      setCurrentTime(now.toLocaleTimeString());
+      const timeString = now.toLocaleTimeString();
+      setCurrentTime(timeString);
+
+      // Check if the current time matches the special effect time
+      if (timeString === "8:41:58 PM") {
+        setEffectTime(true);
+        setTimeout(() => setEffectTime(false), 3000); // Reset after 3 seconds
+      }
     };
 
     updateGreeting();
@@ -40,11 +48,20 @@ function Welcome() {
       {/* Time and Greeting */}
       <motion.div
         initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
+        animate={{
+          opacity: 1,
+          y: 0,
+          scale: effectTime ? 1.2 : 1,
+          rotate: effectTime ? 360 : 0,
+        }}
         transition={{ duration: 0.6, ease: "easeOut" }}
         className="mb-8 text-center"
       >
-        <h2 className="text-2xl font-light text-emerald-400 mb-2">
+        <h2
+          className={`text-2xl font-light ${
+            effectTime ? "text-purple-400 animate-pulse" : "text-emerald-400"
+          } mb-2`}
+        >
           {currentTime}
         </h2>
         <h3 className="text-3xl font-medium text-gray-300">{greeting}!</h3>
@@ -53,14 +70,21 @@ function Welcome() {
       {/* Main Content */}
       <motion.div
         initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
+        animate={{
+          opacity: 1,
+          y: 0,
+          x: effectTime ? [-10, 10, -10, 0] : 0,
+        }}
         transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
         className="text-center max-w-2xl bg-gradient-to-br from-gray-800/80 to-gray-900/80 p-10 rounded-3xl shadow-2xl backdrop-blur-lg border border-gray-700/50 hover:border-emerald-500/30 transition-all duration-300"
       >
         <motion.h1
           className="text-6xl font-bold mb-8"
           initial={{ scale: 0.9 }}
-          animate={{ scale: 1 }}
+          animate={{
+            scale: effectTime ? [1, 1.1, 1] : 1,
+            color: effectTime ? "#ff00ff" : undefined,
+          }}
           transition={{ duration: 0.5 }}
         >
           <span className="bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent drop-shadow-lg">
@@ -78,7 +102,10 @@ function Welcome() {
       {/* Bottom Message */}
       <motion.div
         initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
+        animate={{
+          opacity: 1,
+          y: effectTime ? [0, -10, 0] : 0,
+        }}
         transition={{ duration: 0.6, delay: 0.4 }}
         className="absolute bottom-8 text-center space-y-2"
       >