background animation and navbar logo animation

app/[locale]/home/page.tsx

@@ -1,3 +1,4 @@
+import BackAnimatsiya from "@/components/backAnimatsiya/backAnimatsiya";
 import {
   AboutUs,
   Banner,
@@ -19,6 +20,7 @@ export default function Home() {
       <Blog />
       <Video />
       <OurService />
+      {/* <BackAnimatsiya/> */}
       {/* <Testimonial /> */}
     </main>
   );

app/globals.css

@@ -134,3 +134,5 @@
 body {
   background: #1e1d1c;
 }
+
+

app/layout.tsx

@@ -6,6 +6,7 @@ import "./globals.css";
 import { Footer, Navbar } from "@/components/layout";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
+import BackAnimatsiya from "@/components/backAnimatsiya/backAnimatsiya";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -56,6 +57,7 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <NextIntlClientProvider messages={messages} locale={locale}>
+          <BackAnimatsiya />
           <Navbar />
           {children}
           <Footer />

components/backAnimatsiya/back.css

@@ -0,0 +1,74 @@
+@keyframes drawLine {
+  0% {
+    stroke-dashoffset: 500;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    stroke-dashoffset: -500;
+    opacity: 0;
+  }
+}
+.cls-1,
+.cls-2,
+.cls-3,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7 {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Har bir path uchun animatsiya */
+.draw-path {
+  stroke-dasharray: 2000;
+  stroke-dashoffset: 2000;
+  animation: drawLine 8s ease-in-out infinite;
+  fill: none !important;
+  stroke: rgba(255, 255, 255, 0.3);
+}
+
+/* Har bir elementni ketma-ket chizish uchun delay */
+.draw-path:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.draw-path:nth-child(2) {
+  animation-delay: 0.5s;
+}
+
+.draw-path:nth-child(3) {
+  animation-delay: 1s;
+}
+
+.draw-path:nth-child(4) {
+  animation-delay: 1.5s;
+}
+
+.draw-path:nth-child(5) {
+  animation-delay: 2s;
+}
+
+.draw-path:nth-child(6) {
+  animation-delay: 2.5s;
+}
+
+.draw-path:nth-child(7) {
+  animation-delay: 3s;
+}
+
+.draw-path:nth-child(8) {
+  animation-delay: 3.5s;
+}

components/backAnimatsiya/backAnimatsiya.tsx

@@ -0,0 +1,52 @@
+import "./back.css";
+
+export default function BackAnimatsiya() {
+  return (
+    <div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-100">
+      <svg
+        id="Layer_2"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 423.22 424.82"
+        className="w-full h-full"
+      >
+        <defs>
+          {/* Tailwind gradient uchun yangi linearGradient */}
+          <linearGradient id="tailwind-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#979797" />
+            <stop offset="50%" stopColor="#e4e4e4" />
+            <stop offset="100%" stopColor="#9a9a9a" />
+          </linearGradient>
+        </defs>
+        <g>
+          <polygon
+            className="draw-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="draw-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>
+            <rect className="draw-path" y="277.99" width="12.06" height="64.23" />
+            <path
+              className="draw-path"
+              d="m88.82,342.36c3.93-.65,7.51-1.73,10.75-3.23,3.24-1.5,6.01-3.46,8.32-5.89l1.31,8.97h7.76v-35.25h-39.45v9.72h27.58v1.03c0,3.12-.94,5.84-2.8,8.18-1.87,2.34-4.81,4.13-8.83,5.38-4.02,1.25-9.3,1.87-15.85,1.87-5.49,0-10.28-.73-14.4-2.2-4.11-1.46-7.32-3.8-9.63-7.01-2.31-3.21-3.46-7.46-3.46-12.76v-2.24c0-3.93.75-7.28,2.24-10.05,1.5-2.77,3.58-5.03,6.26-6.78,2.68-1.74,5.8-3.02,9.35-3.83,3.55-.81,7.39-1.21,11.5-1.21,3.37,0,6.56.2,9.58.61,3.02.41,5.75,1.11,8.18,2.1,2.43,1,4.35,2.38,5.75,4.16,1.4,1.78,2.1,3.97,2.1,6.59h11.78c0-4.05-.89-7.56-2.66-10.52-1.78-2.96-4.33-5.41-7.67-7.34-3.33-1.93-7.32-3.38-11.97-4.35-4.64-.97-9.83-1.45-15.57-1.45-8.6,0-15.99,1.25-22.16,3.74-6.17,2.49-10.89,6.22-14.16,11.17-3.27,4.95-4.91,11.08-4.91,18.37,0,11.16,3.23,19.48,9.68,24.96,6.45,5.49,16.16,8.23,29.12,8.23,4.24,0,8.32-.33,12.25-.98Z"
+            />
+            <path
+              className="draw-path"
+              d="m160.8,299.31c1.68,1.81,3.3,3.49,4.86,5.05l37.96,37.86h11.12v-64.23h-11.59v37.02c0,1.31.03,2.9.09,4.77.06,1.87.12,3.43.19,4.68h-.75c-.75-.87-1.67-1.87-2.76-2.99-1.09-1.12-2.15-2.23-3.18-3.32-1.03-1.09-1.92-1.98-2.66-2.66l-37.86-37.49h-11.5v64.23h11.59v-36.37c0-2.31-.02-4.46-.05-6.45-.03-1.99-.08-3.46-.14-4.39h.65c1,1.06,2.34,2.49,4.02,4.3Z"
+            />
+            <path
+              className="draw-path"
+              d="m242.6,277.99v35.34c0,6.11,1.26,11.42,3.79,15.94,2.52,4.52,6.36,7.99,11.5,10.42,5.14,2.43,11.64,3.65,19.49,3.65s14.33-1.21,19.45-3.65c5.11-2.43,8.93-5.9,11.45-10.42,2.52-4.52,3.79-9.83,3.79-15.94v-35.34h-12.06v34.97c0,6.48-1.96,11.47-5.89,14.96-3.93,3.49-9.5,5.23-16.73,5.23s-12.89-1.74-16.78-5.23c-3.9-3.49-5.84-8.48-5.84-14.96v-34.97h-12.15Z"
+            />
+            <path
+              className="draw-path"
+              d="m404.99,277.99l-17.2,37.02c-.5,1.12-1.11,2.51-1.82,4.16-.72,1.65-1.42,3.32-2.1,5-.69,1.68-1.31,3.18-1.87,4.49h-.56c-.62-1.5-1.3-3.12-2.01-4.86-.72-1.74-1.42-3.44-2.1-5.1-.69-1.65-1.25-2.94-1.68-3.88l-17.2-36.83h-18.51v64.23h11.59v-40.29c0-1.31-.02-2.67-.05-4.07-.03-1.4-.06-2.76-.09-4.07-.03-1.31-.08-2.4-.14-3.27h.75c.31.81.67,1.79,1.07,2.94.4,1.15.89,2.37,1.45,3.65.56,1.28,1.12,2.51,1.68,3.69l19.26,41.42h11.87l19.17-41.42c.43-.94.92-2.02,1.45-3.27.53-1.25,1.04-2.49,1.54-3.74.5-1.25.9-2.34,1.22-3.27h.75c-.06,1-.13,2.18-.19,3.55-.06,1.37-.11,2.74-.14,4.11-.03,1.37-.05,2.62-.05,3.74v40.29h12.15v-64.23h-18.23Z"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}

components/layout/navbar.tsx

@@ -5,6 +5,7 @@ import { ChevronDown, Phone, Menu, X } from "lucide-react";
 import Image from "next/image";
 import LanguageSelectRadix from "../languageSwitcher";
 import { useLocale, useTranslations } from "next-intl";
+import NavbarLogo from "./navbarLogo/navbarLogo";
 
 export function Navbar() {
   const locale = useLocale();
@@ -41,13 +42,7 @@ export function Navbar() {
             <Link href={`/${locale}/home`} className="hover:cursor-pointer">
               <div className="flex items-center gap-2">
                 <div className=" flex items-center justify-center">
-                  <Image
-                    src="/images/IGNUM/PNG/1.@6x.png"
-                    alt="logo image"
-                    width={70}
-                    height={70}
-                    className=""
-                  />
+                 <NavbarLogo/>
                 </div>
               </div>
             </Link>

components/layout/navbarLogo/logo.css

@@ -0,0 +1,35 @@
+.logo-path {
+  stroke-dasharray: 2000;
+  stroke-dashoffset: 2000;
+  animation: drawLogo 3s ease-in-out forwards;
+  fill: none !important;
+  stroke: url(#neon-gradient);
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: url(#neon-glow);
+}
+
+/* Ketma-ket chizish */
+.logo-path:nth-child(1) { animation-delay: 0s; }
+.logo-path:nth-child(2) { animation-delay: 0.3s; }
+.logo-path:nth-child(3) { animation-delay: 0.6s; }
+.logo-path:nth-child(4) { animation-delay: 0.9s; }
+.logo-path:nth-child(5) { animation-delay: 1.2s; }
+.logo-path:nth-child(6) { animation-delay: 1.5s; }
+.logo-path:nth-child(7) { animation-delay: 1.8s; }
+
+@keyframes drawLogo {
+  0% {
+    stroke-dashoffset: 2000;
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    fill: url(#neon-gradient); /* Oxirida to'ldiriladi */
+  }
+}

components/layout/navbarLogo/navbarLogo.tsx

@@ -0,0 +1,60 @@
+import "./logo.css";
+
+export default function NavbarLogo() {
+  return (
+    <div className="relative w-24 h-12">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 423.22 424.82"
+        className="w-full h-full"
+      >
+        <defs>
+          {/* Qizil neon gradient */}
+          <linearGradient id="neon-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#979797" />
+            <stop offset="50%" stopColor="#e4e4e4" />
+            <stop offset="100%" stopColor="#9a9a9a" />
+          </linearGradient>
+          
+          {/* Neon glow filter */}
+          <filter id="neon-glow">
+            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+            <feMerge>
+              <feMergeNode in="coloredBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+        <g>
+          <polygon
+            className="logo-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="logo-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>
+            <rect className="logo-path" y="277.99" width="12.06" height="64.23" />
+            <path
+              className="logo-path"
+              d="m88.82,342.36c3.93-.65,7.51-1.73,10.75-3.23,3.24-1.5,6.01-3.46,8.32-5.89l1.31,8.97h7.76v-35.25h-39.45v9.72h27.58v1.03c0,3.12-.94,5.84-2.8,8.18-1.87,2.34-4.81,4.13-8.83,5.38-4.02,1.25-9.3,1.87-15.85,1.87-5.49,0-10.28-.73-14.4-2.2-4.11-1.46-7.32-3.8-9.63-7.01-2.31-3.21-3.46-7.46-3.46-12.76v-2.24c0-3.93.75-7.28,2.24-10.05,1.5-2.77,3.58-5.03,6.26-6.78,2.68-1.74,5.8-3.02,9.35-3.83,3.55-.81,7.39-1.21,11.5-1.21,3.37,0,6.56.2,9.58.61,3.02.41,5.75,1.11,8.18,2.1,2.43,1,4.35,2.38,5.75,4.16,1.4,1.78,2.1,3.97,2.1,6.59h11.78c0-4.05-.89-7.56-2.66-10.52-1.78-2.96-4.33-5.41-7.67-7.34-3.33-1.93-7.32-3.38-11.97-4.35-4.64-.97-9.83-1.45-15.57-1.45-8.6,0-15.99,1.25-22.16,3.74-6.17,2.49-10.89,6.22-14.16,11.17-3.27,4.95-4.91,11.08-4.91,18.37,0,11.16,3.23,19.48,9.68,24.96,6.45,5.49,16.16,8.23,29.12,8.23,4.24,0,8.32-.33,12.25-.98Z"
+            />
+            <path
+              className="logo-path"
+              d="m160.8,299.31c1.68,1.81,3.3,3.49,4.86,5.05l37.96,37.86h11.12v-64.23h-11.59v37.02c0,1.31.03,2.9.09,4.77.06,1.87.12,3.43.19,4.68h-.75c-.75-.87-1.67-1.87-2.76-2.99-1.09-1.12-2.15-2.23-3.18-3.32-1.03-1.09-1.92-1.98-2.66-2.66l-37.86-37.49h-11.5v64.23h11.59v-36.37c0-2.31-.02-4.46-.05-6.45-.03-1.99-.08-3.46-.14-4.39h.65c1,1.06,2.34,2.49,4.02,4.3Z"
+            />
+            <path
+              className="logo-path"
+              d="m242.6,277.99v35.34c0,6.11,1.26,11.42,3.79,15.94,2.52,4.52,6.36,7.99,11.5,10.42,5.14,2.43,11.64,3.65,19.49,3.65s14.33-1.21,19.45-3.65c5.11-2.43,8.93-5.9,11.45-10.42,2.52-4.52,3.79-9.83,3.79-15.94v-35.34h-12.06v34.97c0,6.48-1.96,11.47-5.89,14.96-3.93,3.49-9.5,5.23-16.73,5.23s-12.89-1.74-16.78-5.23c-3.9-3.49-5.84-8.48-5.84-14.96v-34.97h-12.15Z"
+            />
+            <path
+              className="logo-path"
+              d="m404.99,277.99l-17.2,37.02c-.5,1.12-1.11,2.51-1.82,4.16-.72,1.65-1.42,3.32-2.1,5-.69,1.68-1.31,3.18-1.87,4.49h-.56c-.62-1.5-1.3-3.12-2.01-4.86-.72-1.74-1.42-3.44-2.1-5.1-.69-1.65-1.25-2.94-1.68-3.88l-17.2-36.83h-18.51v64.23h11.59v-40.29c0-1.31-.02-2.67-.05-4.07-.03-1.4-.06-2.76-.09-4.07-.03-1.31-.08-2.4-.14-3.27h.75c.31.81.67,1.79,1.07,2.94.4,1.15.89,2.37,1.45,3.65.56,1.28,1.12,2.51,1.68,3.69l19.26,41.42h11.87l19.17-41.42c.43-.94.92-2.02,1.45-3.27.53-1.25,1.04-2.49,1.54-3.74.5-1.25.9-2.34,1.22-3.27h.75c-.06,1-.13,2.18-.19,3.55-.06,1.37-.11,2.74-.14,4.11-.03,1.37-.05,2.62-.05,3.74v40.29h12.15v-64.23h-18.23Z"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}

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

components/pages/about/story.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 export function Story() {
   const t = useTranslations();
   return (
-    <div className="bg-[#1e1d1c] pb-0 relative z-10 max-[350px]:pb-30 ">
+    <div className="pb-0 relative z-10 max-[350px]:pb-30 ">
       <div className="max-w-260 mx-auto px-4">
         <section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
           {/* Background Image */}

public/icon.svg

@@ -1,26 +0,0 @@
-<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    @media (prefers-color-scheme: light) {
-      .background { fill: black; }
-      .foreground { fill: white; }
-    }
-    @media (prefers-color-scheme: dark) {
-      .background { fill: white; }
-      .foreground { fill: black; }
-    }
-  </style>
-  <g clip-path="url(#clip0_7960_43945)">
-    <rect class="background" width="180" height="180" rx="37" />
-    <g style="transform: scale(95%); transform-origin: center">
-      <path class="foreground"
-        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
-      <path class="foreground"
-        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
-    </g>
-  </g>
-  <defs>
-    <clipPath id="clip0_7960_43945">
-      <rect width="180" height="180" fill="white" />
-    </clipPath>
-  </defs>
-</svg>

public/images/IGNUM/SVG/1._6x.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="2540.000000pt" height="2550.000000pt" viewBox="0 0 2540.000000 2550.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,2550.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4495 8870 c-501 -26 -925 -130 -1278 -313 l-120 -61 248 -241 248
+-240 96 46 c331 162 833 235 1361 200 420 -28 715 -99 924 -223 104 -61 224
+-185 270 -278 38 -79 66 -186 66 -257 l0 -43 160 0 c88 0 160 2 160 4 0 3
+-323 317 -718 699 l-719 694 -94 7 c-180 11 -445 14 -604 6z"/>
+<path d="M4662 7025 c3 -45 4 -47 258 -290 l255 -245 567 0 568 0 0 -75 c0
+-251 -130 -498 -333 -633 l-38 -25 93 -94 c51 -52 141 -139 200 -194 l106
+-100 66 62 c37 34 69 59 72 56 3 -3 15 -70 26 -149 l20 -143 116 -117 117
+-118 132 0 133 0 0 1055 0 1055 -1181 0 -1180 0 3 -45z"/>
+<path d="M8690 5221 l0 -261 265 0 c146 0 265 2 265 4 0 2 -119 119 -265 261
+l-265 257 0 -261z"/>
+<path d="M8140 3105 l0 -475 -1089 0 -1089 0 174 -170 175 -170 1681 0 1681 0
+-174 170 -174 169 -422 1 -423 0 0 408 0 407 -74 68 -75 67 -95 0 -96 0 0
+-475z"/>
+</g>
+</svg>

public/placeholder-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>