# Hero

> Hero variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-hero).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-hero
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-hero-light-15bd1e45b2ddfe4b.png
- Registry item: https://uiable.com/r/block-hero.json
- Categories: landing
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-hero.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@tabler/icons-react`
- Registry items: `@uiable/badge`, `@uiable/button`, `@uiable/text-marquee`

## Files

### `src/components/uiable/blocks/landing/hero/hero.tsx`

```tsx
// react
import { Fragment } from "react"

// next
import Link from "next/link"

// shadcn
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { TextMarquee } from "@/components/ui/text-marquee"

// project-imports
import branding from "@/branding.json"
import HoverBg from "@/components/animation/HoverBg"
import BaseUi from "@/images/svg/icons/baseui"
import Motion from "@/images/svg/icons/motion"
import Shadcn from "@/images/svg/icons/shadcn"
import Tailwind from "@/images/svg/icons/tailwind"
import CodedThemeFabIcon from "@/images/svg/landing/ct-fab-logo"

// assets
import {
  IconArrowUpRight,
  IconBrandNextjs,
  IconBrandReact,
  IconBrandTypescript,
} from "@tabler/icons-react"

//  ------------------------------ | CONSTANTS | ------------------------------  //

const techIcons = [
  { name: "React", Icon: IconBrandReact },
  { name: "Next.js", Icon: IconBrandNextjs },
  { name: "Shadcn", Icon: Shadcn },
  { name: "Base UI", Icon: BaseUi },
  { name: "Tailwind CSS", Icon: Tailwind },
  { name: "Motion", Icon: Motion },
  { name: "TypeScript", Icon: IconBrandTypescript },
]

export interface HeroStat {
  label: string
  value: string
}

const DEFAULT_STATS: HeroStat[] = [
  { label: "Blocks", value: "400+" },
  { label: "Templates", value: "7" },
  { label: "Components", value: "790+" },
  { label: "Dashboards", value: "2" },
]

//  ------------------------------ | HELPERS | ------------------------------  //

function StatItems({ stats }: { stats: HeroStat[] }) {
  return (
    <>
      {stats.map((item, index) => (
        <Fragment key={item.label}>
          <span className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs whitespace-nowrap sm:text-sm">
            <span className="text-muted-foreground">{item.value}</span>
            <span className="text-muted-foreground">{item.label}</span>
          </span>
          {index < stats.length - 1 && (
            <span aria-hidden className="h-3.5 w-px shrink-0 bg-border" />
          )}
        </Fragment>
      ))}
    </>
  )
}

//  ------------------------------ | HERO | ------------------------------  //

export default function Hero({
  stats = DEFAULT_STATS,
}: {
  stats?: HeroStat[]
}) {
  return (
    <section
      aria-labelledby="hero-heading"
      className="relative mx-auto flex w-full flex-col items-center gap-9 overflow-hidden px-4 pt-20 pb-12.5 sm:px-8 lg:px-24"
    >
      <div
        className="pointer-events-none absolute -top-30 left-1/2 z-0 h-sidebar-collapsed-active-width w-226 -translate-x-1/2 opacity-30 dark:opacity-60"
        style={{
          background:
            "linear-gradient(90deg, var(--color-violet-500) 0%, var(--primary) 50%, var(--color-teal-500) 100%)",
          filter: "blur(260px)",
        }}
      />

      <HoverBg className="opacity-60 dark:opacity-60" />

      <div className="relative z-10 flex w-full justify-center">
        {/* Mobile: scrolling marquee */}
        <div className="w-full max-w-xs overflow-hidden rounded-full border border-border bg-card px-1.5 py-1 shadow-sm sm:hidden">
          <TextMarquee duration={16} gap="0px" repeat={3}>
            <div className="flex items-center">
              <StatItems stats={stats} />
              <span aria-hidden className="h-3.5 w-px shrink-0 bg-border" />
            </div>
          </TextMarquee>
        </div>

        {/* sm and up: single-row pill */}
        <div className="hidden max-w-full flex-wrap items-center justify-center rounded-full border border-border bg-card px-1.5 py-1 shadow-sm sm:inline-flex">
          <StatItems stats={stats} />
        </div>
      </div>

      <div className="relative z-10 flex w-full flex-col items-center gap-7">
        <h1
          id="hero-heading"
          className="text-center text-4xl font-extrabold tracking-tight text-foreground sm:text-6xl md:leading-none lg:text-7xl"
        >
          {branding.title.startsWith("Components to") ? (
            <>
              Components to{" "}
              <span className="block whitespace-nowrap text-primary">
                {branding.title.replace("Components to", "").trim()}
              </span>
            </>
          ) : (
            branding.title
          )}
        </h1>

        <p className="max-w-182 text-center text-base font-normal text-foreground md:text-lg md:leading-7">
          {branding.brandName} is a structured, shadcn-based UI system designed
          to help developers build scalable, production-ready applications
          faster.
        </p>
      </div>

      <div className="relative z-10 flex flex-wrap items-center justify-center gap-4">
        <Button
          size="lg"
          id="cta-start-building"
          nativeButton={false}
          render={<Link href="/doc/installation" />}
          className="h-11 rounded-lg bg-foreground px-6 font-medium text-background hover:bg-foreground/90"
        >
          Start Building
        </Button>
        <Button
          variant="outline"
          size="lg"
          id="cta-view-components"
          nativeButton={false}
          render={<Link href="#template-showcase" />}
          className="h-11 gap-2 rounded-lg border-border bg-card px-6 font-medium text-foreground hover:bg-accent dark:border-border dark:bg-card dark:hover:bg-accent/10"
        >
          View Templates
          <IconArrowUpRight className="size-4" aria-hidden="true" />
        </Button>
      </div>

      <div className="relative z-10 flex items-center justify-center gap-4">
        {techIcons.map((item) => {
          const IconComponent = item.Icon
          return (
            <Button
              key={item.name}
              size="icon-lg"
              className="h-11 w-11 border-0 bg-transparent text-foreground shadow-none hover:bg-transparent"
              title={item.name}
              aria-label={item.name}
            >
              <IconComponent
                className="size-6"
                stroke="1.5"
                aria-hidden="true"
              />
            </Button>
          )
        })}
      </div>

      <div className="relative z-10 flex items-center justify-center">
        <Link
          href="https://codedthemes.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Badge
            variant="outline"
            className="inline-flex items-center rounded-full bg-primary/10 px-4 py-2.5 text-xs font-medium text-secondary-foreground transition-colors hover:bg-primary/20 [&>svg]:size-5!"
          >
            <span className="text-xs font-normal text-foreground">
              {" "}
              Product by{" "}
            </span>
            <CodedThemeFabIcon className="mx-1 size-5!" />
            <span className="text-base font-medium text-secondary-foreground">
              {" "}
              CodedThemes
            </span>
          </Badge>
        </Link>
      </div>
    </section>
  )
}
```

### `src/branding.json`

```json
{
  "brandName": "UIAble",
  "title": "Components to Complete Interfaces",
  "company": {
    "name": "CodedThemes ",
    "url": "https://codedthemes.com/",
    "socialLink": {
      "linkedin": "https://in.linkedin.com/company/codedthemes",
      "x": "https://x.com/uiable",
      "instagram": "#",
      "github": "https://github.com/codedthemes/uiable",
      "discord": "https://discord.com/invite/txPuEn5atw",
      "support": "https://uiable.com/account/support"
    }
  },
  "logo": {
    "main": "",
    "logoIcon": "",
    "logoFab": "",
    "logoWatermark": ""
  }
}
```

### `src/components/animation/HoverBg.tsx`

```tsx
"use client"

import { useEffect, useRef, useState } from "react"

// project-imports
import SparkleGrid from "@/images/svg/landing/sparkle-grid"

interface HoverBgProps {
  className?: string
}

//  ------------------------------ | HOVER BG | ------------------------------  //

export default function HoverBg({ className = "" }: HoverBgProps) {
  const glowRef = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(false)

  const positionRef = useRef({
    targetX: 0,
    targetY: 0,
    currentX: 0,
    currentY: 0,
    initialized: false,
  })

  useEffect(() => {
    let rafId: number
    const el = glowRef.current
    const parent = el?.parentElement

    const handleMouseMove = (e: MouseEvent) => {
      if (!el || !parent) return
      const rect = parent.getBoundingClientRect()

      // Update targeted coordinates relative to the parent's bounding box
      positionRef.current.targetX = e.clientX - rect.left
      positionRef.current.targetY = e.clientY - rect.top

      // Snap immediately to mouse on first movement
      if (!positionRef.current.initialized) {
        positionRef.current.currentX = positionRef.current.targetX
        positionRef.current.currentY = positionRef.current.targetY
        positionRef.current.initialized = true
        setIsVisible(true)
      }
    }

    const handleMouseLeave = () => setIsVisible(false)
    const handleMouseEnter = () => setIsVisible(true)

    const animate = () => {
      if (el && positionRef.current.initialized) {
        const { targetX, targetY, currentX, currentY } = positionRef.current

        // Buttery-smooth easing interpolation (factor: 0.08)
        const nextX = currentX + (targetX - currentX) * 0.08
        const nextY = currentY + (targetY - currentY) * 0.08

        positionRef.current.currentX = nextX
        positionRef.current.currentY = nextY

        // Update the mask-image directly in JS for bulletproof browser compatibility
        const maskStyle = `radial-gradient(circle 180px at ${nextX}px ${nextY}px, black, transparent)`
        el.style.setProperty("-webkit-mask-image", maskStyle)
        el.style.setProperty("mask-image", maskStyle)
      }

      rafId = requestAnimationFrame(animate)
    }

    if (parent) {
      parent.addEventListener("mousemove", handleMouseMove)
      parent.addEventListener("mouseleave", handleMouseLeave)
      parent.addEventListener("mouseenter", handleMouseEnter)
    }

    rafId = requestAnimationFrame(animate)

    return () => {
      if (parent) {
        parent.removeEventListener("mousemove", handleMouseMove)
        parent.removeEventListener("mouseleave", handleMouseLeave)
        parent.removeEventListener("mouseenter", handleMouseEnter)
      }
      cancelAnimationFrame(rafId)
    }
  }, [])

  const hasOpacityClass = className
    .split(" ")
    .some(
      (c) =>
        c.startsWith("opacity-") ||
        c.startsWith("dark:opacity-") ||
        c.includes(":opacity-")
    )

  return (
    <div
      ref={glowRef}
      className={`pointer-events-none absolute inset-0 -z-10 h-full w-full transition-opacity duration-500 ${
        hasOpacityClass ? "" : "opacity-60 dark:opacity-40"
      } ${className}`}
      style={{
        opacity: isVisible ? undefined : 0,
        // Default mask in case mouse hasn't moved yet
        WebkitMaskImage:
          "radial-gradient(circle 180px at 50% 50%, black, transparent)",
        maskImage:
          "radial-gradient(circle 180px at 50% 50%, black, transparent)",
      }}
    >
      {/* The SVG grid pattern repeated across the screen and revealed by the mask */}
      <svg
        className="pointer-events-none absolute inset-0 h-full w-full text-primary/50 dark:text-primary/35"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <pattern
            id="glow-grid-pattern"
            patternUnits="userSpaceOnUse"
            width="574"
            height="574"
          >
            <SparkleGrid />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#glow-grid-pattern)" />
      </svg>
    </div>
  )
}
```

### `src/images/svg/icons/baseui.tsx`

```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/motion.tsx`

```tsx
// types
import type { SVGAttributes } from "react"

//  ------------------------------ | MOTION ICON | ------------------------------  //

export default function Motion(props: SVGAttributes<SVGElement>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 25.364 9"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      aria-hidden="true"
    >
      <path
        d="M 9.587 0 L 4.57 9 L 0 9 L 3.917 1.972 C 4.524 0.883 6.039 0 7.301 0 Z M 20.794 2.25 C 20.794 1.007 21.817 0 23.079 0 C 24.341 0 25.364 1.007 25.364 2.25 C 25.364 3.493 24.341 4.5 23.079 4.5 C 21.817 4.5 20.794 3.493 20.794 2.25 Z M 10.443 0 L 15.013 0 L 9.997 9 L 5.427 9 Z M 15.841 0 L 20.411 0 L 16.494 7.028 C 15.887 8.117 14.372 9 13.11 9 L 10.825 9 Z"
        fill="currentColor"
      />
    </svg>
  )
}
```

### `src/images/svg/icons/shadcn.tsx`

```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`

```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/ct-fab-logo.tsx`

```tsx
// types
import type { SVGAttributes } from "react"

//  ------------------------------ | BRAND LOGO — ABLE PRO | ------------------------------  //

export default function AbleProLogo(props: SVGAttributes<SVGSVGElement>) {
  return (
    <svg
      width="22"
      height="22"
      viewBox="0 0 22 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M19.6434 13.1647C20.7644 13.1647 21.4499 14.412 20.8159 15.3297C20.5505 15.7142 20.2459 16.0797 19.9021 16.4207L16.5555 19.7401C13.5526 22.7185 8.68295 22.7185 5.68002 19.7401L2.2522 16.3402C-0.750732 13.3617 -0.750732 8.53173 2.2522 5.55326L5.59886 2.23385C8.60179 -0.744617 13.4714 -0.744617 16.4743 2.23385L19.9021 5.63376C20.2363 5.96523 20.5333 6.31942 20.792 6.69161C21.4165 7.58752 20.7481 8.81111 19.6501 8.81111C19.2681 8.81111 18.9044 8.6539 18.6446 8.37642L14.5026 3.96127C12.6216 2.09558 9.57284 2.09558 7.69088 3.96127L3.99571 7.62919C2.1147 9.49583 2.1147 12.5207 3.99571 14.3854L7.65269 18.0126C9.5337 19.8783 12.5825 19.8783 14.4644 18.0126L18.616 13.607C18.8824 13.3247 19.2548 13.1647 19.6434 13.1647Z"
        fill="#5B84FA"
      />
      <path
        d="M15.2789 12.8664L12.972 15.1544C11.9255 16.1924 10.2298 16.1924 9.18327 15.1544L6.87642 12.8664C5.82993 11.8284 5.82993 10.1464 6.87642 9.10848L9.18327 6.82041C10.2298 5.78244 11.9255 5.78244 12.972 6.82041L15.2789 9.10848C16.3254 10.1474 16.3254 11.8284 15.2789 12.8664Z"
        fill="#A9EEF5"
      />
    </svg>
  )
}
```

### `src/images/svg/landing/sparkle-grid.tsx`

```tsx
//  ------------------------------ | SVG - SPARKLE GRID | ------------------------------  //

export default function SparkleGrid() {
  return (
    <svg
      width="574"
      height="574"
      viewBox="0 0 574 574"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="574" height="574" fill="url(#paint0_radial_2059_4750)" />
      <path
        d="M68.6348 475.76L68.7529 479.664C68.7656 480.085 68.7879 480.504 68.8203 480.92C69.494 487.095 72.2517 492.888 76.6816 497.318C78.9828 499.62 81.6533 501.467 84.5527 502.808C87.5678 504.093 90.8742 504.826 94.3447 504.879L135 505.5L127.944 505.661L136 505.742V506.258L95.7783 506.66C88.6084 506.732 81.7518 509.611 76.6816 514.682C72.1093 519.254 69.3193 525.279 68.7627 531.677L68.6396 535.798L68.2578 574H67.7422L67.6807 567.921L67.5 574L66.874 532.041C66.8373 529.578 66.4567 527.199 65.7812 524.947C64.4326 521.12 62.2405 517.604 59.3184 514.682C54.2482 509.611 47.3916 506.732 40.2217 506.66L0 506.258V505.742L7.43652 505.667L0 505.5L41.1621 504.564C55.0585 504.249 66.2486 493.059 66.5645 479.162L67.5 438L67.6816 444.043L67.7422 438H68.2578L68.6348 475.76ZM214.635 475.76L214.753 479.664C214.766 480.085 214.788 480.504 214.82 480.92C215.494 487.095 218.252 492.888 222.682 497.318C224.983 499.62 227.653 501.467 230.553 502.808C233.568 504.093 236.874 504.826 240.345 504.879L281 505.5L273.944 505.661L282 505.742V506.258L241.778 506.66C234.608 506.732 227.752 509.611 222.682 514.682C218.109 519.254 215.319 525.279 214.763 531.677L214.64 535.798L214.258 574H213.742L213.681 567.921L213.5 574L212.874 532.041C212.837 529.578 212.457 527.199 211.781 524.947C210.433 521.12 208.241 517.604 205.318 514.682C200.248 509.611 193.392 506.732 186.222 506.66L146 506.258V505.742L153.437 505.667L146 505.5L187.162 504.564C201.059 504.249 212.249 493.059 212.564 479.162L213.5 438L213.682 444.043L213.742 438H214.258L214.635 475.76ZM360.635 475.76L360.753 479.664C360.766 480.085 360.788 480.504 360.82 480.92C361.494 487.095 364.252 492.888 368.682 497.318C370.983 499.62 373.653 501.467 376.553 502.808C379.568 504.093 382.874 504.826 386.345 504.879L427 505.5L419.944 505.661L428 505.742V506.258L387.778 506.66C380.608 506.732 373.752 509.611 368.682 514.682C364.109 519.254 361.319 525.279 360.763 531.677L360.64 535.798L360.258 574H359.742L359.681 567.921L359.5 574L358.874 532.041C358.837 529.578 358.457 527.199 357.781 524.947C356.433 521.12 354.241 517.604 351.318 514.682C346.248 509.611 339.392 506.732 332.222 506.66L292 506.258V505.742L299.437 505.667L292 505.5L333.162 504.564C347.059 504.249 358.249 493.059 358.564 479.162L359.5 438L359.682 444.043L359.742 438H360.258L360.635 475.76ZM506.635 475.76L506.753 479.664C506.766 480.085 506.788 480.504 506.82 480.92C507.494 487.095 510.252 492.888 514.682 497.318C516.983 499.62 519.653 501.467 522.553 502.808C525.568 504.093 528.874 504.826 532.345 504.879L573 505.5L565.944 505.661L574 505.742V506.258L533.778 506.66C526.608 506.732 519.752 509.611 514.682 514.682C510.109 519.254 507.319 525.279 506.763 531.677L506.64 535.798L506.258 574H505.742L505.681 567.921L505.5 574L504.874 532.041C504.837 529.578 504.457 527.199 503.781 524.947C502.433 521.12 500.241 517.604 497.318 514.682C492.248 509.611 485.392 506.732 478.222 506.66L438 506.258V505.742L445.437 505.667L438 505.5L479.162 504.564C493.059 504.249 504.249 493.059 504.564 479.162L505.5 438L505.682 444.043L505.742 438H506.258L506.635 475.76ZM88.4033 507.211C81.0165 509.065 74.8851 514.075 71.5273 520.731C72.7965 518.395 74.4037 516.231 76.3174 514.317C79.7046 510.93 83.8741 508.502 88.4033 507.211ZM234.403 507.211C227.017 509.065 220.885 514.075 217.527 520.731C218.797 518.395 220.404 516.231 222.317 514.317C225.705 510.93 229.874 508.502 234.403 507.211ZM380.403 507.211C373.017 509.065 366.885 514.075 363.527 520.731C364.797 518.395 366.404 516.231 368.317 514.317C371.705 510.93 375.874 508.502 380.403 507.211ZM526.403 507.211C519.017 509.065 512.885 514.075 509.527 520.731C510.797 518.395 512.404 516.231 514.317 514.317C517.705 510.93 521.874 508.502 526.403 507.211ZM68.6348 329.76L68.7529 333.664C68.7656 334.085 68.7879 334.504 68.8203 334.92C69.494 341.095 72.2517 346.888 76.6816 351.318C78.9828 353.62 81.6533 355.467 84.5527 356.808C87.5678 358.093 90.8742 358.826 94.3447 358.879L135 359.5L127.944 359.661L136 359.742V360.258L95.7783 360.66C88.6084 360.732 81.7518 363.611 76.6816 368.682C72.1093 373.254 69.3193 379.279 68.7627 385.677L68.6396 389.798L68.2578 428H67.7422L67.6807 421.921L67.5 428L66.874 386.041C66.8373 383.578 66.4567 381.199 65.7812 378.947C64.4326 375.12 62.2405 371.604 59.3184 368.682C54.2482 363.611 47.3916 360.732 40.2217 360.66L0 360.258V359.742L7.43652 359.667L0 359.5L41.1621 358.564C55.0585 358.249 66.2486 347.059 66.5645 333.162L67.5 292L67.6816 298.043L67.7422 292H68.2578L68.6348 329.76ZM214.635 329.76L214.753 333.664C214.766 334.085 214.788 334.504 214.82 334.92C215.494 341.095 218.252 346.888 222.682 351.318C224.983 353.62 227.653 355.467 230.553 356.808C233.568 358.093 236.874 358.826 240.345 358.879L281 359.5L273.944 359.661L282 359.742V360.258L241.778 360.66C234.608 360.732 227.752 363.611 222.682 368.682C218.109 373.254 215.319 379.279 214.763 385.677L214.64 389.798L214.258 428H213.742L213.681 421.921L213.5 428L212.874 386.041C212.837 383.578 212.457 381.199 211.781 378.947C210.433 375.12 208.241 371.604 205.318 368.682C200.248 363.611 193.392 360.732 186.222 360.66L146 360.258V359.742L153.437 359.667L146 359.5L187.162 358.564C201.059 358.249 212.249 347.059 212.564 333.162L213.5 292L213.682 298.043L213.742 292H214.258L214.635 329.76ZM360.635 329.76L360.753 333.664C360.766 334.085 360.788 334.504 360.82 334.92C361.494 341.095 364.252 346.888 368.682 351.318C370.983 353.62 373.653 355.467 376.553 356.808C379.568 358.093 382.874 358.826 386.345 358.879L427 359.5L419.944 359.661L428 359.742V360.258L387.778 360.66C380.608 360.732 373.752 363.611 368.682 368.682C364.109 373.254 361.319 379.279 360.763 385.677L360.64 389.798L360.258 428H359.742L359.681 421.921L359.5 428L358.874 386.041C358.837 383.578 358.457 381.199 357.781 378.947C356.433 375.12 354.241 371.604 351.318 368.682C346.248 363.611 339.392 360.732 332.222 360.66L292 360.258V359.742L299.437 359.667L292 359.5L333.162 358.564C347.059 358.249 358.249 347.059 358.564 333.162L359.5 292L359.682 298.043L359.742 292H360.258L360.635 329.76ZM506.635 329.76L506.753 333.664C506.766 334.085 506.788 334.504 506.82 334.92C507.494 341.095 510.252 346.888 514.682 351.318C516.983 353.62 519.653 355.467 522.553 356.808C525.568 358.093 528.874 358.826 532.345 358.879L573 359.5L565.944 359.661L574 359.742V360.258L533.778 360.66C526.608 360.732 519.752 363.611 514.682 368.682C510.109 373.254 507.319 379.279 506.763 385.677L506.64 389.798L506.258 428H505.742L505.681 421.921L505.5 428L504.874 386.041C504.837 383.578 504.457 381.199 503.781 378.947C502.433 375.12 500.241 371.604 497.318 368.682C492.248 363.611 485.392 360.732 478.222 360.66L438 360.258V359.742L445.437 359.667L438 359.5L479.162 358.564C493.059 358.249 504.249 347.059 504.564 333.162L505.5 292L505.682 298.043L505.742 292H506.258L506.635 329.76ZM88.4033 361.211C81.0165 363.065 74.8851 368.075 71.5273 374.731C72.7965 372.395 74.4037 370.231 76.3174 368.317C79.7046 364.93 83.8741 362.502 88.4033 361.211ZM234.403 361.211C227.017 363.065 220.885 368.075 217.527 374.731C218.797 372.395 220.404 370.231 222.317 368.317C225.705 364.93 229.874 362.502 234.403 361.211ZM380.403 361.211C373.017 363.065 366.885 368.075 363.527 374.731C364.797 372.395 366.404 370.231 368.317 368.317C371.705 364.93 375.874 362.502 380.403 361.211ZM526.403 361.211C519.017 363.065 512.885 368.075 509.527 374.731C510.797 372.395 512.404 370.231 514.317 368.317C517.705 364.93 521.874 362.502 526.403 361.211ZM68.6348 183.76L68.7529 187.664C68.7656 188.085 68.7879 188.504 68.8203 188.92C69.494 195.095 72.2517 200.888 76.6816 205.318C78.9828 207.62 81.6533 209.467 84.5527 210.808C87.5678 212.093 90.8742 212.826 94.3447 212.879L135 213.5L127.944 213.661L136 213.742V214.258L95.7783 214.66C88.6084 214.732 81.7518 217.611 76.6816 222.682C72.1093 227.254 69.3193 233.279 68.7627 239.677L68.6396 243.798L68.2578 282H67.7422L67.6807 275.921L67.5 282L66.874 240.041C66.8373 237.578 66.4567 235.199 65.7812 232.947C64.4326 229.12 62.2405 225.604 59.3184 222.682C54.2482 217.611 47.3916 214.732 40.2217 214.66L0 214.258V213.742L7.43652 213.667L0 213.5L41.1621 212.564C55.0585 212.249 66.2486 201.059 66.5645 187.162L67.5 146L67.6816 152.043L67.7422 146H68.2578L68.6348 183.76ZM214.635 183.76L214.753 187.664C214.766 188.085 214.788 188.504 214.82 188.92C215.494 195.095 218.252 200.888 222.682 205.318C224.983 207.62 227.653 209.467 230.553 210.808C233.568 212.093 236.874 212.826 240.345 212.879L281 213.5L273.944 213.661L282 213.742V214.258L241.778 214.66C234.608 214.732 227.752 217.611 222.682 222.682C218.109 227.254 215.319 233.279 214.763 239.677L214.64 243.798L214.258 282H213.742L213.681 275.921L213.5 282L212.874 240.041C212.837 237.578 212.457 235.199 211.781 232.947C210.433 229.12 208.241 225.604 205.318 222.682C200.248 217.611 193.392 214.732 186.222 214.66L146 214.258V213.742L153.437 213.667L146 213.5L187.162 212.564C201.059 212.249 212.249 201.059 212.564 187.162L213.5 146L213.682 152.043L213.742 146H214.258L214.635 183.76ZM360.635 183.76L360.753 187.664C360.766 188.085 360.788 188.504 360.82 188.92C361.494 195.095 364.252 200.888 368.682 205.318C370.983 207.62 373.653 209.467 376.553 210.808C379.568 212.093 382.874 212.826 386.345 212.879L427 213.5L419.944 213.661L428 213.742V214.258L387.778 214.66C380.608 214.732 373.752 217.611 368.682 222.682C364.109 227.254 361.319 233.279 360.763 239.677L360.64 243.798L360.258 282H359.742L359.681 275.921L359.5 282L358.874 240.041C358.837 237.578 358.457 235.199 357.781 232.947C356.433 229.12 354.241 225.604 351.318 222.682C346.248 217.611 339.392 214.732 332.222 214.66L292 214.258V213.742L299.437 213.667L292 213.5L333.162 212.564C347.059 212.249 358.249 201.059 358.564 187.162L359.5 146L359.682 152.043L359.742 146H360.258L360.635 183.76ZM506.635 183.76L506.753 187.664C506.766 188.085 506.788 188.504 506.82 188.92C507.494 195.095 510.252 200.888 514.682 205.318C516.983 207.62 519.653 209.467 522.553 210.808C525.568 212.093 528.874 212.826 532.345 212.879L573 213.5L565.944 213.661L574 213.742V214.258L533.778 214.66C526.608 214.732 519.752 217.611 514.682 222.682C510.109 227.254 507.319 233.279 506.763 239.677L506.64 243.798L506.258 282H505.742L505.681 275.921L505.5 282L504.874 240.041C504.837 237.578 504.457 235.199 503.781 232.947C502.433 229.12 500.241 225.604 497.318 222.682C492.248 217.611 485.392 214.732 478.222 214.66L438 214.258V213.742L445.437 213.667L438 213.5L479.162 212.564C493.059 212.249 504.249 201.059 504.564 187.162L505.5 146L505.682 152.043L505.742 146H506.258L506.635 183.76ZM88.4033 215.211C81.0165 217.065 74.8851 222.075 71.5273 228.731C72.7965 226.395 74.4037 224.231 76.3174 222.317C79.7046 218.93 83.8741 216.502 88.4033 215.211ZM234.403 215.211C227.017 217.065 220.885 222.075 217.527 228.731C218.797 226.395 220.404 224.231 222.317 222.317C225.705 218.93 229.874 216.502 234.403 215.211ZM380.403 215.211C373.017 217.065 366.885 222.075 363.527 228.731C364.797 226.395 366.404 224.231 368.317 222.317C371.705 218.93 375.874 216.502 380.403 215.211ZM526.403 215.211C519.017 217.065 512.885 222.075 509.527 228.731C510.797 226.395 512.404 224.231 514.317 222.317C517.705 218.93 521.874 216.502 526.403 215.211ZM68.6348 37.7598L68.7529 41.6641C68.7656 42.0853 68.7879 42.504 68.8203 42.9199C69.494 49.0948 72.2517 54.8884 76.6816 59.3184C78.9828 61.6195 81.6533 63.4666 84.5527 64.8076C87.5678 66.0929 90.8742 66.8259 94.3447 66.8789L135 67.5L127.944 67.6611L136 67.7422V68.2578L95.7783 68.6602C88.6084 68.7319 81.7518 71.6115 76.6816 76.6816C72.1093 81.254 69.3193 87.2792 68.7627 93.6768L68.6396 97.7979L68.2578 136H67.7422L67.6807 129.921L67.5 136L66.874 94.041C66.8373 91.5783 66.4567 89.1989 65.7812 86.9473C64.4326 83.1203 62.2405 79.6038 59.3184 76.6816C54.2482 71.6115 47.3916 68.7319 40.2217 68.6602L0 68.2578V67.7422L7.43652 67.667L0 67.5L41.1621 66.5645C55.0585 66.2486 66.2486 55.0585 66.5645 41.1621L67.5 0L67.6816 6.04297L67.7422 0H68.2578L68.6348 37.7598ZM214.635 37.7598L214.753 41.6641C214.766 42.0853 214.788 42.504 214.82 42.9199C215.494 49.0948 218.252 54.8884 222.682 59.3184C224.983 61.6195 227.653 63.4666 230.553 64.8076C233.568 66.0929 236.874 66.8259 240.345 66.8789L281 67.5L273.944 67.6611L282 67.7422V68.2578L241.778 68.6602C234.608 68.7319 227.752 71.6115 222.682 76.6816C218.109 81.254 215.319 87.2792 214.763 93.6768L214.64 97.7979L214.258 136H213.742L213.681 129.921L213.5 136L212.874 94.041C212.837 91.5783 212.457 89.1989 211.781 86.9473C210.433 83.1203 208.241 79.6038 205.318 76.6816C200.248 71.6115 193.392 68.7319 186.222 68.6602L146 68.2578V67.7422L153.437 67.667L146 67.5L187.162 66.5645C201.059 66.2486 212.249 55.0585 212.564 41.1621L213.5 0L213.682 6.04297L213.742 0H214.258L214.635 37.7598ZM360.635 37.7598L360.753 41.6641C360.766 42.0853 360.788 42.504 360.82 42.9199C361.494 49.0948 364.252 54.8884 368.682 59.3184C370.983 61.6195 373.653 63.4666 376.553 64.8076C379.568 66.0929 382.874 66.8259 386.345 66.8789L427 67.5L419.944 67.6611L428 67.7422V68.2578L387.778 68.6602C380.608 68.7319 373.752 71.6115 368.682 76.6816C364.109 81.254 361.319 87.2792 360.763 93.6768L360.64 97.7979L360.258 136H359.742L359.681 129.921L359.5 136L358.874 94.041C358.837 91.5783 358.457 89.1989 357.781 86.9473C356.433 83.1203 354.241 79.6038 351.318 76.6816C346.248 71.6115 339.392 68.7319 332.222 68.6602L292 68.2578V67.7422L299.437 67.667L292 67.5L333.162 66.5645C347.059 66.2486 358.249 55.0585 358.564 41.1621L359.5 0L359.682 6.04297L359.742 0H360.258L360.635 37.7598ZM506.635 37.7598L506.753 41.6641C506.766 42.0853 506.788 42.504 506.82 42.9199C507.494 49.0948 510.252 54.8884 514.682 59.3184C516.983 61.6195 519.653 63.4666 522.553 64.8076C525.568 66.0929 528.874 66.8259 532.345 66.8789L573 67.5L565.944 67.6611L574 67.7422V68.2578L533.778 68.6602C526.608 68.7319 519.752 71.6115 514.682 76.6816C510.109 81.254 507.319 87.2792 506.763 93.6768L506.64 97.7979L506.258 136H505.742L505.681 129.921L505.5 136L504.874 94.041C504.837 91.5783 504.457 89.1989 503.781 86.9473C502.433 83.1203 500.241 79.6038 497.318 76.6816C492.248 71.6115 485.392 68.7319 478.222 68.6602L438 68.2578V67.7422L445.437 67.667L438 67.5L479.162 66.5645C493.059 66.2486 504.249 55.0585 504.564 41.1621L505.5 0L505.682 6.04297L505.742 0H506.258L506.635 37.7598ZM88.4033 69.2109C81.0165 71.065 74.8851 76.0749 71.5273 82.7314C72.7965 80.3946 74.4037 78.231 76.3174 76.3174C79.7046 72.9301 83.8741 70.5017 88.4033 69.2109ZM234.403 69.2109C227.017 71.065 220.885 76.0749 217.527 82.7314C218.797 80.3946 220.404 78.231 222.317 76.3174C225.705 72.9301 229.874 70.5017 234.403 69.2109ZM380.403 69.2109C373.017 71.065 366.885 76.0749 363.527 82.7314C364.797 80.3946 366.404 78.231 368.317 76.3174C371.705 72.9301 375.874 70.5017 380.403 69.2109ZM526.403 69.2109C519.017 71.065 512.885 76.0749 509.527 82.7314C510.797 80.3946 512.404 78.231 514.317 76.3174C517.705 72.9301 521.874 70.5017 526.403 69.2109Z"
        fill="url(#paint1_radial_2059_4750)"
      />
      <defs>
        <radialGradient
          id="paint0_radial_2059_4750"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(287 287) rotate(90) scale(316)"
        >
          <stop stopColor="var(--primary)" stopOpacity="0.3" />
          <stop offset="0.942308" stopColor="var(--primary)" stopOpacity="0" />
        </radialGradient>
        <radialGradient
          id="paint1_radial_2059_4750"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(287 287) rotate(90) scale(287)"
        >
          <stop stopColor="var(--primary)" />
          <stop offset="1" stopColor="var(--background)" />
        </radialGradient>
      </defs>
    </svg>
  )
}
```