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;
+}