refactor(components): simplify animations and styling in header and hero sections

remove framer-motion dependencies and replace with CSS transitions
clean up unused imports and streamline mobile menu implementation

src/components/GlassHeader.tsx

@@ -3,7 +3,6 @@ import LanguageSwitcher from "./LanguageSwitcher";
 import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
 import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
 
 interface GlassHeaderProps {
   lang: Lang;
@@ -32,36 +31,28 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
         : 'bg-transparent'
     }`}>
       <div className="container max-w-4xl mx-auto p-4 flex justify-between items-center">
-        <motion.a
+        <a
-          className="flex items-center text-lg font-medium"
+          className="flex items-center text-lg font-medium transition-opacity duration-150 hover:opacity-80"
           href={getLocalizedPath('/', lang)}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
         >
           ✨ {t('personal.name')}
-        </motion.a>
+        </a>
 
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
           {[ 
             { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
             { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
-          ].map(
+          ].map((item) => (
-            (item, index) => (
+            <a
-              <motion.a
+              key={item.key}
-                key={item.key} // Changed from item to item.key
+              href={`#${item.sectionId}`}
-                href={`#${item.sectionId}`}
+              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60"
-                className="transition-colors hover:text-foreground/80 text-foreground/60"
+            >
-                initial={{ opacity: 0, y: -10 }}
+              {item.icon}
-                animate={{ opacity: 1, y: 0 }}
+              {t(item.key as any)}
-                transition={{ duration: 0.2, delay: index * 0.1 }}
+            </a>
-                whileHover={{ y: -2 }}
+          ))}
-              >
-                {item.icon}
-                {t(item.key as any) /* Type assertion needed if UiKeys is strict */}
-              </motion.a>
-            )
-          )}
         </nav>
 
         <div className="flex items-center space-x-2">
@@ -70,55 +61,43 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
           <ThemeToggle />
 
           {/* Mobile Menu Button */}          
-          <motion.button
+          <button
-            className="md:hidden p-2 text-foreground"
+            className="md:hidden p-2 text-foreground transition-opacity duration-150 hover:opacity-80 active:opacity-60"
             onClick={toggleMenu}
             aria-label="Toggle menu"
-            whileTap={{ scale: 0.95 }}
           >
             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </motion.button>
+          </button>
         </div>
       </div>
 
       {/* Mobile Navigation */}
-      <AnimatePresence>
+      <div className={`md:hidden overflow-hidden transition-all duration-200 ease-out ${
-        {isMenuOpen && (
+        isMenuOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'
-          <motion.div
+      }`}>
-            className={`md:hidden py-4 px-4 border-t border-border/10 transition-all duration-300 ${
+        <div className={`py-4 px-4 border-t border-border/10 ${
-              isScrolled 
+          isScrolled 
-                ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 shadow-lg shadow-black/5 dark:shadow-black/20' 
+            ? 'bg-white/80 dark:bg-black/80 shadow-sm' 
-                : 'bg-transparent'
+            : 'bg-white/85 dark:bg-black/85'
-            }`}
+        }`}>
-            initial={{ opacity: 0, height: 0 }}
+          <nav className="flex flex-col space-y-3 text-sm font-medium">
-            animate={{ opacity: 1, height: "auto" }}
+            {[ 
-            exit={{ opacity: 0, height: 0 }}
+              { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
-            transition={{ duration: 0.3 }}
+              { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
-          >
+            ].map((item) => (
-            <nav className="flex flex-col space-y-4 text-sm font-medium">
+              <a
-              {[ 
+                key={item.key}
-            { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
+                href={`#${item.sectionId}`}
-            { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
+                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 block"
-          ].map(
+                onClick={toggleMenu}
-                (item, index) => (
+              >
-                  <motion.a
+                {item.icon}
-                    key={item.key} // Changed from item to item.key
+                {t(item.key as any)}
-                    href={`#${item.sectionId}`}
+              </a>
-                    className="transition-colors hover:text-foreground/80 text-foreground/60 py-2"
+            ))}
-                    onClick={toggleMenu}
+          </nav>
-                    initial={{ opacity: 0, x: -20 }}
+        </div>
-                    animate={{ opacity: 1, x: 0 }}
+      </div>
-                    transition={{ duration: 0.2, delay: index * 0.1 }}
-                  >
-                    {item.icon}
-                    {t(item.key as any) /* Type assertion needed if UiKeys is strict */}
-                  </motion.a>
-                )
-              )}
-            </nav>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </header>
   );
 }

src/components/HeroSection.tsx

@@ -1,4 +1,4 @@
-import { Mail, Github, MapPin, Linkedin, Code, Terminal } from "lucide-react";
+import { Mail, Github, MapPin, Linkedin, Code } from "lucide-react";
 import { useTranslations } from "@/i18n/utils";
 import { motion } from "framer-motion";
 import MotionWrapper from "./MotionWrapper";
@@ -29,7 +29,7 @@ export default function HeroSection({ lang }: { lang: "en" | "zh" }) {
   };
 
   return (
-    <section className="py-16 md:py-32 relative overflow-hidden min-h-screen flex items-center">
+    <section className="py-32 relative overflow-hidden min-h-screen flex items-center">
       {/* Background gradient */}
       <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>