diff --git a/components/initialLoading/initialLoading.css b/components/initialLoading/initialLoading.css index 645410f..c4547d4 100644 --- a/components/initialLoading/initialLoading.css +++ b/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 { - fill: url(#initial-gradient); - filter: url(#initial-glow); +.initial-loading-content svg { + width: 100%; + 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); - } -} - -@keyframes pathPulse { - 0%, 100% { - opacity: 1; - stroke-width: 2; - } - 50% { - opacity: 0.7; - stroke-width: 3; + transform: scale(1.05); } } @keyframes dotBounce { - 0%, 80%, 100% { + 0%, + 80%, + 100% { transform: scale(0); opacity: 0.5; } @@ -114,4 +124,24 @@ /* Smooth scroll prevention */ body:has(.initial-loading:not(.fade-out)) { overflow: hidden; -} \ No newline at end of file +} + +/* 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; + } +} diff --git a/components/pages/products/catalog.tsx b/components/pages/products/catalog.tsx index c419028..f718644 100644 --- a/components/pages/products/catalog.tsx +++ b/components/pages/products/catalog.tsx @@ -91,7 +91,7 @@ export default function CatalogCard({ {/* Background glow effect */}