uiable
blockblock-featuresource: ok · hit
Feature
Feature variant for block.
npx shadcn add "https://uiable.com/r/block-feature.json"free
Where it goes
feature-grid
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lighticonslucide-react
Files10 · source cached 10/14/2026, 3:38:07 PM
src/components/uiable/blocks/landing/feature/Feature.tsx
import type { ReactNode } from "react"
// third-party
import { cn } from "cn"
// project-imports
import BaseUi from "@/images/svg/icons/baseui"
import Shadcn from "@/images/svg/icons/shadcn"
import Tailwind from "@/images/svg/icons/tailwind"
import FeatureBuild from "@/images/svg/landing/feature-build"
import FeatureMotion from "@/images/svg/landing/feature-motion"
import FigmaLogo from "@/images/svg/landing/figma-logo"
import FigmaOrbitRing from "@/images/svg/landing/figma-orbit-ring"
// assets
import {
IconBrandNextjs,
IconBrandReact,
IconBrandTypescript,
} from "@tabler/icons-react"
import { Sparkle } from "lucide-react"
// ------------------------------ | PRIMITIVES | ------------------------------ //
// Rendered as <li> so each grid of cards is a real list for assistive tech and
// crawlers. Tailwind's preflight strips list markers and padding, and the base
// `flex` here overrides `display: list-item`, so the box is identical to a div.
function Card({
children,
className,
}: {
children: ReactNode
className?: string
}) {
return (
<li
className={cn(
"relative flex min-h-[288px] flex-col overflow-hidden rounded-[20px] border border-black/[0.06] bg-white shadow-[0_1px_2px_rgba(16,24,40,0.04)] dark:border-white/10 dark:bg-card",
className
)}
>
{children}
</li>
)
}
function Title({ children }: { children: ReactNode }) {
return (
<h3 className="px-6 text-center text-[20px] leading-7 font-medium text-foreground">
{children}
</h3>
)
}
// ------------------------------ | CARD 1 — BASE UI GRID | ------------------------------ //
function BaseUiGrid() {
const cols = 5
const rows = 3
const highlight = 1 * cols + 2 // centre cell
return (
<div className="relative flex-1">
<div className="absolute inset-0 flex items-center justify-center overflow-hidden">
<div
className="grid [mask-image:radial-gradient(ellipse_75%_75%_at_50%_50%,#000_35%,transparent_88%)]"
style={{
gridTemplateColumns: `repeat(${cols}, 72px)`,
gridTemplateRows: `repeat(${rows}, 72px)`,
}}
>
{Array.from({ length: cols * rows }).map((_, i) => (
<div
key={i}
className={cn(
"flex size-[72px] items-center justify-center border border-black/[0.09] dark:border-white/[0.1]",
i === highlight && "bg-indigo-50 dark:bg-indigo-500/10"
)}
>
{i === highlight && <BaseUi className="size-9 text-foreground" />}
</div>
))}
</div>
</div>
</div>
)
}
// ------------------------------ | CARD 3 — FIGMA MCP | ------------------------------ //
function FigmaOrbit() {
return (
<div className="relative flex-1">
<div className="absolute inset-0 flex items-center justify-center">
<div className="relative h-[122px] w-[229px] shrink-0">
<FigmaOrbitRing className="absolute top-[13px] left-0 h-[109px] w-[229px]" />
<FigmaLogo className="absolute top-0 left-1/2 h-[93px] w-[62px] -translate-x-1/2" />
<Sparkle className="absolute top-[68px] left-[188px] size-[13px] fill-foreground text-foreground" />
<Sparkle className="absolute top-[100px] left-[32px] size-[11px] fill-foreground text-foreground" />
</div>
</div>
</div>
)
}
// ------------------------------ | CARD 4 — CODE EDITOR | ------------------------------ //
function CodeEditor() {
const lines: ReactNode[] = [
<>
<span className="text-violet-600 dark:text-violet-400">
export function{" "}
</span>
<span className="text-blue-600 dark:text-blue-400">FeatureBlock</span>
{"() {"}
</>,
<>
{" "}
<span className="text-violet-600 dark:text-violet-400">const</span>{" "}
{"{ state }"} ={" "}
<span className="text-blue-600 dark:text-blue-400">useControl</span>
{"();"}
</>,
<>
{" "}
<span className="text-rose-500"><motion.div</span>{" "}
<span className="text-amber-500">layout</span>
</>,
<>
{" "}
<span className="text-amber-500">className</span>=
<span className="text-emerald-600 dark:text-emerald-400">
"grid-item"
</span>
>
</>,
<>
{" "}
<span className="text-rose-500"></motion.div></span>
</>,
]
return (
<div className="relative flex-1">
<div
aria-hidden="true"
className="absolute right-6 bottom-2 left-6 h-40 rounded-3xl bg-blue-300/25 blur-2xl dark:bg-blue-500/10"
/>
<div className="absolute right-4 -bottom-6 left-[-14px] overflow-hidden rounded-2xl border border-b-0 border-black/[0.07] bg-white shadow-[0_-8px_30px_rgba(16,24,40,0.06)] dark:border-white/10 dark:bg-neutral-900">
<div className="flex items-center justify-between px-4 py-3 pl-6">
<div className="flex items-center gap-4">
<div className="flex gap-1.5">
<span className="size-2.5 rounded-full bg-red-400" />
<span className="size-2.5 rounded-full bg-amber-400" />
<span className="size-2.5 rounded-full bg-green-400" />
</div>
<span className="text-xs text-muted-foreground">
CardPrimitive.tsx
</span>
</div>
<span className="text-xs text-muted-foreground">React + TS</span>
</div>
<div className="border-t border-black/[0.06] dark:border-white/10" />
<pre className="overflow-hidden px-5 py-4 font-mono text-[13px] leading-6 text-foreground">
<code>
{lines.map((line, i) => (
<div key={i} className="whitespace-pre">
{line}
</div>
))}
</code>
</pre>
</div>
</div>
)
}
// ------------------------------ | CARD 5 — TECH BELT | ------------------------------ //
const TECH_BELT_PATH =
"M-40 172C20 172 55 112 185.5 112C316 112 351 172 411 172"
const TECH_BELT_DURATION = 22
const TECH_BELT_RIDERS = 6
const techIcons = [
{
name: "base-ui",
node: <BaseUi className="size-7 text-white" />,
bg: "bg-neutral-950",
},
{
name: "typescript",
node: <IconBrandTypescript className="size-8 text-white" />,
bg: "bg-[#3178C6]",
},
{
name: "nextjs",
node: <IconBrandNextjs className="size-8 text-white" />,
bg: "bg-neutral-950",
},
{
name: "react",
node: <IconBrandReact className="size-8 text-white" />,
bg: "bg-[#5ED3F0]",
},
{
name: "shadcn",
node: <Shadcn className="size-7 text-white" />,
bg: "bg-neutral-950",
},
{
name: "tailwind",
node: <Tailwind className="size-8 text-white" />,
bg: "bg-[#38BDF8]",
},
]
function TechBelt() {
const step = TECH_BELT_DURATION / TECH_BELT_RIDERS
return (
<div className="relative flex-1">
<svg
viewBox="0 0 371 258"
fill="none"
preserveAspectRatio="xMidYMid slice"
aria-hidden="true"
className="absolute inset-0 h-full w-full motion-reduce:hidden"
>
{Array.from({ length: TECH_BELT_RIDERS }).map((_, i) => {
const icon = techIcons[i % techIcons.length]
return (
<g key={`${icon.name}-${i}`}>
<animateMotion
dur={`${TECH_BELT_DURATION}s`}
begin={`${-i * step}s`}
repeatCount="indefinite"
calcMode="linear"
rotate="auto"
path={TECH_BELT_PATH}
/>
<foreignObject
x="-30"
y="-30"
width="60"
height="60"
className="overflow-visible"
>
<div
className={cn(
"flex size-[65px] items-center justify-center rounded-[18px] shadow-[0_16px_32px_rgba(16,24,40,0.22)]",
icon.bg
)}
>
{icon.node}
</div>
</foreignObject>
</g>
)
})}
</svg>
<div
aria-hidden="true"
className="absolute inset-0 hidden items-center justify-center gap-3 motion-reduce:flex"
>
{techIcons.map((icon) => (
<div
key={icon.name}
className={cn(
"flex size-[52px] items-center justify-center rounded-[16px] shadow-md",
icon.bg
)}
>
{icon.node}
</div>
))}
</div>
</div>
)
}
// ------------------------------ | FEATURE | ------------------------------ //
export default function Feature() {
return (
<section
aria-labelledby="feature-heading"
className="bg-background px-4 py-16 sm:px-8"
>
<div className="mx-auto flex w-full max-w-[1200px] flex-col gap-5">
{/* Names the section and gives the cards' h3s a parent heading, so the
page outline stays h1 → h2 → h3. Visually hidden by design: the
section is intentionally shown without a visible header. */}
<h2 id="feature-heading" className="sr-only">
Why build with UIAble
</h2>
<ul className="grid gap-5 lg:grid-cols-[1fr_1.25fr_1fr]">
<Card className="pt-8">
<Title>Built on Base UI primitives from day one</Title>
<BaseUiGrid />
</Card>
<Card className="pb-7">
<FeatureBuild className="h-auto w-full" />
<Title>Built for the way you build</Title>
</Card>
<Card className="pb-7">
<FigmaOrbit />
<Title>Connect your agent with Figma MCP</Title>
</Card>
</ul>
<ul className="grid gap-5 lg:grid-cols-3">
<Card className="min-h-[264px] pt-6">
<Title>Full control over your code. Zero lock-in.</Title>
<CodeEditor />
</Card>
<Card className="min-h-[264px]">
<h3 className="sr-only">
Works with Base UI, TypeScript, Next.js, React, shadcn/ui and
Tailwind CSS
</h3>
<TechBelt />
</Card>
<Card className="min-h-[264px] pt-6">
<Title>Smooth animations with motion</Title>
<FeatureMotion className="h-auto w-full" />
</Card>
</ul>
</div>
</section>
)
}
src/images/brand/dark-fav.tsx
import { SVGAttributes } from "react"
// ------------------------------ | DARK FAVICON | ------------------------------ //
export default function DarkFav({
width = "130",
height = "124",
preserveAspectRatio = "none",
...props
}: SVGAttributes<SVGElement>) {
return (
<svg
width={width}
height={height}
viewBox="0 0 130 124"
fill="none"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio={preserveAspectRatio}
{...props}
>
<g clipPath="url(#clip0_3866_4546)">
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="#f9fafb"
/>
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="url(#paint0_linear_3866_4546)"
fillOpacity="0.3"
/>
<mask
id="mask0_3866_4546"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="130"
height="124"
>
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="#f9fafb"
/>
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="url(#paint1_linear_3866_4546)"
fillOpacity="0.3"
/>
</mask>
<g mask="url(#mask0_3866_4546)">
<g filter="url(#filter0_f_3866_4546)">
<path
d="M96 123V124H34V123H96ZM129 90V34C129 15.7746 114.225 1 96 1H34C15.7746 1 1 15.7746 1 34V90C1 108.225 15.7746 123 34 123V124L33.1221 123.989C15.0419 123.531 0.469004 108.958 0.0107422 90.8779L0 90V34C0 15.5158 14.7501 0.476391 33.1221 0.0107422L34 0H96L96.8779 0.0107422C115.25 0.476394 130 15.5158 130 34V90L129.989 90.8779C129.531 108.958 114.958 123.531 96.8779 123.989L96 124V123C114.225 123 129 108.225 129 90Z"
fill="url(#paint2_linear_3866_4546)"
fillOpacity="0.8"
/>
</g>
</g>
<g opacity="0.5" filter="url(#filter1_f_3866_4546)">
<path
d="M37.4692 67.0009C37.4692 69.9576 38.2095 72.2339 39.6899 73.8296C41.1703 75.4253 43.3431 76.2231 46.2084 76.2231C49.0737 76.2231 51.2704 75.4252 52.7985 73.8296C54.3267 72.2339 55.0908 69.9576 55.0908 67.0009V37.434H67.34V66.9306C67.34 71.3421 66.3849 75.0732 64.4747 78.1237C62.5645 81.1743 59.9858 83.474 56.7384 85.0228C53.5388 86.5715 49.9572 87.3459 45.9936 87.3459C42.0299 87.3459 38.472 86.5949 35.3201 85.0931C32.2161 83.5444 29.7568 81.2448 27.9421 78.1943C26.1274 75.0968 25.22 71.3422 25.22 66.9306V37.434H37.4692V67.0009ZM87.18 87.3459H75.22V37.434H87.18V87.3459ZM100.395 73.3082C102.423 73.3082 104.083 73.9875 105.374 75.3459C106.711 76.7044 107.38 78.3899 107.38 80.4024C107.38 82.3646 106.711 84.0251 105.374 85.3835C104.083 86.6917 102.423 87.3459 100.395 87.3459C98.3197 87.3459 96.6137 86.6917 95.2766 85.3835C93.9856 84.0251 93.34 82.3647 93.34 80.4024C93.34 78.3899 93.9855 76.7044 95.2766 75.3459C96.6137 73.9875 98.3197 73.3082 100.395 73.3082Z"
fill="#f9fafb"
/>
</g>
<g opacity="0.6" filter="url(#filter2_f_3866_4546)">
<path
d="M36.1692 66.7409C36.1692 69.6976 36.9095 71.9739 38.3899 73.5696C39.8703 75.1652 42.0431 75.963 44.9084 75.963C47.7737 75.963 49.9704 75.1652 51.4985 73.5696C53.0267 71.9739 53.7908 69.6976 53.7908 66.7409V37.174H66.04V66.6706C66.04 71.0821 65.0849 74.8132 63.1747 77.8637C61.2645 80.9143 58.6858 83.214 55.4384 84.7628C52.2388 86.3115 48.6572 87.0859 44.6936 87.0859C40.7299 87.0859 37.172 86.3349 34.0202 84.8331C30.9162 83.2844 28.4568 80.9848 26.6421 77.9343C24.8274 74.8368 23.92 71.0821 23.92 66.6706V37.174H36.1692V66.7409ZM85.88 87.0859H73.92V37.174H85.88V87.0859Z"
fill="#101828"
/>
</g>
<path
d="M99.0946 87.086C97.0197 87.086 95.3137 86.4319 93.9765 85.1237C92.6855 83.7652 92.04 82.1048 92.04 80.1426C92.04 78.13 92.6855 76.4444 93.9765 75.086C95.3137 73.7275 97.0197 73.0482 99.0946 73.0482C101.123 73.0482 102.783 73.7275 104.074 75.086C105.411 76.4444 106.08 78.13 106.08 80.1426C106.08 82.1048 105.411 83.7652 104.074 85.1237C102.783 86.4319 101.123 87.086 99.0946 87.086Z"
fill="var(--primary)"
/>
<path
d="M36.1692 66.7409C36.1692 69.6976 36.9095 71.9739 38.3899 73.5696C39.8703 75.1652 42.0431 75.963 44.9084 75.963C47.7737 75.963 49.9704 75.1652 51.4985 73.5696C53.0267 71.9739 53.7908 69.6976 53.7908 66.7409V37.174H66.04V66.6706C66.04 71.0821 65.0849 74.8132 63.1747 77.8637C61.2645 80.9143 58.6858 83.214 55.4384 84.7628C52.2388 86.3115 48.6572 87.0859 44.6936 87.0859C40.7299 87.0859 37.172 86.3349 34.0202 84.8331C30.9162 83.2844 28.4568 80.9848 26.6421 77.9343C24.8274 74.8368 23.92 71.0821 23.92 66.6706V37.174H36.1692V66.7409ZM85.88 87.0859H73.92V37.174H85.88V87.0859Z"
fill="url(#paint3_linear_3866_4546)"
/>
<mask
id="mask1_3866_4546"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="23"
y="37"
width="84"
height="51"
>
<path
d="M36.1692 66.7409C36.1692 69.6976 36.9094 71.9739 38.3898 73.5696C39.8703 75.1652 42.0431 75.963 44.9084 75.963C47.7737 75.963 49.9704 75.1652 51.4985 73.5696C53.0267 71.9739 53.7908 69.6976 53.7908 66.7409V37.174H66.04V66.6706C66.04 71.0821 65.0848 74.8132 63.1747 77.8637C61.2645 80.9143 58.6857 83.214 55.4384 84.7628C52.2388 86.3115 48.6572 87.0859 44.6936 87.0859C40.7299 87.0859 37.172 86.3349 34.0201 84.8331C30.9161 83.2844 28.4568 80.9848 26.6421 77.9343C24.8274 74.8368 23.92 71.0821 23.92 66.6706V37.174H36.1692V66.7409ZM85.88 87.0859H73.92V37.174H85.88V87.0859ZM99.0945 73.0482C101.123 73.0482 102.783 73.7274 104.074 75.0859C105.411 76.4444 106.08 78.1299 106.08 80.1424C106.08 82.1046 105.411 83.765 104.074 85.1235C102.783 86.4317 101.123 87.0859 99.0945 87.0859C97.0197 87.0859 95.3137 86.4317 93.9765 85.1235C92.6855 83.765 92.04 82.1047 92.04 80.1424C92.04 78.1299 92.6855 76.4444 93.9765 75.0859C95.3137 73.7275 97.0197 73.0482 99.0945 73.0482Z"
fill="url(#paint4_linear_3866_4546)"
/>
</mask>
<g mask="url(#mask1_3866_4546)">
<g opacity="0.6">
<path
d="M105.82 80.1424C105.82 78.1939 105.175 76.5751 103.889 75.2682L103.887 75.2667L103.886 75.2649C102.648 73.9627 101.059 73.3081 99.0945 73.3081C97.0826 73.3081 95.4456 73.9641 94.1619 75.2682C92.9224 76.574 92.3 78.1927 92.3 80.1424C92.3 82.0398 92.9211 83.6339 94.1616 84.941C95.4442 86.1941 97.0812 86.8259 99.0945 86.8259V87.0859C97.0197 87.0859 95.3137 86.4317 93.9765 85.1235C92.6855 83.765 92.04 82.1047 92.04 80.1424C92.04 78.1927 92.6458 76.55 93.8575 75.2141L93.9765 75.0859C95.3137 73.7275 97.0197 73.0482 99.0945 73.0482C101.123 73.0482 102.783 73.7274 104.074 75.0859C105.411 76.4444 106.08 78.1299 106.08 80.1424C106.08 82.1046 105.411 83.765 104.074 85.1235L103.952 85.2444C102.679 86.4721 101.06 87.0859 99.0945 87.0859V86.8259C101.062 86.8259 102.652 86.1943 103.889 84.941C105.177 83.6328 105.82 82.0386 105.82 80.1424Z"
fill="#101828"
/>
<path
d="M65.78 66.6706V37.4339H54.0508V66.7409C54.0508 69.7413 53.2748 72.0908 51.6864 73.7493C50.0958 75.4102 47.8225 76.223 44.9084 76.223C41.9948 76.223 39.743 75.4103 38.1992 73.7463C36.6603 72.0875 35.9092 69.7392 35.9092 66.7409V37.4339H24.18V66.6706C24.18 71.0465 25.08 74.7534 26.8666 77.8028C28.6555 80.8095 31.0762 83.0728 34.1321 84.5985L34.4248 84.7354C37.4647 86.1274 40.8861 86.8259 44.6936 86.8259V87.0859C40.7299 87.0859 37.172 86.3349 34.0201 84.8331C30.9161 83.2844 28.4568 80.9848 26.6421 77.9343C24.8274 74.8368 23.92 71.0821 23.92 66.6706V37.174H36.1692V66.7409C36.1692 69.6976 36.9094 71.9739 38.3898 73.5696C39.8703 75.1652 42.0431 75.963 44.9084 75.963C47.7737 75.963 49.9704 75.1652 51.4985 73.5696C53.0267 71.9739 53.7908 69.6976 53.7908 66.7409V37.174H66.04V66.6706C66.04 71.0821 65.0848 74.8132 63.1747 77.8637C61.2645 80.9143 58.6857 83.214 55.4384 84.7628C52.2388 86.3115 48.6572 87.0859 44.6936 87.0859V86.8259C48.6225 86.8259 52.1648 86.0585 55.3251 84.5287L55.3264 84.5282C58.5291 83.0008 61.0703 80.7346 62.9543 77.7259C64.8333 74.7251 65.78 71.0444 65.78 66.6706ZM85.88 37.174V87.0859H73.92V37.174H85.88ZM74.18 86.8259H85.62V37.4339H74.18V86.8259Z"
fill="#101828"
/>
</g>
<g opacity="0.4" filter="url(#filter3_f_3866_4546)">
<path
d="M100.49 74.218C97.786 73.2821 94.9434 74.6079 93.86 75.3878C95.628 72.3723 99.19 72.1383 100.75 72.3983C106.262 73.6461 107.38 78.3773 107.25 80.5869L104.39 86.0461L103.74 85.0062C106.99 79.937 103.87 75.3878 100.49 74.218Z"
fill="#f9fafb"
/>
<path
d="M35.36 37.8238H23.66L21.71 35.3542H37.18V67.719L42.25 74.7379L49.4 75.2578C47.19 76.4276 42.6324 77.3895 39.39 75.5178C36.1476 73.6461 35.36 69.7987 35.36 67.719V37.8238Z"
fill="#f9fafb"
/>
<path
d="M65.26 37.8238H53.17V36.1341H67.34V68.7589C67.34 76.3496 63.7867 79.1139 62.01 79.5471C64.61 75.4918 65.26 70.6652 65.26 68.7589V37.8238Z"
fill="#f9fafb"
/>
<path
d="M85.02 37.9538H73.32L72.15 36.0041H87.1V87.7358H85.02V37.9538Z"
fill="#f9fafb"
/>
</g>
<g opacity="0.3" filter="url(#filter4_f_3866_4546)">
<path
d="M97.7698 85.3962C100.474 86.3321 103.316 85.0063 104.4 84.2264C103.61 87.4759 99.84 88.9057 98.28 88.6457C92.768 87.3979 89.96 81.2369 90.09 79.0272L93.34 72.7882L94.5198 74.608C91.2698 79.6771 94.3898 84.2264 97.7698 85.3962Z"
fill="#101828"
/>
<path
d="M25.09 66.5492V36.914C25.09 35.9781 23.4433 35.8308 22.62 35.8741V66.5492C22.62 84.5383 35.7067 88.9489 42.25 88.9056C57.642 92.0251 65.13 78.9405 66.95 72.0083L66.04 70.8385C63.7 80.9769 56.29 86.8259 41.34 85.0062C29.38 83.5505 25.5233 72.095 25.09 66.5492Z"
fill="#101828"
/>
<path
d="M75.27 85.6562V37.304C75.27 35.2243 73.97 35.8309 73.32 36.3941V88.1258H86.97V85.6562H75.27Z"
fill="#101828"
/>
</g>
</g>
</g>
<defs>
<filter
id="filter0_f_3866_4546"
x="-2"
y="-2"
width="134"
height="128"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1"
result="effect1_foregroundBlur_3866_4546"
/>
</filter>
<filter
id="filter1_f_3866_4546"
x="17.22"
y="29.434"
width="98.16"
height="65.912"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="4"
result="effect1_foregroundBlur_3866_4546"
/>
</filter>
<filter
id="filter2_f_3866_4546"
x="15.92"
y="29.174"
width="77.96"
height="65.912"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0"
result="effect1_foregroundBlur_3866_4546"
/>
</filter>
<filter
id="filter3_f_3866_4546"
x="20.71"
y="34.3542"
width="87.5497"
height="54.3816"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_3866_4546"
/>
</filter>
<filter
id="filter4_f_3866_4546"
x="21.62"
y="34.8546"
width="83.7798"
height="55.5237"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_3866_4546"
/>
</filter>
<linearGradient
id="paint0_linear_3866_4546"
x1="65"
y1="-20.5367"
x2="65"
y2="111.422"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#030712" />
<stop offset="1" stopColor="#f9fafb" />
</linearGradient>
<linearGradient
id="paint1_linear_3866_4546"
x1="65"
y1="-20.5367"
x2="65"
y2="111.422"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#030712" />
<stop offset="1" stopColor="#f9fafb" />
</linearGradient>
<linearGradient
id="paint2_linear_3866_4546"
x1="65"
y1="0"
x2="65"
y2="124"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#101828" />
<stop offset="0.2" stopColor="white" stopOpacity="0" />
<stop offset="0.8" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="#101828" />
</linearGradient>
<linearGradient
id="paint3_linear_3866_4546"
x1="54.86"
y1="62.1299"
x2="54.86"
y2="99.1739"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#101828" />
<stop offset="1" stopColor="#f9fafb" />
</linearGradient>
<linearGradient
id="paint4_linear_3866_4546"
x1="64.947"
y1="62.1299"
x2="64.947"
y2="99.1739"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#101828" />
<stop offset="1" stopColor="#f9fafb" />
</linearGradient>
<clipPath id="clip0_3866_4546">
<rect width="130" height="124" fill="white" />
</clipPath>
</defs>
</svg>
)
}
src/images/brand/light-fav.tsx
import { SVGAttributes } from "react"
// ------------------------------ | LIGHT FAVICON | ------------------------------ //
export default function LightFav({
width = "130",
height = "124",
preserveAspectRatio = "none",
...props
}: SVGAttributes<SVGElement>) {
return (
<svg
width={width}
height={height}
viewBox="0 0 130 124"
fill="none"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio={preserveAspectRatio}
{...props}
>
<g clipPath="url(#clip0_3410_1450)">
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="#030712"
/>
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="url(#paint0_linear_3410_1450)"
fillOpacity="0.3"
/>
<mask
id="mask0_3410_1450"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="130"
height="124"
>
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="#030712"
/>
<path
d="M0 34C0 15.2223 15.2223 0 34 0H96C114.778 0 130 15.2223 130 34V90C130 108.778 114.778 124 96 124H34C15.2223 124 0 108.778 0 90V34Z"
fill="url(#paint1_linear_3410_1450)"
fillOpacity="0.3"
/>
</mask>
<g mask="url(#mask0_3410_1450)">
<g filter="url(#filter0_f_3410_1450)">
<path
d="M96 123V124H34V123H96ZM129 90V34C129 15.7746 114.225 1 96 1H34C15.7746 1 1 15.7746 1 34V90C1 108.225 15.7746 123 34 123V124L33.1221 123.989C15.0419 123.531 0.469004 108.958 0.0107422 90.8779L0 90V34C0 15.5158 14.7501 0.476391 33.1221 0.0107422L34 0H96L96.8779 0.0107422C115.25 0.476394 130 15.5158 130 34V90L129.989 90.8779C129.531 108.958 114.958 123.531 96.8779 123.989L96 124V123C114.225 123 129 108.225 129 90Z"
fill="url(#paint2_linear_3410_1450)"
fillOpacity="0.8"
/>
</g>
</g>
<g opacity="0.5" filter="url(#filter1_f_3410_1450)">
<path
d="M37.4692 67.0009C37.4692 69.9576 38.2094 72.2339 39.6898 73.8296C41.1702 75.4253 43.3431 76.2231 46.2084 76.2231C49.0736 76.2231 51.2703 75.4252 52.7985 73.8296C54.3267 72.2339 55.0908 69.9576 55.0908 67.0009V37.434H67.34V66.9306C67.34 71.3421 66.3848 75.0732 64.4746 78.1237C62.5644 81.1743 59.9857 83.474 56.7384 85.0228C53.5388 86.5715 49.9572 87.3459 45.9936 87.3459C42.0299 87.3459 38.4719 86.5949 35.3201 85.0931C32.2161 83.5444 29.7568 81.2448 27.9421 78.1943C26.1274 75.0968 25.22 71.3422 25.22 66.9306V37.434H37.4692V67.0009ZM87.18 87.3459H75.22V37.434H87.18V87.3459ZM100.395 73.3082C102.423 73.3082 104.083 73.9875 105.374 75.3459C106.711 76.7044 107.38 78.3899 107.38 80.4024C107.38 82.3646 106.711 84.0251 105.374 85.3835C104.083 86.6917 102.423 87.3459 100.395 87.3459C98.3197 87.3459 96.6137 86.6917 95.2765 85.3835C93.9855 84.0251 93.34 82.3647 93.34 80.4024C93.34 78.3899 93.9855 76.7044 95.2765 75.3459C96.6137 73.9875 98.3197 73.3082 100.395 73.3082Z"
fill="#030712"
/>
</g>
<g opacity="0.6" filter="url(#filter2_f_3410_1450)">
<path
d="M36.1692 66.7409C36.1692 69.6976 36.9095 71.9739 38.3899 73.5696C39.8703 75.1652 42.0432 75.963 44.9084 75.963C47.7737 75.963 49.9704 75.1652 51.4986 73.5696C53.0267 71.9739 53.7908 69.6976 53.7908 66.7409V37.174H66.04V66.6706C66.04 71.0821 65.0849 74.8132 63.1747 77.8637C61.2645 80.9143 58.6858 83.214 55.4384 84.7628C52.2389 86.3115 48.6573 87.0859 44.6936 87.0859C40.73 87.0859 37.172 86.3349 34.0202 84.8331C30.9162 83.2844 28.4568 80.9848 26.6422 77.9343C24.8275 74.8368 23.92 71.0821 23.92 66.6706V37.174H36.1692V66.7409ZM85.88 87.0859H73.92V37.174H85.88V87.0859Z"
fill="#ffffff"
/>
</g>
<path
d="M99.0946 87.086C97.0197 87.086 95.3137 86.4319 93.9766 85.1237C92.6856 83.7652 92.04 82.1048 92.04 80.1426C92.04 78.13 92.6856 76.4444 93.9766 75.086C95.3137 73.7275 97.0197 73.0482 99.0946 73.0482C101.123 73.0482 102.783 73.7275 104.074 75.086C105.411 76.4444 106.08 78.13 106.08 80.1426C106.08 82.1048 105.411 83.7652 104.074 85.1237C102.783 86.4319 101.123 87.086 99.0946 87.086Z"
fill="var(--primary)"
/>
<path
d="M36.1692 66.7409C36.1692 69.6976 36.9095 71.9739 38.3899 73.5696C39.8703 75.1652 42.0432 75.963 44.9084 75.963C47.7737 75.963 49.9704 75.1652 51.4986 73.5696C53.0267 71.9739 53.7908 69.6976 53.7908 66.7409V37.174H66.04V66.6706C66.04 71.0821 65.0849 74.8132 63.1747 77.8637C61.2645 80.9143 58.6858 83.214 55.4384 84.7628C52.2389 86.3115 48.6573 87.0859 44.6936 87.0859C40.73 87.0859 37.172 86.3349 34.0202 84.8331C30.9162 83.2844 28.4568 80.9848 26.6422 77.9343C24.8275 74.8368 23.92 71.0821 23.92 66.6706V37.174H36.1692V66.7409ZM85.88 87.0859H73.92V37.174H85.88V87.0859Z"
fill="url(#paint3_linear_3410_1450)"
/>
<mask
id="mask1_3410_1450"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="23"
y="37"
width="84"
height="51"
>
<path
d="M36.1691 66.7409C36.1691 69.6976 36.9094 71.9739 38.3898 73.5696C39.8702 75.1652 42.043 75.963 44.9083 75.963C47.7736 75.963 49.9703 75.1652 51.4985 73.5696C53.0266 71.9739 53.7907 69.6976 53.7907 66.7409V37.174H66.0399V66.6706C66.0399 71.0821 65.0848 74.8132 63.1746 77.8637C61.2644 80.9143 58.6857 83.214 55.4383 84.7628C52.2388 86.3115 48.6572 87.0859 44.6935 87.0859C40.7298 87.0859 37.1719 86.3349 34.0201 84.8331C30.9161 83.2844 28.4567 80.9848 26.6421 77.9343C24.8274 74.8368 23.9199 71.0821 23.9199 66.6706V37.174H36.1691V66.7409ZM85.8799 87.0859H73.9199V37.174H85.8799V87.0859ZM99.0945 73.0482C101.123 73.0482 102.783 73.7274 104.074 75.0859C105.411 76.4444 106.08 78.1299 106.08 80.1424C106.08 82.1046 105.411 83.765 104.074 85.1235C102.783 86.4317 101.123 87.0859 99.0945 87.0859C97.0196 87.0859 95.3136 86.4317 93.9765 85.1235C92.6855 83.765 92.0399 82.1047 92.0399 80.1424C92.0399 78.1299 92.6855 76.4444 93.9765 75.0859C95.3136 73.7275 97.0196 73.0482 99.0945 73.0482Z"
fill="url(#paint4_linear_3410_1450)"
/>
</mask>
<g mask="url(#mask1_3410_1450)">
<g opacity="0.6">
<path
d="M105.82 80.1424C105.82 78.1939 105.175 76.5751 103.889 75.2682L103.887 75.2667L103.886 75.2649C102.648 73.9627 101.058 73.3081 99.0945 73.3081C97.0825 73.3081 95.4455 73.9641 94.1618 75.2682C92.9224 76.574 92.2999 78.1927 92.2999 80.1424C92.2999 82.0398 92.9211 83.6339 94.1616 84.941C95.4441 86.1941 97.0812 86.8259 99.0945 86.8259V87.0859C97.0196 87.0859 95.3136 86.4317 93.9765 85.1235C92.6855 83.765 92.0399 82.1047 92.0399 80.1424C92.0399 78.1927 92.6458 76.55 93.8574 75.2141L93.9765 75.0859C95.3136 73.7275 97.0196 73.0482 99.0945 73.0482C101.123 73.0482 102.783 73.7274 104.074 75.0859C105.411 76.4444 106.08 78.1299 106.08 80.1424C106.08 82.1046 105.411 83.765 104.074 85.1235L103.952 85.2444C102.679 86.4721 101.06 87.0859 99.0945 87.0859V86.8259C101.062 86.8259 102.652 86.1943 103.889 84.941C105.177 83.6328 105.82 82.0386 105.82 80.1424Z"
fill="#ffffff"
/>
<path
d="M65.7799 66.6706V37.4339H54.0507V66.7409C54.0507 69.7413 53.2747 72.0908 51.6863 73.7493C50.0957 75.4102 47.8224 76.223 44.9083 76.223C41.9947 76.223 39.743 75.4103 38.1991 73.7463C36.6602 72.0875 35.9091 69.7392 35.9091 66.7409V37.4339H24.1799V66.6706C24.1799 71.0465 25.08 74.7534 26.8665 77.8028C28.6554 80.8095 31.0761 83.0728 34.132 84.5985L34.4248 84.7354C37.4646 86.1274 40.8861 86.8259 44.6935 86.8259V87.0859C40.7298 87.0859 37.1719 86.3349 34.0201 84.8331C30.9161 83.2844 28.4567 80.9848 26.6421 77.9343C24.8274 74.8368 23.9199 71.0821 23.9199 66.6706V37.174H36.1691V66.7409C36.1691 69.6976 36.9094 71.9739 38.3898 73.5696C39.8702 75.1652 42.043 75.963 44.9083 75.963C47.7736 75.963 49.9703 75.1652 51.4985 73.5696C53.0266 71.9739 53.7907 69.6976 53.7907 66.7409V37.174H66.0399V66.6706C66.0399 71.0821 65.0848 74.8132 63.1746 77.8637C61.2644 80.9143 58.6857 83.214 55.4383 84.7628C52.2388 86.3115 48.6572 87.0859 44.6935 87.0859V86.8259C48.6225 86.8259 52.1647 86.0585 55.3251 84.5287L55.3263 84.5282C58.529 83.0008 61.0702 80.7346 62.9542 77.7259C64.8332 74.7251 65.7799 71.0444 65.7799 66.6706ZM85.8799 37.174V87.0859H73.9199V37.174H85.8799ZM74.1799 86.8259H85.6199V37.4339H74.1799V86.8259Z"
fill="#ffffff"
/>
</g>
<g opacity="0.4" filter="url(#filter3_f_3410_1450)">
<path
d="M100.49 74.218C97.786 73.2821 94.9433 74.6079 93.86 75.3878C95.628 72.3723 99.19 72.1383 100.75 72.3983C106.262 73.6461 107.38 78.3773 107.25 80.5869L104.39 86.0461L103.74 85.0062C106.99 79.937 103.87 75.3878 100.49 74.218Z"
fill="#030712"
/>
<path
d="M35.36 37.8238H23.66L21.71 35.3542H37.18V67.719L42.25 74.7379L49.4 75.2578C47.19 76.4276 42.6324 77.3895 39.39 75.5178C36.1476 73.6461 35.36 69.7987 35.36 67.719V37.8238Z"
fill="#030712"
/>
<path
d="M65.26 37.8238H53.17V36.1341H67.34V68.7589C67.34 76.3496 63.7866 79.1139 62.01 79.5471C64.61 75.4918 65.26 70.6652 65.26 68.7589V37.8238Z"
fill="#030712"
/>
<path
d="M85.02 37.9538H73.32L72.15 36.0041H87.1V87.7358H85.02V37.9538Z"
fill="#030712"
/>
</g>
<g opacity="0.3" filter="url(#filter4_f_3410_1450)">
<path
d="M97.7698 85.3962C100.474 86.3321 103.316 85.0063 104.4 84.2264C103.61 87.4759 99.84 88.9057 98.28 88.6457C92.768 87.3979 89.96 81.2369 90.09 79.0272L93.34 72.7882L94.5198 74.608C91.2698 79.6771 94.3898 84.2264 97.7698 85.3962Z"
fill="#ffffff"
/>
<path
d="M25.09 66.5492V36.914C25.09 35.9781 23.4433 35.8308 22.62 35.8741V66.5492C22.62 84.5383 35.7067 88.9489 42.25 88.9056C57.642 92.0251 65.13 78.9405 66.95 72.0083L66.04 70.8385C63.7 80.9769 56.29 86.8259 41.34 85.0062C29.38 83.5505 25.5233 72.095 25.09 66.5492Z"
fill="#ffffff"
/>
<path
d="M75.27 85.6562V37.304C75.27 35.2243 73.97 35.8309 73.32 36.3941V88.1258H86.97V85.6562H75.27Z"
fill="#ffffff"
/>
</g>
</g>
</g>
<defs>
<filter
id="filter0_f_3410_1450"
x="-2"
y="-2"
width="134"
height="128"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1"
result="effect1_foregroundBlur_3410_1450"
/>
</filter>
<filter
id="filter1_f_3410_1450"
x="17.22"
y="29.434"
width="98.16"
height="65.912"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="4"
result="effect1_foregroundBlur_3410_1450"
/>
</filter>
<filter
id="filter2_f_3410_1450"
x="15.92"
y="29.174"
width="77.96"
height="65.912"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0"
result="effect1_foregroundBlur_3410_1450"
/>
</filter>
<filter
id="filter3_f_3410_1450"
x="20.71"
y="34.3542"
width="87.5498"
height="54.3816"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_3410_1450"
/>
</filter>
<filter
id="filter4_f_3410_1450"
x="21.62"
y="34.8546"
width="83.7798"
height="55.5237"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_3410_1450"
/>
</filter>
<linearGradient
id="paint0_linear_3410_1450"
x1="65"
y1="-20.5367"
x2="65"
y2="111.422"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#f3f4f6" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint1_linear_3410_1450"
x1="65"
y1="-20.5367"
x2="65"
y2="111.422"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#f3f4f6" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint2_linear_3410_1450"
x1="65"
y1="0"
x2="65"
y2="124"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#ffffff" />
<stop offset="0.2" stopColor="#ffffff" stopOpacity="0" />
<stop offset="0.8" stopColor="#ffffff" stopOpacity="0" />
<stop offset="1" stopColor="#ffffff" />
</linearGradient>
<linearGradient
id="paint3_linear_3410_1450"
x1="54.86"
y1="62.1299"
x2="54.86"
y2="99.1739"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#ffffff" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint4_linear_3410_1450"
x1="64.9469"
y1="62.1299"
x2="64.9469"
y2="99.1739"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#ffffff" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<clipPath id="clip0_3410_1450">
<rect width="130" height="124" fill="#ffffff" />
</clipPath>
</defs>
</svg>
)
}
src/images/svg/icons/baseui.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | BASEUI ICON | ------------------------------ //
export default function BaseUi(props: SVGAttributes<SVGElement>) {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_3135_5)">
<path
d="M13.082 6.562C13.0108 6.55842 12.9396 6.56953 12.8729 6.59462C12.8062 6.61972 12.7453 6.65827 12.6941 6.70788C12.6429 6.75749 12.6024 6.8171 12.5752 6.88301C12.548 6.94892 12.5347 7.01972 12.536 7.091V24C14.8064 24.0047 16.9892 23.1244 18.6212 21.5461C20.2532 19.9677 21.2058 17.8154 21.2768 15.5461C21.3479 13.2769 20.5318 11.0692 19.0018 9.39184C17.4717 7.71444 15.3482 6.69934 13.082 6.562ZM11.446 9.6V24C6.62602 24 2.71802 19.702 2.71802 14.4V0C7.53802 0 11.446 4.298 11.446 9.6Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_3135_5">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
)
}
src/images/svg/icons/shadcn.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | SHADCN ICON | ------------------------------ //
export default function Shadcn(props: SVGAttributes<SVGElement>) {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M19.0101 11.55L11.5501 19.01C11.0901 19.47 11.0901 20.2 11.5501 20.66C11.7676 20.8774 12.0626 20.9995 12.3701 20.9995C12.6776 20.9995 12.9726 20.8774 13.1901 20.66L20.6501 13.2C21.1101 12.74 21.1101 12.01 20.6501 11.55C20.1901 11.09 19.4601 11.09 19.0001 11.55H19.0101ZM19.1701 3.34C18.7101 2.88 17.9801 2.88 17.5201 3.34L3.34012 17.52C2.88012 17.98 2.88012 18.71 3.34012 19.17C3.55764 19.3874 3.85259 19.5095 4.16012 19.5095C4.46765 19.5095 4.76259 19.3874 4.98012 19.17L19.1601 4.98999C19.6201 4.52999 19.6201 3.8 19.1601 3.34H19.1701Z"
fill="currentColor"
/>
</svg>
)
}
src/images/svg/icons/tailwind.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | TAILWIND ICON | ------------------------------ //
export default function Tailwind(props: SVGAttributes<SVGElement>) {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_3336_24)">
<path
d="M12.0007 4.80035C8.80067 4.80035 6.80136 6.39973 6.00073 9.59979C7.20036 8.00023 8.60079 7.40042 10.2004 7.80036C11.1137 8.02798 11.7664 8.69023 12.4892 9.42411C13.6655 10.6179 15.0272 12 18.0007 12C21.2006 12 23.2001 10.4004 24.0007 7.1996C22.8007 8.79998 21.4008 9.40011 19.8009 8.99998C18.8878 8.77217 18.2359 8.11011 17.5121 7.37623C16.3365 6.18242 14.9752 4.80035 12.0007 4.80035ZM6.00073 12C2.80086 12 0.801357 13.5995 0.000732422 16.8004C1.20061 15.2 2.60048 14.5999 4.20036 15C5.11367 15.2278 5.76636 15.8899 6.48917 16.6237C7.66554 17.8175 9.02717 19.1996 12.0007 19.1996C15.2006 19.1996 17.2001 17.6002 18.0007 14.4002C16.8007 15.9998 15.4008 16.5996 13.8009 16.1996C12.8878 15.972 12.2359 15.3097 11.5121 14.5759C10.3365 13.382 8.97523 12 6.00073 12Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_3336_24">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
)
}
src/images/svg/landing/feature-build.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | FEATURE BUILD | ------------------------------ //
export default function FeatureBuild(props: SVGAttributes<SVGSVGElement>) {
return (
// The title that used to sit at y=256 is now a real <h3> rendered below
// this illustration by the Feature block, so the viewBox ends above that
// band. Every coordinate below is unchanged — only the window got shorter.
<svg
viewBox="0 0 427 238"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
{...props}
>
<style>
{`
@keyframes feature-build-flow {
to { stroke-dashoffset: -1; }
}
.feature-build-pulse {
opacity: 0.4;
animation: feature-build-flow 2.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.feature-build-pulse { animation: none; opacity: 0.2; }
}
`}
</style>
<g>
<g id="Frame 16">
<svg
x="103.5"
y="0"
width="220"
height="83"
viewBox="0 0 220 83"
fill="none"
overflow="visible"
>
<path
d="M0.5 0H219.5V66C219.5 74.8366 212.337 82 203.5 82H16.5C7.66345 82 0.5 74.8366 0.5 66V0Z"
stroke="url(#paint0_linear_5061_313)"
/>
<path
d="M191.065 56.3226C189.747 56.3226 188.664 55.9093 187.815 55.0826C186.995 54.2241 186.585 53.1749 186.585 51.9348C186.585 50.663 186.995 49.5979 187.815 48.7394C188.664 47.8809 189.747 47.4517 191.065 47.4517C192.353 47.4517 193.407 47.8809 194.226 48.7394C195.076 49.5979 195.5 50.663 195.5 51.9348C195.5 53.1749 195.076 54.2241 194.226 55.0826C193.407 55.9093 192.353 56.3226 191.065 56.3226Z"
fill="#4680FF"
/>
<path
d="M115.267 56.3223H107.58L105.797 51.0518H94.6687L92.8845 56.3223H85.282L96.0701 26.4844H104.479L115.267 56.3223ZM126.209 35.583C126.891 34.4758 127.872 33.5818 129.152 32.9004C130.432 32.2191 131.896 31.878 133.545 31.8779C135.507 31.8779 137.284 32.3745 138.877 33.3682C140.469 34.3619 141.721 35.7815 142.631 37.627C143.569 39.4724 144.038 41.616 144.038 44.0576C144.038 46.4993 143.569 48.6574 142.631 50.5312C141.721 52.3766 140.469 53.81 138.877 54.832C137.284 55.8257 135.507 56.3223 133.545 56.3223C131.867 56.3222 130.403 55.9957 129.152 55.3428C127.901 54.6614 126.92 53.7674 126.209 52.6602V55.9814H118.915V24.4678H126.209V35.583ZM155.384 56.3223H148.09V24.8711H155.384V56.3223ZM171.274 32.1289C173.619 32.1289 175.703 32.6071 177.526 33.5625C179.349 34.5179 180.768 35.8802 181.781 37.6504C182.823 39.4206 183.344 41.4863 183.344 43.8467C183.343 44.521 183.3 45.2236 183.214 45.9541H166.412C166.528 47.4152 167.005 48.5394 167.844 49.3262C168.713 50.0847 169.769 50.4638 171.013 50.4639C172.866 50.4639 174.154 49.7049 174.878 48.1875H182.779C182.374 49.7329 181.636 51.124 180.565 52.3604C179.523 53.5967 178.206 54.5661 176.614 55.2686C175.022 55.971 173.242 56.3222 171.274 56.3223C168.901 56.3223 166.788 55.8311 164.935 54.8477C163.083 53.8642 161.635 52.4592 160.594 50.6328C159.552 48.8064 159.031 46.6702 159.031 44.2256C159.031 41.7811 159.538 39.6457 160.551 37.8193C161.593 35.9929 163.04 34.588 164.892 33.6045C166.745 32.6211 168.872 32.1289 171.274 32.1289ZM131.37 38.2236C129.92 38.2236 128.683 38.7485 127.659 39.7988C126.664 40.8493 126.166 42.2836 126.166 44.1006C126.166 45.9175 126.664 47.351 127.659 48.4014C128.683 49.4518 129.92 49.9775 131.37 49.9775C132.82 49.9775 134.057 49.4518 135.081 48.4014C136.104 47.3225 136.616 45.8745 136.616 44.0576C136.616 42.2406 136.104 40.8209 135.081 39.7988C134.086 38.7484 132.848 38.2237 131.37 38.2236ZM96.5798 45.4414H103.927L100.232 34.5176L96.5798 45.4414ZM171.187 37.9033C169.943 37.9033 168.887 38.2547 168.018 38.957C167.179 39.6595 166.657 40.6576 166.455 41.9502H175.746C175.746 40.7138 175.311 39.7296 174.443 38.999C173.575 38.2686 172.49 37.9033 171.187 37.9033Z"
fill="#030712"
/>
<path
d="M24.5 29.654C24.5 22.045 30.6683 15.8767 38.2773 15.8767H63.4005C71.0094 15.8767 77.1777 22.045 77.1777 29.654V52.3459C77.1777 59.9549 71.0094 66.1232 63.4005 66.1232H38.2773C30.6683 66.1232 24.5 59.9549 24.5 52.3459V29.654Z"
fill="#030712"
/>
<path
d="M24.5 29.654C24.5 22.045 30.6683 15.8767 38.2773 15.8767H63.4005C71.0094 15.8767 77.1777 22.045 77.1777 29.654V52.3459C77.1777 59.9549 71.0094 66.1232 63.4005 66.1232H38.2773C30.6683 66.1232 24.5 59.9549 24.5 52.3459V29.654Z"
fill="url(#paint1_linear_5061_313)"
fillOpacity="0.3"
/>
<mask
id="mask0_5061_313"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="24"
y="15"
width="54"
height="52"
>
<path
d="M24.5 29.654C24.5 22.045 30.6683 15.8767 38.2773 15.8767H63.4005C71.0094 15.8767 77.1777 22.045 77.1777 29.654V52.3459C77.1777 59.9549 71.0094 66.1232 63.4005 66.1232H38.2773C30.6683 66.1232 24.5 59.9549 24.5 52.3459V29.654Z"
fill="#030712"
/>
<path
d="M24.5 29.654C24.5 22.045 30.6683 15.8767 38.2773 15.8767H63.4005C71.0094 15.8767 77.1777 22.045 77.1777 29.654V52.3459C77.1777 59.9549 71.0094 66.1232 63.4005 66.1232H38.2773C30.6683 66.1232 24.5 59.9549 24.5 52.3459V29.654Z"
fill="url(#paint2_linear_5061_313)"
fillOpacity="0.3"
/>
</mask>
<g mask="url(#mask0_5061_313)">
<g filter="url(#filter0_f_5061_313)">
<path
d="M63.4004 65.9125V66.1232H38.2773V65.9125H63.4004ZM76.967 52.3459V29.6539C76.967 22.1613 70.893 16.0874 63.4004 16.0874H38.2773C30.7847 16.0874 24.7107 22.1613 24.7107 29.6539V52.3459C24.7107 59.8386 30.7847 65.9125 38.2773 65.9125V66.1232L38.0992 66.122C30.6316 66.0274 24.5957 59.9916 24.5011 52.524L24.5 52.3459V29.6539C24.5 22.1044 30.5723 15.9732 38.0992 15.8778L38.2773 15.8767H63.4004C71.0094 15.8767 77.1777 22.045 77.1777 29.6539V52.3459L77.1766 52.524C77.0812 60.0509 70.95 66.1232 63.4004 66.1232V65.9125C70.893 65.9125 76.967 59.8386 76.967 52.3459Z"
fill="url(#paint3_linear_5061_313)"
fillOpacity="0.8"
/>
</g>
</g>
<g opacity="0.5" filter="url(#filter1_f_5061_313)">
<path
d="M41.703 43.5909C41.703 45.1509 42.0932 46.3519 42.8735 47.1938C43.6539 48.0357 44.7992 48.4567 46.3096 48.4567C47.8199 48.4567 48.9778 48.0357 49.7833 47.1938C50.5889 46.3519 50.9916 45.1509 50.9916 43.5909V27.9907H57.4484V43.5538C57.4484 45.8814 56.9449 47.85 55.938 49.4595C54.9311 51.0691 53.5718 52.2825 51.8601 53.0996C50.1736 53.9168 48.2856 54.3253 46.1963 54.3253C44.107 54.3253 42.2316 53.9291 40.5702 53.1367C38.934 52.3196 37.6376 51.1063 36.6811 49.4968C35.7245 47.8625 35.2462 45.8814 35.2462 43.5538V27.9907H41.703V43.5909ZM67.9064 54.3253H61.6021V27.9907H67.9064V54.3253Z"
fill="#030712"
/>
</g>
<g opacity="0.6" filter="url(#filter2_f_5061_313)">
<path
d="M40.9656 43.4854C40.9656 45.0454 41.3558 46.2465 42.1361 47.0884C42.9165 47.9303 44.0618 48.3512 45.5721 48.3512C47.0825 48.3512 48.2404 47.9303 49.0459 47.0884C49.8514 46.2465 50.2542 45.0454 50.2542 43.4854V27.8853H56.711V43.4483C56.711 45.7759 56.2075 47.7445 55.2006 49.3541C54.1937 50.9636 52.8344 52.177 51.1227 52.9941C49.4361 53.8113 47.5482 54.2199 45.4589 54.2199C43.3696 54.2199 41.4941 53.8236 39.8327 53.0312C38.1966 52.2141 36.9002 51.0008 35.9437 49.3913C34.9871 47.757 34.5088 45.7759 34.5088 43.4483V27.8853H40.9656V43.4854ZM67.169 54.2199H60.8647V27.8853H67.169V54.2199Z"
fill="white"
/>
</g>
<path
d="M40.9656 43.4854C40.9656 45.0454 41.3558 46.2465 42.1361 47.0884C42.9165 47.9303 44.0618 48.3512 45.5721 48.3512C47.0825 48.3512 48.2404 47.9303 49.0459 47.0884C49.8514 46.2465 50.2542 45.0454 50.2542 43.4854V27.8853H56.711V43.4483C56.711 45.7759 56.2075 47.7445 55.2006 49.3541C54.1937 50.9636 52.8344 52.177 51.1227 52.9941C49.4361 53.8113 47.5482 54.2199 45.4589 54.2199C43.3696 54.2199 41.4941 53.8236 39.8327 53.0312C38.1966 52.2141 36.9002 51.0008 35.9437 49.3913C34.9871 47.757 34.5088 45.7759 34.5088 43.4483V27.8853H40.9656V43.4854ZM67.169 54.2199H60.8647V27.8853H67.169V54.2199Z"
fill="url(#paint4_linear_5061_313)"
/>
<mask
id="mask1_5061_313"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="34"
y="27"
width="34"
height="28"
>
<path
d="M40.9656 43.4854C40.9656 45.0454 41.3558 46.2465 42.1361 47.0884C42.9165 47.9303 44.0618 48.3512 45.5721 48.3512C47.0825 48.3512 48.2404 47.9303 49.0459 47.0884C49.8514 46.2465 50.2542 45.0454 50.2542 43.4854V27.8853H56.711V43.4483C56.711 45.7759 56.2075 47.7445 55.2006 49.3541C54.1937 50.9636 52.8344 52.177 51.1227 52.9941C49.4361 53.8113 47.5482 54.2199 45.4589 54.2199C43.3696 54.2199 41.4941 53.8236 39.8327 53.0312C38.1966 52.2141 36.9002 51.0008 35.9437 49.3913C34.9871 47.757 34.5088 45.7759 34.5088 43.4483V27.8853H40.9656V43.4854ZM67.169 54.2199H60.8647V27.8853H67.169V54.2199Z"
fill="url(#paint5_linear_5061_313)"
/>
</mask>
<g mask="url(#mask1_5061_313)">
<g opacity="0.4" filter="url(#filter3_f_5061_313)">
<path
d="M40.539 28.2283H34.3718L33.3439 26.9253H41.4984V44.0016L44.1709 47.7049L47.9398 47.9793C46.7748 48.5965 44.3724 49.104 42.6633 48.1164C40.9542 47.1289 40.539 45.0989 40.539 44.0016V28.2283Z"
fill="#030712"
/>
<path
d="M56.2998 28.2283H49.927V27.3368H57.3962V44.5503C57.3962 48.5553 55.5232 50.0138 54.5867 50.2424C55.9572 48.1027 56.2998 45.5561 56.2998 44.5503V28.2283Z"
fill="#030712"
/>
<path
d="M66.7157 28.2969H60.5484L59.9317 27.2682H67.8121V54.5629H66.7157V28.2969Z"
fill="#030712"
/>
</g>
<g opacity="0.3" filter="url(#filter4_f_5061_313)">
<path
d="M35.1255 43.3843V27.7482C35.1255 27.2544 34.2575 27.1767 33.8235 27.1995V43.3843C33.8235 52.8758 40.7217 55.2029 44.1708 55.18C52.2842 56.826 56.2313 49.9223 57.1906 46.2647L56.7109 45.6475C55.4775 50.9967 51.5715 54.0828 43.6911 53.1227C37.3868 52.3546 35.3539 46.3104 35.1255 43.3843Z"
fill="white"
/>
<path
d="M61.5762 53.4656V27.9539C61.5762 26.8566 60.891 27.1767 60.5483 27.4739V54.7686H67.7435V53.4656H61.5762Z"
fill="white"
/>
</g>
<g opacity="0.6">
<path
d="M56.5739 43.4483V28.0224H50.3913V43.4854C50.3913 45.0685 49.9822 46.3081 49.145 47.1832C48.3065 48.0595 47.1082 48.4884 45.5721 48.4884C44.0363 48.4884 42.8494 48.0596 42.0356 47.1816C41.2244 46.3064 40.8285 45.0674 40.8285 43.4854V28.0224H34.6458V43.4483C34.6458 45.7571 35.1203 47.713 36.062 49.3219C37.005 50.9083 38.2809 52.1025 39.8918 52.9075L40.0461 52.9797C41.6484 53.7141 43.4519 54.0827 45.4589 54.0827V54.2199C43.3696 54.2199 41.4941 53.8236 39.8327 53.0312C38.1966 52.2141 36.9002 51.0008 35.9437 49.3913C34.9871 47.757 34.5088 45.7759 34.5088 43.4483V27.8853H40.9656V43.4854C40.9656 45.0454 41.3558 46.2465 42.1361 47.0884C42.9165 47.9303 44.0618 48.3512 45.5721 48.3512C47.0825 48.3512 48.2404 47.9303 49.0459 47.0884C49.8514 46.2465 50.2542 45.0454 50.2542 43.4854V27.8853H56.711V43.4483C56.711 45.7759 56.2075 47.7445 55.2006 49.3541C54.1937 50.9636 52.8344 52.177 51.1227 52.9941C49.4361 53.8113 47.5482 54.2199 45.4589 54.2199V54.0827C47.5299 54.0827 49.3971 53.6778 51.063 52.8706L51.0637 52.8704C52.7519 52.0645 54.0914 50.8688 55.0844 49.2813C56.0749 47.6981 56.5739 45.756 56.5739 43.4483ZM67.169 27.8853V54.2199H60.8647V27.8853H67.169ZM61.0017 54.0827H67.0319V28.0224H61.0017V54.0827Z"
fill="white"
/>
</g>
</g>
<defs>
<filter
id="filter0_f_5061_313"
x="22.5"
y="13.8767"
width="56.6777"
height="54.2463"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1"
result="effect1_foregroundBlur_5061_313"
/>
</filter>
<filter
id="filter1_f_5061_313"
x="25.2462"
y="17.9907"
width="52.6602"
height="46.3347"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="5"
result="effect1_foregroundBlur_5061_313"
/>
</filter>
<filter
id="filter2_f_5061_313"
x="26.5088"
y="19.8853"
width="48.6602"
height="42.3347"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0"
result="effect1_foregroundBlur_5061_313"
/>
</filter>
<filter
id="filter3_f_5061_313"
x="32.3439"
y="25.9253"
width="36.4683"
height="29.6377"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_5061_313"
/>
</filter>
<filter
id="filter4_f_5061_313"
x="32.8235"
y="26.1892"
width="35.92"
height="30.2402"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_5061_313"
/>
</filter>
<linearGradient
id="paint0_linear_5061_313"
x1="110"
y1="0"
x2="110"
y2="82"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D1D5DC" stopOpacity="0" />
<stop offset="1" stopColor="#D1D5DC" />
</linearGradient>
<linearGradient
id="paint1_linear_5061_313"
x1="50.8389"
y1="7.55497"
x2="50.8389"
y2="61.0264"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F3F4F6" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint2_linear_5061_313"
x1="50.8389"
y1="7.55497"
x2="50.8389"
y2="61.0264"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F3F4F6" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint3_linear_5061_313"
x1="50.8389"
y1="15.8767"
x2="50.8389"
y2="66.1232"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="0.2" stopColor="white" stopOpacity="0" />
<stop offset="0.8" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" />
</linearGradient>
<linearGradient
id="paint4_linear_5061_313"
x1="50.8178"
y1="41.0526"
x2="50.8178"
y2="60.5978"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint5_linear_5061_313"
x1="56.1348"
y1="41.0526"
x2="56.1348"
y2="60.5978"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
</defs>
</svg>
</g>
<g id="Group 10">
<g id="Group 5">
<g id="Frame 18">
<rect
x="183"
y="137"
width="62"
height="62"
rx="31"
fill="url(#paint5_linear_5061_312)"
/>
<g id="Group 8">
<path
d="M216.671 149.013C218.561 148.874 220.612 149.894 221.878 151.274C223.225 152.741 223.553 154.595 223.439 156.529C223.609 156.516 223.78 156.504 223.95 156.494C225.885 156.386 227.329 156.932 228.741 158.222C230.225 159.577 230.869 160.813 230.991 162.864C231.061 164.02 230.709 165.56 230.106 166.549C229.522 167.484 228.623 168.219 227.875 169.017C226.848 170.112 225.812 171.17 224.711 172.189C223.881 172.957 223.151 173.822 222.36 174.625L218.335 178.665C217.536 179.481 216.626 180.199 215.865 181.05C215.712 181.221 215.508 181.453 215.532 181.699C215.618 182.562 218.73 184.306 218.785 185.643C218.8 186.004 218.658 186.327 218.416 186.588C218.179 186.846 217.847 186.995 217.498 187C216.555 187.019 215.639 185.664 214.997 185.026C214.01 184.047 212.833 183.134 212.849 181.625C212.865 180.126 213.917 179.4 214.854 178.409C215.887 177.251 216.998 176.247 218.102 175.157L226.821 166.408C227.796 165.411 228.322 164.541 228.323 163.099C228.363 160.202 225.341 158.353 222.759 159.479C221.726 159.929 220.321 161.565 219.528 162.398C218.199 163.75 216.821 165.018 215.533 166.407C214.235 167.808 212.767 169.038 211.489 170.458C211.155 170.829 210.794 171.154 210.443 171.499C209.639 172.289 208.214 171.975 208.081 170.786C207.967 169.766 209.118 169.016 209.732 168.391C210.142 167.988 210.532 167.603 210.93 167.202L216.87 161.177C217.871 160.175 218.965 159.232 219.905 158.159C221.29 156.577 221.036 153.893 219.443 152.552C218.298 151.588 216.503 151.409 215.173 152.053C214.452 152.402 213.763 153.198 213.195 153.758C212.579 154.361 211.967 154.969 211.359 155.58L203.28 163.696L200.539 166.45C200.068 166.92 199.116 168.052 198.449 168.122C197.472 168.232 196.567 167.03 197.223 166.199C198.667 164.372 200.535 162.839 202.12 161.134C203.154 160.023 204.286 158.996 205.346 157.924L207.909 155.312C208.455 154.767 209.045 154.222 209.576 153.676L211.492 151.715C213.045 150.155 214.389 149.147 216.671 149.013Z"
fill="#FEFEFE"
/>
<path
d="M216.657 154.344C216.69 154.341 216.724 154.339 216.757 154.337C218.06 154.278 218.698 155.622 217.941 156.422C216.976 157.442 215.865 158.557 214.872 159.551L210.276 164.158C209.135 165.293 207.965 166.408 206.869 167.587C206.087 168.429 205.683 169.393 205.725 170.554C205.764 171.634 206.242 172.597 207.027 173.326C207.851 174.09 208.728 174.407 209.847 174.356C210.253 174.338 210.703 174.267 211.078 174.105C212.321 173.569 215.273 170.326 216.351 169.206C217.292 168.229 218.312 167.324 219.26 166.35C219.716 165.882 220.147 165.389 220.61 164.928C221.071 164.469 221.564 164.043 222.025 163.583C222.498 163.112 222.948 162.565 223.477 162.16C223.733 161.964 224.02 161.813 224.348 161.805C224.714 161.797 225.054 161.986 225.308 162.238C225.545 162.473 225.699 162.742 225.695 163.082C225.688 163.685 225.139 164.135 224.739 164.527C223.965 165.259 223.213 166.132 222.439 166.905L216.43 172.853C214.947 174.321 214.01 175.799 211.931 176.546C208.56 177.757 204.772 176.174 203.504 172.767C202.873 171.076 202.937 169.202 203.681 167.558C204.294 166.218 205.734 164.968 206.781 163.919L210.546 160.141L214.017 156.652C214.668 155.997 215.838 154.646 216.657 154.344Z"
fill="#FEFEFE"
/>
</g>
</g>
<path d="M214 82V137" stroke="#D1D5DC" />
<g id="Vector 27" opacity="0.3" filter="url(#filter5_f_5061_312)">
<path
d="M214 87C213.933 87.7 213.87 88.4 213.81 89.1C213.27 95.4 213 101.7 213 108C213 114.3 213.27 120.6 213.81 126.9C213.87 127.6 213.933 128.3 214 129C214.067 128.3 214.13 127.6 214.19 126.9C214.73 120.6 215 114.3 215 108C215 101.7 214.73 95.4 214.19 89.1C214.13 88.4 214.067 87.7 214 87Z"
fill="url(#paint6_linear_5061_312)"
/>
</g>
<path
d="M214 87C213.967 87.7 213.935 88.4 213.905 89.1C213.635 95.4 213.5 101.7 213.5 108C213.5 114.3 213.635 120.6 213.905 126.9C213.935 127.6 213.967 128.3 214 129C214.033 128.3 214.065 127.6 214.095 126.9C214.365 120.6 214.5 114.3 214.5 108C214.5 101.7 214.365 95.4 214.095 89.1C214.065 88.4 214.033 87.7 214 87Z"
fill="url(#paint7_linear_5061_312)"
fillOpacity="0.15"
/>
</g>
<g id="Group 3">
<g id="Frame 17">
<rect
x="285"
y="153"
width="62"
height="62"
rx="31"
fill="url(#paint8_linear_5061_312)"
/>
<g id="Group 6">
<path
d="M319.752 174.021C322.281 173.955 324.861 174.073 327.386 174.012C330.036 173.948 332.012 174.082 334.026 176.092C334.886 176.947 335.498 178.018 335.797 179.191C336.067 180.267 335.99 182.601 335.99 183.809L335.988 190.238L332.252 190.239L332.246 180.444C332 180.632 331.415 181.248 331.169 181.491L328.776 183.876L324.765 187.874C324.295 188.343 322.773 189.758 322.515 190.235C325.733 190.265 329.056 190.178 332.254 190.25C332.255 191.424 332.292 192.824 332.243 193.976C332.022 193.982 331.802 193.985 331.582 193.986L325.693 193.988C324.51 193.989 322.405 194.067 321.347 193.816C320.048 193.52 318.861 192.86 317.927 191.914C317.17 191.159 316.747 190.384 316.368 189.392C315.807 187.921 315.982 186.241 315.982 184.675L315.982 177.803L319.746 177.801C319.738 181.044 319.718 184.335 319.756 187.576C321.633 185.724 323.501 183.862 325.359 181.989C326.755 180.595 328.176 179.243 329.521 177.797L319.747 177.79L319.752 174.021Z"
fill="#FEFEFE"
/>
<path
d="M309.73 176.491L313.46 176.489L313.462 182.458L313.464 188.177C313.464 189.203 313.463 190.236 313.456 191.263C313.443 193.094 311.682 194.179 309.994 193.667C309.433 193.498 309.188 193.265 308.802 192.829C308.444 192.432 308.141 192.009 307.813 191.589C307.204 190.803 306.59 190.02 305.972 189.24L297.896 178.995C297.576 178.592 297.241 178.162 296.927 177.757C296.772 177.558 295.993 176.665 296 176.509C297.176 176.455 298.387 176.513 299.567 176.49C299.941 176.483 300.351 176.485 300.723 176.511C300.809 176.608 300.889 176.74 300.972 176.843C301.845 177.933 302.699 179.04 303.565 180.136L309.723 187.978C309.765 186.852 309.725 185.436 309.725 184.295L309.73 176.491Z"
fill="#FEFEFE"
/>
</g>
</g>
<g id="Group 7">
<path
d="M245 82V84C245 98.3594 256.641 110 271 110H290C304.359 110 316 121.641 316 136V153"
stroke="#D1D5DC"
/>
<g id="Vector 30" opacity="0.3" filter="url(#filter6_f_5061_312)">
<path
d="M249.5 99C251.333 100.167 255 109 272 110C279.188 110.423 287.333 110 290.5 110C294.5 110 305.5 111 313.5 124.5"
stroke="url(#paint9_linear_5061_312)"
strokeWidth="2"
/>
</g>
<path
d="M249.5 99C250.42 99.7783 251.06 100.856 251.875 101.755C256.73 107.597 264.568 110.008 271.973 110.457C275.496 110.69 279.022 110.713 282.541 110.662C285.196 110.628 287.873 110.514 290.5 110.476C298.696 110.35 306.496 114.895 311.418 121.504C312.164 122.477 312.843 123.457 313.5 124.5C312.9 123.423 312.273 122.406 311.571 121.392C306.977 114.515 299.046 109.488 290.5 109.524C287.828 109.53 285.176 109.628 282.526 109.662C279.021 109.713 275.516 109.717 272.027 109.543C264.737 109.199 257.112 107.157 252.016 101.627C251.164 100.777 250.467 99.7313 249.5 99Z"
fill="url(#paint10_linear_5061_312)"
fillOpacity="0.15"
/>
</g>
</g>
<g id="Group 4">
<g id="Frame 19">
<path
d="M81 184C81 166.879 94.8792 153 112 153C129.121 153 143 166.879 143 184C143 201.121 129.121 215 112 215C94.8792 215 81 201.121 81 184Z"
fill="url(#paint11_linear_5061_312)"
/>
<g
id="garden:terminal-cli-stroke-12"
clipPath="url(#clip0_5061_312)"
>
<path
d="M99.5 172H124.5C125.163 172 125.799 172.257 126.268 172.714C126.737 173.171 127 173.791 127 174.438V193.943C127 194.589 126.737 195.21 126.268 195.667C125.799 196.124 125.163 196.381 124.5 196.381H99.5C98.837 196.381 98.2011 196.124 97.7322 195.667C97.2634 195.21 97 194.589 97 193.943V174.438C97 173.791 97.2634 173.171 97.7322 172.714C98.2011 172.257 98.837 172 99.5 172ZM110.75 191.505C110.418 191.505 110.101 191.376 109.866 191.148C109.632 190.919 109.5 190.609 109.5 190.286C109.5 189.962 109.632 189.652 109.866 189.424C110.101 189.195 110.418 189.067 110.75 189.067H120.75C121.082 189.067 121.399 189.195 121.634 189.424C121.868 189.652 122 189.962 122 190.286C122 190.609 121.868 190.919 121.634 191.148C121.399 191.376 121.082 191.505 120.75 191.505H110.75ZM102.365 178.958C102.249 178.845 102.157 178.71 102.094 178.562C102.031 178.414 101.998 178.255 101.998 178.095C101.998 177.935 102.031 177.776 102.094 177.628C102.157 177.48 102.249 177.345 102.365 177.232C102.481 177.119 102.619 177.029 102.771 176.968C102.923 176.906 103.086 176.875 103.25 176.875C103.414 176.875 103.577 176.906 103.729 176.968C103.881 177.029 104.019 177.119 104.135 177.232L109.392 182.362C109.848 182.815 110.105 183.425 110.107 184.06C110.11 184.695 109.858 185.306 109.405 185.763L104.155 191.127C104.042 191.243 103.906 191.336 103.756 191.4C103.606 191.465 103.444 191.501 103.28 191.504C103.116 191.508 102.953 191.481 102.799 191.423C102.646 191.365 102.506 191.279 102.387 191.168C102.269 191.058 102.173 190.926 102.107 190.779C102.04 190.633 102.004 190.475 102 190.315C101.996 190.155 102.025 189.996 102.084 189.846C102.143 189.697 102.232 189.56 102.345 189.444L107.608 184.069L102.365 178.958ZM99.5 174.438V193.943H124.5V174.438H99.5Z"
fill="white"
/>
</g>
</g>
<g id="Group 7_2">
<path
d="M183 82V84C183 98.3594 171.359 110 157 110H138C123.641 110 112 121.641 112 136V153"
stroke="#D1D5DC"
/>
<g
id="Vector 30_2"
opacity="0.3"
filter="url(#filter7_f_5061_312)"
>
<path
d="M178.5 99C176.667 100.167 173 109 156 110C148.812 110.423 140.667 110 137.5 110C133.5 110 122.5 111 114.5 124.5"
stroke="url(#paint12_linear_5061_312)"
strokeWidth="2"
/>
</g>
<path
d="M178.5 99C177.58 99.7783 176.94 100.856 176.125 101.755C171.27 107.597 163.432 110.008 156.027 110.457C152.504 110.69 148.978 110.713 145.459 110.662C142.804 110.628 140.127 110.514 137.5 110.476C129.304 110.35 121.504 114.895 116.582 121.504C115.836 122.477 115.157 123.457 114.5 124.5C115.1 123.423 115.727 122.406 116.429 121.392C121.023 114.515 128.954 109.488 137.5 109.524C140.172 109.53 142.824 109.628 145.474 109.662C148.979 109.713 152.484 109.717 155.973 109.543C163.263 109.199 170.888 107.157 175.984 101.627C176.836 100.777 177.533 99.7313 178.5 99Z"
fill="url(#paint13_linear_5061_312)"
fillOpacity="0.15"
/>
</g>
</g>
{/* current flowing through the wires — infinite top-to-bottom loop */}
<g
filter="url(#feature_build_pulse_glow)"
stroke="#4680FF"
strokeWidth="2"
strokeLinecap="round"
fill="none"
strokeDasharray="0.16 0.84"
>
<path
className="feature-build-pulse"
pathLength={1}
d="M214 82V137"
/>
<path
className="feature-build-pulse"
pathLength={1}
d="M245 82V84C245 98.3594 256.641 110 271 110H290C304.359 110 316 121.641 316 136V153"
/>
<path
className="feature-build-pulse"
pathLength={1}
d="M183 82V84C183 98.3594 171.359 110 157 110H138C123.641 110 112 121.641 112 136V153"
/>
</g>
</g>
</g>
<defs>
<filter
id="feature_build_pulse_glow"
x="-40%"
y="-40%"
width="180%"
height="180%"
colorInterpolationFilters="sRGB"
>
<feGaussianBlur stdDeviation="2.4" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter
id="filter0_f_5061_312"
x="126"
y="13.8767"
width="56.6777"
height="54.2463"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter1_f_5061_312"
x="128.746"
y="17.9907"
width="52.6602"
height="46.3347"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="5"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter2_f_5061_312"
x="130.009"
y="19.8853"
width="48.6602"
height="42.3347"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter3_f_5061_312"
x="135.844"
y="25.9253"
width="36.4683"
height="29.6377"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter4_f_5061_312"
x="136.323"
y="26.1892"
width="35.92"
height="30.2402"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.5"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter5_f_5061_312"
x="210"
y="84"
width="8"
height="48"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1.5"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter6_f_5061_312"
x="245.963"
y="95.1562"
width="71.3972"
height="32.8535"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1.5"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<filter
id="filter7_f_5061_312"
x="110.64"
y="95.1562"
width="71.3972"
height="32.8535"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="1.5"
result="effect1_foregroundBlur_5061_312"
/>
</filter>
<linearGradient
id="paint0_linear_5061_312"
x1="154.339"
y1="7.55497"
x2="154.339"
y2="61.0264"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F3F4F6" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint1_linear_5061_312"
x1="154.339"
y1="7.55497"
x2="154.339"
y2="61.0264"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F3F4F6" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint2_linear_5061_312"
x1="154.339"
y1="15.8767"
x2="154.339"
y2="66.1232"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="0.2" stopColor="white" stopOpacity="0" />
<stop offset="0.8" stopColor="white" stopOpacity="0" />
<stop offset="1" stopColor="white" />
</linearGradient>
<linearGradient
id="paint3_linear_5061_312"
x1="154.318"
y1="41.0526"
x2="154.318"
y2="60.5978"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint4_linear_5061_312"
x1="159.635"
y1="41.0526"
x2="159.635"
y2="60.5978"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor="#030712" />
</linearGradient>
<linearGradient
id="paint5_linear_5061_312"
x1="214"
y1="137"
x2="214"
y2="199"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#6A7282" />
<stop offset="1" stopColor="#1E2939" />
</linearGradient>
<linearGradient
id="paint6_linear_5061_312"
x1="214.527"
y1="87.5"
x2="214.527"
y2="129"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4680FF" stopOpacity="0" />
<stop offset="0.5" stopColor="#4680FF" />
<stop offset="1" stopColor="#4680FF" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint7_linear_5061_312"
x1="214.527"
y1="87.5"
x2="214.527"
y2="129"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4680FF" stopOpacity="0" />
<stop offset="0.5" stopColor="#4680FF" />
<stop offset="1" stopColor="#4680FF" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint8_linear_5061_312"
x1="316"
y1="153"
x2="316"
y2="215"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#6A7282" />
<stop offset="1" stopColor="#1E2939" />
</linearGradient>
<linearGradient
id="paint9_linear_5061_312"
x1="257.5"
y1="112.25"
x2="309"
y2="112.25"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4680FF" stopOpacity="0" />
<stop offset="0.5" stopColor="#4680FF" />
<stop offset="1" stopColor="#4680FF" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint10_linear_5061_312"
x1="257.5"
y1="112.25"
x2="309"
y2="112.25"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4680FF" stopOpacity="0" />
<stop offset="0.5" stopColor="#4680FF" />
<stop offset="1" stopColor="#4680FF" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint11_linear_5061_312"
x1="112"
y1="153"
x2="112"
y2="215"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#6A7282" />
<stop offset="1" stopColor="#1E2939" />
</linearGradient>
<linearGradient
id="paint12_linear_5061_312"
x1="170.5"
y1="112.25"
x2="119"
y2="112.25"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4680FF" stopOpacity="0" />
<stop offset="0.5" stopColor="#4680FF" />
<stop offset="1" stopColor="#4680FF" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint13_linear_5061_312"
x1="170.5"
y1="112.25"
x2="119"
y2="112.25"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4680FF" stopOpacity="0" />
<stop offset="0.5" stopColor="#4680FF" />
<stop offset="1" stopColor="#4680FF" stopOpacity="0" />
</linearGradient>
<clipPath id="clip0_5061_312">
<rect
width="30"
height="26"
fill="white"
transform="translate(97 171)"
/>
</clipPath>
</defs>
</svg>
)
}
src/images/svg/landing/feature-motion.tsx
// types
import type { SVGAttributes } from "react"
// project-imports
import DarkFav from "@/images/brand/dark-fav"
import LightFav from "@/images/brand/light-fav"
// ------------------------------ | FEATURE — SMOOTH ANIMATIONS WITH MOTION | ------------------------------ //
const FIGMA_CURVE =
"C68.4968 143.61 260.141 -19.547 215.92 192.498C196.882 283.789 33.6447 159.574 236.423 159.574C305.742 159.574 326.244 177.533 370.667 203.972"
const MOTION_PATH = `M-58 152L-0.333496 149.098${FIGMA_CURVE}L424 234`
const VISIBLE_PATH = `M-0.333496 149.098${FIGMA_CURVE}`
/** seconds for one full loop — bump up to slow the whole thing down */
const MOTION_DURATION = 7
export default function FeatureMotion(props: SVGAttributes<SVGSVGElement>) {
return (
// The title that used to sit at y=45 is now a real <h3> rendered above this
// illustration by the Feature block, so the viewBox starts below that band.
// Every coordinate below is unchanged — only the visible window moved.
<svg
viewBox="0 50 371 208"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
{...props}
>
<path
d={VISIBLE_PATH}
className="text-black/20 dark:text-white/25"
stroke="currentColor"
strokeWidth="1"
strokeDasharray="4 4"
/>
{/* animated favicon — rides the full loop */}
<g className="motion-reduce:hidden">
<animateMotion
dur={`${MOTION_DURATION}s`}
repeatCount="indefinite"
calcMode="linear"
rotate="0"
path={MOTION_PATH}
/>
<Favicon />
</g>
{/* reduced-motion: favicon parked on the curve, no animation */}
<g className="hidden motion-reduce:block" transform="translate(103 88)">
<Favicon />
</g>
</svg>
)
}
function Favicon() {
return (
<foreignObject
x="-25"
y="-25"
width="50"
height="50"
style={{ overflow: "visible" }}
>
<div className="size-[50px] overflow-hidden rounded-full shadow-[0_10px_24px_rgba(16,24,40,0.28)]">
<LightFav
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
className="block size-full dark:hidden"
/>
<DarkFav
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
className="hidden size-full dark:block"
/>
</div>
</foreignObject>
)
}
src/images/svg/landing/figma-logo.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | FEATURE — FIGMA LOGO | ------------------------------ //
export default function FigmaLogo(props: SVGAttributes<SVGSVGElement>) {
return (
<svg viewBox="0 0 38 57" fill="none" aria-hidden {...props}>
<path
d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0Z"
fill="#1ABCFE"
/>
<path
d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0Z"
fill="#0ACF83"
/>
<path d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19Z" fill="#FF7262" />
<path
d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5Z"
fill="#F24E1E"
/>
<path
d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5Z"
fill="#A259FF"
/>
</svg>
)
}
src/images/svg/landing/figma-orbit-ring.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | FEATURE — FIGMA ORBIT RING | ------------------------------ //
// Orbit ring — exact path exported from Figma (Ellipse 71).
export default function FigmaOrbitRing(props: SVGAttributes<SVGSVGElement>) {
return (
<svg viewBox="0 0 227 95" fill="none" aria-hidden {...props}>
<g filter="url(#feature_orbit_glow)">
<path
d="M171.969 5.44488C172.094 5.43054 172.218 5.4162 172.342 5.40186C172.333 5.32325 172.322 5.24656 172.31 5.17189L172.111 5.39151C178.197 5.84084 184.258 6.57601 190.228 7.76925C202.07 10.4554 217.331 14.126 220.738 26.8755C222.119 38.9782 210.529 47.5527 201.252 53.9583C176.77 69.4776 148.331 77.6802 119.974 83.1287C99.8842 86.818 79.4141 88.8153 59.0196 88.0241C48.8138 87.5833 38.6036 86.4756 28.7719 83.7849C19.4291 81.0362 8.01211 76.7967 5.64472 66.5348C4.95595 49.2308 23.6123 39.863 37.1813 32.2262C42.6653 29.4064 48.3065 26.9031 54.0575 24.6249C54.0118 24.5086 53.966 24.3922 53.9203 24.2759C48.1493 26.5321 42.4855 29.0158 36.9738 31.8207C23.3599 39.4945 4.46971 48.5039 5.01138 66.6516C7.52809 77.47 19.1773 81.6725 28.5729 84.4982C38.4825 87.2405 48.737 88.3774 58.9847 88.8452C79.4601 89.6884 99.991 87.7231 120.144 84.0518C148.597 78.6211 177.103 70.4436 201.802 54.7933C211.124 48.2869 223.073 39.7509 221.631 26.711C217.774 13.0746 202.255 9.82014 190.343 7.18032C184.328 6.04569 178.241 5.38266 172.136 5.01435L171.897 4.99998L171.937 5.23397C171.95 5.3058 171.961 5.37594 171.969 5.44488Z"
className="fill-foreground"
/>
</g>
<defs>
<filter
id="feature_orbit_glow"
x="0"
y="0"
width="226.75"
height="94.0391"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="2.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.206731 0 0 0 0 0.669471 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
/>
</filter>
</defs>
</svg>
)
}