main catalog card color changed

components/initialLoading/initialLoading.css

@@ -1,3 +1,14 @@
+@keyframes pathPulse {
+  0%,
+  100% {
+    opacity: 1;
+    filter: url(#neon-glow) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
+  }
+  50% {
+    opacity: 0.8;
+    filter: url(#neon-glow) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
+  }
+}
 .initial-loading {
   position: fixed;
   top: 0;
@@ -23,19 +34,24 @@
   flex-direction: column;
   align-items: center;
   gap: 2rem;
-}
-
-.initial-svg {
   width: 250px;
   height: 250px;
-  animation: initialFloat 2s ease-in-out infinite, initialScale 1.5s ease-in-out infinite;
 }
 
-.initial-path {
+.initial-loading-content svg {
-  fill: url(#initial-gradient);
+  width: 100%;
-  filter: url(#initial-glow);
+  height: 100%;
+  animation:
+    initialFloat 2s ease-in-out infinite,
+    initialScale 1.5s ease-in-out infinite;
+}
+
+/* SVG path'larga stil */
+.logo-path {
+  fill: url(#neon-gradient);
+  filter: url(#neon-glow);
   stroke: #ffffff;
-  stroke-width: 2;
+  stroke-width: 0.1;
   animation: pathPulse 1.5s ease-in-out infinite;
 }
 
@@ -53,8 +69,9 @@
 .loading-dots span {
   width: 12px;
   height: 12px;
-  background: #ff0000;
+  background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #c0c0c0 100%);
   border-radius: 50%;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
   animation: dotBounce 1.4s ease-in-out infinite;
 }
 
@@ -72,36 +89,29 @@
 
 /* Animations */
 @keyframes initialFloat {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-30px);
+    transform: translateY(-20px);
   }
 }
 
 @keyframes initialScale {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
-    transform: scale(1.1);
+    transform: scale(1.05);
-  }
-}
-
-@keyframes pathPulse {
-  0%, 100% {
-    opacity: 1;
-    stroke-width: 2;
-  }
-  50% {
-    opacity: 0.7;
-    stroke-width: 3;
   }
 }
 
 @keyframes dotBounce {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
     opacity: 0.5;
   }
@@ -115,3 +125,23 @@
 body:has(.initial-loading:not(.fade-out)) {
   overflow: hidden;
 }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .initial-loading-content {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+@media (max-width: 480px) {
+  .initial-loading-content {
+    width: 150px;
+    height: 150px;
+  }
+
+  .loading-dots span {
+    width: 10px;
+    height: 10px;
+  }
+}

components/pages/products/catalog.tsx

@@ -91,7 +91,7 @@ export default function CatalogCard({
     <Link
       href={navigateLink}
       onClick={updateZustands}
-      className="group relative h-112.5 w-full overflow-hidden rounded-2xl bg-[#17161679] from-[#444242] to-black border hover:border-red-700 border-white/10 transition-all duration-500 hover:-translate-y-1"
+      className="group relative h-112.5 w-full overflow-hidden rounded-2xl bg-[#171616] from-[#2a2a2a] to-black border hover:border-red-700 border-white/10 transition-all duration-500 hover:-translate-y-1"
     >
       {/* Background glow effect */}
       <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />