mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 07:39:07 +03:00
chore: add animation to database visual
This commit is contained in:
Francesco Sansalvadore committed
1 parent
1f7d953190
commit
71968e4c80
3 files changed
+841
-39
No files matched your search
@@ -0,0 +1,796 @@
|
||||
import React from 'react'
|
||||
import { LazyMotion, domAnimation, m } from 'framer-motion'
|
||||
|
||||
const ease = [0.25, 0.25, 0, 1]
|
||||
|
||||
const svgPathVariant = {
|
||||
default: { opacity: 0, pathLength: 0, transition: { duration: 0.2 } },
|
||||
hover: {
|
||||
opacity: 1,
|
||||
pathLength: 1,
|
||||
transition: { duration: 0.7, ease: ease },
|
||||
},
|
||||
}
|
||||
const pgLogoVariant = {
|
||||
default: { opacity: 1, y: 10, transition: { duration: 0.2 } },
|
||||
hover: {
|
||||
y: 0,
|
||||
transition: { duration: 0.4, ease: ease },
|
||||
},
|
||||
}
|
||||
|
||||
const initialSvgOpacity = 0.15
|
||||
|
||||
function DatabaseVisual() {
|
||||
return (
|
||||
<LazyMotion features={domAnimation}>
|
||||
<m.svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 619 431"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
initial="default"
|
||||
animate="default"
|
||||
exit="exit"
|
||||
whileHover="hover"
|
||||
>
|
||||
<g clip-path="url(#clip0_2_842)">
|
||||
<rect width="618" height="430" transform="translate(0.601562 0.851562)" fill="#171717" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.3906 121.297C12.8343 121.297 9.14062 124.991 9.14062 129.547V413.762C9.14062 418.319 12.8343 422.012 17.3906 422.012H601.811C606.367 422.012 610.061 418.319 610.061 413.762V129.547C610.061 124.991 606.367 121.297 601.811 121.297H17.3906ZM9.64062 129.547C9.64062 125.267 13.1104 121.797 17.3906 121.797H46.7012V159.07H9.64062V129.547ZM9.64062 159.57V196.586H46.7012V159.57H9.64062ZM9.64062 197.086V234.125H46.7012V197.086H9.64062ZM9.64062 234.625V271.625H46.7012V234.625H9.64062ZM9.64062 272.125V309.156H46.7012V272.125H9.64062ZM9.64062 309.656V346.68H46.7012V309.656H9.64062ZM9.64062 347.18V384.227H46.7012V347.18H9.64062ZM9.64062 384.727V413.762C9.64062 418.043 13.1104 421.512 17.3906 421.512H46.7012V384.727H9.64062ZM47.2012 421.512H84.2305V384.727H47.2012V421.512ZM84.7305 421.512H121.754V384.727H84.7305V421.512ZM122.254 421.512H159.279V384.727H122.254V421.512ZM159.779 421.512H196.809V384.727H159.779V421.512ZM197.309 421.512H234.334V384.727H197.309V421.512ZM234.834 421.512H271.858V384.727H234.834V421.512ZM272.358 421.512H309.387V384.727H272.358V421.512ZM309.887 421.512H346.914V384.727H309.887V421.512ZM347.414 421.512H384.441V384.727H347.414V421.512ZM384.941 421.512H421.965V384.727H384.941V421.512ZM422.465 421.512H459.492V384.727H422.465V421.512ZM459.992 421.512H497.02V384.727H459.992V421.512ZM497.52 421.512H534.547V384.727H497.52V421.512ZM535.047 421.512H572.07V384.727H535.047V421.512ZM572.57 421.512H601.811C606.091 421.512 609.561 418.043 609.561 413.762V384.727H572.57V421.512ZM609.561 384.227V347.18H572.57V384.227H609.561ZM609.561 346.68V309.656H572.57V346.68H609.561ZM609.561 309.156V272.125H572.57V309.156H609.561ZM609.561 271.625V234.625H572.57V271.625H609.561ZM609.561 234.125V197.086H572.57V234.125H609.561ZM609.561 196.586V159.57H572.57V196.586H609.561ZM609.561 159.07V129.547C609.561 125.267 606.091 121.797 601.811 121.797H572.57V159.07H609.561ZM572.07 121.797H535.047V159.07L572.07 159.07V121.797ZM534.547 121.797H497.52V159.07H534.547V121.797ZM497.02 121.797H459.992V159.07H497.02V121.797ZM459.492 121.797H422.465V159.07H459.492V121.797ZM421.965 121.797H384.941V159.07H421.965V121.797ZM384.441 121.797H347.414V159.07L384.441 159.07V121.797ZM346.914 121.797H309.887V159.07H346.914V121.797ZM309.387 121.797H272.358V159.07H309.387V121.797ZM271.858 121.797H234.834V159.07L271.858 159.07V121.797ZM234.334 121.797H197.309V159.07H234.334V121.797ZM196.809 121.797H159.779V159.07H196.809V121.797ZM159.279 121.797H122.254V159.07H159.279V121.797ZM121.754 121.797H84.7305V159.07H121.754V121.797ZM84.2305 121.797H47.2012V159.07L84.2305 159.07V121.797ZM572.07 347.18V384.227H535.047V347.18H572.07ZM534.547 347.18V384.227H497.52V347.18H534.547ZM497.02 347.18V384.227H459.992V347.18H497.02ZM459.492 347.18V384.227H422.465V347.18H459.492ZM421.965 347.18V384.227H384.941V347.18H421.965ZM384.441 347.18V384.227H347.414V347.18H384.441ZM346.914 347.18V384.227H309.887V347.18H346.914ZM309.887 346.68H346.914V309.656H309.887V346.68ZM347.414 346.68H384.441V309.656H347.414V346.68ZM384.941 346.68H421.965V309.656H384.941V346.68ZM422.465 346.68H459.492V309.656H422.465V346.68ZM459.992 346.68H497.02V309.656H459.992V346.68ZM497.52 346.68H534.547V309.656H497.52V346.68ZM535.047 346.68H572.07V309.656H535.047V346.68ZM572.07 272.125V309.156H535.047V272.125H572.07ZM534.547 272.125V309.156H497.52V272.125H534.547ZM497.02 272.125V309.156H459.992V272.125H497.02ZM459.492 272.125V309.156H422.465V272.125H459.492ZM421.965 272.125V309.156H384.941V272.125H421.965ZM384.441 272.125V309.156H347.414V272.125H384.441ZM346.914 272.125V309.156H309.887V272.125H346.914ZM309.887 271.625H346.914V234.625H309.887V271.625ZM347.414 271.625H384.441V234.625H347.414V271.625ZM384.941 271.625H421.965V234.625H384.941V271.625ZM422.465 271.625H459.492V234.625H422.465V271.625ZM459.992 271.625H497.02V234.625H459.992V271.625ZM497.52 271.625H534.547V234.625H497.52V271.625ZM535.047 271.625H572.07V234.625H535.047V271.625ZM572.07 197.086V234.125H535.047V197.086H572.07ZM534.547 197.086V234.125H497.52V197.086H534.547ZM497.02 197.086V234.125H459.992V197.086H497.02ZM459.492 197.086V234.125H422.465V197.086H459.492ZM421.965 197.086V234.125H384.941V197.086H421.965ZM384.441 197.086V234.125H347.414V197.086H384.441ZM346.914 197.086V234.125H309.887V197.086H346.914ZM309.887 196.586H346.914V159.57H309.887V196.586ZM347.414 196.586H384.441V159.57L347.414 159.57V196.586ZM384.941 196.586H421.965V159.57H384.941V196.586ZM422.465 196.586H459.492V159.57H422.465V196.586ZM459.992 196.586H497.02V159.57H459.992V196.586ZM497.52 196.586H534.547V159.57H497.52V196.586ZM535.047 196.586H572.07V159.57L535.047 159.57V196.586ZM272.358 159.57H309.387V196.586H272.358V159.57ZM272.358 197.086H309.387V234.125H272.358V197.086ZM272.358 234.625H309.387V271.625H272.358V234.625ZM272.358 272.125H309.387V309.156H272.358V272.125ZM272.358 309.656H309.387V346.68H272.358V309.656ZM272.358 347.18H309.387V384.227H272.358V347.18ZM47.2012 384.227H84.2305V347.18H47.2012V384.227ZM84.7305 384.227H121.754V347.18H84.7305V384.227ZM122.254 384.227Line truncated
|
||||
fill="url(#paint0_radial_2_842)"
|
||||
/>
|
||||
<path d="M309.574 346.703H271.928" stroke="#292929" />
|
||||
<path d="M234.463 309.469H196.832V347.104" stroke="#292929" />
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M234.59 271.996H271.969V234.367H309.602"
|
||||
stroke="url(#paint1_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M347.064 197.023V271.391H393.935"
|
||||
stroke="url(#paint2_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M346.774 310.071H309.168V273.083V235.242"
|
||||
stroke="url(#paint3_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M196.463 234.367H234.343"
|
||||
stroke="url(#paint4_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M422.342 234.367H384.462"
|
||||
stroke="url(#paint5_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M196.832 346.809V309.492H234.751"
|
||||
stroke="url(#paint6_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M271.721 383.414V346.383"
|
||||
stroke="url(#paint7_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M495.526 309.96H459.7V272.492H422.459"
|
||||
stroke="url(#paint8_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M141.91 421.531H477.291"
|
||||
stroke="url(#paint9_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M222.357 384.121H84.3535V346.398"
|
||||
stroke="url(#paint10_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M196.932 271.859H159.543V309.344H122.287"
|
||||
stroke="url(#paint11_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M409.643 384.414H535.207V347.445H570.949"
|
||||
stroke="url(#paint12_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M534.589 78.5234V83.708H535.089V78.5234H540.267V78.0234H535.089V72.8516H534.589V78.0234H529.41V78.5234H534.589ZM572.171 121.216V116.031H566.992V115.531H572.171V110.359H572.671V115.531H577.849V116.031H572.671V121.216H572.171ZM534.589 202.247V197.062H529.41V196.562H534.589V191.391H535.089V196.562H540.267V197.062H535.089V202.247H534.589ZM84.2373 159.594V164.778H84.7373V159.594H89.915V159.094H84.7373V153.922H84.2373V159.094H79.0586V159.594H84.2373ZM497.005 164.739V159.555H491.826V159.055H497.005V153.883H497.505V159.055H502.683V159.555H497.505V164.739H497.005ZM46.6553 127.271V122.086H41.4766V121.586H46.6553V116.414H47.1553V121.586H52.333V122.086H47.1553V127.271H46.6553Z"
|
||||
fill="url(#paint13_linear_2_842)"
|
||||
/>
|
||||
<m.path
|
||||
variants={svgPathVariant}
|
||||
d="M347.625 239.844V272.135M384.145 272.135V347.098H463.336"
|
||||
stroke="url(#paint14_linear_2_842)"
|
||||
/>
|
||||
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M234.59 271.996H271.969V234.367H309.602"
|
||||
stroke="url(#paint1_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M347.064 197.023V271.391H393.935"
|
||||
stroke="url(#paint2_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M346.774 310.071H309.168V273.083V235.242"
|
||||
stroke="url(#paint3_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M196.463 234.367H234.343"
|
||||
stroke="url(#paint4_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M422.342 234.367H384.462"
|
||||
stroke="url(#paint5_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M196.832 346.809V309.492H234.751"
|
||||
stroke="url(#paint6_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M271.721 383.414V346.383"
|
||||
stroke="url(#paint7_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M495.526 309.96H459.7V272.492H422.459"
|
||||
stroke="url(#paint8_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M141.91 421.531H477.291"
|
||||
stroke="url(#paint9_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M222.357 384.121H84.3535V346.398"
|
||||
stroke="url(#paint10_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M196.932 271.859H159.543V309.344H122.287"
|
||||
stroke="url(#paint11_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M409.643 384.414H535.207V347.445H570.949"
|
||||
stroke="url(#paint12_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M534.589 78.5234V83.708H535.089V78.5234H540.267V78.0234H535.089V72.8516H534.589V78.0234H529.41V78.5234H534.589ZM572.171 121.216V116.031H566.992V115.531H572.171V110.359H572.671V115.531H577.849V116.031H572.671V121.216H572.171ZM534.589 202.247V197.062H529.41V196.562H534.589V191.391H535.089V196.562H540.267V197.062H535.089V202.247H534.589ZM84.2373 159.594V164.778H84.7373V159.594H89.915V159.094H84.7373V153.922H84.2373V159.094H79.0586V159.594H84.2373ZM497.005 164.739V159.555H491.826V159.055H497.005V153.883H497.505V159.055H502.683V159.555H497.505V164.739H497.005ZM46.6553 127.271V122.086H41.4766V121.586H46.6553V116.414H47.1553V121.586H52.333V122.086H47.1553V127.271H46.6553Z"
|
||||
fill="url(#paint13_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
opacity={initialSvgOpacity}
|
||||
d="M347.625 239.844V272.135M384.145 272.135V347.098H463.336"
|
||||
stroke="url(#paint14_linear_2_842)"
|
||||
/>
|
||||
<g filter="url(#filter0_f_2_842)">
|
||||
<ellipse
|
||||
cx="313.603"
|
||||
cy="209.57"
|
||||
rx="72.4178"
|
||||
ry="70"
|
||||
fill="#1A5E41"
|
||||
fill-opacity="0.7"
|
||||
/>
|
||||
</g>
|
||||
<m.g variants={pgLogoVariant}>
|
||||
<g filter="url(#filter1_bd_2_842)">
|
||||
<rect
|
||||
x="256.973"
|
||||
y="152.641"
|
||||
width="105.262"
|
||||
height="99.2224"
|
||||
rx="10"
|
||||
fill="url(#paint15_linear_2_842)"
|
||||
fill-opacity="0.8"
|
||||
shape-rendering="crispEdges"
|
||||
/>
|
||||
<g filter="url(#filter2_d_2_842)">
|
||||
<mask id="path-21-inside-1_2_842" fill="white">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M341.068 208.71C340.687 207.559 339.691 206.757 338.403 206.564C337.796 206.473 337.1 206.512 336.277 206.682C334.843 206.978 333.778 207.09 333.001 207.112C335.933 202.162 338.318 196.516 339.69 191.202C341.91 182.609 340.724 178.695 339.338 176.924C335.67 172.237 330.319 169.72 323.862 169.642C320.419 169.6 317.395 170.28 315.818 170.769C314.35 170.51 312.771 170.366 311.114 170.339C308.009 170.289 305.265 170.966 302.92 172.358C301.622 171.919 299.539 171.3 297.133 170.905C291.475 169.976 286.914 170.7 283.579 173.056C279.539 175.91 277.667 180.867 278.013 187.79C278.123 189.989 279.353 196.677 281.289 203.02C282.402 206.666 283.588 209.693 284.816 212.019C286.556 215.317 288.419 217.26 290.51 217.957C291.682 218.348 293.811 218.621 296.051 216.756C296.335 217.1 296.713 217.441 297.216 217.759C297.854 218.161 298.635 218.49 299.414 218.685C302.224 219.388 304.855 219.212 307.1 218.227C307.114 218.627 307.125 219.008 307.134 219.338C307.149 219.872 307.163 220.396 307.183 220.886C307.316 224.199 307.541 226.775 308.209 228.577C308.246 228.676 308.295 228.827 308.347 228.987C308.68 230.008 309.237 231.715 310.655 233.053C312.123 234.438 313.898 234.863 315.524 234.863C316.339 234.863 317.117 234.756 317.8 234.61C320.232 234.089 322.995 233.294 324.994 230.449C326.883 227.758 327.802 223.707 327.968 217.322C327.989 217.142 328.009 216.969 328.028 216.805C328.041 216.694 328.055 216.581 328.068 216.468L328.513 216.507L328.628 216.515C331.105 216.627 334.135 216.102 335.996 215.238C337.466 214.555 342.177 212.068 341.068 208.71M304.671 189.745C304.007 189.653 303.406 189.738 303.101 189.969C302.93 190.098 302.877 190.248 302.863 190.352C302.825 190.625 303.017 190.928 303.134 191.084C303.468 191.526 303.955 191.83 304.437 191.897C304.507 191.906 304.576 191.911 304.645 191.911C305.449 191.911 306.18 191.285 306.245 190.823C306.325 190.244 305.485 189.859 304.671 189.745M326.664 189.764H326.664C326.6 189.31 325.793 189.181 325.027 189.287C324.262 189.394 323.521 189.739 323.583 190.194C323.632 190.547 324.27 191.151 325.026 191.15C325.09 191.15 325.154 191.146 325.219 191.137C325.724 191.067 326.094 190.747 326.269 190.562C326.537 190.281 326.692 189.967 326.664 189.764M339.283 209.191C339.002 208.341 338.098 208.068 336.596 208.378C332.136 209.299 330.538 208.661 330.014 208.275C333.481 202.994 336.332 196.61 337.871 190.653C338.6 187.832 339.002 185.212 339.035 183.076C339.072 180.732 338.672 179.009 337.849 177.957C334.529 173.715 329.657 171.439 323.759 171.377C319.704 171.331 316.278 172.369 315.614 172.661C314.215 172.313 312.69 172.099 311.031 172.072C307.987 172.023 305.356 172.752 303.177 174.237C302.231 173.885 299.785 173.046 296.795 172.564C291.625 171.731 287.516 172.362 284.584 174.439C281.086 176.918 279.471 181.348 279.783 187.607C279.889 189.713 281.089 196.192 282.982 202.396C285.475 210.561 288.184 215.184 291.035 216.135C291.368 216.246 291.753 216.324 292.177 216.324C293.217 216.324 294.492 215.855 295.819 214.26C298.022 211.609 300.079 209.388 300.838 208.581C301.958 209.183 303.189 209.519 304.449 209.552C304.451 209.585 304.454 209.618 304.457 209.651C304.205 209.951 303.997 210.213 303.821 210.437C302.948 211.545 302.767 211.775 299.958 212.354C299.16 212.518 297.038 212.956 297.007 214.443C296.973 216.068 299.515 216.75 299.804 216.823C300.813 217.075 301.786 217.2 302.713 217.2C304.968 217.2 306.952 216.459 308.538 215.025C308.489 220.818 308.731 226.526 309.426 228.265C309.996 229.689 311.388 233.169 315.784 233.169C316.429 233.169 317.139 233.094 317.92 232.926C322.508 231.942 324.5 229.915 325.271 225.444C325.683 223.055 326.391 217.35 326.724 214.29C327.426 214.509 328.331 214.609 329.308 214.609C331.348 214.609 333.701 214.176 335.176 213.491C336.834 212.721 339.825 210.832 339.283 209.191V209.191V209.191ZM328.357 188.512C328.342 189.415 328.217 190.236 328.086 191.092C327.944 192.013 327.797 192.964 327.76 194.12C327.724 195.245 327.864 196.414 328 197.545C328.275 199.828 328.556 202.18 327.466 204.5C327.296 204.199 327.133 203.871 326.983 203.507C326.847 203.178 326.553 202.651 326.146 201.92C324.561 199.078 320.849 192.421 322.749 189.704C323.315 188.896 324.751 188.065 328.357 188.512V188.512V188.512ZM323.987 173.207C329.271 173.323 333.451 175.3 336.411 179.082C338.681 181.983 336.182 195.183 328.945 206.571C328.874 206.48 328.801 206.388 328.726 206.294C328.696 206.256 328.665 206.218 328.634 206.18C330.504 203.091 330.138 200.036 329.813 197.327C329.679 196.215 329.553 195.165 329.585 194.179C329.618 193.133 329.757 192.237 329.89 191.37C330.055 190.301 330.222 189.196 330.176 187.892C330.21 187.756 330.224 187.594 330.206 187.402C330.088 186.153 328.661 182.413 325.753 179.027C324.162 177.176 321.842 175.103 318.675 173.706C320.037 173.423 321.901 173.16 323.987 173.207V173.207V173.207ZM294.415 213.093C292.953 214.85 291.944 214.513 291.612 214.403C289.45 213.681 286.94 209.111 284.728 201.863C282.814 195.591 281.695 189.285 281.606 187.516C281.32Line truncated
|
||||
/>
|
||||
</mask>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M341.068 208.71C340.687 207.559 339.691 206.757 338.403 206.564C337.796 206.473 337.1 206.512 336.277 206.682C334.843 206.978 333.778 207.09 333.001 207.112C335.933 202.162 338.318 196.516 339.69 191.202C341.91 182.609 340.724 178.695 339.338 176.924C335.67 172.237 330.319 169.72 323.862 169.642C320.419 169.6 317.395 170.28 315.818 170.769C314.35 170.51 312.771 170.366 311.114 170.339C308.009 170.289 305.265 170.966 302.92 172.358C301.622 171.919 299.539 171.3 297.133 170.905C291.475 169.976 286.914 170.7 283.579 173.056C279.539 175.91 277.667 180.867 278.013 187.79C278.123 189.989 279.353 196.677 281.289 203.02C282.402 206.666 283.588 209.693 284.816 212.019C286.556 215.317 288.419 217.26 290.51 217.957C291.682 218.348 293.811 218.621 296.051 216.756C296.335 217.1 296.713 217.441 297.216 217.759C297.854 218.161 298.635 218.49 299.414 218.685C302.224 219.388 304.855 219.212 307.1 218.227C307.114 218.627 307.125 219.008 307.134 219.338C307.149 219.872 307.163 220.396 307.183 220.886C307.316 224.199 307.541 226.775 308.209 228.577C308.246 228.676 308.295 228.827 308.347 228.987C308.68 230.008 309.237 231.715 310.655 233.053C312.123 234.438 313.898 234.863 315.524 234.863C316.339 234.863 317.117 234.756 317.8 234.61C320.232 234.089 322.995 233.294 324.994 230.449C326.883 227.758 327.802 223.707 327.968 217.322C327.989 217.142 328.009 216.969 328.028 216.805C328.041 216.694 328.055 216.581 328.068 216.468L328.513 216.507L328.628 216.515C331.105 216.627 334.135 216.102 335.996 215.238C337.466 214.555 342.177 212.068 341.068 208.71M304.671 189.745C304.007 189.653 303.406 189.738 303.101 189.969C302.93 190.098 302.877 190.248 302.863 190.352C302.825 190.625 303.017 190.928 303.134 191.084C303.468 191.526 303.955 191.83 304.437 191.897C304.507 191.906 304.576 191.911 304.645 191.911C305.449 191.911 306.18 191.285 306.245 190.823C306.325 190.244 305.485 189.859 304.671 189.745M326.664 189.764H326.664C326.6 189.31 325.793 189.181 325.027 189.287C324.262 189.394 323.521 189.739 323.583 190.194C323.632 190.547 324.27 191.151 325.026 191.15C325.09 191.15 325.154 191.146 325.219 191.137C325.724 191.067 326.094 190.747 326.269 190.562C326.537 190.281 326.692 189.967 326.664 189.764M339.283 209.191C339.002 208.341 338.098 208.068 336.596 208.378C332.136 209.299 330.538 208.661 330.014 208.275C333.481 202.994 336.332 196.61 337.871 190.653C338.6 187.832 339.002 185.212 339.035 183.076C339.072 180.732 338.672 179.009 337.849 177.957C334.529 173.715 329.657 171.439 323.759 171.377C319.704 171.331 316.278 172.369 315.614 172.661C314.215 172.313 312.69 172.099 311.031 172.072C307.987 172.023 305.356 172.752 303.177 174.237C302.231 173.885 299.785 173.046 296.795 172.564C291.625 171.731 287.516 172.362 284.584 174.439C281.086 176.918 279.471 181.348 279.783 187.607C279.889 189.713 281.089 196.192 282.982 202.396C285.475 210.561 288.184 215.184 291.035 216.135C291.368 216.246 291.753 216.324 292.177 216.324C293.217 216.324 294.492 215.855 295.819 214.26C298.022 211.609 300.079 209.388 300.838 208.581C301.958 209.183 303.189 209.519 304.449 209.552C304.451 209.585 304.454 209.618 304.457 209.651C304.205 209.951 303.997 210.213 303.821 210.437C302.948 211.545 302.767 211.775 299.958 212.354C299.16 212.518 297.038 212.956 297.007 214.443C296.973 216.068 299.515 216.75 299.804 216.823C300.813 217.075 301.786 217.2 302.713 217.2C304.968 217.2 306.952 216.459 308.538 215.025C308.489 220.818 308.731 226.526 309.426 228.265C309.996 229.689 311.388 233.169 315.784 233.169C316.429 233.169 317.139 233.094 317.92 232.926C322.508 231.942 324.5 229.915 325.271 225.444C325.683 223.055 326.391 217.35 326.724 214.29C327.426 214.509 328.331 214.609 329.308 214.609C331.348 214.609 333.701 214.176 335.176 213.491C336.834 212.721 339.825 210.832 339.283 209.191V209.191V209.191ZM328.357 188.512C328.342 189.415 328.217 190.236 328.086 191.092C327.944 192.013 327.797 192.964 327.76 194.12C327.724 195.245 327.864 196.414 328 197.545C328.275 199.828 328.556 202.18 327.466 204.5C327.296 204.199 327.133 203.871 326.983 203.507C326.847 203.178 326.553 202.651 326.146 201.92C324.561 199.078 320.849 192.421 322.749 189.704C323.315 188.896 324.751 188.065 328.357 188.512V188.512V188.512ZM323.987 173.207C329.271 173.323 333.451 175.3 336.411 179.082C338.681 181.983 336.182 195.183 328.945 206.571C328.874 206.48 328.801 206.388 328.726 206.294C328.696 206.256 328.665 206.218 328.634 206.18C330.504 203.091 330.138 200.036 329.813 197.327C329.679 196.215 329.553 195.165 329.585 194.179C329.618 193.133 329.757 192.237 329.89 191.37C330.055 190.301 330.222 189.196 330.176 187.892C330.21 187.756 330.224 187.594 330.206 187.402C330.088 186.153 328.661 182.413 325.753 179.027C324.162 177.176 321.842 175.103 318.675 173.706C320.037 173.423 321.901 173.16 323.987 173.207V173.207V173.207ZM294.415 213.093C292.953 214.85 291.944 214.513 291.612 214.403C289.45 213.681 286.94 209.111 284.728 201.863C282.814 195.591 281.695 189.285 281.606 187.516C281.327
Line truncated
|
||||
fill="url(#paint16_linear_2_842)"
|
||||
fill-opacity="0.99"
|
||||
shape-rendering="crispEdges"
|
||||
/>
|
||||
<path
|
||||
d="M338.403 206.564L338.551 205.575L338.551 205.575L338.403 206.564ZM336.277 206.682L336.075 205.702L336.075 205.702L336.277 206.682ZM333.001 207.112L332.141 206.603L333.03 208.112L333.001 207.112ZM339.69 191.202L338.722 190.952L338.722 190.952L339.69 191.202ZM339.338 176.924L338.55 177.54L338.55 177.54L339.338 176.924ZM323.862 169.642L323.85 170.642L323.851 170.642L323.862 169.642ZM315.818 170.769L315.645 171.754L316.114 171.724L315.818 170.769ZM311.114 170.339L311.13 169.339L311.13 169.339L311.114 170.339ZM302.92 172.358L302.6 173.305L303.43 173.218L302.92 172.358ZM297.133 170.905L297.295 169.918L297.295 169.918L297.133 170.905ZM283.579 173.056L284.156 173.873L284.156 173.873L283.579 173.056ZM278.013 187.79L279.012 187.741L279.012 187.74L278.013 187.79ZM281.289 203.02L282.245 202.728L282.245 202.728L281.289 203.02ZM284.816 212.019L283.931 212.486L283.931 212.486L284.816 212.019ZM290.51 217.957L290.193 218.906L290.194 218.906L290.51 217.957ZM296.051 216.756L296.822 216.119L295.411 215.988L296.051 216.756ZM297.216 217.759L296.682 218.604L296.682 218.604L297.216 217.759ZM299.414 218.685L299.172 219.655L299.172 219.655L299.414 218.685ZM307.1 218.227L308.1 218.193L306.699 217.312L307.1 218.227ZM307.134 219.338L306.134 219.365L306.134 219.366L307.134 219.338ZM307.183 220.886L306.184 220.926L306.184 220.926L307.183 220.886ZM308.209 228.577L309.147 228.231L309.147 228.23L308.209 228.577ZM308.347 228.987L307.396 229.297L307.397 229.298L308.347 228.987ZM310.655 233.053L309.968 233.78L309.968 233.78L310.655 233.053ZM315.524 234.863L315.524 233.863L315.524 233.863L315.524 234.863ZM317.8 234.61L317.59 233.632L317.59 233.632L317.8 234.61ZM324.994 230.449L324.175 229.874L324.175 229.874L324.994 230.449ZM327.968 217.322L326.975 217.204L326.968 217.296L327.968 217.322ZM328.028 216.805L329.022 216.921L329.022 216.92L328.028 216.805ZM328.068 216.468L328.155 215.472L327.075 216.351L328.068 216.468ZM328.513 216.507L328.426 217.503L328.446 217.504L328.513 216.507ZM328.628 216.515L328.56 217.512L328.582 217.514L328.628 216.515ZM335.996 215.238L335.575 214.331L335.574 214.331L335.996 215.238ZM303.101 189.969L302.498 189.171L302.498 189.171L303.101 189.969ZM302.863 190.352L303.854 190.49L303.854 190.488L302.863 190.352ZM303.134 191.084L302.336 191.686L302.336 191.686L303.134 191.084ZM304.437 191.897L304.3 192.887L304.3 192.887L304.437 191.897ZM306.245 190.823L307.235 190.961L307.235 190.961L306.245 190.823ZM326.664 189.764L325.673 189.902L326.664 190.764V189.764ZM325.027 189.287L324.889 188.297L324.889 188.297L325.027 189.287ZM323.583 190.194L322.592 190.329L322.592 190.333L323.583 190.194ZM325.026 191.15L325.026 190.15L325.026 190.15L325.026 191.15ZM325.219 191.137L325.082 190.147L325.081 190.147L325.219 191.137ZM326.269 190.562L325.545 189.873L325.545 189.873L326.269 190.562ZM339.283 209.191L340.232 208.877L339.283 209.191ZM336.596 208.378L336.798 209.358L336.798 209.358L336.596 208.378ZM330.014 208.275L329.178 207.726L329.421 209.08L330.014 208.275ZM337.871 190.653L336.903 190.403L336.903 190.403L337.871 190.653ZM339.035 183.076L338.035 183.061L338.035 183.061L339.035 183.076ZM337.849 177.957L338.636 177.341L338.636 177.341L337.849 177.957ZM323.759 171.377L323.747 172.377L323.748 172.377L323.759 171.377ZM315.614 172.661L315.372 173.631L316.016 173.576L315.614 172.661ZM311.031 172.072L311.047 171.072L311.047 171.072L311.031 172.072ZM303.177 174.237L302.828 175.174L303.74 175.063L303.177 174.237ZM296.795 172.564L296.954 171.577L296.954 171.577L296.795 172.564ZM284.584 174.439L284.006 173.623L284.006 173.623L284.584 174.439ZM279.783 187.607L280.782 187.558L280.782 187.558L279.783 187.607ZM282.982 202.396L282.026 202.688L282.026 202.688L282.982 202.396ZM291.035 216.135L291.351 215.186L291.351 215.186L291.035 216.135ZM295.819 214.26L296.588 214.9L296.588 214.899L295.819 214.26ZM300.838 208.581L301.311 207.7L300.109 207.896L300.838 208.581ZM304.449 209.552L305.447 209.486L304.475 208.553L304.449 209.552ZM304.457 209.651L305.222 210.296L305.453 209.562L304.457 209.651ZM303.821 210.437L304.606 211.056L304.606 211.056L303.821 210.437ZM299.958 212.354L299.757 211.374L299.756 211.374L299.958 212.354ZM297.007 214.443L298.006 214.464L298.006 214.464L297.007 214.443ZM299.804 216.823L300.047 215.853L300.047 215.853L299.804 216.823ZM302.713 217.2L302.713 218.2L302.713 218.2L302.713 217.2ZM308.538 215.025L309.538 215.033L307.868 214.283L308.538 215.025ZM309.426 228.265L308.498 228.637L308.498 228.637L309.426 228.265ZM315.784 233.169L315.784 232.169L315.784 232.169L315.784 233.169ZM317.92 232.926L318.129 233.904L318.13 233.904L317.92 232.926ZM325.271 225.444L324.285 225.274L324.285 225.275L325.271 225.444ZM326.724 214.29L327.021 213.335L325.729 214.182L326.724 214.29ZM329.308 214.609L329.308 213.609L329.308 213.609L329.308 214.609ZM335.176 213.491L335.597 214.398L335.597 214.398L335.176 213.491ZM339.283 209.191L340.232 208.877L339.283 209.191ZM339.283 209.191L340.232 208.877L339.283 209.191ZM328.357 188.512L329.357 188.529L32Line truncated
|
||||
fill="url(#paint17_linear_2_842)"
|
||||
mask="url(#path-21-inside-1_2_842)"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
x="257.473"
|
||||
y="153.141"
|
||||
width="104.262"
|
||||
height="98.2224"
|
||||
rx="9.5"
|
||||
stroke="url(#paint18_linear_2_842)"
|
||||
shape-rendering="crispEdges"
|
||||
/>
|
||||
</g>
|
||||
<g filter="url(#filter3_f_2_842)">
|
||||
<rect
|
||||
x="256.975"
|
||||
y="152.641"
|
||||
width="105.263"
|
||||
height="99.2188"
|
||||
rx="10"
|
||||
stroke="url(#paint19_linear_2_842)"
|
||||
stroke-linejoin="bevel"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M257.289 236.75V241.453C257.289 246.976 261.766 251.453 267.289 251.453H351.773C357.296 251.453 361.773 246.976 361.773 241.453V239.362"
|
||||
stroke="url(#paint20_linear_2_842)"
|
||||
/>
|
||||
</m.g>
|
||||
<g filter="url(#filter4_b_2_842)">
|
||||
<g filter="url(#filter5_b_2_842)">
|
||||
<mask id="path-25-inside-2_2_842" fill="white">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M417.151 406.529V441.395V441.395C417.15 457.345 372.042 470.276 316.399 470.276C260.755 470.276 215.647 457.345 215.646 441.395V441.395V406.529V405.654C215.646 405.64 215.658 405.628 215.672 405.628V405.628C215.685 405.628 215.696 405.619 215.697 405.606C217.398 390.083 261.833 377.648 316.399 377.648C370.964 377.648 415.399 390.083 417.1 405.606C417.102 405.619 417.112 405.628 417.125 405.628V405.628C417.139 405.628 417.151 405.64 417.151 405.654V406.529Z"
|
||||
/>
|
||||
</mask>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M417.151 406.529V441.395V441.395C417.15 457.345 372.042 470.276 316.399 470.276C260.755 470.276 215.647 457.345 215.646 441.395V441.395V406.529V405.654C215.646 405.64 215.658 405.628 215.672 405.628V405.628C215.685 405.628 215.696 405.619 215.697 405.606C217.398 390.083 261.833 377.648 316.399 377.648C370.964 377.648 415.399 390.083 417.1 405.606C417.102 405.619 417.112 405.628 417.125 405.628V405.628C417.139 405.628 417.151 405.64 417.151 405.654V406.529Z"
|
||||
fill="url(#paint21_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
d="M417.151 441.395L418.151 441.395V441.395H417.151ZM215.646 441.395L214.646 441.395L214.646 441.395L215.646 441.395ZM417.1 405.606L416.106 405.715L417.1 405.606ZM215.697 405.606L214.703 405.497L215.697 405.606ZM418.151 441.395V406.529H416.151V441.395H418.151ZM418.151 441.395V441.395H416.151V441.395H418.151ZM316.399 471.276C344.286 471.276 369.572 468.037 387.917 462.778C397.082 460.151 404.572 457.003 409.794 453.464C414.981 449.949 418.151 445.888 418.151 441.395L416.151 441.395C416.151 444.876 413.681 448.414 408.672 451.809C403.697 455.18 396.432 458.256 387.365 460.855C369.245 466.05 344.154 469.276 316.399 469.276V471.276ZM214.646 441.395C214.647 445.888 217.816 449.949 223.003 453.464C228.225 457.003 235.715 460.151 244.881 462.778C263.226 468.037 288.511 471.276 316.399 471.276V469.276C288.643 469.276 263.552 466.05 245.432 460.855C236.365 458.256 229.1 455.18 224.125 451.809C219.116 448.414 216.647 444.876 216.646 441.395L214.646 441.395ZM214.646 441.395V441.395H216.646V441.395H214.646ZM214.646 406.529V441.395H216.646V406.529H214.646ZM214.646 405.654V406.529H216.646V405.654H214.646ZM216.691 405.715C217.066 402.296 219.834 398.831 225.013 395.532C230.155 392.257 237.47 389.28 246.492 386.769C264.525 381.75 289.181 378.648 316.399 378.648V376.648C289.05 376.648 264.206 379.763 245.956 384.842C236.836 387.38 229.312 390.423 223.939 393.845C218.603 397.243 215.179 401.154 214.703 405.497L216.691 405.715ZM316.399 378.648C343.616 378.648 368.272 381.75 386.305 386.769C395.328 389.28 402.642 392.257 407.784 395.532C412.963 398.831 415.731 402.296 416.106 405.715L418.094 405.497C417.618 401.154 414.194 397.243 408.858 393.845C403.485 390.423 395.962 387.38 386.842 384.842C368.591 379.763 343.747 376.648 316.399 376.648V378.648ZM418.151 406.529V405.654H416.151V406.529H418.151ZM417.125 406.628C416.587 406.628 416.151 406.192 416.151 405.654H418.151C418.151 405.087 417.692 404.628 417.125 404.628V406.628ZM416.106 405.715C416.164 406.24 416.608 406.628 417.125 406.628V404.628C417.617 404.628 418.04 404.997 418.094 405.497L416.106 405.715ZM215.672 406.628C216.19 406.628 216.634 406.24 216.691 405.715L214.703 405.497C214.758 404.997 215.18 404.628 215.672 404.628V406.628ZM216.646 405.654C216.646 406.192 216.21 406.628 215.672 406.628V404.628C215.106 404.628 214.646 405.087 214.646 405.654H216.646Z"
|
||||
fill="url(#paint22_linear_2_842)"
|
||||
mask="url(#path-25-inside-2_2_842)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M416.651 406.529C416.651 410.264 414.006 413.932 408.953 417.357C403.916 420.771 396.595 423.865 387.503 426.471C369.327 431.681 344.188 434.91 316.399 434.91C288.61 434.91 263.47 431.681 245.294 426.471C236.202 423.865 228.881 420.771 223.845 417.357C218.791 413.932 216.146 410.264 216.146 406.529C216.146 402.794 218.791 399.126 223.845 395.701C228.881 392.288 236.202 389.194 245.294 386.588C263.47 381.377 288.61 378.148 316.399 378.148C344.188 378.148 369.327 381.377 387.503 386.588C396.595 389.194 403.916 392.288 408.953 395.701C414.006 399.126 416.651 402.794 416.651 406.529Z"
|
||||
fill="url(#paint23_linear_2_842)"
|
||||
stroke="url(#paint24_linear_2_842)"
|
||||
/>
|
||||
<g filter="url(#filter6_b_2_842)">
|
||||
<mask id="path-28-inside-3_2_842" fill="white">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M417.151 352.842V387.699V387.707C417.151 403.658 372.042 416.589 316.399 416.589C260.755 416.589 215.646 403.658 215.646 387.707V387.699V352.842V351.959C215.646 351.945 215.658 351.933 215.672 351.933V351.933C215.685 351.933 215.697 351.923 215.698 351.91C217.414 336.391 261.843 323.961 316.399 323.961C370.955 323.961 415.383 336.391 417.099 351.91C417.101 351.923 417.112 351.933 417.125 351.933V351.933C417.139 351.933 417.151 351.945 417.151 351.959V352.842Z"
|
||||
/>
|
||||
</mask>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M417.151 352.842V387.699V387.707C417.151 403.658 372.042 416.589 316.399 416.589C260.755 416.589 215.646 403.658 215.646 387.707V387.699V352.842V351.959C215.646 351.945 215.658 351.933 215.672 351.933V351.933C215.685 351.933 215.697 351.923 215.698 351.91C217.414 336.391 261.843 323.961 316.399 323.961C370.955 323.961 415.383 336.391 417.099 351.91C417.101 351.923 417.112 351.933 417.125 351.933V351.933C417.139 351.933 417.151 351.945 417.151 351.959V352.842Z"
|
||||
fill="url(#paint25_linear_2_842)"
|
||||
/>
|
||||
<path
|
||||
d="M417.099 351.91L418.093 351.8L417.099 351.91ZM215.698 351.91L214.704 351.8L215.698 351.91ZM418.151 387.699V352.842H416.151V387.699H418.151ZM418.151 387.707V387.699H416.151V387.707H418.151ZM316.399 417.589C344.287 417.589 369.572 414.35 387.917 409.091C397.082 406.463 404.573 403.316 409.794 399.777C414.982 396.262 418.151 392.201 418.151 387.707H416.151C416.151 391.189 413.681 394.727 408.672 398.122C403.697 401.493 396.432 404.569 387.366 407.168C369.245 412.363 344.155 415.589 316.399 415.589V417.589ZM214.646 387.707C214.646 392.201 217.816 396.262 223.003 399.777C228.225 403.316 235.715 406.463 244.881 409.091C263.226 414.35 288.511 417.589 316.399 417.589V415.589C288.643 415.589 263.552 412.363 245.432 407.168C236.365 404.569 229.1 401.493 224.125 398.122C219.116 394.727 216.646 391.189 216.646 387.707H214.646ZM214.646 387.699V387.707H216.646V387.699H214.646ZM214.646 352.842V387.699H216.646V352.842H214.646ZM214.646 351.959V352.842H216.646V351.959H214.646ZM216.692 352.02C217.07 348.602 219.841 345.138 225.022 341.839C230.165 338.565 237.48 335.589 246.501 333.079C264.534 328.062 289.186 324.961 316.399 324.961V322.961C289.055 322.961 264.215 326.075 245.965 331.152C236.846 333.69 229.322 336.731 223.948 340.152C218.611 343.55 215.184 347.459 214.704 351.8L216.692 352.02ZM316.399 324.961C343.611 324.961 368.263 328.062 386.296 333.079C395.317 335.589 402.633 338.565 407.776 341.839C412.957 345.138 415.727 348.602 416.105 352.02L418.093 351.8C417.613 347.459 414.187 343.55 408.85 340.152C403.475 336.731 395.951 333.69 386.832 331.152C368.582 326.075 343.742 322.961 316.399 322.961V324.961ZM418.151 352.842V351.959H416.151V352.842H418.151ZM417.125 352.933C416.587 352.933 416.151 352.497 416.151 351.959H418.151C418.151 351.392 417.691 350.933 417.125 350.933V352.933ZM416.105 352.02C416.163 352.545 416.608 352.933 417.125 352.933V350.933C417.616 350.933 418.038 351.301 418.093 351.8L416.105 352.02ZM215.672 352.933C216.19 352.933 216.634 352.545 216.692 352.02L214.704 351.8C214.759 351.301 215.181 350.933 215.672 350.933V352.933ZM216.646 351.959C216.646 352.497 216.21 352.933 215.672 352.933V350.933C215.106 350.933 214.646 351.392 214.646 351.959H216.646Z"
|
||||
fill="url(#paint26_linear_2_842)"
|
||||
mask="url(#path-28-inside-3_2_842)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M416.651 352.842C416.651 356.577 414.006 360.245 408.953 363.67C403.916 367.084 396.595 370.177 387.503 372.784C369.327 377.994 344.188 381.223 316.399 381.223C288.61 381.223 263.47 377.994 245.294 372.784C236.202 370.177 228.881 367.084 223.845 363.67C218.791 360.245 216.146 356.577 216.146 352.842C216.146 349.107 218.791 345.439 223.845 342.014C228.881 338.601 236.202 335.507 245.294 332.901C263.47 327.69 288.61 324.461 316.399 324.461C344.188 324.461 369.327 327.69 387.503 332.901C396.595 335.507 403.916 338.601 408.953 342.014C414.006 345.439 416.651 349.107 416.651 352.842Z"
|
||||
fill="url(#paint27_linear_2_842)"
|
||||
stroke="url(#paint28_linear_2_842)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_f_2_842"
|
||||
x="45.1855"
|
||||
y="-56.4297"
|
||||
width="536.836"
|
||||
height="532"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="98" result="effect1_foregroundBlur_2_842" />
|
||||
</filter>
|
||||
<filter
|
||||
id="filter1_bd_2_842"
|
||||
x="248.249"
|
||||
y="143.917"
|
||||
width="122.709"
|
||||
height="116.669"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.36172" />
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2_842" />
|
||||
<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 dy="4" />
|
||||
<feGaussianBlur stdDeviation="2" />
|
||||
<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.25 0" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect1_backgroundBlur_2_842"
|
||||
result="effect2_dropShadow_2_842"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect2_dropShadow_2_842"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<filter
|
||||
id="filter2_d_2_842"
|
||||
x="273.973"
|
||||
y="169.641"
|
||||
width="71.2625"
|
||||
height="73.2224"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="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 dy="4" />
|
||||
<feGaussianBlur stdDeviation="2" />
|
||||
<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.25 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_842" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_2_842"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<filter
|
||||
id="filter3_f_2_842"
|
||||
x="252.475"
|
||||
y="148.141"
|
||||
width="114.263"
|
||||
height="108.219"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2_842" />
|
||||
</filter>
|
||||
<filter
|
||||
id="filter4_b_2_842"
|
||||
x="212.646"
|
||||
y="320.961"
|
||||
width="207.504"
|
||||
height="152.315"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.5" />
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2_842" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_backgroundBlur_2_842"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<filter
|
||||
id="filter5_b_2_842"
|
||||
x="211.646"
|
||||
y="373.648"
|
||||
width="209.504"
|
||||
height="100.628"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2_842" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_backgroundBlur_2_842"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<filter
|
||||
id="filter6_b_2_842"
|
||||
x="211.646"
|
||||
y="319.961"
|
||||
width="209.504"
|
||||
height="100.628"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2_842" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_backgroundBlur_2_842"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<radialGradient
|
||||
id="paint0_radial_2_842"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(309.601 304.613) rotate(90) scale(117.399 349.429)"
|
||||
>
|
||||
<stop stop-color="#171717" />
|
||||
<stop offset="0.598958" stop-color="#767676" stop-opacity="0.28" />
|
||||
<stop offset="1" stop-color="#818181" stop-opacity="0.04" />
|
||||
</radialGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_2_842"
|
||||
x1="238.535"
|
||||
y1="271.992"
|
||||
x2="354.312"
|
||||
y2="137.478"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_2_842"
|
||||
x1="370.5"
|
||||
y1="197.023"
|
||||
x2="370.5"
|
||||
y2="271.391"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_2_842"
|
||||
x1="361.844"
|
||||
y1="303.028"
|
||||
x2="305.392"
|
||||
y2="249.784"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#5D5C5C" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_2_842"
|
||||
x1="196.463"
|
||||
y1="224.173"
|
||||
x2="241.336"
|
||||
y2="226.274"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_2_842"
|
||||
x1="422.342"
|
||||
y1="224.173"
|
||||
x2="377.469"
|
||||
y2="226.274"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint6_linear_2_842"
|
||||
x1="189.597"
|
||||
y1="326.072"
|
||||
x2="196.832"
|
||||
y2="362.826"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint7_linear_2_842"
|
||||
x1="272.221"
|
||||
y1="346.383"
|
||||
x2="272.221"
|
||||
y2="383.414"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint8_linear_2_842"
|
||||
x1="422.459"
|
||||
y1="275.188"
|
||||
x2="468.578"
|
||||
y2="328.951"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint9_linear_2_842"
|
||||
x1="477.291"
|
||||
y1="422.293"
|
||||
x2="161.135"
|
||||
y2="422.293"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="0.484375" stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint10_linear_2_842"
|
||||
x1="78.9958"
|
||||
y1="370.175"
|
||||
x2="210.761"
|
||||
y2="403.606"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#5D5C5C" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint11_linear_2_842"
|
||||
x1="167.943"
|
||||
y1="267.187"
|
||||
x2="159.84"
|
||||
y2="326.866"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint12_linear_2_842"
|
||||
x1="438.112"
|
||||
y1="380.399"
|
||||
x2="564.059"
|
||||
y2="357.192"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#5D5C5C" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint13_linear_2_842"
|
||||
x1="46.9048"
|
||||
y1="116.414"
|
||||
x2="46.9048"
|
||||
y2="209.693"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#383838" stop-opacity="0.81" />
|
||||
<stop offset="1" stop-color="#828282" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint14_linear_2_842"
|
||||
x1="436.524"
|
||||
y1="337.004"
|
||||
x2="355.053"
|
||||
y2="263.116"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#5D5C5C" stop-opacity="0" />
|
||||
<stop offset="0.984375" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint15_linear_2_842"
|
||||
x1="268.909"
|
||||
y1="144.011"
|
||||
x2="358.973"
|
||||
y2="161.654"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#151515" />
|
||||
<stop offset="1" stop-color="#1C1C1C" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint16_linear_2_842"
|
||||
x1="323.547"
|
||||
y1="169.641"
|
||||
x2="309.685"
|
||||
y2="247.749"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#707070" />
|
||||
<stop offset="1" stop-color="#C1D2CA" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint17_linear_2_842"
|
||||
x1="341.234"
|
||||
y1="187.286"
|
||||
x2="297.907"
|
||||
y2="232.772"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#BBFFE1" />
|
||||
<stop offset="0.208333" stop-color="white" stop-opacity="0.58" />
|
||||
<stop offset="1" stop-color="#B4B4B4" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint18_linear_2_842"
|
||||
x1="244.705"
|
||||
y1="228.619"
|
||||
x2="391.11"
|
||||
y2="214.703"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#282828" />
|
||||
<stop offset="0.505208" stop-color="white" />
|
||||
<stop offset="1" stop-color="#2D2D2D" stop-opacity="0.39" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint19_linear_2_842"
|
||||
x1="357.439"
|
||||
y1="174.891"
|
||||
x2="267.808"
|
||||
y2="174.891"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#57FDB3" stop-opacity="0.42" />
|
||||
<stop offset="0.53125" stop-color="#3ECF8E" />
|
||||
<stop offset="1" stop-color="#4B4B4B" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint20_linear_2_842"
|
||||
x1="309.531"
|
||||
y1="239.711"
|
||||
x2="309.531"
|
||||
y2="251.453"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#5D5C5C" stop-opacity="0" />
|
||||
<stop offset="0.984375" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint21_linear_2_842"
|
||||
x1="216.921"
|
||||
y1="442.413"
|
||||
x2="413.581"
|
||||
y2="437.292"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#191919" stop-opacity="0.94" />
|
||||
<stop offset="1" stop-color="#0E0E0E" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint22_linear_2_842"
|
||||
x1="301.498"
|
||||
y1="374.786"
|
||||
x2="321.817"
|
||||
y2="448.646"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#A0A0A0" />
|
||||
<stop offset="1" stop-color="#232323" stop-opacity="0.37" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint23_linear_2_842"
|
||||
x1="311.03"
|
||||
y1="385.921"
|
||||
x2="311.281"
|
||||
y2="404.065"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#151515" stop-opacity="0.6" />
|
||||
<stop offset="1" stop-color="#141414" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint24_linear_2_842"
|
||||
x1="286.934"
|
||||
y1="377.648"
|
||||
x2="299.211"
|
||||
y2="432.004"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#B9B9B9" />
|
||||
<stop offset="1" stop-color="#212121" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint25_linear_2_842"
|
||||
x1="216.921"
|
||||
y1="388.725"
|
||||
x2="413.581"
|
||||
y2="383.605"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#191919" stop-opacity="0.94" />
|
||||
<stop offset="1" stop-color="#0E0E0E" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint26_linear_2_842"
|
||||
x1="301.498"
|
||||
y1="321.098"
|
||||
x2="321.817"
|
||||
y2="394.958"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#A0A0A0" />
|
||||
<stop offset="1" stop-color="#232323" stop-opacity="0.37" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint27_linear_2_842"
|
||||
x1="311.03"
|
||||
y1="332.234"
|
||||
x2="311.281"
|
||||
y2="350.378"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#151515" stop-opacity="0.6" />
|
||||
<stop offset="1" stop-color="#141414" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint28_linear_2_842"
|
||||
x1="286.934"
|
||||
y1="323.961"
|
||||
x2="299.211"
|
||||
y2="378.317"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#3DCB8C" />
|
||||
<stop offset="0.442708" stop-color="#B9B9B9" />
|
||||
<stop offset="1" stop-color="#212121" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_2_842">
|
||||
<rect width="618" height="430" fill="white" transform="translate(0.601562 0.851562)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</m.svg>
|
||||
</LazyMotion>
|
||||
)
|
||||
}
|
||||
|
||||
export default DatabaseVisual
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { LazyMotion, domAnimation, m } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
|
||||
const FeatureCard = ({
|
||||
@@ -17,33 +17,35 @@ const FeatureCard = ({
|
||||
classname?: string
|
||||
onClick?: any
|
||||
}) => (
|
||||
<Link href={url}>
|
||||
<a
|
||||
className={[
|
||||
'relative col-span-1 lg:col-span-4 h-[360px] md:h-[460px] flex flex-col gap-5 lg:flex-row',
|
||||
classname,
|
||||
].join(' ')}
|
||||
onClick={onClick}
|
||||
>
|
||||
<motion.div
|
||||
className={`relative overflow-hidden group/2 flex-1 flex flex-col items-center gap-5 lg:items-start justify-between bg-scale-100
|
||||
w-full border dark:border-scale-300 border-scale-400 rounded-xl h-full px-6 py-12 shadow-lg`}
|
||||
initial="default"
|
||||
animate="default"
|
||||
whileHover="hover"
|
||||
<LazyMotion features={domAnimation}>
|
||||
<Link href={url}>
|
||||
<a
|
||||
className={[
|
||||
'relative col-span-1 lg:col-span-4 h-[360px] md:h-[460px] flex flex-col gap-5 lg:flex-row',
|
||||
classname,
|
||||
].join(' ')}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="relative z-10 flex flex-col items-center mx-auto text-center gap-2 text-scale-1200">
|
||||
<dt>
|
||||
<h2 className="text-xl">{title}</h2>
|
||||
</dt>
|
||||
<dd>
|
||||
<p className="text-sm text-scale-900">{subtitle}</p>
|
||||
</dd>
|
||||
</div>
|
||||
{image}
|
||||
</motion.div>
|
||||
</a>
|
||||
</Link>
|
||||
<m.div
|
||||
className={`relative overflow-hidden group/2 flex-1 flex flex-col items-center gap-5 lg:items-start justify-between bg-scale-100
|
||||
w-full border dark:border-scale-300 border-scale-400 rounded-xl h-full px-6 py-12 shadow-lg`}
|
||||
initial="default"
|
||||
animate="default"
|
||||
whileHover="hover"
|
||||
>
|
||||
<div className="relative z-10 flex flex-col items-center mx-auto text-center gap-2 text-scale-1200">
|
||||
<dt>
|
||||
<h2 className="text-xl">{title}</h2>
|
||||
</dt>
|
||||
<dd>
|
||||
<p className="text-sm text-scale-900">{subtitle}</p>
|
||||
</dd>
|
||||
</div>
|
||||
{image}
|
||||
</m.div>
|
||||
</a>
|
||||
</Link>
|
||||
</LazyMotion>
|
||||
)
|
||||
|
||||
export default FeatureCard
|
||||
@@ -9,6 +9,7 @@ import { motion } from 'framer-motion'
|
||||
import BackedBy from '../BackedBy'
|
||||
import { useBreakpoint, useTheme } from 'common'
|
||||
import FeatureCard from './FeatureCard'
|
||||
import DatabaseVisual from './DatabaseVisual'
|
||||
|
||||
const opacityVariant = {
|
||||
default: { opacity: 1, filter: 'grayscale(1)', transition: { duration: 0.1 } },
|
||||
@@ -75,19 +76,22 @@ const Features = () => {
|
||||
}
|
||||
onClick={() => sendTelemetryEvent(name)}
|
||||
image={
|
||||
// <motion.div className="absolute inset-0 z-0" variants={opacityVariant}>
|
||||
// <Image
|
||||
// src={
|
||||
// isDarkMode
|
||||
// ? '/images/index/database-dark.jpg'
|
||||
// : '/images/index/database-light.jpg'
|
||||
// }
|
||||
// alt="Supabase Postgres Database, hover image with glow"
|
||||
// layout="fill"
|
||||
// objectPosition={isSm ? 'bottom' : '50% 50%'}
|
||||
// objectFit={isSm ? 'contain' : 'cover'}
|
||||
// quality={100}
|
||||
// />
|
||||
// </motion.div>
|
||||
<motion.div className="absolute inset-0 z-0" variants={opacityVariant}>
|
||||
<Image
|
||||
src={
|
||||
isDarkMode
|
||||
? '/images/index/database-dark.jpg'
|
||||
: '/images/index/database-light.jpg'
|
||||
}
|
||||
alt="Supabase Postgres Database, hover image with glow"
|
||||
layout="fill"
|
||||
objectPosition={isSm ? 'bottom' : '50% 50%'}
|
||||
objectFit={isSm ? 'contain' : 'cover'}
|
||||
quality={100}
|
||||
/>
|
||||
<DatabaseVisual />
|
||||
</motion.div>
|
||||
}
|
||||
classname="col-span-full md:col-span-3"
|
||||
|
||||
Reference in new issue
Block a user