Merge pull request #14718 from supabase/chore/update-vector-page

Vector page animations
This commit is contained in:
Ant Wilson authored and GitHub committed 2023-06-01 12:01:57 +01:00
commit f48ae5ac5d
9 files changed
+2136 -814

No files matched your search

@@ -44,8 +44,14 @@ const HighlightCard = ({ highlight, index }: { highlight: Highlight; index: numb
onMouseLeave={() => setIsHovered(false)}
animate={isInView ? animate : initial}
>
<InteractiveShimmerCard innerClassName="flex flex-col !bg-scale-200">
<InteractiveShimmerCard innerClassName="flex flex-col !bg-scale-100">
<div className="relative w-full aspect-[1.35/1] mb-4">
<div
className="absolute inset-0 w-full h-full z-10"
style={{
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--colors-scale1))`,
}}
/>
{highlight.image && <Img isHovered={isHovered} />}
{highlight.svg && highlight.svg}
</div>
@@ -25,7 +25,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }
aria-selected={isActive}
role="tab"
>
<div className="relative w-full h-[2px] bg-scale-700 group-hover:bg-scale-800 rounded-full overflow-hidden">
<div className="relative w-full h-[2px] bg-scale-700 opacity-80 group-hover:opacity-100 rounded-full overflow-hidden">
{isActive && (
<motion.div
className={[
File diff suppressed because it is too large. Load diff
@@ -11,14 +11,11 @@ function getRandomNumber(min: number, max: number) {
const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const ref = React.useRef<any>()
const states = ['off', 'medium', 'high']
const states = ['1', '2', '3']
const colors = {
green: isDarkMode ? '#1CF7C3' : '#00B99F',
gray: isDarkMode ? '#151918' : '#D3D3D3',
}
const indices = [
3, 11, 14, 23, 27, 35, 42, 48, 55, 62, 67, 71, 81, 83, 91, 98, 103, 107, 110, 115,
]
const transitionDuration = 250
React.useEffect(() => {
@@ -27,24 +24,18 @@ const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => {
const circles = [...ref.current?.querySelectorAll('circle')]
const interval = setInterval(() => {
circles?.map((circle, index: any) => {
const isMatch = indices.includes(index)
if (!isMatch) {
return
}
circles?.map((circle) => {
const nextState = states[Math.floor(Math.random() * states.length)]
const currentState = circle.dataset.state
const pulse =
Math.random() > 0.2 &&
((currentState === 'off' && nextState === 'high') ||
(currentState === 'off' && nextState === 'medium') ||
(currentState === 'medium' && nextState === 'high'))
((currentState === '1' && nextState === '3') ||
(currentState === '1' && nextState === '2') ||
(currentState === '2' && nextState === '3'))
if (pulse) {
const delay = getRandomNumber(50, 100)
const delay = getRandomNumber(40, 90)
timeoutIds.push(
setTimeout(() => {
@@ -59,13 +50,13 @@ const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => {
)
}
if (currentState === 'high' && nextState === 'medium' && pulse) {
circle.dataset.state = 'off'
if (currentState === '3' && nextState === '2' && pulse) {
circle.dataset.state = '1'
} else {
circle.dataset.state = nextState
}
})
}, 300)
}, 200)
return () => {
clearInterval(interval)
@@ -75,12 +66,6 @@ const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => {
return (
<>
<div
className="absolute inset-0 w-full h-full z-10"
style={{
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--colors-scale2))`,
}}
/>
<svg
ref={ref}
width="100%"
@@ -1,28 +1,298 @@
import Image from 'next/image'
import React from 'react'
import { useTheme } from 'common/Providers'
import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
const OpenAIImage = () => {
const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const lineVariants = {
animate: {
strokeDashoffset: -38,
transition: {
ease: 'linear',
duration: 3,
yoyo: false,
repeat: Infinity,
},
},
initial: {
strokeDashoffset: 0,
},
}
const colors = {
glow: isDarkMode ? '#009C77' : '#00FFD9',
rectStart: isDarkMode ? '#17FDDF' : '#49615E',
rectEnd: isDarkMode ? '#10FFE0' : '#202020',
cardBgStart: isDarkMode ? '#171717' : 'white',
cardBgEnd: isDarkMode ? '#171717' : 'white',
openAIStart: isDarkMode ? '#89FFCA' : '#4FD7B6',
openAIEnd: isDarkMode ? '#D0FAE6' : '#4F7362',
openAIStrokeStart: isDarkMode ? '#A5FFD6' : '#5F5F5F',
openAIStrokeEnd: isDarkMode ? '#D0FAE6' : '#D6D6D6',
openAIAltStart: isDarkMode ? '#00DBA7' : '#00DBA7',
openAIAltEnd: isDarkMode ? '#171717' : '#DFDFDF',
}
return (
<>
<div
className="absolute inset-0 w-full h-full z-10"
style={{
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--colors-scale2))`,
}}
/>
<Image
src={
isDarkMode
? '/images/product/vector/highlight-openai.jpg'
: '/images/product/vector/highlight-openai-light.jpg'
}
alt="OpenAI vector graphic"
layout="fill"
objectFit="cover"
/>
<div className="w-[44%] h-[44%] -translate-x-[2px] absolute z-10 inset-0 top-auto bottom-[16%] m-auto">
<Image
src={
isDarkMode
? '/images/product/vector/openai-logo-dark.png'
: '/images/product/vector/openai-logo-light.png'
}
layout="fill"
objectFit="contain"
alt="OpenAi logo"
/>
</div>
<LazyMotion features={domAnimation}>
<svg
width="100%"
height="100%"
viewBox="0 0 285 211"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_f_4346_99959)">
<ellipse cx="141.35" cy="170.604" rx="84" ry="83.5" fill={colors.glow} />
</g>
{/* rectangles grid */}
<m.path
d="M-75.6504 84.9567C-75.6504 71.7018 -64.9052 60.9567 -51.6504 60.9567H29.61C42.8649 60.9567 53.61 71.7018 53.61 84.9567V177.104C53.61 190.358 42.8648 201.104 29.61 201.104H-51.6504C-64.9052 201.104 -75.6504 190.358 -75.6504 177.104V84.9567Z"
stroke="url(#paint0_radial_4346_99959)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<m.path
d="M229.089 84.9567C229.089 71.7018 239.834 60.9567 253.089 60.9567H334.349C347.604 60.9567 358.349 71.7018 358.349 84.9567V177.104C358.349 190.358 347.604 201.104 334.349 201.104H253.089C239.834 201.104 229.089 190.358 229.089 177.104V84.9567Z"
stroke="url(#paint1_radial_4346_99959)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<m.path
d="M-75.6504 -64.8964C-75.6504 -78.1512 -64.9052 -88.8964 -51.6504 -88.8964H29.61C42.8649 -88.8964 53.61 -78.1512 53.61 -64.8964V27.2506C53.61 40.5055 42.8648 51.2506 29.61 51.2506H-51.6504C-64.9052 51.2506 -75.6504 40.5055 -75.6504 27.2506V-64.8964Z"
stroke="url(#paint2_radial_4346_99959)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<m.path
d="M229.089 -64.8964C229.089 -78.1512 239.834 -88.8964 253.089 -88.8964H334.35C347.604 -88.8964 358.35 -78.1512 358.35 -64.8964V27.2506C358.35 40.5055 347.604 51.2506 334.35 51.2506H253.089C239.834 51.2506 229.089 40.5055 229.089 27.2506V-64.8964Z"
stroke="url(#paint3_radial_4346_99959)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<m.path
d="M66.0322 -64.8964C66.0322 -78.1512 76.7774 -88.8964 90.0322 -88.8964H192.395C205.65 -88.8964 216.395 -78.1512 216.395 -64.8964V27.2506C216.395 40.5055 205.65 51.2506 192.395 51.2506H90.0323C76.7774 51.2506 66.0322 40.5055 66.0322 27.2506V-64.8964Z"
stroke="url(#paint4_radial_4346_99959)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<g filter="url(#filter1_b_4346_99959)">
<rect
x="66.3496"
y="62.1036"
width="150"
height="139"
rx="24"
fill="url(#paint5_radial_4346_99959)"
/>
<rect
x="65.8496"
y="61.6036"
width="151"
height="140"
rx="24.5"
stroke="url(#paint8_linear_4346_99959)"
/>
</g>
<path
d="M108.131 60.9898H174.594M141.335 61.2199V1.93152"
stroke="url(#paint9_radial_4346_99959)"
strokeWidth="3"
/>
<g filter="url(#filter2_f_4346_99959)">
<path
d="M94.3145 60.9898H188.411M141.335 61.2199V1.93152"
stroke="url(#paint10_radial_4346_99959)"
strokeWidth="3"
/>
</g>
<defs>
<filter
id="filter0_f_4346_99959"
x="-188.65"
y="-158.896"
width="660"
height="659"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="123" result="effect1_foregroundBlur_4346_99959" />
</filter>
<filter
id="filter1_b_4346_99959"
x="52.3134"
y="48.0674"
width="178.072"
height="167.072"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="6.51812" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_99959"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_99959"
result="shape"
/>
</filter>
<filter
id="filter2_f_4346_99959"
x="90.3145"
y="-2.06848"
width="102.096"
height="68.5583"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_4346_99959" />
</filter>
<radialGradient
id="paint0_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.214 58.5257) rotate(90) scale(123.673 132.688)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint1_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.214 58.5257) rotate(90) scale(123.673 132.688)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint2_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.214 58.5257) rotate(90) scale(123.673 132.688)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint3_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.214 58.5257) rotate(90) scale(123.673 132.688)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint4_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.214 58.5257) rotate(90) scale(123.673 132.688)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint5_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.35 88.487) rotate(90) scale(112.617 166.125)"
>
<stop stopColor={colors.cardBgStart} />
<stop offset="1" stopColor={colors.cardBgEnd} />
</radialGradient>
<linearGradient
id="paint8_linear_4346_99959"
x1="106.634"
y1="58.1285"
x2="106.634"
y2="134.096"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.openAIAltStart} />
<stop offset="1" stopColor={colors.openAIAltEnd} stopOpacity="0.55" />
</linearGradient>
<radialGradient
id="paint9_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.766 50.0377) rotate(90) scale(32.4982 32.4982)"
>
<stop stopColor="#3AFFE5" />
<stop offset="1" stopColor="#38BBAA" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint10_radial_4346_99959"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.767 50.0377) rotate(90) scale(32.4982 32.4982)"
>
<stop stopColor="#00FFDE" />
<stop offset="1" stopColor="#38BBAA" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
</LazyMotion>
</>
)
}
@@ -1,28 +1,487 @@
import React from 'react'
import React, { useEffect, useRef } from 'react'
import { useTheme } from 'common/Providers'
import Image from 'next/image'
import { DEFAULT_EASE } from '~/lib/animations'
import { LazyMotion, domAnimation, m } from 'framer-motion'
const PGvectorImg = () => {
const PGvectorImg = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const svgRef = useRef<any>()
const colors = {
circles1: isDarkMode ? '#105C3B' : '#008B4F',
circles2: isDarkMode ? '#1A2520' : '#DDDFDE',
pgLogoStart: isDarkMode ? '#70F8BB' : '#7CDBC5',
pgLogoEnd: isDarkMode ? '#A3A3A3' : '#006136',
pgLogoBg: isDarkMode ? '#161616' : 'white',
radialBgStart: isDarkMode ? '#131313' : '#F1F3F5',
radialBgEnd: isDarkMode ? '#161616' : '#F8F9FA',
coordinatesStart: isDarkMode ? '#23FF98' : '#002313',
coordinatesEnd: isDarkMode ? '#49FFAA' : '#032C18',
rectStart: isDarkMode ? '#17FDDF' : '#49615E',
rectEnd: isDarkMode ? '#10FFE0' : '#202020',
arrow: isDarkMode ? '#02FF8F' : '#00542F',
asdfStart: isDarkMode ? '#23FF98' : '#002313',
asdfEnd: isDarkMode ? '#49FFAA' : '#032C18',
}
const transition = (type: string) => ({
transition: `${type} 0.18s cubic-bezier(${DEFAULT_EASE})`,
})
const lineVariants = {
animate: {
strokeDashoffset: 38,
transition: {
ease: 'linear',
duration: 3,
yoyo: false,
repeat: Infinity,
},
},
initial: {
strokeDashoffset: 0,
},
}
useEffect(() => {
const coordinates = svgRef.current.querySelector('#coordinates')
const circles = svgRef.current.querySelector('#circles')
const arrowtl = svgRef.current.querySelector('#arrow-tl')
const arrowtr = svgRef.current.querySelector('#arrow-tr')
const arrowbl = svgRef.current.querySelector('#arrow-bl')
const arrowbr = svgRef.current.querySelector('#arrow-br')
coordinates.style.opacity = isHovered ? '1' : '0.4'
circles.style.opacity = isHovered ? '1' : '0.2'
arrowtl.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(10px,4px,0)'
arrowtr.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(-5px,2px,0)'
arrowbl.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(4px,-2px,0)'
arrowbr.style.transform = isHovered ? 'translate3d(0,0,0)' : 'translate3d(-8px,-1px,0)'
}, [isHovered])
return (
<>
<div
className="absolute inset-0 w-full h-full z-10"
style={{
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--colors-scale2))`,
}}
/>
<Image
src={
isDarkMode
? '/images/product/vector/highlight-pgvector.svg'
: '/images/product/vector/highlight-pgvector-light.svg'
}
alt="OpenAI vector graphic"
layout="fill"
objectFit="cover"
/>
<LazyMotion features={domAnimation}>
<svg
ref={svgRef}
width="100%"
height="100%"
viewBox="0 0 284 211"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="rectangles">
<m.rect
x="143.039"
y="23.9514"
width="235.466"
height="117.627"
rx="3"
stroke="url(#paint0_radial_4346_99807)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<m.rect
x="-39.0586"
y="151.092"
width="146.622"
height="70.089"
rx="3"
stroke="url(#paint1_radial_4346_99807)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
<m.rect
x="-61.9512"
y="-24.5244"
width="144.514"
height="110.236"
rx="3"
stroke="url(#paint2_radial_4346_99807)"
strokeWidth="0.5"
strokeDasharray="2.05 3.41"
variants={lineVariants}
initial={'initial'}
animate={isHovered ? 'animate' : 'initial'}
/>
</g>
<path
d="M102.12 21.5861L102.005 24.4706L104.56 23.1283L102.12 21.5861ZM122.178 59.2388L103.388 23.4619L102.945 23.6944L121.735 59.4712L122.178 59.2388Z"
fill="url(#paint3_linear_4346_99807)"
/>
<path
d="M168.931 34.4283L166.381 35.7809L168.828 37.3132L168.931 34.4283ZM146.498 70.7159L167.949 36.4679L167.525 36.2025L146.074 70.4505L146.498 70.7159Z"
fill="url(#paint4_linear_4346_99807)"
/>
<path
d="M-34.8744 131.287L-32.2163 132.413L-32.5702 129.548L-34.8744 131.287ZM53.3456 120.138L-32.672 130.763L-32.6107 131.259L53.4069 120.635L53.3456 120.138Z"
fill="url(#paint5_linear_4346_99807)"
/>
<path
d="M25.7628 140.804L28.5573 141.529L27.7872 138.747L25.7628 140.804ZM81.9615 124.99L27.8646 139.963L27.998 140.445L82.0949 125.472L81.9615 124.99Z"
fill="url(#paint6_linear_4346_99807)"
/>
<path
d="M0.902166 113.734L3.13731 115.561L3.60186 112.712L0.902166 113.734ZM34.0495 118.886L3.16307 113.85L3.08261 114.343L33.969 119.379L34.0495 118.886Z"
fill="url(#paint7_linear_4346_99807)"
/>
<path
d="M214.22 162.817L212.597 160.43L211.341 163.03L214.22 162.817ZM183.908 148.45L212.086 162.064L212.303 161.614L184.125 148L183.908 148.45Z"
fill="url(#paint8_linear_4346_99807)"
/>
<path
d="M291.251 175.737L289.496 173.445L288.389 176.111L291.251 175.737ZM224.422 148.251L289.077 175.105L289.269 174.643L224.613 147.789L224.422 148.251Z"
fill="url(#paint9_linear_4346_99807)"
/>
<path
d="M280.556 66.6293L277.67 66.6719L279.15 69.1503L280.556 66.6293ZM246.828 87.062L278.752 67.9976L278.496 67.5683L246.572 86.6327L246.828 87.062Z"
fill="url(#paint10_linear_4346_99807)"
/>
<path
d="M291.098 86.7516L288.408 85.7035L288.845 88.557L291.098 86.7516ZM166.636 106.074L288.912 87.3395L288.836 86.8453L166.561 105.58L166.636 106.074Z"
fill="url(#paint11_linear_4346_99807)"
/>
<g id="circles">
<circle
cx="52.3215"
cy="64.3578"
r="3.04773"
transform="rotate(-9.50119 52.3215 64.3578)"
stroke={colors.circles1}
/>
<circle cx="262.54" cy="116.714" r="3.04773" stroke={colors.circles1} />
<circle cx="227.565" cy="52.9802" r="3.04773" stroke={colors.circles1} />
<circle cx="199.868" cy="113.08" r="3.04773" stroke={colors.circles2} />
<circle
cx="121.351"
cy="137.441"
r="3.04773"
transform="rotate(-9.50118 121.351 137.441)"
stroke={colors.circles2}
/>
<circle
cx="72.6067"
cy="162.583"
r="3.04773"
transform="rotate(-9.5012 72.6067 162.583)"
stroke={colors.circles1}
/>
</g>
<rect
x="-57.6504"
y="0.103638"
width="400"
height="210"
fill="url(#paint12_radial_4346_99807)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M183.411 113.532C182.915 112.029 181.615 110.983 179.934 110.731C179.141 110.613 178.234 110.663 177.159 110.885C175.287 111.271 173.898 111.418 172.884 111.447C176.711 104.986 179.822 97.6186 181.613 90.6834C184.51 79.4696 182.962 74.361 181.153 72.0501C176.367 65.934 169.383 62.6482 160.958 62.5475C156.464 62.4926 152.518 63.38 150.46 64.018C148.543 63.6801 146.483 63.4913 144.32 63.4563C140.268 63.3917 136.687 64.2751 133.627 66.0908C131.933 65.5181 129.215 64.7106 126.075 64.1952C118.691 62.9829 112.739 63.9276 108.386 67.0028C103.115 70.7263 100.671 77.1956 101.123 86.2311C101.267 89.0999 102.871 97.8281 105.398 106.106C106.85 110.864 108.399 114.815 110.001 117.85C112.272 122.155 114.703 124.69 117.432 125.6C118.961 126.109 121.74 126.466 124.663 124.032C125.033 124.481 125.527 124.927 126.183 125.341C127.016 125.866 128.035 126.295 129.052 126.55C132.719 127.466 136.153 127.237 139.082 125.952C139.1 126.473 139.114 126.971 139.126 127.401C139.146 128.098 139.165 128.782 139.19 129.421C139.364 133.745 139.658 137.107 140.53 139.459C140.577 139.588 140.642 139.785 140.71 139.994C141.145 141.326 141.872 143.554 143.721 145.3C145.637 147.108 147.954 147.662 150.076 147.662C151.14 147.662 152.155 147.523 153.046 147.332C156.221 146.651 159.826 145.615 162.434 141.901C164.9 138.39 166.099 133.103 166.316 124.771C166.344 124.535 166.37 124.31 166.395 124.096C166.411 123.951 166.429 123.803 166.446 123.656L167.027 123.707L167.177 123.717C170.41 123.864 174.364 123.178 176.792 122.051C178.711 121.16 184.859 117.914 183.411 113.532Z"
fill={colors.pgLogoBg}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M183.411 113.532C182.915 112.029 181.615 110.983 179.934 110.731C179.141 110.613 178.234 110.663 177.159 110.885C175.287 111.271 173.898 111.418 172.884 111.447C176.711 104.986 179.822 97.6186 181.613 90.6834C184.51 79.4696 182.962 74.361 181.153 72.0501C176.367 65.934 169.383 62.6482 160.958 62.5475C156.464 62.4926 152.518 63.38 150.46 64.018C148.543 63.6801 146.483 63.4913 144.32 63.4563C140.268 63.3917 136.687 64.2751 133.627 66.0908C131.933 65.5181 129.215 64.7106 126.075 64.1952C118.691 62.9829 112.739 63.9276 108.386 67.0028C103.115 70.7263 100.671 77.1956 101.123 86.2311C101.267 89.0999 102.871 97.8281 105.398 106.106C106.85 110.864 108.399 114.815 110.001 117.85C112.272 122.155 114.703 124.69 117.432 125.6C118.961 126.109 121.74 126.466 124.663 124.032C125.033 124.481 125.527 124.927 126.183 125.341C127.016 125.866 128.035 126.295 129.052 126.55C132.719 127.466 136.153 127.237 139.082 125.952C139.1 126.473 139.114 126.971 139.126 127.401C139.146 128.098 139.165 128.782 139.19 129.421C139.364 133.745 139.658 137.107 140.53 139.459C140.577 139.588 140.642 139.785 140.71 139.994C141.145 141.326 141.872 143.554 143.721 145.3C145.637 147.108 147.954 147.662 150.076 147.662C151.14 147.662 152.155 147.523 153.046 147.332C156.221 146.651 159.826 145.615 162.434 141.901C164.9 138.39 166.099 133.103 166.316 124.771C166.344 124.535 166.37 124.31 166.395 124.096C166.411 123.951 166.429 123.803 166.446 123.656L167.027 123.707L167.177 123.717C170.41 123.864 174.364 123.178 176.792 122.051C178.711 121.16 184.859 117.914 183.411 113.532ZM135.912 88.7858C135.046 88.6652 134.261 88.7769 133.864 89.0773C133.641 89.2465 133.572 89.4424 133.553 89.5773C133.504 89.9345 133.754 90.3294 133.908 90.5331C134.343 91.1098 134.978 91.5061 135.607 91.5935C135.699 91.6061 135.789 91.6122 135.879 91.6122C136.929 91.6122 137.882 90.7953 137.967 90.1923C138.072 89.4372 136.975 88.9338 135.912 88.7858ZM164.612 88.8077H164.612C164.529 88.2158 163.476 88.047 162.476 88.1859C161.478 88.3251 160.51 88.7756 160.591 89.3688C160.656 89.8302 161.488 90.6178 162.475 90.6176C162.558 90.6176 162.642 90.6121 162.727 90.6003C163.385 90.5091 163.868 90.0911 164.097 89.8501C164.447 89.4831 164.649 89.0737 164.612 88.8077ZM181.083 114.159C180.716 113.05 179.537 112.693 177.576 113.098C171.756 114.299 169.671 113.467 168.987 112.963C173.511 106.071 177.233 97.7399 179.241 89.9666C180.192 86.2845 180.717 82.8651 180.76 80.0781C180.807 77.0185 180.287 74.7707 179.212 73.3974C174.879 67.8613 168.521 64.8917 160.823 64.8101C155.532 64.7507 151.061 66.105 150.194 66.4857C148.369 66.0318 146.379 65.7532 144.213 65.7176C140.241 65.6534 136.807 66.6044 133.964 68.5428C132.729 68.0834 129.538 66.9878 125.635 66.3592C118.888 65.2727 113.526 66.0958 109.7 68.8066C105.134 72.0412 103.026 77.8232 103.435 85.9915C103.572 88.7399 105.138 97.194 107.609 105.291C110.862 115.947 114.398 121.979 118.118 123.22C118.553 123.366 119.056 123.467 119.609 123.467C120.966 123.467 122.63 122.855 124.361 120.774C127.237 117.315 129.922 114.416 130.911 113.363C132.374 114.148 133.98 114.586 135.624 114.63C135.627 114.673 135.631 114.716 135.635 114.759C135.305 115.15 135.035 115.493 134.804 115.785C133.666 117.231 133.429 117.531 129.764 118.286C128.721 118.501 125.952 119.072 125.912 121.013C125.867 123.133 129.184 124.024 129.562 124.118C130.88 124.448 132.148 124.611 133.358 124.611C136.301 124.611 138.891 123.643 140.96 121.772C140.897 129.332 141.212 136.782 142.12 139.051C142.863 140.909 144.679 145.451 150.416 145.45C151.258 145.45 152.185 145.352 153.204 145.134C159.191 143.85 161.791 141.204 162.797 135.37C163.335 132.252 164.259 124.807 164.693 120.813C165.61 121.099 166.79 121.23 168.066 121.23C170.727 121.23 173.798 120.664 175.724 119.77C177.887 118.766 181.791 116.3 181.083 114.159ZM166.823 87.1724C166.803 88.3514 166.641 89.4217 166.469 90.5391C166.284 91.7407 166.093 92.983 166.045 94.4912C165.997 95.9588 166.18 97.4848 166.358 98.9603C166.716 101.941 167.083 105.009 165.66 108.037C165.439 107.644 165.226 107.216 165.03 106.741C164.853 106.313 164.469 105.624 163.938 104.671C161.869 100.961 157.025 92.2735 159.505 88.7285C160.243 87.6731 162.118 86.5885 166.823 87.1724ZM161.119 67.1982C168.016 67.3506 173.471 69.9306 177.334 74.8662C180.297 78.6521 177.034 95.8783 167.591 110.739C167.497 110.621 167.402 110.501 167.304 110.378C167.265 110.329 167.225 110.279 167.185 110.229C169.625 106.199 169.148 102.211 168.723 98.6758C168.549 97.225 168.384 95.8546 168.426 94.5675C168.469 93.2029 168.649 92.033 168.824 90.9015C169.038 89.5071 169.256 88.0645 169.196 86.3636C169.241 86.1853 169.259 85.9745 169.236 85.7243C169.082 84.0932 167.22 79.2124 163.425 74.7942C161.349 72.378 158.321 69.6737 154.188 67.8498C155.966 67.4813 158.397 67.1377 161.119 67.1982ZM122.53 119.25C120.622 121.543 119.305 121.104 118.872 120.959C116.05 120.018 112.775 114.053 109.888 104.594C107.39 96.4093 105.93 88.1792 105.814 85.8713C105.45 78.5726 107.219 73.4858 111.073 70.7523C1Line truncated
fill="url(#pgLogo)"
fillOpacity="1"
/>
<path
id="arrow-tl"
style={transition('transform')}
d="M58.7307 67.0865L62.1609 71.7306L64.4677 66.438L58.7307 67.0865ZM130.873 97.9845L63.0557 68.4261L62.6561 69.3429L130.474 98.9012L130.873 97.9845Z"
fill="url(#paint14_linear_4346_99807)"
/>
<path
id="arrow-tr"
style={transition('transform')}
d="M217.486 59.3723L211.724 59.0012L214.284 64.1764L217.486 59.3723ZM188.36 74.3344L213.674 61.8153L213.231 60.919L187.917 73.438L188.36 74.3344Z"
fill="url(#paint15_linear_4346_99807)"
/>
<path
id="arrow-br"
style={transition('transform')}
d="M255.662 116.714L250.847 113.528L250.496 119.291L255.662 116.714ZM204.542 114.096L251.14 116.939L251.201 115.94L204.603 113.098L204.542 114.096Z"
fill="url(#paint16_linear_4346_99807)"
/>
<path
id="arrow-bl"
style={transition('transform')}
d="M79.7356 159.947L85.5045 160.177L82.8194 155.066L79.7356 159.947ZM132.609 131.605L83.4868 157.411L83.9518 158.296L133.074 132.491L132.609 131.605Z"
fill="url(#paint17_linear_4346_99807)"
/>
<g id="coordinates" style={transition('opacity')}>
<path
d="M16.6192 167.276H15.0752V159.812H16.6192V160.42H15.7312V166.676H16.6192V167.276ZM17.2198 165.58C17.2198 165.268 17.4598 165.02 17.7718 165.02C18.0838 165.02 18.3318 165.268 18.3318 165.58C18.3318 165.892 18.0838 166.132 17.7718 166.132C17.4598 166.132 17.2198 165.892 17.2198 165.58ZM21.4222 164.124H19.2542V163.468H21.4222V164.124ZM22.9608 163.5C22.9608 164.292 23.1048 164.852 23.4168 165.18C23.6168 165.388 23.8728 165.516 24.2408 165.516C24.6088 165.516 24.8648 165.388 25.0648 165.18C25.3768 164.852 25.5208 164.292 25.5208 163.5C25.5208 162.708 25.3768 162.148 25.0648 161.82C24.8648 161.612 24.6088 161.484 24.2408 161.484C23.8728 161.484 23.6168 161.612 23.4168 161.82C23.1048 162.148 22.9608 162.708 22.9608 163.5ZM22.1848 163.5C22.1848 162.788 22.3048 162.132 22.6488 161.62C22.9848 161.116 23.5048 160.788 24.2408 160.788C24.9768 160.788 25.4968 161.116 25.8328 161.62C26.1768 162.132 26.2968 162.788 26.2968 163.5C26.2968 164.212 26.1768 164.868 25.8328 165.38C25.4968 165.884 24.9768 166.212 24.2408 166.212C23.5048 166.212 22.9848 165.884 22.6488 165.38C22.3048 164.868 22.1848 164.212 22.1848 163.5ZM28.8838 166.092H28.1158V162.436H26.8598V161.884C27.5798 161.868 28.0758 161.468 28.1958 160.908H28.8838V166.092ZM29.962 165.58C29.962 165.292 30.21 165.044 30.546 165.044C30.89 165.044 31.194 165.3 31.194 165.804C31.194 166.86 30.506 167.3 30.01 167.364V166.948C30.402 166.86 30.666 166.468 30.674 166.084C30.65 166.1 30.586 166.124 30.498 166.124C30.202 166.124 29.962 165.924 29.962 165.58ZM34.3136 165.58C34.3136 165.268 34.5536 165.02 34.8656 165.02C35.1776 165.02 35.4256 165.268 35.4256 165.58C35.4256 165.892 35.1776 166.132 34.8656 166.132C34.5536 166.132 34.3136 165.892 34.3136 165.58ZM38.516 164.124H36.348V163.468H38.516V164.124ZM40.0066 162.772L39.2226 162.676C39.2146 162.604 39.2146 162.532 39.2146 162.468C39.2146 161.58 39.8706 160.788 41.0066 160.788C42.1186 160.788 42.7586 161.516 42.7586 162.38C42.7586 163.06 42.3746 163.604 41.7826 163.98L40.7586 164.636C40.4626 164.828 40.1986 165.044 40.1266 165.364H42.7906V166.092H39.1586C39.1746 165.244 39.5106 164.596 40.3906 164.028L41.2546 163.468C41.7426 163.156 41.9666 162.788 41.9666 162.388C41.9666 161.916 41.6466 161.476 40.9906 161.476C40.3106 161.476 39.9906 161.948 39.9906 162.54C39.9906 162.612 39.9986 162.692 40.0066 162.772ZM43.673 165.58C43.673 165.292 43.921 165.044 44.257 165.044C44.601 165.044 44.905 165.3 44.905 165.804C44.905 166.86 44.217 167.3 43.721 167.364V166.948C44.113 166.86 44.377 166.468 44.385 166.084C44.361 166.1 44.297 166.124 44.209 166.124C43.913 166.124 43.673 165.924 43.673 165.58ZM48.0245 165.58C48.0245 165.268 48.2645 165.02 48.5765 165.02C48.8885 165.02 49.1365 165.268 49.1365 165.58C49.1365 165.892 48.8885 166.132 48.5765 166.132C48.2645 166.132 48.0245 165.892 48.0245 165.58ZM52.2269 164.124H50.0589V163.468H52.2269V164.124ZM53.7655 163.5C53.7655 164.292 53.9095 164.852 54.2215 165.18C54.4215 165.388 54.6775 165.516 55.0455 165.516C55.4135 165.516 55.6695 165.388 55.8695 165.18C56.1815 164.852 56.3255 164.292 56.3255 163.5C56.3255 162.708 56.1815 162.148 55.8695 161.82C55.6695 161.612 55.4135 161.484 55.0455 161.484C54.6775 161.484 54.4215 161.612 54.2215 161.82C53.9095 162.148 53.7655 162.708 53.7655 163.5ZM52.9895 163.5C52.9895 162.788 53.1095 162.132 53.4535 161.62C53.7895 161.116 54.3095 160.788 55.0455 160.788C55.7815 160.788 56.3015 161.116 56.6375 161.62C56.9815 162.132 57.1015 162.788 57.1015 163.5C57.1015 164.212 56.9815 164.868 56.6375 165.38C56.3015 165.884 55.7815 166.212 55.0455 166.212C54.3095 166.212 53.7895 165.884 53.4535 165.38C53.1095 164.868 52.9895 164.212 52.9895 163.5ZM58.6316 162.772L57.8476 162.676C57.8396 162.604 57.8396 162.532 57.8396 162.468C57.8396 161.58 58.4956 160.788 59.6316 160.788C60.7436 160.788 61.3836 161.516 61.3836 162.38C61.3836 163.06 60.9996 163.604 60.4076 163.98L59.3836 164.636C59.0876 164.828 58.8236 165.044 58.7516 165.364H61.4156V166.092H57.7836C57.7996 165.244 58.1356 164.596 59.0156 164.028L59.8796 163.468C60.3676 163.156 60.5916 162.788 60.5916 162.388C60.5916 161.916 60.2716 161.476 59.6156 161.476C58.9356 161.476 58.6156 161.948 58.6156 162.54C58.6156 162.612 58.6236 162.692 58.6316 162.772ZM63.322 167.276H61.778V166.676H62.666V160.42H61.778V159.812H63.322V167.276Z"
fill="url(#paint18_linear_4346_99807)"
/>
<path
d="M280.535 120.798H278.991V113.334H280.535V113.942H279.647V120.198H280.535V120.798ZM281.136 119.102C281.136 118.79 281.376 118.542 281.688 118.542C282 118.542 282.248 118.79 282.248 119.102C282.248 119.414 282 119.654 281.688 119.654C281.376 119.654 281.136 119.414 281.136 119.102ZM283.83 117.022C283.83 117.814 283.974 118.374 284.286 118.702C284.486 118.91 284.742 119.038 285.11 119.038C285.478 119.038 285.734 118.91 285.934 118.702C286.246 118.374 286.39 117.814 286.39 117.022C286.39 116.23 286.246 115.67 285.934 115.342C285.734 115.134 285.478 115.006 285.11 115.006C284.742 115.006 284.486 115.134 284.286 115.342C283.974 115.67 283.83 116.23 283.83 117.022ZM283.054 117.022C283.054 116.31 283.174 115.654 283.518 115.142C283.854 114.638 284.374 114.31 285.11 114.31C285.846 114.31 286.366 114.638 286.702 115.142C287.046 115.654 287.166 116.31 287.166 117.022C287.166 117.734 287.046 118.39 286.702 118.902C286.366 119.406 285.846 119.734 285.11 119.734C284.374 119.734 283.854 119.406 283.518 118.902C283.174 118.39 283.054 117.734 283.054 117.022ZM289.329 117.206L288.945 116.558L290.473 115.15H287.993V114.43H291.513V115.134L290.033 116.502C290.793 116.502 291.633 117.014 291.633 118.078C291.633 118.95 290.961 119.742 289.753 119.742C288.553 119.742 287.873 118.958 287.825 118.11L288.593 117.934C288.625 118.622 289.121 119.054 289.745 119.054C290.457 119.054 290.841 118.614 290.841 118.094C290.841 117.414 290.297 117.126 289.785 117.126C289.625 117.126 289.465 117.158 289.329 117.206ZM292.433 119.102C292.433 118.814 292.681 118.566 293.017 118.566C293.361 118.566 293.665 118.822 293.665 119.326C293.665 120.382 292.977 120.822 292.481 120.886V120.47C292.873 120.382 293.137 119.99 293.145 119.606C293.121 119.622 293.057 119.646 292.969 119.646C292.673 119.646 292.433 119.446 292.433 119.102ZM296.784 119.102C296.784 118.79 297.024 118.542 297.336 118.542C297.648 118.542 297.896 118.79 297.896 119.102C297.896 119.414 297.648 119.654 297.336 119.654C297.024 119.654 296.784 119.414 296.784 119.102ZM300.259 117.206L299.875 116.558L301.403 115.15H298.923V114.43H302.443V115.134L300.963 116.502C301.723 116.502 302.563 117.014 302.563 118.078C302.563 118.95 301.891 119.742 300.683 119.742C299.483 119.742 298.803 118.958 298.755 118.11L299.523 117.934C299.555 118.622 300.051 119.054 300.675 119.054C301.387 119.054 301.771 118.614 301.771 118.094C301.771 117.414 301.227 117.126 300.715 117.126C300.555 117.126 300.395 117.158 300.259 117.206ZM303.362 119.102C303.362 118.814 303.61 118.566 303.946 118.566C304.29 118.566 304.594 118.822 304.594 119.326C304.594 120.382 303.906 120.822 303.41 120.886V120.47C303.802 120.382 304.066 119.99 304.074 119.606C304.05 119.622 303.986 119.646 303.898 119.646C303.602 119.646 303.362 119.446 303.362 119.102ZM307.714 119.102C307.714 118.79 307.954 118.542 308.266 118.542C308.578 118.542 308.826 118.79 308.826 119.102C308.826 119.414 308.578 119.654 308.266 119.654C307.954 119.654 307.714 119.414 307.714 119.102ZM310.408 117.022C310.408 117.814 310.552 118.374 310.864 118.702C311.064 118.91 311.32 119.038 311.688 119.038C312.056 119.038 312.312 118.91 312.512 118.702C312.824 118.374 312.968 117.814 312.968 117.022C312.968 116.23 312.824 115.67 312.512 115.342C312.312 115.134 312.056 115.006 311.688 115.006C311.32 115.006 311.064 115.134 310.864 115.342C310.552 115.67 310.408 116.23 310.408 117.022ZM309.632 117.022C309.632 116.31 309.752 115.654 310.096 115.142C310.432 114.638 310.952 114.31 311.688 114.31C312.424 114.31 312.944 114.638 313.28 115.142C313.624 115.654 313.744 116.31 313.744 117.022C313.744 117.734 313.624 118.39 313.28 118.902C312.944 119.406 312.424 119.734 311.688 119.734C310.952 119.734 310.432 119.406 310.096 118.902C309.752 118.39 309.632 117.734 309.632 117.022ZM315.907 117.206L315.523 116.558L317.051 115.15H314.571V114.43H318.091V115.134L316.611 116.502C317.371 116.502 318.211 117.014 318.211 118.078C318.211 118.95 317.539 119.742 316.331 119.742C315.131 119.742 314.451 118.958 314.403 118.11L315.171 117.934C315.203 118.622 315.699 119.054 316.323 119.054C317.035 119.054 317.419 118.614 317.419 118.094C317.419 117.414 316.875 117.126 316.363 117.126C316.203 117.126 316.043 117.158 315.907 117.206ZM320.113 120.798H318.569V120.198H319.457V113.942H318.569V113.334H320.113V120.798Z"
fill="url(#paint19_linear_4346_99807)"
/>
<path
d="M243.094 56.8276H241.55V49.3636H243.094V49.9716H242.206V56.2276H243.094V56.8276ZM243.694 55.1316C243.694 54.8196 243.934 54.5716 244.246 54.5716C244.558 54.5716 244.806 54.8196 244.806 55.1316C244.806 55.4436 244.558 55.6836 244.246 55.6836C243.934 55.6836 243.694 55.4436 243.694 55.1316ZM246.389 53.0516C246.389 53.8436 246.533 54.4036 246.845 54.7316C247.045 54.9396 247.301 55.0676 247.669 55.0676C248.037 55.0676 248.293 54.9396 248.493 54.7316C248.805 54.4036 248.949 53.8436 248.949 53.0516C248.949 52.2596 248.805 51.6996 248.493 51.3716C248.293 51.1636 248.037 51.0356 247.669 51.0356C247.301 51.0356 247.045 51.1636 246.845 51.3716C246.533 51.6996 246.389 52.2596 246.389 53.0516ZM245.613 53.0516C245.613 52.3396 245.733 51.6836 246.077 51.1716C246.413 50.6676 246.933 50.3396 247.669 50.3396C248.405 50.3396 248.925 50.6676 249.261 51.1716C249.605 51.6836 249.725 52.3396 249.725 53.0516C249.725 53.7636 249.605 54.4196 249.261 54.9316C248.925 55.4356 248.405 55.7636 247.669 55.7636C246.933 55.7636 246.413 55.4356 246.077 54.9316C245.733 54.4196 245.613 53.7636 245.613 53.0516ZM250.368 54.2356L251.12 54.0116C251.168 54.6516 251.64 55.0836 252.288 55.0836C252.904 55.0836 253.4 54.6756 253.4 54.0356C253.4 53.3236 252.88 52.9636 252.28 52.9636C251.912 52.9636 251.56 53.1076 251.336 53.3396C251.064 53.2356 250.832 53.1316 250.568 53.0356L251.24 50.4596H253.976V51.1796H251.76L251.376 52.6676C251.608 52.4116 252.024 52.2836 252.432 52.2836C253.448 52.2836 254.192 52.9316 254.192 54.0036C254.192 54.9796 253.44 55.7716 252.288 55.7716C251.184 55.7716 250.44 55.0516 250.368 54.2356ZM254.952 55.1316C254.952 54.8436 255.2 54.5956 255.536 54.5956C255.88 54.5956 256.184 54.8516 256.184 55.3556C256.184 56.4116 255.496 56.8516 255 56.9156V56.4996C255.392 56.4116 255.656 56.0196 255.664 55.6356C255.64 55.6516 255.576 55.6756 255.488 55.6756C255.192 55.6756 254.952 55.4756 254.952 55.1316ZM259.304 55.1316C259.304 54.8196 259.544 54.5716 259.856 54.5716C260.168 54.5716 260.416 54.8196 260.416 55.1316C260.416 55.4436 260.168 55.6836 259.856 55.6836C259.544 55.6836 259.304 55.4436 259.304 55.1316ZM260.86 54.4756V53.5716L263.084 50.4596H264.164V53.7476H265.052V54.4756H264.164V55.6436H263.404V54.4756H260.86ZM263.404 53.7476V51.2116L261.58 53.7476H263.404ZM265.734 55.1316C265.734 54.8436 265.982 54.5956 266.318 54.5956C266.662 54.5956 266.966 54.8516 266.966 55.3556C266.966 56.4116 266.278 56.8516 265.782 56.9156V56.4996C266.174 56.4116 266.438 56.0196 266.446 55.6356C266.422 55.6516 266.358 55.6756 266.27 55.6756C265.974 55.6756 265.734 55.4756 265.734 55.1316ZM270.085 55.1316C270.085 54.8196 270.325 54.5716 270.637 54.5716C270.949 54.5716 271.197 54.8196 271.197 55.1316C271.197 55.4436 270.949 55.6836 270.637 55.6836C270.325 55.6836 270.085 55.4436 270.085 55.1316ZM272.779 53.0516C272.779 53.8436 272.923 54.4036 273.235 54.7316C273.435 54.9396 273.691 55.0676 274.059 55.0676C274.427 55.0676 274.683 54.9396 274.883 54.7316C275.195 54.4036 275.339 53.8436 275.339 53.0516C275.339 52.2596 275.195 51.6996 274.883 51.3716C274.683 51.1636 274.427 51.0356 274.059 51.0356C273.691 51.0356 273.435 51.1636 273.235 51.3716C272.923 51.6996 272.779 52.2596 272.779 53.0516ZM272.003 53.0516C272.003 52.3396 272.123 51.6836 272.467 51.1716C272.803 50.6676 273.323 50.3396 274.059 50.3396C274.795 50.3396 275.315 50.6676 275.651 51.1716C275.995 51.6836 276.115 52.3396 276.115 53.0516C276.115 53.7636 275.995 54.4196 275.651 54.9316C275.315 55.4356 274.795 55.7636 274.059 55.7636C273.323 55.7636 272.803 55.4356 272.467 54.9316C272.123 54.4196 272.003 53.7636 272.003 53.0516ZM277.645 52.3236L276.861 52.2276C276.853 52.1556 276.853 52.0836 276.853 52.0196C276.853 51.1316 277.509 50.3396 278.645 50.3396C279.757 50.3396 280.397 51.0676 280.397 51.9316C280.397 52.6116 280.013 53.1556 279.421 53.5316L278.397 54.1876C278.101 54.3796 277.837 54.5956 277.765 54.9156H280.429V55.6436H276.797C276.813 54.7956 277.149 54.1476 278.029 53.5796L278.893 53.0196C279.381 52.7076 279.605 52.3396 279.605 51.9396C279.605 51.4676 279.285 51.0276 278.629 51.0276C277.949 51.0276 277.629 51.4996 277.629 52.0916C277.629 52.1636 277.637 52.2436 277.645 52.3236ZM282.336 56.8276H280.792V56.2276H281.68V49.9716H280.792V49.3636H282.336V56.8276Z"
fill="url(#paint20_linear_4346_99807)"
/>
<path
d="M-1.99217 67.4827H-3.53617V60.0187H-1.99217V60.6267H-2.88017V66.8827H-1.99217V67.4827ZM-1.39148 65.7867C-1.39148 65.4747 -1.15148 65.2267 -0.839485 65.2267C-0.527485 65.2267 -0.279485 65.4747 -0.279485 65.7867C-0.279485 66.0987 -0.527485 66.3387 -0.839485 66.3387C-1.15148 66.3387 -1.39148 66.0987 -1.39148 65.7867ZM2.81089 64.3307H0.64289V63.6747H2.81089V64.3307ZM4.34952 63.7067C4.34952 64.4987 4.49352 65.0587 4.80552 65.3867C5.00552 65.5947 5.26152 65.7227 5.62952 65.7227C5.99752 65.7227 6.25352 65.5947 6.45352 65.3867C6.76552 65.0587 6.90952 64.4987 6.90952 63.7067C6.90952 62.9147 6.76552 62.3547 6.45352 62.0267C6.25352 61.8187 5.99752 61.6907 5.62952 61.6907C5.26152 61.6907 5.00552 61.8187 4.80552 62.0267C4.49352 62.3547 4.34952 62.9147 4.34952 63.7067ZM3.57352 63.7067C3.57352 62.9947 3.69352 62.3387 4.03752 61.8267C4.37352 61.3227 4.89352 60.9947 5.62952 60.9947C6.36552 60.9947 6.88552 61.3227 7.22152 61.8267C7.56552 62.3387 7.68552 62.9947 7.68552 63.7067C7.68552 64.4187 7.56552 65.0747 7.22152 65.5867C6.88552 66.0907 6.36552 66.4187 5.62952 66.4187C4.89352 66.4187 4.37352 66.0907 4.03752 65.5867C3.69352 65.0747 3.57352 64.4187 3.57352 63.7067ZM9.84852 63.8907L9.46452 63.2427L10.9925 61.8347H8.51252V61.1147H12.0325V61.8187L10.5525 63.1867C11.3125 63.1867 12.1525 63.6987 12.1525 64.7627C12.1525 65.6347 11.4805 66.4267 10.2725 66.4267C9.07252 66.4267 8.39252 65.6427 8.34452 64.7947L9.11252 64.6187C9.14452 65.3067 9.64052 65.7387 10.2645 65.7387C10.9765 65.7387 11.3605 65.2987 11.3605 64.7787C11.3605 64.0987 10.8165 63.8107 10.3045 63.8107C10.1445 63.8107 9.98452 63.8427 9.84852 63.8907ZM12.9523 65.7867C12.9523 65.4987 13.2003 65.2507 13.5363 65.2507C13.8803 65.2507 14.1843 65.5067 14.1843 66.0107C14.1843 67.0667 13.4963 67.5067 13.0003 67.5707V67.1547C13.3923 67.0667 13.6563 66.6747 13.6643 66.2907C13.6403 66.3067 13.5763 66.3307 13.4883 66.3307C13.1923 66.3307 12.9523 66.1307 12.9523 65.7867ZM17.3038 65.7867C17.3038 65.4747 17.5438 65.2267 17.8558 65.2267C18.1678 65.2267 18.4158 65.4747 18.4158 65.7867C18.4158 66.0987 18.1678 66.3387 17.8558 66.3387C17.5438 66.3387 17.3038 66.0987 17.3038 65.7867ZM21.5062 64.3307H19.3382V63.6747H21.5062V64.3307ZM23.9366 66.2987H23.1686V62.6427H21.9126V62.0907C22.6326 62.0747 23.1286 61.6747 23.2486 61.1147H23.9366V66.2987ZM25.0148 65.7867C25.0148 65.4987 25.2628 65.2507 25.5988 65.2507C25.9428 65.2507 26.2468 65.5067 26.2468 66.0107C26.2468 67.0667 25.5588 67.5067 25.0628 67.5707V67.1547C25.4548 67.0667 25.7188 66.6747 25.7268 66.2907C25.7028 66.3067 25.6388 66.3307 25.5508 66.3307C25.2548 66.3307 25.0148 66.1307 25.0148 65.7867ZM29.3663 65.7867C29.3663 65.4747 29.6063 65.2267 29.9183 65.2267C30.2303 65.2267 30.4783 65.4747 30.4783 65.7867C30.4783 66.0987 30.2303 66.3387 29.9183 66.3387C29.6063 66.3387 29.3663 66.0987 29.3663 65.7867ZM32.0605 63.7067C32.0605 64.4987 32.2045 65.0587 32.5165 65.3867C32.7165 65.5947 32.9725 65.7227 33.3405 65.7227C33.7085 65.7227 33.9645 65.5947 34.1645 65.3867C34.4765 65.0587 34.6205 64.4987 34.6205 63.7067C34.6205 62.9147 34.4765 62.3547 34.1645 62.0267C33.9645 61.8187 33.7085 61.6907 33.3405 61.6907C32.9725 61.6907 32.7165 61.8187 32.5165 62.0267C32.2045 62.3547 32.0605 62.9147 32.0605 63.7067ZM31.2845 63.7067C31.2845 62.9947 31.4045 62.3387 31.7485 61.8267C32.0845 61.3227 32.6045 60.9947 33.3405 60.9947C34.0765 60.9947 34.5965 61.3227 34.9325 61.8267C35.2765 62.3387 35.3965 62.9947 35.3965 63.7067C35.3965 64.4187 35.2765 65.0747 34.9325 65.5867C34.5965 66.0907 34.0765 66.4187 33.3405 66.4187C32.6045 66.4187 32.0845 66.0907 31.7485 65.5867C31.4045 65.0747 31.2845 64.4187 31.2845 63.7067ZM37.9835 66.2987H37.2155V62.6427H35.9595V62.0907C36.6795 62.0747 37.1755 61.6747 37.2955 61.1147H37.9835V66.2987ZM40.2419 67.4827H38.6979V66.8827H39.5859V60.6267H38.6979V60.0187H40.2419V67.4827Z"
fill="url(#paint21_linear_4346_99807)"
/>
</g>
<defs>
<radialGradient
id="paint0_radial_4346_99807"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(260.699 83.7471) rotate(90) scale(50.1628 71.9898)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint1_radial_4346_99807"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(34.2065 186.722) rotate(90) scale(29.89 44.8271)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<radialGradient
id="paint2_radial_4346_99807"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.2607 31.5141) rotate(90) scale(47.0109 44.1827)"
>
<stop stopColor={colors.rectStart} />
<stop offset="1" stopColor={colors.rectEnd} />
</radialGradient>
<linearGradient
id="paint3_linear_4346_99807"
x1="103.644"
y1="20.5905"
x2="123.04"
y2="40.7061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint4_linear_4346_99807"
x1="170.559"
y1="35.2435"
x2="162.945"
y2="62.1299"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint5_linear_4346_99807"
x1="-28.276"
y1="118.776"
x2="18.0891"
y2="140.665"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint6_linear_4346_99807"
x1="24.9597"
y1="140.108"
x2="35.2785"
y2="116.967"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint7_linear_4346_99807"
x1="0.768258"
y1="112.818"
x2="18.5578"
y2="105.239"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint8_linear_4346_99807"
x1="214.088"
y1="163.734"
x2="194.878"
y2="165.94"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint9_linear_4346_99807"
x1="282.318"
y1="182.011"
x2="256.032"
y2="148.158"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint10_linear_4346_99807"
x1="281.53"
y1="70.3694"
x2="256.656"
y2="79.1142"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C4C4C4" />
<stop offset="1" stopColor="#3F3F3F" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint11_linear_4346_99807"
x1="291.112"
y1="98.3415"
x2="190.943"
y2="101.575"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor="#696969" stopOpacity="0" />
</linearGradient>
<radialGradient
id="paint12_radial_4346_99807"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(142.35 95.48) rotate(90) scale(103.327 196.814)"
>
<stop stopColor={colors.radialBgStart} stopOpacity="0" />
<stop offset="1" stopColor={colors.radialBgEnd} />
</radialGradient>
<linearGradient
id="pgLogo"
x1="183.038"
y1="80.9614"
x2="217.562"
y2="142.614"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.pgLogoStart} stopOpacity="0.5" />
<stop offset="1" stopColor={colors.pgLogoEnd} stopOpacity="1" />
</linearGradient>
<linearGradient
id="paint14_linear_4346_99807"
x1="62.3337"
y1="70.1224"
x2="88.2532"
y2="95.5895"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.arrow} />
<stop offset="1" stopColor="#3DCB8C" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint15_linear_4346_99807"
x1="216.624"
y1="71.8806"
x2="189.643"
y2="75.3287"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.arrow} />
<stop offset="1" stopColor="#3DCB8C" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint16_linear_4346_99807"
x1="251.364"
y1="125.828"
x2="206.423"
y2="124.536"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.arrow} />
<stop offset="1" stopColor="#3DCB8C" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint17_linear_4346_99807"
x1="78.8167"
y1="158.5"
x2="101.531"
y2="135.096"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.arrow} />
<stop offset="1" stopColor="#3DCB8C" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint18_linear_4346_99807"
x1="39.1989"
y1="150.092"
x2="39.1989"
y2="176.291"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.coordinatesStart} />
<stop offset="1" stopColor={colors.coordinatesEnd} stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint19_linear_4346_99807"
x1="299.552"
y1="103.614"
x2="299.552"
y2="129.813"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.coordinatesStart} />
<stop offset="1" stopColor={colors.coordinatesEnd} stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint20_linear_4346_99807"
x1="261.943"
y1="39.6436"
x2="261.943"
y2="65.8419"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.coordinatesStart} />
<stop offset="1" stopColor={colors.coordinatesEnd} stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint21_linear_4346_99807"
x1="18.3532"
y1="50.2987"
x2="18.3532"
y2="76.497"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={colors.asdfStart} />
<stop offset="1" stopColor={colors.asdfEnd} stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</LazyMotion>
</>
)
}
@@ -1,28 +1,574 @@
import React from 'react'
import React, { useEffect, useRef } from 'react'
import { useTheme } from 'common/Providers'
import Image from 'next/image'
import { DEFAULT_EASE } from '~/lib/animations'
const SecureAndScalableImg = () => {
const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const shieldsRef = useRef<any>()
const mainRef = useRef<any>()
const colors = {
shieldsStroke: isDarkMode ? '#494949' : '#D5D5D5',
cardBg: isDarkMode ? '#161616' : '#F8F9FA',
bgGlow: isDarkMode ? '#009C77' : '#00FFD9',
iconBg: isDarkMode ? '#112B25' : '#DCDCDC',
smallIcon: isDarkMode ? '#1DF7C3' : '#00826A',
cardLine: isDarkMode ? '#1DF7C3' : '#00826A',
}
useEffect(() => {
mainRef.current.style.transform = isHovered ? 'translateY(-5px)' : 'translateY(0px)'
if (!isHovered) return
const shields = [...shieldsRef.current?.querySelectorAll('path')]
shields.map((shield, i) => {
shield.style.transition = 'opacity 0.2s ease'
setTimeout(() => {
shield.style.opacity = '0.1'
setTimeout(() => {
shield.style.opacity = '1'
}, 400)
}, i * 35)
})
}, [isHovered])
return (
<>
<div
className="absolute inset-0 w-full h-full z-10"
style={{
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--colors-scale2))`,
}}
/>
<Image
src={
isDarkMode
? '/images/product/vector/highlight-security.svg'
: '/images/product/vector/highlight-security-light.svg'
}
alt="OpenAI vector graphic"
layout="fill"
objectFit="cover"
/>
<svg
width="100%"
height="100%"
viewBox="0 0 284 211"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{/* concentric shields */}
<g ref={shieldsRef}>
<g filter="url(#filter0_b_4346_100010)">
<path
d="M211.626 48.3233V47.9921L211.305 47.9128L142.456 30.9229L142.355 30.8979L142.253 30.9229L73.4046 47.9128L73.0831 47.9921V48.3233V70.0275V70.1201C73.0831 99.1234 73.0831 113.726 77.0635 126.956C80.8942 139.688 87.3861 151.461 96.1092 161.495C105.173 171.921 117.523 179.714 142.051 195.192L142.109 195.229L142.326 195.403L142.58 195.242L142.658 195.193C167.186 179.715 179.536 171.921 188.6 161.495C197.323 151.461 203.815 139.688 207.646 126.956C211.626 113.726 211.626 99.1234 211.626 70.12V70.0275V48.3233Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter1_b_4346_100010)">
<path
d="M218.767 41.6039V41.2727L218.446 41.1934L142.456 22.4413L142.355 22.4163L142.254 22.4413L66.2639 41.1934L65.9424 41.2727V41.6039V65.5592V65.6519C65.9424 97.6724 65.9424 113.784 70.3338 128.379C74.5601 142.426 81.7223 155.414 91.346 166.485C101.346 177.988 114.971 186.586 142.051 203.674L142.129 203.724L142.355 203.866L142.58 203.724L142.659 203.674C169.738 186.586 183.364 177.988 193.364 166.485C202.987 155.414 210.15 142.426 214.376 128.379C218.767 113.784 218.767 97.6723 218.767 65.6517V65.5592V41.6039Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter2_b_4346_100010)">
<path
d="M225.908 34.8843V34.5532L225.587 34.4739L142.456 13.9596L142.355 13.9346L142.254 13.9596L59.1233 34.4739L58.8018 34.5532V34.8843V61.0908V61.1836C58.8018 96.2213 58.8018 113.841 63.6042 129.803C68.226 145.164 76.0585 159.368 86.5829 171.475C97.5185 184.054 112.42 193.457 142.051 212.156L142.129 212.205L142.355 212.348L142.581 212.205L142.659 212.156C172.29 193.457 187.192 184.054 198.127 171.475C208.652 159.368 216.484 145.164 221.106 129.803C225.908 113.842 225.908 96.2214 225.908 61.1839V61.0912V61.0908V34.8843Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter3_b_4346_100010)">
<path
d="M233.049 28.1649V27.8338L232.728 27.7545L142.457 5.47808L142.355 5.45308L142.254 5.47808L51.9827 27.7545L51.6612 27.8338V28.1649V56.6225V56.7153C51.6612 94.7703 51.6612 113.899 56.8746 131.226C61.8919 147.902 70.3946 163.322 81.8197 176.464C93.6912 190.12 109.868 200.329 142.051 220.637L142.13 220.687L142.355 220.829L142.581 220.687L142.659 220.637C174.842 200.329 191.019 190.12 202.891 176.464C214.316 163.322 222.819 147.902 227.836 131.226C233.049 113.899 233.049 94.7704 233.049 56.7157V56.6229V56.6225V28.1649Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter4_b_4346_100010)">
<path
d="M240.949 20.7319V20.4008L240.628 20.3214L142.457 -3.90425L142.356 -3.92924L142.255 -3.90425L44.0843 20.3214L43.7628 20.4008V20.7319V51.6797V51.7725C43.7628 93.1651 43.7628 113.963 49.4308 132.801C54.8856 150.931 64.1298 167.695 76.5512 181.984C89.4579 196.831 107.046 207.93 142.052 230.02L142.13 230.069L142.377 230.225L142.596 230.06L142.66 230.02C177.666 207.93 195.254 196.831 208.161 181.984C220.582 167.695 229.827 150.931 235.281 132.801C240.949 113.963 240.949 93.1652 240.949 51.7729V51.68V51.6797V20.7319Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter5_b_4346_100010)">
<path
d="M249.06 13.1004V12.7693L248.739 12.69L142.458 -13.5371L142.357 -13.5621L142.256 -13.5371L35.9749 12.69L35.6534 12.7693V13.1004V46.6049V46.6978C35.6534 91.5171 35.6534 114.028 41.7881 134.418C47.6922 154.041 57.6977 172.186 71.142 187.651C85.1115 203.72 104.149 215.734 142.052 239.652L142.131 239.702L142.139 239.707L142.147 239.711L142.147 239.711L142.388 239.849L142.597 239.693L142.661 239.653C180.564 215.734 199.602 203.72 213.572 187.651C227.016 172.186 237.021 154.041 242.926 134.418C249.06 114.028 249.06 91.5171 249.06 46.6976V46.6049V13.1004Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter6_b_4346_100010)">
<path
d="M257.171 5.46885V5.13772L256.85 5.05838L142.459 -23.17L142.358 -23.195L142.256 -23.17L27.8655 5.05838L27.544 5.13772V5.46885V41.53V41.6229C27.544 89.8691 27.544 114.094 34.1455 136.035C40.4988 157.151 51.2656 176.676 65.7328 193.318C80.7653 210.61 101.252 223.538 142.053 249.285L142.132 249.335L142.358 249.477L142.583 249.335L142.662 249.285C183.463 223.538 203.95 210.61 218.982 193.318C233.45 176.676 244.216 157.151 250.57 136.035C257.171 114.094 257.171 89.8692 257.171 41.6233V41.5302V41.53V5.46885Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter7_b_4346_100010)">
<path
d="M265.875 -2.72111V-3.05225L265.554 -3.13159L142.459 -33.5078L142.358 -33.5328L142.257 -33.5078L19.1624 -3.13159L18.8409 -3.05225V-2.72111V36.0838V36.1768C18.8409 88.1005 18.8409 114.164 25.9433 137.77C32.7787 160.488 44.3625 181.495 59.9275 199.4C76.1006 218.004 98.1422 231.913 142.054 259.623L142.132 259.673L142.358 259.815L142.584 259.673L142.661 259.624C186.574 231.913 208.615 218.004 224.789 199.4C240.354 181.495 251.938 160.488 258.773 137.77C265.875 114.164 265.875 88.1006 265.875 36.1771V36.0842V36.0838V-2.72111Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter8_b_4346_100010)">
<path
d="M274.974 -11.2833V-11.6144L274.653 -11.6938L142.459 -44.3154L142.358 -44.3404L142.256 -44.3154L10.0628 -11.6938L9.74127 -11.6144V-11.2833V30.3901V30.4831C9.74127 86.2515 9.74127 114.237 17.3674 139.584C24.7068 163.977 37.1447 186.533 53.8573 205.758C71.2229 225.734 94.8902 240.669 142.053 270.43L142.132 270.48L142.14 270.485L142.148 270.49L142.148 270.49L142.368 270.616L142.583 270.48L142.661 270.431C189.825 240.669 213.492 225.734 230.858 205.758C247.571 186.533 260.009 163.977 267.348 139.584C274.974 114.237 274.974 86.2514 274.974 30.4828V30.3901V-11.2833Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter9_b_4346_100010)">
<path
d="M284.646 -20.3844V-20.7155L284.324 -20.7949L142.459 -55.8032L142.358 -55.8282L142.256 -55.8032L0.390894 -20.7949L0.0693999 -20.7155V-20.3844V24.338V24.431C0.0693977 84.2862 0.0693966 114.315 8.25219 141.512C16.1273 167.686 29.473 191.888 47.4056 212.516C66.0388 233.95 91.4342 249.976 142.054 281.919L142.132 281.968L142.358 282.11L142.583 281.968L142.661 281.919C193.281 249.976 218.676 233.95 237.31 212.516C255.242 191.888 268.588 167.686 276.463 141.512C284.646 114.315 284.646 84.2864 284.646 24.4317V24.3387V24.338V-20.3844Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
<g filter="url(#filter10_b_4346_100010)">
<path
d="M294.941 -30.0717V-30.4029L294.619 -30.4822L142.459 -68.031L142.358 -68.056L142.256 -68.031L-9.90403 -30.4822L-10.2255 -30.4029V-30.0717V17.8961V17.9892C-10.2255 82.1942 -10.2255 114.398 -1.45022 143.564C6.99513 171.633 21.3072 197.588 40.5382 219.71C60.5207 242.696 87.7556 259.882 142.054 294.147L142.132 294.196L142.387 294.357L142.604 294.183L142.662 294.147C196.96 259.882 224.195 242.696 244.177 219.71C263.408 197.588 277.72 171.633 286.166 143.564C294.941 114.398 294.941 82.1942 294.941 17.9892V17.8961V-30.0717Z"
stroke={colors.shieldsStroke}
strokeWidth="0.845575"
/>
</g>
</g>
{/* bg glow */}
<g filter="url(#filter11_f_4346_100010)">
<ellipse cx="143.196" cy="124.219" rx="84.9456" ry="84.4399" fill={colors.bgGlow} />
</g>
{/* Main content */}
<g
ref={mainRef}
style={{ transition: `all 0.18s cubic-bezier(${DEFAULT_EASE})` }}
filter="url(#filter12_b_4346_100010)"
>
<rect x="72.8496" y="79.5647" width="139" height="65.3972" rx="8" fill={colors.cardBg} />
<path
d="M99.1605 95.8374C99.0961 95.1897 98.8101 94.6745 98.3026 94.2919C97.795 93.9093 97.1567 93.7181 96.3878 93.7181C95.8461 93.7181 95.3688 93.8109 94.956 93.9965C94.5469 94.1821 94.2249 94.4397 93.9901 94.7692C93.759 95.095 93.6435 95.4662 93.6435 95.8828C93.6435 96.1897 93.7098 96.4586 93.8423 96.6897C93.9749 96.9207 94.1529 97.1196 94.3764 97.2862C94.6037 97.4491 94.8537 97.5893 95.1264 97.7067C95.4029 97.8241 95.6813 97.9226 95.9616 98.0022L97.1889 98.3544C97.5601 98.4567 97.9313 98.5874 98.3026 98.7465C98.6738 98.9056 99.0128 99.1063 99.3196 99.3487C99.6302 99.5874 99.8783 99.8809 100.064 100.229C100.253 100.574 100.348 100.989 100.348 101.474C100.348 102.095 100.187 102.654 99.8651 103.15C99.5431 103.646 99.081 104.04 98.4787 104.332C97.8764 104.62 97.1548 104.764 96.3139 104.764C95.5223 104.764 94.8348 104.633 94.2514 104.371C93.6681 104.106 93.2098 103.741 92.8764 103.275C92.5431 102.809 92.3556 102.269 92.3139 101.656H93.4048C93.4427 102.114 93.5942 102.502 93.8594 102.82C94.1245 103.139 94.4692 103.381 94.8935 103.548C95.3177 103.71 95.7912 103.792 96.3139 103.792C96.8935 103.792 97.4086 103.695 97.8594 103.502C98.3139 103.305 98.67 103.032 98.9276 102.684C99.1889 102.332 99.3196 101.923 99.3196 101.457C99.3196 101.063 99.2173 100.733 99.0128 100.468C98.8082 100.199 98.5223 99.9737 98.1548 99.7919C97.7912 99.6101 97.3688 99.4491 96.8878 99.309L95.4957 98.8999C94.5829 98.6272 93.8745 98.2503 93.3707 97.7692C92.867 97.2881 92.6151 96.6745 92.6151 95.9283C92.6151 95.3033 92.7817 94.754 93.1151 94.2806C93.4522 93.8033 93.9067 93.4321 94.4787 93.1669C95.0545 92.898 95.7003 92.7635 96.4162 92.7635C97.1397 92.7635 97.7798 92.8961 98.3366 93.1612C98.8935 93.4264 99.3348 93.7919 99.6605 94.2578C99.9901 94.72 100.166 95.2465 100.189 95.8374H99.1605ZM112.445 98.7465C112.445 99.9586 112.229 101.014 111.797 101.911C111.365 102.805 110.77 103.498 110.013 103.991C109.259 104.479 108.392 104.724 107.411 104.724C106.429 104.724 105.56 104.479 104.803 103.991C104.049 103.498 103.456 102.805 103.024 101.911C102.596 101.014 102.382 99.9586 102.382 98.7465C102.382 97.5343 102.596 96.4813 103.024 95.5874C103.456 94.6897 104.051 93.9965 104.808 93.5078C105.566 93.0154 106.433 92.7692 107.411 92.7692C108.392 92.7692 109.259 93.0154 110.013 93.5078C110.77 93.9965 111.365 94.6897 111.797 95.5874C112.229 96.4813 112.445 97.5343 112.445 98.7465ZM111.411 98.7465C111.411 97.7048 111.236 96.8128 110.888 96.0703C110.539 95.3241 110.064 94.754 109.462 94.3601C108.859 93.9662 108.176 93.7692 107.411 93.7692C106.649 93.7692 105.967 93.9662 105.365 94.3601C104.763 94.754 104.286 95.3222 103.933 96.0647C103.585 96.8071 103.411 97.701 103.411 98.7465C103.411 99.7881 103.585 100.68 103.933 101.423C104.282 102.165 104.757 102.735 105.359 103.133C105.962 103.527 106.645 103.724 107.411 103.724C108.176 103.724 108.859 103.527 109.462 103.133C110.068 102.739 110.545 102.171 110.893 101.428C111.242 100.682 111.414 99.7881 111.411 98.7465ZM124.128 96.5647H123.06C122.98 96.1669 122.836 95.7995 122.628 95.4624C122.423 95.1215 122.166 94.8241 121.855 94.5703C121.545 94.3165 121.192 94.1196 120.798 93.9794C120.404 93.8393 119.978 93.7692 119.52 93.7692C118.785 93.7692 118.115 93.9605 117.509 94.3431C116.906 94.7256 116.423 95.2881 116.06 96.0306C115.7 96.7692 115.52 97.6745 115.52 98.7465C115.52 99.826 115.7 100.735 116.06 101.474C116.423 102.212 116.906 102.773 117.509 103.156C118.115 103.534 118.785 103.724 119.52 103.724C119.978 103.724 120.404 103.654 120.798 103.514C121.192 103.373 121.545 103.178 121.855 102.928C122.166 102.674 122.423 102.377 122.628 102.036C122.836 101.695 122.98 101.326 123.06 100.928H124.128C124.033 101.462 123.855 101.96 123.594 102.423C123.336 102.881 123.007 103.282 122.605 103.627C122.207 103.972 121.749 104.241 121.23 104.434C120.711 104.627 120.141 104.724 119.52 104.724C118.543 104.724 117.675 104.479 116.918 103.991C116.16 103.498 115.565 102.805 115.134 101.911C114.705 101.017 114.491 99.9624 114.491 98.7465C114.491 97.5306 114.705 96.4756 115.134 95.5817C115.565 94.6878 116.16 93.9965 116.918 93.5078C117.675 93.0154 118.543 92.7692 119.52 92.7692C120.141 92.7692 120.711 92.8658 121.23 93.059C121.749 93.2484 122.207 93.5173 122.605 93.8658C123.007 94.2105 123.336 94.612 123.594 95.0703C123.855 95.5287 124.033 96.0268 124.128 96.5647ZM130.874 104.565V103.786L134.675 99.5135C135.171 98.9529 135.571 98.4737 135.874 98.076C136.177 97.6783 136.396 97.3109 136.533 96.9737C136.673 96.6366 136.743 96.2862 136.743 95.9226C136.743 95.4794 136.639 95.0931 136.43 94.7635C136.226 94.4302 135.944 94.1707 135.584 93.9851C135.224 93.7995 134.819 93.7067 134.368 93.7067C133.891 93.7067 133.472 93.809 133.112 94.0135C132.756 94.2181 132.48 94.4984 132.283 94.8544C132.086 95.2105 131.987 95.6196 131.987 96.0817H130.97C130.97 95.4378 131.118 94.8677 131.413 94.3715C131.713 93.8715 132.12 93.4794 132.635 93.1953C133.154 92.9112 133.741 92.7692 134.396 92.7692C135.044 92.7692 135.62 92.9093 136.124 93.1897C136.627 93.46Line truncated
fill="url(#paint0_linear_4346_100010)"
/>
<path
d="M90.8516 115.565H193.852"
stroke={isDarkMode ? '#F3F3F3' : 'black'}
strokeOpacity="0.1"
strokeWidth="0.845575"
/>
<path
d="M97.6961 128.263H97.0285C96.9788 128.015 96.8888 127.785 96.7586 127.574C96.6308 127.361 96.4698 127.175 96.2757 127.017C96.0815 126.858 95.8614 126.735 95.6151 126.647C95.3689 126.56 95.1026 126.516 94.8161 126.516C94.3569 126.516 93.9378 126.636 93.559 126.875C93.1826 127.114 92.8808 127.465 92.6535 127.929C92.4286 128.391 92.3161 128.957 92.3161 129.627C92.3161 130.302 92.4286 130.87 92.6535 131.331C92.8808 131.793 93.1826 132.143 93.559 132.383C93.9378 132.619 94.3569 132.738 94.8161 132.738C95.1026 132.738 95.3689 132.694 95.6151 132.606C95.8614 132.519 96.0815 132.397 96.2757 132.241C96.4698 132.082 96.6308 131.896 96.7586 131.683C96.8888 131.47 96.9788 131.239 97.0285 130.991H97.6961C97.6369 131.324 97.5257 131.636 97.3623 131.924C97.2013 132.211 96.9954 132.462 96.7444 132.677C96.4958 132.893 96.2094 133.061 95.885 133.182C95.5607 133.302 95.2044 133.363 94.8161 133.363C94.2053 133.363 93.6632 133.21 93.1897 132.905C92.7162 132.597 92.3445 132.164 92.0747 131.605C91.8071 131.046 91.6734 130.387 91.6734 129.627C91.6734 128.867 91.8071 128.208 92.0747 127.649C92.3445 127.09 92.7162 126.658 93.1897 126.353C93.6632 126.045 94.2053 125.891 94.8161 125.891C95.2044 125.891 95.5607 125.951 95.885 126.072C96.2094 126.191 96.4958 126.359 96.7444 126.576C96.9954 126.792 97.2013 127.043 97.3623 127.329C97.5257 127.616 97.6369 127.927 97.6961 128.263ZM101.33 133.377C100.821 133.377 100.38 133.258 100.009 133.022C99.6371 132.783 99.3495 132.452 99.1459 132.031C98.9446 131.607 98.844 131.12 98.844 130.568C98.844 130.019 98.9446 129.531 99.1459 129.105C99.3495 128.676 99.63 128.341 99.9875 128.1C100.347 127.856 100.763 127.734 101.234 127.734C101.53 127.734 101.815 127.789 102.09 127.897C102.364 128.004 102.611 128.169 102.828 128.391C103.049 128.611 103.223 128.889 103.35 129.226C103.478 129.559 103.542 129.955 103.542 130.412V130.724H99.2808V130.167H102.896C102.896 129.816 102.825 129.501 102.683 129.222C102.543 128.94 102.348 128.718 102.097 128.554C101.848 128.391 101.561 128.309 101.234 128.309C100.888 128.309 100.584 128.402 100.321 128.586C100.059 128.771 99.8525 129.015 99.7034 129.318C99.5566 129.621 99.482 129.952 99.4797 130.312V130.646C99.4797 131.079 99.5542 131.458 99.7034 131.782C99.8549 132.104 100.069 132.354 100.346 132.532C100.623 132.709 100.951 132.798 101.33 132.798C101.588 132.798 101.814 132.758 102.008 132.677C102.205 132.597 102.369 132.489 102.502 132.354C102.637 132.217 102.738 132.066 102.807 131.903L103.407 132.098C103.324 132.328 103.188 132.54 102.999 132.734C102.812 132.928 102.577 133.084 102.296 133.203C102.016 133.319 101.694 133.377 101.33 133.377ZM104.935 133.263V127.809H105.549V128.647H105.596C105.705 128.372 105.894 128.151 106.164 127.983C106.436 127.812 106.744 127.727 107.087 127.727C107.139 127.727 107.197 127.728 107.261 127.731C107.325 127.733 107.378 127.735 107.421 127.738V128.38C107.392 128.376 107.343 128.369 107.272 128.359C107.201 128.35 107.124 128.345 107.041 128.345C106.757 128.345 106.504 128.405 106.281 128.526C106.061 128.644 105.887 128.809 105.759 129.02C105.631 129.23 105.567 129.471 105.567 129.741V133.263H104.935ZM110.99 127.809V128.359H108.387V127.809H110.99ZM109.2 126.502H109.836V131.839C109.836 132.066 109.875 132.245 109.953 132.375C110.031 132.503 110.133 132.594 110.258 132.649C110.384 132.701 110.517 132.727 110.66 132.727C110.742 132.727 110.813 132.722 110.873 132.713C110.932 132.701 110.984 132.689 111.029 132.677L111.164 133.249C111.102 133.273 111.026 133.294 110.937 133.313C110.847 133.334 110.735 133.345 110.603 133.345C110.371 133.345 110.147 133.294 109.932 133.192C109.718 133.09 109.543 132.939 109.406 132.738C109.269 132.536 109.2 132.287 109.2 131.988V126.502ZM112.432 133.263V127.809H113.068V133.263H112.432ZM112.756 126.871C112.625 126.871 112.514 126.827 112.422 126.74C112.329 126.65 112.283 126.542 112.283 126.417C112.283 126.291 112.329 126.185 112.422 126.097C112.514 126.007 112.625 125.962 112.756 125.962C112.886 125.962 112.997 126.007 113.089 126.097C113.182 126.185 113.228 126.291 113.228 126.417C113.228 126.542 113.182 126.65 113.089 126.74C112.997 126.827 112.886 126.871 112.756 126.871ZM116.984 127.809V128.359H114.303V127.809H116.984ZM115.141 133.263V127.01C115.141 126.716 115.209 126.469 115.343 126.267C115.481 126.066 115.66 125.914 115.88 125.809C116.1 125.705 116.333 125.653 116.579 125.653C116.745 125.653 116.882 125.667 116.991 125.696C117.102 125.722 117.19 125.748 117.254 125.774L117.069 126.328C117.022 126.314 116.964 126.297 116.895 126.278C116.827 126.259 116.74 126.25 116.636 126.25C116.361 126.25 116.15 126.327 116 126.481C115.851 126.634 115.777 126.855 115.777 127.141L115.773 133.263H115.141ZM118.253 133.263V127.809H118.888V133.263H118.253ZM118.576 126.871C118.446 126.871 118.334 126.827 118.242 126.74C118.15 126.65 118.104 126.542 118.104 126.417C118.104 126.291 118.15 126.185 118.242 126.097C118.334 126.007 118.446 125.962 118.576 125.962C118.706 125.962 118.817 126.007 118.91 126.097C119.00Line truncated
fill={isDarkMode ? 'white' : 'black'}
/>
<rect
x="177.543"
y="121.565"
width="16.3076"
height="15.3972"
rx="7.69858"
fill={colors.iconBg}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M185.585 125.591C185.655 125.556 185.738 125.556 185.808 125.591L185.958 125.665C186.779 126.07 187.683 126.281 188.598 126.281C188.738 126.281 188.851 126.394 188.851 126.533L188.851 129.2C188.851 130.331 188.27 131.384 187.313 131.988L185.831 132.923C185.749 132.975 185.644 132.975 185.562 132.923L184.08 131.988C183.123 131.384 182.543 130.331 182.543 129.2V126.533C182.543 126.466 182.57 126.402 182.617 126.355C182.664 126.307 182.728 126.281 182.795 126.281C183.711 126.281 184.614 126.07 185.435 125.665L185.585 125.591ZM185.697 126.098L185.659 126.117C184.844 126.519 183.954 126.745 183.048 126.78V129.2C183.048 130.158 183.539 131.05 184.35 131.561L185.697 132.411L187.044 131.561C187.854 131.05 188.346 130.158 188.346 129.2L188.346 126.78C187.44 126.745 186.55 126.519 185.735 126.117L185.697 126.098ZM187.522 127.72C187.621 127.819 187.621 127.978 187.522 128.077L185.527 130.072C185.429 130.17 185.269 130.17 185.171 130.072L184.088 128.989C183.989 128.89 183.989 128.73 184.088 128.632C184.186 128.533 184.346 128.533 184.445 128.632L185.349 129.536L187.165 127.72C187.264 127.622 187.423 127.622 187.522 127.72Z"
fill={colors.smallIcon}
/>
<rect
x="73.3496"
y="80.0647"
width="138"
height="64.3972"
rx="7.5"
stroke="url(#paint1_linear_4346_100010)"
/>
</g>
{/* main shield behind */}
<g filter="url(#filter14_d_4346_100010)">
<path
d="M196.447 62.6772V62.2856L196.067 62.1918L142.472 48.9662L142.352 48.9366L142.232 48.9662L88.638 62.1918L88.2578 62.2856V62.6772V79.5726V79.6817C88.2578 102.224 88.2578 113.615 91.3636 123.937C94.3525 133.871 99.4179 143.057 106.224 150.887C113.296 159.022 122.929 165.101 141.993 177.131L142.085 177.189L142.334 177.346L142.592 177.205L142.592 177.205L142.606 177.197L142.619 177.189L142.712 177.13C161.775 165.101 171.408 159.022 178.48 150.887C185.287 143.057 190.352 133.871 193.341 123.937C196.447 113.615 196.447 102.224 196.447 79.6818V79.5728V79.5726V62.6772Z"
stroke="url(#paint3_linear_4346_100010)"
shapeRendering="crispEdges"
/>
</g>
{/* main shield behind glow */}
<g filter="url(#filter13_f_4346_100010)">
<path
d="M195.947 79.5726V62.6772L142.352 49.4516L88.7578 62.6772V79.5726C88.7578 102.218 88.7578 113.541 91.8424 123.793C94.8109 133.659 99.8417 142.783 106.601 150.559C113.625 158.638 123.201 164.681 142.352 176.766L142.352 176.766C161.504 164.681 171.079 158.638 178.103 150.559C184.863 142.783 189.894 133.659 192.862 123.793C195.947 113.541 195.947 102.218 195.947 79.5728V79.5726Z"
stroke="url(#paint2_radial_4346_100010)"
/>
</g>
<defs>
<filter
id="filter0_b_4346_100010"
x="61.637"
y="19.4393"
width="161.437"
height="187.505"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter1_b_4346_100010"
x="54.4964"
y="10.9577"
width="175.718"
height="204.431"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter2_b_4346_100010"
x="47.3558"
y="2.47605"
width="189.999"
height="221.395"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter3_b_4346_100010"
x="40.2152"
y="-6.00551"
width="204.281"
height="238.358"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter4_b_4346_100010"
x="32.3167"
y="-15.3878"
width="220.077"
height="257.148"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter5_b_4346_100010"
x="24.2073"
y="-25.0207"
width="236.3"
height="276.398"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter6_b_4346_100010"
x="16.098"
y="-34.6536"
width="252.519"
height="295.654"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter7_b_4346_100010"
x="7.39485"
y="-44.9914"
width="269.925"
height="316.329"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter8_b_4346_100010"
x="-1.70476"
y="-55.799"
width="288.126"
height="337.931"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter9_b_4346_100010"
x="-11.3766"
y="-67.2868"
width="307.47"
height="360.92"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter10_b_4346_100010"
x="-21.6716"
y="-79.5146"
width="328.058"
height="385.413"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.51156" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter11_f_4346_100010"
x="-149.761"
y="-168.233"
width="585.914"
height="584.903"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="104.006" result="effect1_foregroundBlur_4346_100010" />
</filter>
<filter
id="filter12_b_4346_100010"
x="69.4673"
y="76.1824"
width="145.767"
height="72.1618"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.69115" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_4346_100010"
result="shape"
/>
</filter>
<filter
id="filter13_f_4346_100010"
x="85.2578"
y="45.9366"
width="114.188"
height="134.421"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_4346_100010" />
</filter>
<filter
id="filter14_d_4346_100010"
x="80.7578"
y="41.4216"
width="123.188"
height="143.504"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="3.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.95 0" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_4346_100010"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_4346_100010"
result="shape"
/>
</filter>
<linearGradient
id="paint0_linear_4346_100010"
x1="142.352"
y1="87.5647"
x2="142.352"
y2="131.024"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? 'white' : '#1CB199'} />
<stop offset="1" stopColor={isDarkMode ? 'white' : '#494949'} stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear_4346_100010"
x1="142.35"
y1="74.3898"
x2="142.35"
y2="155.033"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#1DF7C3' : '#3AFFE5'} stopOpacity="0.86" />
<stop offset="1" stopColor={isDarkMode ? '#161616' : '#38BBAA'} stopOpacity="0" />
</linearGradient>
<radialGradient
id="paint2_radial_4346_100010"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(144.569 41.4294) rotate(90) scale(84.0463 63.1218)"
>
<stop stopColor={isDarkMode ? '#3AFFE5' : '#109079'} />
<stop offset="1" stopColor={isDarkMode ? '#38BBAA' : '#3DCB8C'} stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint3_linear_4346_100010"
x1="142.352"
y1="49.4516"
x2="142.352"
y2="79.1828"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#1CF7C3' : '#109179'} />
<stop offset="1" stopColor={isDarkMode ? '#3DCB8C' : '#0B0B0B'} stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</>
)
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB