chore(deps): upgrade to Tailwind CSS v4 and update all packages

Author: Amitminer

.gitignore

@@ -35,4 +35,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 .backend
-backend/*
+backend/*
+xd.txt

app/components/layout/Header.tsx

@@ -91,7 +91,7 @@ const Header = () => {
   return (
     <header
       className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${state.scrolled
-        ? 'bg-secondary/90 backdrop-blur-sm py-3 shadow-lg'
+        ? 'bg-secondary/90 backdrop-blur-xs py-3 shadow-lg'
         : 'bg-transparent py-5'
         }`}
     >
@@ -123,7 +123,7 @@ const Header = () => {
 
         {/* Mobile Menu Toggle */}
         <button
-          className="md:hidden text-white focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-lg p-1"
+          className="md:hidden text-white focus:outline-hidden focus:ring-2 focus:ring-pink-500 rounded-lg p-1"
           onClick={toggleMenu}
           aria-expanded={state.isMenuOpen}
           aria-controls="mobile-menu"
@@ -136,7 +136,7 @@ const Header = () => {
       {/* Mobile Menu */}
       <div
         id="mobile-menu"
-        className={`md:hidden bg-secondary/95 backdrop-blur-sm absolute w-full transition-all duration-300 ${state.isMenuOpen
+        className={`md:hidden bg-secondary/95 backdrop-blur-xs absolute w-full transition-all duration-300 ${state.isMenuOpen
           ? 'opacity-100 translate-y-0'
           : 'opacity-0 -translate-y-2 pointer-events-none'
           }`}

app/components/sections/About.tsx

@@ -152,22 +152,22 @@ const About = () => {
 
   // === Skeleton Loading Component ===
   const SkeletonLoader = useCallback(() => (
-    <div className="max-w-3xl mx-auto bg-secondary/30 rounded-xl p-6 md:p-8 backdrop-blur-sm border border-pink-500/10">
+    <div className="max-w-3xl mx-auto bg-secondary/30 rounded-xl p-6 md:p-8 backdrop-blur-xs border border-pink-500/10">
       {/* Title Skeleton */}
-      <div className="h-8 w-48 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded-lg animate-pulse mb-8 mx-auto" />
+      <div className="h-8 w-48 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded-lg animate-pulse mb-8 mx-auto" />
 
       {/* First Paragraph Skeleton */}
       <div className="space-y-3 mb-6">
-        <div className="h-4 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-3/4" />
-        <div className="h-4 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-full" />
-        <div className="h-4 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-5/6" />
+        <div className="h-4 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-3/4" />
+        <div className="h-4 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-full" />
+        <div className="h-4 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-5/6" />
       </div>
 
       {/* Second Paragraph Skeleton */}
       <div className="space-y-3">
-        <div className="h-4 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-2/3" />
-        <div className="h-4 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-full" />
-        <div className="h-4 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-4/5" />
+        <div className="h-4 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-2/3" />
+        <div className="h-4 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-full" />
+        <div className="h-4 bg-linear-to-r from-pink-500/20 to-cyan-500/20 rounded animate-pulse w-4/5" />
       </div>
     </div>
   ), []);
@@ -184,7 +184,7 @@ const About = () => {
         {[...Array(PARTICLE_COUNT)].map((_, i) => (
           <div
             key={i}
-            className={`absolute w-1 h-1 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full
+            className={`absolute w-1 h-1 bg-linear-to-r from-pink-500 to-cyan-500 rounded-full
               ${isVisible ? 'animate-bounce' : 'opacity-0'}`}
             style={{
               left: `${20 + i * 15}%`,
@@ -211,7 +211,7 @@ const About = () => {
           <SkeletonLoader />
         ) : (
           <div
-            className={`max-w-3xl mx-auto bg-secondary/30 rounded-xl p-6 md:p-8 backdrop-blur-sm
+            className={`max-w-3xl mx-auto bg-secondary/30 rounded-xl p-6 md:p-8 backdrop-blur-xs
               border border-pink-500/10 hover:border-pink-500/30 transition-all duration-500
               hover:shadow-2xl hover:shadow-pink-500/5 transform ${
               isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-8'
@@ -241,7 +241,7 @@ const About = () => {
                   {[...Array(3)].map((_, i) => (
                     <div
                       key={i}
-                      className="w-2 h-2 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full animate-pulse"
+                      className="w-2 h-2 bg-linear-to-r from-pink-500 to-cyan-500 rounded-full animate-pulse"
                       style={{ animationDelay: `${i * 0.1}s` }}
                     />
                   ))}

app/components/sections/Contact.tsx

@@ -453,7 +453,7 @@ const Contact = () => {
             {/* Submit Button */}
             <Button
               type="submit"
-              className="w-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-medium py-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+              className="w-full bg-linear-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-medium py-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
               disabled={state.isSubmitting || (captchaState.showCaptcha && !captchaState.token)}
             >
               {state.isSubmitting ? (

app/components/sections/GitHubStats.tsx

@@ -171,7 +171,7 @@ const GitHubStatsComponent = () => {
     return (
       <section className="py-16 w-full">
         <div className="container mx-auto px-4 md:px-6">
-          <h2 className="text-3xl md:text-4xl font-bold mb-8 bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 bg-clip-text text-transparent text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8 bg-linear-to-r from-pink-400 via-purple-400 to-indigo-400 bg-clip-text text-transparent text-center">
             GitHub Statistics
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -202,7 +202,7 @@ const GitHubStatsComponent = () => {
             </p>
             <button
               onClick={handleRefresh}
-              className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white px-4 py-2 rounded-lg transition-colors"
+              className="bg-linear-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white px-4 py-2 rounded-lg transition-colors"
               disabled={isRefreshing}
             >
               {isRefreshing ? (
@@ -229,7 +229,7 @@ const GitHubStatsComponent = () => {
     >
       <div className="container mx-auto px-4 md:px-6">
         <div className="flex justify-between items-center mb-8">
-          <h2 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 bg-clip-text text-transparent">
+          <h2 className="text-3xl md:text-4xl font-bold bg-linear-to-r from-pink-400 via-purple-400 to-indigo-400 bg-clip-text text-transparent">
             GitHub Statistics
           </h2>
           <div className="flex items-center gap-4">

app/components/sections/Hero.tsx

@@ -152,7 +152,7 @@ const Hero = () => {
           <div className="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 mb-6">
             {/* Animated border ring */}
             <div
-              className="absolute inset-0 rounded-full p-0.5 bg-gradient-to-r from-[#FF1493] via-[#00FFFF] to-[#FF1493]"
+              className="absolute inset-0 rounded-full p-0.5 bg-linear-to-r from-[#FF1493] via-[#00FFFF] to-[#FF1493]"
               style={{ 
                 animation: "spin 3s linear infinite",
                 // Preload the gradient to prevent flash
@@ -180,7 +180,7 @@ const Hero = () => {
             </div>
 
             {/* Subtle glow effect */}
-            <div className="absolute inset-0 bg-gradient-to-r from-[#FF1493]/10 to-[#00FFFF]/10 rounded-full blur-md animate-pulse"></div>
+            <div className="absolute inset-0 bg-linear-to-r from-[#FF1493]/10 to-[#00FFFF]/10 rounded-full blur-md animate-pulse"></div>
           </div>
 
           {/* Name and Title - Immediately visible */}
@@ -191,7 +191,7 @@ const Hero = () => {
           <div className="flex flex-col sm:flex-row gap-4 mt-4">
             {/* About Me Button */}
             <Button
-              className="bg-gradient-to-r from-[#FF1493] to-[#00FFFF] hover:from-[#FF1493]/80 hover:to-[#00FFFF]/80 text-white font-medium px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-[#FF1493]/20 hover:shadow-[#00FFFF]/30"
+              className="bg-linear-to-r from-[#FF1493] to-[#00FFFF] hover:from-[#FF1493]/80 hover:to-[#00FFFF]/80 text-white font-medium px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-[#FF1493]/20 hover:shadow-[#00FFFF]/30"
               onClick={scrollToAbout}
             >
               About Me

app/components/sections/Languages.tsx

@@ -79,7 +79,7 @@ const Languages = () => {
 
   // Compact loading indicator
   const LoadingOverlay = () => (
-    <div className="absolute inset-0 bg-gray-800/80 backdrop-blur-sm rounded-lg flex items-center justify-center">
+    <div className="absolute inset-0 bg-gray-800/80 backdrop-blur-xs rounded-lg flex items-center justify-center">
       <div className="flex items-center space-x-3">
         <RefreshCw className="w-5 h-5 animate-spin text-[#00FFFF]" />
         <span className="text-gray-300 text-sm">Loading...</span>
@@ -114,7 +114,7 @@ const Languages = () => {
         </h2>
 
         <div className="max-w-4xl mx-auto text-center pt-4 pb-0">
-          <div className="relative w-full max-w-[400px] md:max-w-[460px] lg:max-w-[500px] mx-auto p-[2px] rounded-xl bg-gradient-to-br from-cyan-400/60 to-pink-500/60 shadow-xl hover:shadow-cyan-500/30 transition-all duration-300 group">
+          <div className="relative w-full max-w-[400px] md:max-w-[460px] lg:max-w-[500px] mx-auto p-[2px] rounded-xl bg-linear-to-br from-cyan-400/60 to-pink-500/60 shadow-xl hover:shadow-cyan-500/30 transition-all duration-300 group">
             <div className="rounded-[10px] overflow-hidden bg-[#0d1117]">
               <Image
                 src={imageUrl + (retryCount > 0 ? `&t=${Date.now()}` : '')}

app/components/sections/Projects.tsx

@@ -87,7 +87,7 @@ const fetchGitHubData = async (endpoint: string): Promise<any> => {
 // ===== SKELETON =====
 const ProjectCardSkeleton = memo(() => (
   <div className="bg-gray-900/50 border border-gray-700/50 rounded-xl overflow-hidden h-[320px] animate-pulse">
-    <div className="h-48 bg-gradient-to-r from-gray-700/20 to-gray-700/10" />
+    <div className="h-48 bg-linear-to-r from-gray-700/20 to-gray-700/10" />
     <div className="p-4 space-y-3">
       <div className="h-6 bg-gray-700/50 rounded w-3/4" />
       <div className="h-4 bg-gray-700/50 rounded w-full" />
@@ -138,10 +138,10 @@ const CustomProjectCard = memo(({ project }: { project: CustomProject }) => {
           quality={75}
         />
 
-        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-linear-to-t from-black/70 via-transparent to-transparent" />
 
         {project.featured && (
-          <div className="absolute top-2 right-2 bg-gradient-to-r from-pink-500 to-purple-500 px-2 py-1 rounded-full text-xs text-white font-medium">
+          <div className="absolute top-2 right-2 bg-linear-to-r from-pink-500 to-purple-500 px-2 py-1 rounded-full text-xs text-white font-medium">
             <Star size={10} className="inline mr-1" />
             Featured
           </div>
@@ -165,12 +165,12 @@ const CustomProjectCard = memo(({ project }: { project: CustomProject }) => {
         </div>
       </div>
 
-      <div className="p-4 flex flex-col flex-grow">
+      <div className="p-4 flex flex-col grow">
         <h3 className="text-lg font-bold mb-2 text-cyan-400 line-clamp-1">
           {project.name}
         </h3>
 
-        <p className="text-gray-300 mb-4 text-sm line-clamp-2 flex-grow">
+        <p className="text-gray-300 mb-4 text-sm line-clamp-2 grow">
           {project.description}
         </p>
 
@@ -220,7 +220,7 @@ const GitHubProjectCard = memo(({ project }: { project: GitHubRepo }) => {
           quality={75}
         />
 
-        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-linear-to-t from-black/70 via-transparent to-transparent" />
 
         {project.language && (
           <div className="absolute top-2 left-2 bg-black/60 px-2 py-1 rounded-full text-xs text-white">
@@ -241,12 +241,12 @@ const GitHubProjectCard = memo(({ project }: { project: GitHubRepo }) => {
         </div>
       </div>
 
-      <div className="p-4 flex flex-col flex-grow">
+      <div className="p-4 flex flex-col grow">
         <h3 className="text-lg font-bold mb-2 text-cyan-400 line-clamp-1">
           {project.name}
         </h3>
 
-        <p className="text-gray-300 mb-3 text-sm line-clamp-2 flex-grow">
+        <p className="text-gray-300 mb-3 text-sm line-clamp-2 grow">
           {project.description || "No description available"}
         </p>
 
@@ -366,7 +366,7 @@ const Projects = () => {
     return (
       <section id="projects" className="py-16 w-full">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold mb-8 text-center bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+          <h2 className="text-3xl font-bold mb-8 text-center bg-linear-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
             Projects
           </h2>
           <div className="text-center text-red-400 bg-red-900/20 border border-red-500/20 p-6 rounded-lg">
@@ -392,7 +392,7 @@ const Projects = () => {
       }`}
     >
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl font-bold mb-4 text-center bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+        <h2 className="text-3xl font-bold mb-4 text-center bg-linear-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
           Projects
         </h2>
         <p className="text-gray-400 text-center mb-8 max-w-2xl mx-auto">

app/components/sections/Support.tsx

@@ -99,10 +99,10 @@ const Support = () => {
       ref={supportRef}
       className={`py-16 w-full transition-all duration-1000 ${
         state.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
-      } bg-gradient-to-b from-secondary/10 to-secondary/40`}
+      } bg-linear-to-b from-secondary/10 to-secondary/40`}
     >
       <div className="container mx-auto px-4 sm:px-6 text-center max-w-3xl">
-        <h2 className="text-3xl md:text-4xl font-extrabold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-600 to-indigo-500">
+        <h2 className="text-3xl md:text-4xl font-extrabold mb-6 bg-clip-text text-transparent bg-linear-to-r from-pink-500 via-purple-600 to-indigo-500">
           Support My Work
         </h2>
         <p className="text-sm sm:text-base mb-12 text-gray-300 leading-relaxed">
@@ -120,13 +120,13 @@ const Support = () => {
               onMouseLeave={handleMouseLeave}
               className={`
                 flex items-center gap-3 w-full
-                bg-gradient-to-r from-pink-500 to-purple-600
+                bg-linear-to-r from-pink-500 to-purple-600
                 hover:from-pink-600 hover:to-purple-700
                 text-white font-semibold px-6 py-3 sm:px-8 sm:py-4
                 rounded-lg shadow-lg
                 transition-all duration-300
                 transform hover:scale-105
-                focus:outline-none focus:ring-4 focus:ring-pink-400/60
+                focus:outline-hidden focus:ring-4 focus:ring-pink-400/60
                 disabled:opacity-50 disabled:cursor-not-allowed
               `}
             >
@@ -150,7 +150,7 @@ const Support = () => {
                   {/* Buy Me a Coffee Option */}
                   <button
                     onClick={handleCoffeeClick}
-                    className="w-full flex items-center gap-3 p-3 sm:p-4 text-left text-white hover:bg-gradient-to-r hover:from-pink-500/80 hover:to-purple-600/80 rounded-lg transition-all duration-200 group"
+                    className="w-full flex items-center gap-3 p-3 sm:p-4 text-left text-white hover:bg-linear-to-r hover:from-pink-500/80 hover:to-purple-600/80 rounded-lg transition-all duration-200 group"
                   >
                     <Coffee className="h-5 w-5 text-pink-400 group-hover:text-white transition-colors" />
                     <span className="font-medium text-sm sm:text-base">Buy Me a Coffee</span>
@@ -159,7 +159,7 @@ const Support = () => {
                   {/* UPI Option */}
                   <button
                     onClick={copyUpiId}
-                    className="w-full flex items-center gap-3 p-3 sm:p-4 text-left text-white hover:bg-gradient-to-r hover:from-green-500/80 hover:to-blue-600/80 rounded-lg transition-all duration-200 group"
+                    className="w-full flex items-center gap-3 p-3 sm:p-4 text-left text-white hover:bg-linear-to-r hover:from-green-500/80 hover:to-blue-600/80 rounded-lg transition-all duration-200 group"
                   >
                     {state.copied ? (
                       <Check className="h-5 w-5 text-green-400 group-hover:text-white transition-colors" />

app/components/ui/VisitorCounter.tsx

@@ -123,7 +123,7 @@ const VisitorCounter = () => {
   className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-300 transition-all duration-200 scale-[0.95]"
       aria-label={`${count.toLocaleString()} total visitors`}
     >
-      <Users className={`text-cyan-400 w-4 h-4 flex-shrink-0 ${isUpdating ? 'animate-pulse' : ''}`} />
+      <Users className={`text-cyan-400 w-4 h-4 shrink-0 ${isUpdating ? 'animate-pulse' : ''}`} />
       <span className="tabular-nums">
         {count.toLocaleString()} visitors
       </span>