background animation and navbar logo animation
This commit is contained in:
nabijonovdavronbek619@gmail.com
74
components/backAnimatsiya/back.css
Normal file
74
components/backAnimatsiya/back.css
Normal file
@@ -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;
|
||||
}
|
||||
52
components/backAnimatsiya/backAnimatsiya.tsx
Normal file
52
components/backAnimatsiya/backAnimatsiya.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
35
components/layout/navbarLogo/logo.css
Normal file
35
components/layout/navbarLogo/logo.css
Normal file
@@ -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 */
|
||||
}
|
||||
}
|
||||
60
components/layout/navbarLogo/navbarLogo.tsx
Normal file
60
components/layout/navbarLogo/navbarLogo.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
71
components/pageTransition/page-transition.css
Normal file
71
components/pageTransition/page-transition.css
Normal file
@@ -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;
|
||||
}
|
||||
63
components/pageTransition/pageTransition.tsx
Normal file
63
components/pageTransition/pageTransition.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user