feat(ui): modernize design with gradient icons and animations

- Add modern-code-icon.svg and update favicon with gradient styling
- Implement glass effect, hover animations and gradient text in global.css
- Enhance GlassHeader with motion animations and new icon
- Update design variables for modern look including shadows and transitions

src/components/GlassHeader.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
 import { defaultLang } from "@/i18n/ui";
 import { type GlassHeaderProps } from "@/types";
+import { motion } from "framer-motion";
 
 export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
   const [lang, setLang] = useState<Lang>(propLang || defaultLang);
@@ -35,18 +36,30 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
   return (
-    <header className={`fixed top-0 z-50 w-full transition-all duration-300 ${
-      isScrolled 
-        ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20' 
-        : 'bg-transparent'
-    }`}>
+    <motion.header 
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+      className={`fixed top-0 z-50 w-full transition-all duration-300 ${
+        isScrolled 
+          ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20' 
+          : 'bg-transparent'
+      }`}
+    >
       <Container className="p-4 flex justify-between items-center">
-        <a
-          className="flex items-center text-lg font-medium transition-opacity duration-150 hover:opacity-80"
+        <motion.a
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          className="flex items-center text-lg font-medium transition-colors duration-150 hover:text-foreground/80"
           href={getLocalizedPath('/', lang)}
         >
-          ✨ {personalInfo.name}
-        </a>
+          <img 
+            src="/modern-code-icon.svg" 
+            alt="Code Icon" 
+            className="w-6 h-6 mr-2" 
+          /> 
+          <span className="gradient-text font-bold">{personalInfo.name}</span>
+        </motion.a>
 
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
@@ -56,39 +69,64 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
             { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
             // { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
             { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-          ].map((item) => (
-            <a
+          ].map((item, index) => (
+            <motion.a
               key={item.key}
               href={item.href}
-              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60"
+              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 px-3 py-2 rounded-md hover:bg-foreground/5"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ 
+                duration: 0.3, 
+                delay: 0.1 + index * 0.1,
+                ease: "easeOut"
+              }}
+              whileHover={{ y: -2 }}
             >
               {item.icon}
               {t(item.key as any)}
-            </a>
+            </motion.a>
           ))}
         </nav>
 
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-3">
           {/* Language Switcher added here */}
-          <LanguageSwitcher lang={lang} />
-          <ThemeToggle />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.4 }}
+          >
+            <LanguageSwitcher lang={lang} />
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.5 }}
+          >
+            <ThemeToggle />
+          </motion.div>
 
           {/* Mobile Menu Button */}          
-          <button
-            className="md:hidden p-2 text-foreground transition-opacity duration-150 hover:opacity-80 active:opacity-60"
+          <motion.button
+            className="md:hidden p-2 text-foreground transition-all duration-150 hover:bg-foreground/10 active:bg-foreground/20 rounded-md"
             onClick={toggleMenu}
             aria-label="Toggle menu"
+            whileTap={{ scale: 0.9 }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3, delay: 0.6 }}
           >
             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
+          </motion.button>
         </div>
       </Container>
 
       {/* Mobile Navigation */}
-      <div className={`md:hidden overflow-hidden transition-all duration-200 ease-out ${
-        isMenuOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'
+      <div className={`md:hidden overflow-hidden transition-all duration-300 ease-out ${
+        isMenuOpen ? 'max-h-60 opacity-100' : 'max-h-0 opacity-0'
       }`}>
-        <div className={`py-4 px-4 border-t border-border/10 ${
+        <div className={`py-4 px-4 border-t border-border/10 glass-effect ${
           isScrolled 
             ? 'bg-white/80 dark:bg-black/80 shadow-sm' 
             : 'bg-white/85 dark:bg-black/85'
@@ -100,20 +138,27 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
               { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
               { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
               { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-            ].map((item) => (
-              <a
+            ].map((item, index) => (
+              <motion.a
                 key={item.key}
                 href={item.href}
-                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 block"
+                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 px-3 block rounded-md hover:bg-foreground/5"
                 onClick={toggleMenu}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ 
+                  duration: 0.2, 
+                  delay: index * 0.05,
+                  ease: "easeOut"
+                }}
               >
                 {item.icon}
                 {t(item.key as any)}
-              </a>
+              </motion.a>
             ))}
           </nav>
         </div>
       </div>
-    </header>
+    </motion.header>
   );
 }