background animation and navbar logo animation

components/pageTransition/page-transition.css

@@ -0,0 +1,71 @@
+.page-transition-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  transition: background-color 0.5s ease;
+}
+
+.page-transition-overlay.active {
+  background-color: rgba(0, 0, 0, 0.95);
+  pointer-events: all;
+}
+
+.transition-svg {
+  width: 40vw;
+  height: 40vh;
+  max-width: 600px;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.page-transition-overlay.active .transition-svg {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.transition-path {
+  stroke-dasharray: 2000;
+  stroke-dashoffset: 2000;
+  fill: none !important;
+  stroke: url(#transition-gradient);
+  stroke-width: 3px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: url(#transition-glow);
+}
+
+.page-transition-overlay.active .transition-path {
+  animation: drawTransition 1s ease-in-out forwards;
+}
+
+.transition-path:nth-child(1) { animation-delay: 0s; }
+.transition-path:nth-child(2) { animation-delay: 0.2s; }
+
+@keyframes drawTransition {
+  0% {
+    stroke-dashoffset: 2000;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.page-content {
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+.page-content.transitioning {
+  opacity: 0;
+}

components/pageTransition/pageTransition.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import "./page-transition.css";
+
+export default function PageTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    setIsTransitioning(true);
+    
+    const timer = setTimeout(() => {
+      setIsTransitioning(false);
+    }, 1500); // Animatsiya davomiyligi
+
+    return () => clearTimeout(timer);
+  }, [pathname]);
+
+  return (
+    <>
+      {/* Transition overlay */}
+      <div className={`page-transition-overlay ${isTransitioning ? "active" : ""}`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 423.22 424.82"
+          className="transition-svg"
+        >
+          <defs>
+            <linearGradient id="transition-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#ff0000" />
+              <stop offset="50%" stopColor="#ff4444" />
+              <stop offset="100%" stopColor="#ff0000" />
+            </linearGradient>
+            
+            <filter id="transition-glow">
+              <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+          </defs>
+          <g>
+            <polygon
+              className="transition-path"
+              points="352.86 365.08 347.11 365.08 347.11 381 289.38 381 289.38 365.08 283.63 365.08 283.63 381 204.78 381 204.78 365.08 199.03 365.08 199.03 381 141.32 381 141.32 365.08 135.57 365.08 135.57 381 77.87 381 77.87 365.08 71.86 365.08 71.85 381 17.21 381 17.21 386.74 72.11 386.74 72.11 424.82 74.04 424.82 74.04 386.74 350.94 386.74 350.94 424.82 352.86 424.82 352.86 386.74 406.02 386.74 406.02 381 352.86 381 352.86 365.08"
+            />
+            <path
+              className="transition-path"
+              d="m72.11,157.74v73.55l-41.42,23.89h3.83l37.58-21.68-.04,21.68h5.79v-24.99l57.7-33.27v58.26h5.75v-57.15l57.71-33.29v90.44h5.75v-90.43l39.43,22.77,39.43,22.77v44.89h5.74v-41.58l57.73,33.32v8.25h5.75v-95.41h-1.92v82.75l-61.56-35.55v-98.77l59.59-34.35-.97-1.66-58.62,33.81V0h-1.92v42.86h-88.43v115.23l-5.2,3-14.21,8.16-27.25,15.74-11.05,6.37v-73.53l36.14-20.85-.96-1.66-35.19,20.29v-35.03h-1.92v36.13l-65.36,37.7v-37.25h-1.92v38.35l-53.08,30.6.96,1.67,52.12-30.07ZM204.78,48.58h78.85v60.71l-78.85,45.48V48.58Zm0,108.41l78.85-45.49v92.14l-78.85-45.54v-1.11Zm-126.91,1.92l57.7-33.32v69.11l-57.7,33.26v-69.05Z"
+            />
+          </g>
+        </svg>
+      </div>
+      
+      {/* Page content */}
+      <div className={`page-content ${isTransitioning ? "transitioning" : ""}`}>
+        {children}
+      </div>
+    </>
+  );
+}