1529 lines
51 KiB
TypeScript
1529 lines
51 KiB
TypeScript
import { Particles } from "@/components/particles";
|
|
import { cn } from "@/lib/utils";
|
|
import { LucideIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { type PropsWithChildren } from "react";
|
|
|
|
export enum Color {
|
|
White = "#FFFFFF",
|
|
Yellow = "#FFD600",
|
|
Purple = "#9D72FF",
|
|
}
|
|
|
|
export const PricingCardHeader: React.FC<{
|
|
title: string;
|
|
description: React.ReactNode;
|
|
className?: string;
|
|
color: Color;
|
|
withIcon?: boolean;
|
|
}> = ({ title, description, className, color, withIcon = true }) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"p-10 flex items-start justify-between w-full gap-10 min-h-40 relative ",
|
|
className,
|
|
)}
|
|
>
|
|
<div>
|
|
<span className="bg-gradient-to-br text-transparent bg-gradient-stop bg-clip-text from-white via-white via-30% to-white/30 font-medium ">
|
|
{title}
|
|
</span>
|
|
<p className="mt-4 text-sm text-white/60">{description}</p>
|
|
</div>
|
|
{withIcon ? (
|
|
<div
|
|
className={cn(
|
|
"relative z-30 flex items-center justify-center ring-1 h-14 w-14 duration-150 rounded-xl backdrop-blur rounded-2 overflow-hidden drop-shadow-[0_20px_20px_rgba(256,0,0,1) ]",
|
|
{
|
|
" ring-white/10 hover:ring-white/25 ": color === Color.White,
|
|
" ring-[#FFD600]/10 hover:ring-[#FFD600]/25": color === Color.Yellow,
|
|
" ring-[#9D72FF]/10 hover:ring-[#9D72FF]/25": color === Color.Purple,
|
|
},
|
|
)}
|
|
>
|
|
<Particles
|
|
className="absolute inset-0 duration-500 opacity-50 -z-10 group-hover:opacity-100"
|
|
quantity={color === Color.White ? 10 : color === Color.Yellow ? 20 : 40}
|
|
color={color}
|
|
vy={color === Color.White ? -0.05 : color === Color.Yellow ? -0.1 : -0.15}
|
|
/>
|
|
<div
|
|
className={cn("absolute -top-1 bg-gradient-radial blur h-6 w-8 ", {
|
|
"from-white/50": color === Color.White,
|
|
"from-[#FFD600]/50": color === Color.Yellow,
|
|
"from-[#9D72FF]/50": color === Color.Purple,
|
|
})}
|
|
/>
|
|
<KeyIcon color={color} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Cost: React.FC<{ dollar: string }> = ({ dollar }) => {
|
|
return (
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-4xl font-semibold text-transparent bg-gradient-to-br bg-clip-text from-white via-white to-white/30">
|
|
{dollar}
|
|
</span>
|
|
<span className=" text-white/60">/ month</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Button: React.FC<{ label: string }> = ({ label }) => {
|
|
return (
|
|
<div>
|
|
<Link href="/app">
|
|
<button
|
|
type="button"
|
|
className="block w-full h-10 text-sm font-semibold text-center text-black duration-500 bg-white border border-white rounded-lg hover:bg-transparent hover:text-white"
|
|
>
|
|
{label}
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Bullets: React.FC<PropsWithChildren> = ({ children }) => {
|
|
return (
|
|
<div>
|
|
<p className="text-white/40">What's included:</p>
|
|
<ul className="flex flex-col gap-4 mt-6">{children}</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Bullet: React.FC<{
|
|
Icon: LucideIcon;
|
|
label: string;
|
|
color: Color;
|
|
textColor?: string;
|
|
}> = ({ Icon, label, color, textColor }) => {
|
|
return (
|
|
<li className="flex items-center gap-4">
|
|
<div
|
|
className={cn("h-6 w-6 flex items-center justify-center rounded-md", {
|
|
"text-[#FFFFFF] bg-[#FFFFFF]/10": color === Color.White,
|
|
"text-[#FFD600] bg-[#FFD600]/10": color === Color.Yellow,
|
|
"text-[#9D72FF] bg-[#9D72FF]/10": color === Color.Purple,
|
|
})}
|
|
>
|
|
<Icon className="w-3 h-3" />
|
|
</div>
|
|
<span className={cn("text-sm text-white whitespace-nowrap", textColor)}>{label}</span>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export const PricingCardContent: React.FC<
|
|
PropsWithChildren<{ layout?: "horizontal" | "vertical" }>
|
|
> = ({ children, layout }) => {
|
|
return (
|
|
<div
|
|
className={cn("flex gap-8 p-8", {
|
|
"flex-col": layout !== "horizontal",
|
|
})}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const PricingCardFooter: React.FC<PropsWithChildren> = ({ children }) => {
|
|
return <div className="p-8 border-t border-white/10">{children}</div>;
|
|
};
|
|
|
|
export const Asterisk: React.FC<{ tag: string; label?: string }> = ({ tag, label }) => {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="flex items-center justify-start w-20 h-6 px-2 text-sm font-semibold text-white rounded bg-white/10">
|
|
{tag}
|
|
</span>
|
|
<span className="flex-grow w-full col-span-1 text-sm text-white/60">{label}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const PricingCard: React.FC<PropsWithChildren<{ color: Color; className?: string }>> = ({
|
|
children,
|
|
color,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<div className={cn("relative h-full overflow-hidden group/item", className)}>
|
|
<div
|
|
className={cn(
|
|
"h-full relative bg-neutral-800 rounded-4xl p-px after:absolute after:inset-0 after:rounded-[inherit] after:opacity-0 after:transition-opacity after:duration-500 after:group-hover:opacity-100 after:z-10 overflow-hidden",
|
|
// This is pretty annoying, but the only way I found to prevent tailwind from purging the class
|
|
{
|
|
"after:[background:_radial-gradient(250px_circle_at_var(--mouse-x)_var(--mouse-y),#FFD600,transparent)]":
|
|
color === Color.Yellow,
|
|
"after:[background:_radial-gradient(250px_circle_at_var(--mouse-x)_var(--mouse-y),#FFFFFF,transparent)]":
|
|
color === Color.White,
|
|
"after:[background:_radial-gradient(250px_circle_at_var(--mouse-x)_var(--mouse-y),#9D72FF,transparent)]":
|
|
color === Color.Purple,
|
|
},
|
|
)}
|
|
>
|
|
<div className="relative h-full bg-black rounded-[inherit] z-20 overflow-hidden ">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const KeyIcon: React.FC<{ className?: string; color: Color }> = ({ className, color }) => {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width="26"
|
|
height="26"
|
|
viewBox="0 0 26 26"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M14.9998 14.9999L17.9998 17.9999L24.9998 10.9999L14.9998 0.999878L7.99976 7.99988L10.9998 10.9999L0.999756 20.9999V24.9999H6.99976V20.9999H10.9998V18.9999L14.9998 14.9999Z"
|
|
fill={`url(#paint0_linear_2076_26_${color})`}
|
|
/>
|
|
<path
|
|
d="M14.9998 7.99988L17.9998 10.9999M0.999756 24.9999H6.99976V20.9999H10.9998V18.9999L14.9998 14.9999L10.9998 10.9999L0.999756 20.9999V24.9999ZM7.99976 7.99988L17.9998 17.9999L24.9998 10.9999L14.9998 0.999878L7.99976 7.99988Z"
|
|
stroke={`url(#paint1_linear_2076_26_${color})`}
|
|
strokeWidth="0.75"
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id={`paint0_linear_2076_26_${color}`}
|
|
x1="12.9998"
|
|
y1="0.999878"
|
|
x2="12.9998"
|
|
y2="24.9999"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor={color} stopOpacity="0" />
|
|
<stop offset="0.5" stopColor={color} stopOpacity="0" />
|
|
<stop offset="1" stopColor={color} stopOpacity="0.1" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id={`paint1_linear_2076_26_${color}`}
|
|
x1="12.9998"
|
|
y1="0.999878"
|
|
x2="12.9998"
|
|
y2="24.9999"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor={color} />
|
|
<stop offset="0.5" stopColor={color} stopOpacity="0.3" />
|
|
<stop offset="1" stopColor={color} stopOpacity="0.1" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|
|
export const FreeCardHighlight: React.FC<{ className: string }> = ({ className }) => {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width="263"
|
|
height="356"
|
|
viewBox="0 0 263 356"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g opacity="0.4">
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter0_f_2076_3302)">
|
|
<ellipse
|
|
cx="16.3892"
|
|
cy="146.673"
|
|
rx="16.3892"
|
|
ry="146.673"
|
|
transform="matrix(-0.966169 -0.257911 -0.257911 0.966169 357.14 -44.3057)"
|
|
fill="url(#paint0_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "color-dodge" }} filter="url(#filter1_f_2076_3302)">
|
|
<ellipse
|
|
cx="13.25"
|
|
cy="146.625"
|
|
rx="13.25"
|
|
ry="146.625"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 347.709 -62.7411)"
|
|
fill="url(#paint1_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter2_f_2076_3302)">
|
|
<ellipse
|
|
cx="11.1897"
|
|
cy="190.642"
|
|
rx="11.1897"
|
|
ry="190.642"
|
|
transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 343.057 -64.2233)"
|
|
fill="url(#paint2_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter3_f_2076_3302)">
|
|
<ellipse
|
|
cx="11.1897"
|
|
cy="90.3336"
|
|
rx="11.1897"
|
|
ry="90.3336"
|
|
transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 343.057 -64.2235)"
|
|
fill="url(#paint3_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter4_f_2076_3302)">
|
|
<ellipse
|
|
cx="11.125"
|
|
cy="190.75"
|
|
rx="11.125"
|
|
ry="190.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 339.651 -49.7842)"
|
|
fill="url(#paint4_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter5_f_2076_3302)">
|
|
<ellipse
|
|
cx="160.75"
|
|
cy="93.75"
|
|
rx="160.75"
|
|
ry="93.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 476.963 11.8842)"
|
|
fill="url(#paint5_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter6_f_2076_3302)">
|
|
<ellipse
|
|
cx="80.25"
|
|
cy="47.75"
|
|
rx="80.25"
|
|
ry="47.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 407.248 -28.366)"
|
|
fill="url(#paint6_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter7_f_2076_3302)">
|
|
<ellipse
|
|
cx="67.5"
|
|
cy="40.125"
|
|
rx="67.5"
|
|
ry="40.125"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 390.581 -24.9982)"
|
|
fill="url(#paint7_linear_2076_3302)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<filter
|
|
id="filter0_f_2076_3302"
|
|
x="217.957"
|
|
y="-93.0969"
|
|
width="171.039"
|
|
height="372.55"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter1_f_2076_3302"
|
|
x="144.206"
|
|
y="-114.042"
|
|
width="237.432"
|
|
height="343.314"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter2_f_2076_3302"
|
|
x="20.8005"
|
|
y="-116.872"
|
|
width="359.08"
|
|
height="359.08"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter3_f_2076_3302"
|
|
x="162.399"
|
|
y="-117.131"
|
|
width="217.741"
|
|
height="217.741"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter4_f_2076_3302"
|
|
x="94.2737"
|
|
y="-99.9421"
|
|
width="280.735"
|
|
height="419.58"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter5_f_2076_3302"
|
|
x="68.9412"
|
|
y="-176.546"
|
|
width="443.867"
|
|
height="378.49"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter6_f_2076_3302"
|
|
x="165.37"
|
|
y="-159.758"
|
|
width="297.01"
|
|
height="265.24"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<filter
|
|
id="filter7_f_2076_3302"
|
|
x="175.242"
|
|
y="-147.44"
|
|
width="273.641"
|
|
height="246.883"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3302" />
|
|
</filter>
|
|
<linearGradient
|
|
id="paint0_linear_2076_3302"
|
|
x1="16.3892"
|
|
y1="0"
|
|
x2="16.3892"
|
|
y2="293.346"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint1_linear_2076_3302"
|
|
x1="13.25"
|
|
y1="0"
|
|
x2="13.25"
|
|
y2="293.25"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint2_linear_2076_3302"
|
|
x1="11.1897"
|
|
y1="0"
|
|
x2="11.1897"
|
|
y2="381.284"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint3_linear_2076_3302"
|
|
x1="11.1897"
|
|
y1="0"
|
|
x2="11.1897"
|
|
y2="180.667"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint4_linear_2076_3302"
|
|
x1="11.125"
|
|
y1="0"
|
|
x2="11.125"
|
|
y2="381.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint5_linear_2076_3302"
|
|
x1="160.75"
|
|
y1="0"
|
|
x2="160.75"
|
|
y2="187.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint6_linear_2076_3302"
|
|
x1="80.25"
|
|
y1="0"
|
|
x2="80.25"
|
|
y2="95.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint7_linear_2076_3302"
|
|
x1="67.5"
|
|
y1="0"
|
|
x2="67.5"
|
|
y2="80.25"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export const ProCardHighlight: React.FC<{ className: string }> = ({ className }) => {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width="263"
|
|
height="356"
|
|
viewBox="0 0 263 356"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g opacity="0.4">
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter0_f_2076_3350)">
|
|
<ellipse
|
|
cx="16.3892"
|
|
cy="146.673"
|
|
rx="16.3892"
|
|
ry="146.673"
|
|
transform="matrix(-0.966169 -0.257911 -0.257911 0.966169 357.14 -44.3057)"
|
|
fill="url(#paint0_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "color-dodge" }} filter="url(#filter1_f_2076_3350)">
|
|
<ellipse
|
|
cx="13.25"
|
|
cy="146.625"
|
|
rx="13.25"
|
|
ry="146.625"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 347.709 -62.7411)"
|
|
fill="url(#paint1_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter2_f_2076_3350)">
|
|
<ellipse
|
|
cx="11.1897"
|
|
cy="190.642"
|
|
rx="11.1897"
|
|
ry="190.642"
|
|
transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 343.057 -64.2233)"
|
|
fill="url(#paint2_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter3_f_2076_3350)">
|
|
<ellipse
|
|
cx="11.1897"
|
|
cy="90.3336"
|
|
rx="11.1897"
|
|
ry="90.3336"
|
|
transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 343.057 -64.2235)"
|
|
fill="url(#paint3_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter4_f_2076_3350)">
|
|
<ellipse
|
|
cx="11.125"
|
|
cy="190.75"
|
|
rx="11.125"
|
|
ry="190.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 339.651 -49.7842)"
|
|
fill="url(#paint4_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter5_f_2076_3350)">
|
|
<ellipse
|
|
cx="160.75"
|
|
cy="93.75"
|
|
rx="160.75"
|
|
ry="93.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 476.963 11.8842)"
|
|
fill="url(#paint5_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter6_f_2076_3350)">
|
|
<ellipse
|
|
cx="80.25"
|
|
cy="47.75"
|
|
rx="80.25"
|
|
ry="47.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 407.248 -28.366)"
|
|
fill="url(#paint6_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter7_f_2076_3350)">
|
|
<ellipse
|
|
cx="67.5"
|
|
cy="40.125"
|
|
rx="67.5"
|
|
ry="40.125"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 390.581 -24.9982)"
|
|
fill="url(#paint7_linear_2076_3350)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<filter
|
|
id="filter0_f_2076_3350"
|
|
x="217.957"
|
|
y="-93.0969"
|
|
width="171.039"
|
|
height="372.55"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter1_f_2076_3350"
|
|
x="144.206"
|
|
y="-114.042"
|
|
width="237.432"
|
|
height="343.314"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter2_f_2076_3350"
|
|
x="20.8005"
|
|
y="-116.872"
|
|
width="359.08"
|
|
height="359.08"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter3_f_2076_3350"
|
|
x="162.399"
|
|
y="-117.131"
|
|
width="217.741"
|
|
height="217.741"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter4_f_2076_3350"
|
|
x="94.2738"
|
|
y="-99.9421"
|
|
width="280.735"
|
|
height="419.58"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter5_f_2076_3350"
|
|
x="68.9412"
|
|
y="-176.546"
|
|
width="443.867"
|
|
height="378.49"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter6_f_2076_3350"
|
|
x="165.37"
|
|
y="-159.758"
|
|
width="297.01"
|
|
height="265.24"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<filter
|
|
id="filter7_f_2076_3350"
|
|
x="175.242"
|
|
y="-147.44"
|
|
width="273.641"
|
|
height="246.883"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3350" />
|
|
</filter>
|
|
<linearGradient
|
|
id="paint0_linear_2076_3350"
|
|
x1="16.3892"
|
|
y1="0"
|
|
x2="16.3892"
|
|
y2="293.346"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint1_linear_2076_3350"
|
|
x1="13.25"
|
|
y1="0"
|
|
x2="13.25"
|
|
y2="293.25"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint2_linear_2076_3350"
|
|
x1="11.1897"
|
|
y1="0"
|
|
x2="11.1897"
|
|
y2="381.284"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint3_linear_2076_3350"
|
|
x1="11.1897"
|
|
y1="0"
|
|
x2="11.1897"
|
|
y2="180.667"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint4_linear_2076_3350"
|
|
x1="11.125"
|
|
y1="0"
|
|
x2="11.125"
|
|
y2="381.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint5_linear_2076_3350"
|
|
x1="160.75"
|
|
y1="0"
|
|
x2="160.75"
|
|
y2="187.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint6_linear_2076_3350"
|
|
x1="80.25"
|
|
y1="0"
|
|
x2="80.25"
|
|
y2="95.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint7_linear_2076_3350"
|
|
x1="67.5"
|
|
y1="0"
|
|
x2="67.5"
|
|
y2="80.25"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FFD600" />
|
|
<stop offset="1" stopColor="#FFD600" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export const EnterpriseCardHighlight: React.FC<{ className: string }> = ({ className }) => {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width="379"
|
|
height="336"
|
|
viewBox="0 0 379 336"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g opacity="0.4">
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter0_f_2076_3437)">
|
|
<ellipse
|
|
cx="16.3892"
|
|
cy="146.673"
|
|
rx="16.3892"
|
|
ry="146.673"
|
|
transform="matrix(-0.966169 -0.257911 -0.257911 0.966169 357.14 -44.3058)"
|
|
fill="url(#paint0_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "color-dodge" }} filter="url(#filter1_f_2076_3437)">
|
|
<ellipse
|
|
cx="13.25"
|
|
cy="146.625"
|
|
rx="13.25"
|
|
ry="146.625"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 347.709 -62.7412)"
|
|
fill="url(#paint1_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter2_f_2076_3437)">
|
|
<ellipse
|
|
cx="11.1897"
|
|
cy="190.642"
|
|
rx="11.1897"
|
|
ry="190.642"
|
|
transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 343.057 -64.2233)"
|
|
fill="url(#paint2_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter3_f_2076_3437)">
|
|
<ellipse
|
|
cx="11.1897"
|
|
cy="90.3336"
|
|
rx="11.1897"
|
|
ry="90.3336"
|
|
transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 343.057 -64.2235)"
|
|
fill="url(#paint3_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter4_f_2076_3437)">
|
|
<ellipse
|
|
cx="11.125"
|
|
cy="190.75"
|
|
rx="11.125"
|
|
ry="190.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 339.651 -49.7842)"
|
|
fill="url(#paint4_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter5_f_2076_3437)">
|
|
<ellipse
|
|
cx="160.75"
|
|
cy="93.75"
|
|
rx="160.75"
|
|
ry="93.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 476.963 11.8842)"
|
|
fill="url(#paint5_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter6_f_2076_3437)">
|
|
<ellipse
|
|
cx="80.25"
|
|
cy="47.75"
|
|
rx="80.25"
|
|
ry="47.75"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 407.248 -28.366)"
|
|
fill="url(#paint6_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter7_f_2076_3437)">
|
|
<ellipse
|
|
cx="67.5"
|
|
cy="40.125"
|
|
rx="67.5"
|
|
ry="40.125"
|
|
transform="matrix(-0.866025 -0.5 -0.5 0.866025 390.581 -24.9983)"
|
|
fill="url(#paint7_linear_2076_3437)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<filter
|
|
id="filter0_f_2076_3437"
|
|
x="217.957"
|
|
y="-93.097"
|
|
width="171.039"
|
|
height="372.55"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter1_f_2076_3437"
|
|
x="144.206"
|
|
y="-114.042"
|
|
width="237.432"
|
|
height="343.314"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter2_f_2076_3437"
|
|
x="20.8005"
|
|
y="-116.872"
|
|
width="359.08"
|
|
height="359.08"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter3_f_2076_3437"
|
|
x="162.399"
|
|
y="-117.131"
|
|
width="217.741"
|
|
height="217.741"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter4_f_2076_3437"
|
|
x="94.2737"
|
|
y="-99.9421"
|
|
width="280.735"
|
|
height="419.58"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter5_f_2076_3437"
|
|
x="68.9412"
|
|
y="-176.546"
|
|
width="443.867"
|
|
height="378.49"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter6_f_2076_3437"
|
|
x="165.37"
|
|
y="-159.758"
|
|
width="297.01"
|
|
height="265.24"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<filter
|
|
id="filter7_f_2076_3437"
|
|
x="175.242"
|
|
y="-147.441"
|
|
width="273.641"
|
|
height="246.883"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_3437" />
|
|
</filter>
|
|
<linearGradient
|
|
id="paint0_linear_2076_3437"
|
|
x1="16.3892"
|
|
y1="0"
|
|
x2="16.3892"
|
|
y2="293.346"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint1_linear_2076_3437"
|
|
x1="13.25"
|
|
y1="0"
|
|
x2="13.25"
|
|
y2="293.25"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint2_linear_2076_3437"
|
|
x1="11.1897"
|
|
y1="0"
|
|
x2="11.1897"
|
|
y2="381.284"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint3_linear_2076_3437"
|
|
x1="11.1897"
|
|
y1="0"
|
|
x2="11.1897"
|
|
y2="180.667"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint4_linear_2076_3437"
|
|
x1="11.125"
|
|
y1="0"
|
|
x2="11.125"
|
|
y2="381.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint5_linear_2076_3437"
|
|
x1="160.75"
|
|
y1="0"
|
|
x2="160.75"
|
|
y2="187.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint6_linear_2076_3437"
|
|
x1="80.25"
|
|
y1="0"
|
|
x2="80.25"
|
|
y2="95.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint7_linear_2076_3437"
|
|
x1="67.5"
|
|
y1="0"
|
|
x2="67.5"
|
|
y2="80.25"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#6E56CF" />
|
|
<stop offset="1" stopColor="#6E56CF" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export const Separator: React.FC<{ orientation?: "horizontal" | "vertical"; className?: string }> =
|
|
({ orientation = "horizontal", className }) => (
|
|
<div
|
|
className={cn(
|
|
"shrink-0 bg-white/10",
|
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px] ",
|
|
className,
|
|
)}
|
|
/>
|
|
);
|
|
|
|
export const BelowEnterpriseSvg: React.FC<{ className?: string }> = ({ className }) => {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width="472"
|
|
height="638"
|
|
viewBox="0 0 472 638"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g opacity="0.4">
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter0_f_2076_2453)">
|
|
<ellipse
|
|
cx="184.597"
|
|
cy="353.647"
|
|
rx="16.3892"
|
|
ry="146.673"
|
|
transform="rotate(15.0538 184.597 353.647)"
|
|
fill="url(#paint0_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "color-dodge" }} filter="url(#filter1_f_2076_2453)">
|
|
<ellipse
|
|
cx="237.5"
|
|
cy="343.125"
|
|
rx="13.25"
|
|
ry="146.625"
|
|
fill="url(#paint1_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter2_f_2076_2453)">
|
|
<ellipse
|
|
cx="289.17"
|
|
cy="378.792"
|
|
rx="11.1897"
|
|
ry="190.642"
|
|
transform="rotate(-15 289.17 378.792)"
|
|
fill="url(#paint2_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter3_f_2076_2453)">
|
|
<ellipse
|
|
cx="263.208"
|
|
cy="281.902"
|
|
rx="11.1897"
|
|
ry="90.3336"
|
|
transform="rotate(-15 263.208 281.902)"
|
|
fill="url(#paint3_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter4_f_2076_2453)">
|
|
<ellipse
|
|
cx="235.875"
|
|
cy="402.5"
|
|
rx="11.125"
|
|
ry="190.75"
|
|
fill="url(#paint4_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter5_f_2076_2453)">
|
|
<ellipse
|
|
cx="235.75"
|
|
cy="290.25"
|
|
rx="160.75"
|
|
ry="93.75"
|
|
fill="url(#paint5_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter6_f_2076_2453)">
|
|
<ellipse
|
|
cx="235.75"
|
|
cy="244.25"
|
|
rx="80.25"
|
|
ry="47.75"
|
|
fill="url(#paint6_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
<g style={{ mixBlendMode: "lighten" }} filter="url(#filter7_f_2076_2453)">
|
|
<ellipse
|
|
cx="235.75"
|
|
cy="247.875"
|
|
rx="67.5"
|
|
ry="40.125"
|
|
fill="url(#paint7_linear_2076_2453)"
|
|
fillOpacity="0.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<mask id="path-9-inside-1_2076_2453" fill="white">
|
|
<path d="M204 161H212V593H204V161Z" />
|
|
</mask>
|
|
<path
|
|
d="M211.5 161V593H212.5V161H211.5ZM204.5 593V161H203.5V593H204.5Z"
|
|
fill="url(#paint8_angular_2076_2453)"
|
|
fillOpacity="0.5"
|
|
mask="url(#path-9-inside-1_2076_2453)"
|
|
/>
|
|
<mask id="path-11-inside-2_2076_2453" fill="white">
|
|
<path d="M180 51H188V483H180V51Z" />
|
|
</mask>
|
|
<path
|
|
d="M187.5 51V483H188.5V51H187.5ZM180.5 483V51H179.5V483H180.5Z"
|
|
fill="url(#paint9_angular_2076_2453)"
|
|
fillOpacity="0.2"
|
|
mask="url(#path-11-inside-2_2076_2453)"
|
|
/>
|
|
<mask id="path-13-inside-3_2076_2453" fill="white">
|
|
<path d="M228 101H236V533H228V101Z" />
|
|
</mask>
|
|
<path
|
|
d="M235.5 101V533H236.5V101H235.5ZM228.5 533V101H227.5V533H228.5Z"
|
|
fill="url(#paint10_angular_2076_2453)"
|
|
fillOpacity="0.3"
|
|
mask="url(#path-13-inside-3_2076_2453)"
|
|
/>
|
|
<mask id="path-15-inside-4_2076_2453" fill="white">
|
|
<path d="M252 191H260V623H252V191Z" />
|
|
</mask>
|
|
<path
|
|
d="M259.5 191V623H260.5V191H259.5ZM252.5 623V191H251.5V623H252.5Z"
|
|
fill="url(#paint11_angular_2076_2453)"
|
|
fillOpacity="0.8"
|
|
mask="url(#path-15-inside-4_2076_2453)"
|
|
/>
|
|
<mask id="path-17-inside-5_2076_2453" fill="white">
|
|
<path d="M276 1H284V433H276V1Z" />
|
|
</mask>
|
|
<path
|
|
d="M283.5 1V433H284.5V1H283.5ZM276.5 433V1H275.5V433H276.5Z"
|
|
fill="url(#paint12_angular_2076_2453)"
|
|
fillOpacity="0.1"
|
|
mask="url(#path-17-inside-5_2076_2453)"
|
|
/>
|
|
<defs>
|
|
<filter
|
|
id="filter0_f_2076_2453"
|
|
x="98.8346"
|
|
y="167.442"
|
|
width="171.525"
|
|
height="372.409"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter1_f_2076_2453"
|
|
x="179.75"
|
|
y="152"
|
|
width="115.5"
|
|
height="382.25"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter2_f_2076_2453"
|
|
x="194.148"
|
|
y="150.123"
|
|
width="190.045"
|
|
height="457.338"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter3_f_2076_2453"
|
|
x="192.945"
|
|
y="150.097"
|
|
width="140.527"
|
|
height="263.609"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter4_f_2076_2453"
|
|
x="180.25"
|
|
y="167.25"
|
|
width="111.25"
|
|
height="470.5"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="22.25" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter5_f_2076_2453"
|
|
x="-5.34058e-05"
|
|
y="121.5"
|
|
width="471.5"
|
|
height="337.5"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter6_f_2076_2453"
|
|
x="80.4999"
|
|
y="121.5"
|
|
width="310.5"
|
|
height="245.5"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<filter
|
|
id="filter7_f_2076_2453"
|
|
x="93.2499"
|
|
y="132.75"
|
|
width="285"
|
|
height="230.25"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="37.5" result="effect1_foregroundBlur_2076_2453" />
|
|
</filter>
|
|
<linearGradient
|
|
id="paint0_linear_2076_2453"
|
|
x1="184.597"
|
|
y1="206.974"
|
|
x2="184.597"
|
|
y2="500.319"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint1_linear_2076_2453"
|
|
x1="237.5"
|
|
y1="196.5"
|
|
x2="237.5"
|
|
y2="489.75"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint2_linear_2076_2453"
|
|
x1="289.17"
|
|
y1="188.151"
|
|
x2="289.17"
|
|
y2="569.434"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint3_linear_2076_2453"
|
|
x1="263.208"
|
|
y1="191.568"
|
|
x2="263.208"
|
|
y2="372.236"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint4_linear_2076_2453"
|
|
x1="235.875"
|
|
y1="211.75"
|
|
x2="235.875"
|
|
y2="593.251"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint5_linear_2076_2453"
|
|
x1="235.75"
|
|
y1="196.5"
|
|
x2="235.75"
|
|
y2="384.001"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint6_linear_2076_2453"
|
|
x1="235.75"
|
|
y1="196.5"
|
|
x2="235.75"
|
|
y2="292"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="paint7_linear_2076_2453"
|
|
x1="235.75"
|
|
y1="207.75"
|
|
x2="235.75"
|
|
y2="288"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<radialGradient
|
|
id="paint8_angular_2076_2453"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(208 481) scale(32 185)"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="0.0001" stopColor="white" stopOpacity="0" />
|
|
<stop offset="0.784842" stopColor="white" stopOpacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="paint9_angular_2076_2453"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(184 371) scale(32 185)"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="0.0001" stopColor="white" stopOpacity="0" />
|
|
<stop offset="0.784842" stopColor="white" stopOpacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="paint10_angular_2076_2453"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(232 421) scale(32 185)"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="0.0001" stopColor="white" stopOpacity="0" />
|
|
<stop offset="0.784842" stopColor="white" stopOpacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="paint11_angular_2076_2453"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(256 511) scale(32 185)"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="0.0001" stopColor="white" stopOpacity="0" />
|
|
<stop offset="0.784842" stopColor="white" stopOpacity="0" />
|
|
</radialGradient>
|
|
<radialGradient
|
|
id="paint12_angular_2076_2453"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(280 321) scale(32 185)"
|
|
>
|
|
<stop stopColor="white" />
|
|
<stop offset="0.0001" stopColor="white" stopOpacity="0" />
|
|
<stop offset="0.784842" stopColor="white" stopOpacity="0" />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|