# Brands Section v4

> Logo grid: brand colors always active, inset border, flickering grid always on, and label always visible.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/brands-section-v4).

- Page, with a live preview: https://shadcn.exchange/r/uiception/brands-section-v4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/brands-section-v4-light-126db7cf20383368.png
- Registry item: https://uiception.com/r/brands-section-v4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/brands-section-v4.json
```

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

## Files

### `registry/new-york/blocks/brands-section-v4/page.tsx`

```tsx
import BrandsSectionV4 from "./components/brands-section-v4"

export default function Page() {
  return <BrandsSectionV4 />
}
```

### `registry/new-york/blocks/brands-section-v4/components/brands-section-v4.tsx`

```tsx
import BrandGrid from "./brand-grid"

import "../styles/brands-section-v4.css"

export default function BrandsSectionV4() {
  return (
    <section className="mx-auto max-w-4xl px-4 py-4 md:py-6 lg:py-8">
      <BrandGrid />
    </section>
  )
}
```

### `registry/new-york/blocks/brands-section-v4/components/brand-grid.tsx`

```tsx
"use client"

import { brands } from "../lib/brands"
import { BrandCell } from "./brand-cell"

export default function BrandGrid() {
  return (
    <div
      className="grid grid-cols-2 border border-border sm:grid-cols-4"
      role="list"
      aria-label="Technology partner logos"
    >
      {brands.map((brand) => (
        <BrandCell key={brand.name} brand={brand} />
      ))}
    </div>
  )
}
```

### `registry/new-york/blocks/brands-section-v4/components/brand-cell.tsx`

```tsx
"use client"

import { useEffect, useState, type CSSProperties } from "react"

import { FlickeringGrid } from "./flickering-grid"
import type { Brand } from "../lib/brands"

export function BrandCell({ brand }: { brand: Brand }) {
  const Icon = brand.Icon
  const DarkIcon = brand.darkIcon ?? brand.Icon
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    const check = () =>
      setIsDark(document.documentElement.classList.contains("dark"))
    check()
    const observer = new MutationObserver(check)
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    })
    return () => observer.disconnect()
  }, [])

  const flickerColor = isDark ? (brand.darkColor ?? brand.color) : brand.color

  return (
    <div
      aria-label={brand.name}
      className="bs4-cell relative isolate z-0 -mt-px -ml-px flex cursor-default items-center justify-center overflow-hidden border border-border bg-background py-8"
      role="listitem"
      style={{ "--bs4-brand-color": brand.color } as CSSProperties}
    >
      <div
        className="pointer-events-none absolute inset-0 z-2 overflow-hidden opacity-100"
        aria-hidden
      >
        <FlickeringGrid
          active
          className="h-full w-full mask-[radial-gradient(ellipse_75%_70%_at_50%_50%,white,transparent)]"
          color={flickerColor}
        />
      </div>

      <div className="relative z-10 flex w-full flex-col items-center">
        <div className="relative aspect-square w-10 max-w-full rounded-2.5 md:w-12">
          <span className="absolute inset-0 flex opacity-100">
            <Icon aria-hidden className="h-full w-full dark:hidden" />
            <DarkIcon aria-hidden className="hidden h-full w-full dark:block" />
          </span>
        </div>
      </div>
    </div>
  )
}
```

### `registry/new-york/blocks/brands-section-v4/components/flickering-grid.tsx`

```tsx
"use client"

import { cn } from "@/lib/utils"
import { useEffect, useRef } from "react"

export type FlickeringGridProps = {
  className?: string
  squareSize?: number
  gridGap?: number
  color?: string
  maxOpacity?: number
  flickerChance?: number
  active?: boolean
  flickerFrameSkip?: number
  opacityLerp?: number
}

function parseRgb(hex: string): [number, number, number] {
  const h = hex.replace("#", "")
  const full =
    h.length === 3
      ? h
          .split("")
          .map((c) => c + c)
          .join("")
      : h
  if (full.length !== 6) {
    return [96, 165, 250]
  }
  return [
    Number.parseInt(full.slice(0, 2), 16),
    Number.parseInt(full.slice(2, 4), 16),
    Number.parseInt(full.slice(4, 6), 16),
  ]
}

type Dims = { w: number; h: number; cols: number; rows: number }

export function FlickeringGrid({
  className,
  squareSize = 4,
  gridGap = 6,
  color = "#60A5FA",
  maxOpacity = 0.45,
  flickerChance = 0.03,
  active = true,
  flickerFrameSkip = 10,
  opacityLerp = 0.05,
}: FlickeringGridProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const currentRef = useRef<number[]>([])
  const targetRef = useRef<number[]>([])
  const dimsRef = useRef<Dims>({ w: 1, h: 1, cols: 1, rows: 1 })
  const rafRef = useRef(0)
  const frameRef = useRef(0)

  useEffect(() => {
    const container = containerRef.current
    const canvas = canvasRef.current
    if (!container || !canvas) {
      return
    }

    const ctx = canvas.getContext("2d")
    if (!ctx) {
      return
    }

    const [r, g, b] = parseRgb(color)
    const cell = squareSize + gridGap

    const syncDimensions = () => {
      const rect = container.getBoundingClientRect()
      const w = Math.max(1, Math.floor(rect.width))
      const h = Math.max(1, Math.floor(rect.height))
      const dpr = window.devicePixelRatio || 1
      canvas.width = w * dpr
      canvas.height = h * dpr
      canvas.style.width = `${w}px`
      canvas.style.height = `${h}px`
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)

      const cols = Math.max(1, Math.ceil(w / cell))
      const rows = Math.max(1, Math.ceil(h / cell))
      const len = cols * rows
      const prevC = currentRef.current
      const prevT = targetRef.current
      const nextC = new Array<number>(len)
      const nextT = new Array<number>(len)
      for (let i = 0; i < len; i++) {
        const c = prevC[i] ?? Math.random() * maxOpacity * 0.4
        const t = prevT[i] ?? c
        nextC[i] = c
        nextT[i] = t
      }
      currentRef.current = nextC
      targetRef.current = nextT
      dimsRef.current = { w, h, cols, rows }
    }

    const tick = () => {
      if (!active) {
        return
      }

      const { w, h, cols, rows } = dimsRef.current
      const current = currentRef.current
      const target = targetRef.current

      frameRef.current += 1
      if (frameRef.current % flickerFrameSkip === 0) {
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < cols; col++) {
            const idx = row * cols + col
            if (idx >= target.length) {
              continue
            }
            if (Math.random() < flickerChance) {
              target[idx] = Math.random() * maxOpacity
            }
          }
        }
      }

      ctx.clearRect(0, 0, w, h)

      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
          const idx = row * cols + col
          if (idx >= current.length) {
            continue
          }
          const t = target[idx]
          const c = current[idx]
          current[idx] = c + (t - c) * opacityLerp
          const o = current[idx]
          const x = col * cell + gridGap / 2
          const y = row * cell + gridGap / 2
          ctx.fillStyle = `rgba(${r},${g},${b},${o})`
          ctx.fillRect(x, y, squareSize, squareSize)
        }
      }

      rafRef.current = requestAnimationFrame(tick)
    }

    const ro = new ResizeObserver(() => {
      syncDimensions()
    })
    ro.observe(container)
    syncDimensions()

    if (active) {
      rafRef.current = requestAnimationFrame(tick)
    }

    return () => {
      ro.disconnect()
      cancelAnimationFrame(rafRef.current)
    }
  }, [
    active,
    color,
    squareSize,
    gridGap,
    maxOpacity,
    flickerChance,
    flickerFrameSkip,
    opacityLerp,
  ])

  return (
    <div
      ref={containerRef}
      className={cn("relative h-full min-h-px w-full min-w-px", className)}
    >
      <canvas
        ref={canvasRef}
        className="pointer-events-none absolute inset-0 z-0 block h-full w-full"
        aria-hidden
      />
    </div>
  )
}
```

### `registry/new-york/blocks/brands-section-v4/lib/brands.ts`

```ts
import type { ComponentType, SVGProps } from "react"

import { TiktokIconLight } from "@/components/ui/svgs/tiktokIconLight"
import { TiktokIconDark } from "@/components/ui/svgs/tiktokIconDark"
import { Bluesky } from "@/components/ui/svgs/bluesky"
import { Reddit } from "@/components/ui/svgs/reddit"
import { RedditDark } from "@/components/ui/svgs/redditDark"
import { Meta } from "@/components/ui/svgs/meta"
import { MetaDark } from "@/components/ui/svgs/metaDark"
import { X } from "@/components/ui/svgs/x"
import { XDark } from "@/components/ui/svgs/xDark"
import { InstagramIcon } from "@/components/ui/svgs/instagramIcon"
import { InstagramIconDark } from "@/components/ui/svgs/instagramIconDark"
import { Telegram } from "@/components/ui/svgs/telegram"
import { TelegramDark } from "@/components/ui/svgs/telegramDark"
import { Youtube } from "@/components/ui/svgs/youtube"

export type SvgComponent = ComponentType<SVGProps<SVGSVGElement>>

export type Brand = {
  name: string
  Icon: SvgComponent
  darkIcon?: SvgComponent
  color: string
  darkColor?: string
}

export const brands: Brand[] = [
  { name: "TikTok",    Icon: TiktokIconLight, darkIcon: TiktokIconDark,       color: "#EE1D52" },
  { name: "Bluesky",   Icon: Bluesky,                                          color: "#0085FF" },
  { name: "Reddit",    Icon: Reddit,          darkIcon: RedditDark,            color: "#FF4500" },
  { name: "Meta",      Icon: Meta,            darkIcon: MetaDark,              color: "#0082FB" },
  { name: "X",         Icon: X,               darkIcon: XDark,                color: "#000000", darkColor: "#FFFFFF" },
  { name: "Instagram", Icon: InstagramIcon,   darkIcon: InstagramIconDark,     color: "#E1306C" },
  { name: "Telegram",  Icon: Telegram,        darkIcon: TelegramDark,          color: "#2AABEE" },
  { name: "YouTube",   Icon: Youtube,                                          color: "#FF0000" },
]
```

### `registry/new-york/blocks/brands-section-v4/styles/brands-section-v4.css`

```css
.bs4-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--background) 0%, transparent 84%);
  pointer-events: none;
  z-index: 1;
}

.bs4-cell:nth-child(2n) {
  border-right: none;
}
.bs4-cell:nth-last-child(-n + 2) {
  border-bottom: none;
}

@media (min-width: 640px) {
  .bs4-cell:nth-child(2n) {
    border-right: 1px solid var(--border);
  }
  .bs4-cell:nth-child(4n) {
    border-right: none;
  }
  .bs4-cell:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }
  .bs4-cell:nth-last-child(-n + 4) {
    border-bottom: none;
  }
}
```

### `components/ui/svgs/tiktokIconLight.tsx`

```tsx
import type { SVGProps } from "react";

const TiktokIconLight = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} id="Layer_2" viewBox="0 0 352.28 398.67">
    <g id="Layer_1-2">
      <path d="M137.17 156.98v-15.56c-5.34-.73-10.76-1.18-16.29-1.18C54.23 140.24 0 194.47 0 261.13c0 40.9 20.43 77.09 51.61 98.97-20.12-21.6-32.46-50.53-32.46-82.31 0-65.7 52.69-119.28 118.03-120.81Z" />
      <path d="M140.02 333c29.74 0 54-23.66 55.1-53.13l.11-263.2h48.08c-1-5.41-1.55-10.97-1.55-16.67h-65.67l-.11 263.2c-1.1 29.47-25.36 53.13-55.1 53.13-9.24 0-17.95-2.31-25.61-6.34C105.3 323.9 121.6 333 140.02 333ZM333.13 106V91.37c-18.34 0-35.43-5.45-49.76-14.8 12.76 14.65 30.09 25.22 49.76 29.43Z" />
      <path d="M283.38 76.57c-13.98-16.05-22.47-37-22.47-59.91h-17.59c4.63 25.02 19.48 46.49 40.06 59.91ZM120.88 205.92c-30.44 0-55.21 24.77-55.21 55.21 0 21.2 12.03 39.62 29.6 48.86-6.55-9.08-10.45-20.18-10.45-32.2 0-30.44 24.77-55.21 55.21-55.21 5.68 0 11.13.94 16.29 2.55v-67.05c-5.34-.73-10.76-1.18-16.29-1.18-.96 0-1.9.05-2.85.07v51.49c-5.16-1.61-10.61-2.55-16.29-2.55Z" />
      <path d="M333.13 106v51.04c-34.05 0-65.61-10.89-91.37-29.38v133.47c0 66.66-54.23 120.88-120.88 120.88-25.76 0-49.64-8.12-69.28-21.91 22.08 23.71 53.54 38.57 88.42 38.57 66.66 0 120.88-54.23 120.88-120.88V144.33c25.76 18.49 57.32 29.38 91.37 29.38v-65.68c-6.57 0-12.97-.71-19.14-2.03Z" />
      <path d="M241.76 261.13V127.66c25.76 18.49 57.32 29.38 91.37 29.38V106c-19.67-4.21-37-14.77-49.76-29.43-20.58-13.42-35.43-34.88-40.06-59.91h-48.08l-.11 263.2c-1.1 29.47-25.36 53.13-55.1 53.13-18.42 0-34.72-9.1-44.75-23.01-17.57-9.25-29.6-27.67-29.6-48.86 0-30.44 24.77-55.21 55.21-55.21 5.68 0 11.13.94 16.29 2.55v-51.49C71.83 158.5 19.14 212.08 19.14 277.78c0 31.78 12.34 60.71 32.46 82.31C71.23 373.87 95.12 382 120.88 382c66.65 0 120.88-54.23 120.88-120.88Z" />
    </g>
  </svg>
);

export { TiktokIconLight };
```

### `components/ui/svgs/tiktokIconDark.tsx`

```tsx
import type { SVGProps } from "react";

const TiktokIconDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} id="Layer_2" viewBox="0 0 352.28 398.67">
    <g id="Layer_1-2">
      <path d="M137.17 156.98v-15.56c-5.34-.73-10.76-1.18-16.29-1.18C54.23 140.24 0 194.47 0 261.13c0 40.9 20.43 77.09 51.61 98.97-20.12-21.6-32.46-50.53-32.46-82.31 0-65.7 52.69-119.28 118.03-120.81Z" />
      <path d="M140.02 333c29.74 0 54-23.66 55.1-53.13l.11-263.2h48.08c-1-5.41-1.55-10.97-1.55-16.67h-65.67l-.11 263.2c-1.1 29.47-25.36 53.13-55.1 53.13-9.24 0-17.95-2.31-25.61-6.34C105.3 323.9 121.6 333 140.02 333ZM333.13 106V91.37c-18.34 0-35.43-5.45-49.76-14.8 12.76 14.65 30.09 25.22 49.76 29.43Z" />
      <path d="M283.38 76.57c-13.98-16.05-22.47-37-22.47-59.91h-17.59c4.63 25.02 19.48 46.49 40.06 59.91ZM120.88 205.92c-30.44 0-55.21 24.77-55.21 55.21 0 21.2 12.03 39.62 29.6 48.86-6.55-9.08-10.45-20.18-10.45-32.2 0-30.44 24.77-55.21 55.21-55.21 5.68 0 11.13.94 16.29 2.55v-67.05c-5.34-.73-10.76-1.18-16.29-1.18-.96 0-1.9.05-2.85.07v51.49c-5.16-1.61-10.61-2.55-16.29-2.55Z" />
      <path d="M333.13 106v51.04c-34.05 0-65.61-10.89-91.37-29.38v133.47c0 66.66-54.23 120.88-120.88 120.88-25.76 0-49.64-8.12-69.28-21.91 22.08 23.71 53.54 38.57 88.42 38.57 66.66 0 120.88-54.23 120.88-120.88V144.33c25.76 18.49 57.32 29.38 91.37 29.38v-65.68c-6.57 0-12.97-.71-19.14-2.03Z" />
      <path
        d="M241.76 261.13V127.66c25.76 18.49 57.32 29.38 91.37 29.38V106c-19.67-4.21-37-14.77-49.76-29.43-20.58-13.42-35.43-34.88-40.06-59.91h-48.08l-.11 263.2c-1.1 29.47-25.36 53.13-55.1 53.13-18.42 0-34.72-9.1-44.75-23.01-17.57-9.25-29.6-27.67-29.6-48.86 0-30.44 24.77-55.21 55.21-55.21 5.68 0 11.13.94 16.29 2.55v-51.49C71.83 158.5 19.14 212.08 19.14 277.78c0 31.78 12.34 60.71 32.46 82.31C71.23 373.87 95.12 382 120.88 382c66.65 0 120.88-54.23 120.88-120.88Z"
        style={{ fill: "#fff" }}
      />
    </g>
  </svg>
);

export { TiktokIconDark };
```

### `components/ui/svgs/bluesky.tsx`

```tsx
import type { SVGProps } from "react";

const Bluesky = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 226">
    <path
      fill="#1185FE"
      d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"
    />
  </svg>
);

export { Bluesky };
```

### `components/ui/svgs/reddit.tsx`

```tsx
import type { SVGProps } from "react";

const Reddit = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 216 216"
  >
    <defs>
      <radialGradient
        id="reddit__snoo-radial-gragient"
        cx="169.75"
        cy="92.19"
        r="50.98"
        fx="169.75"
        fy="92.19"
        gradientTransform="matrix(1 0 0 .87 0 11.64)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#feffff" />
        <stop offset=".4" stopColor="#feffff" />
        <stop offset=".51" stopColor="#f9fcfc" />
        <stop offset=".62" stopColor="#edf3f5" />
        <stop offset=".7" stopColor="#dee9ec" />
        <stop offset=".72" stopColor="#d8e4e8" />
        <stop offset=".76" stopColor="#ccd8df" />
        <stop offset=".8" stopColor="#c8d5dd" />
        <stop offset=".83" stopColor="#ccd6de" />
        <stop offset=".85" stopColor="#d8dbe2" />
        <stop offset=".88" stopColor="#ede3e9" />
        <stop offset=".9" stopColor="#ffebef" />
      </radialGradient>
      <radialGradient
        xlinkHref="#reddit__snoo-radial-gragient"
        id="reddit__snoo-radial-gragient-2"
        cx="47.31"
        r="50.98"
        fx="47.31"
      />
      <radialGradient
        xlinkHref="#reddit__snoo-radial-gragient"
        id="reddit__snoo-radial-gragient-3"
        cx="109.61"
        cy="85.59"
        r="153.78"
        fx="109.61"
        fy="85.59"
        gradientTransform="matrix(1 0 0 .7 0 25.56)"
      />
      <radialGradient
        id="reddit__snoo-radial-gragient-4"
        cx="-6.01"
        cy="64.68"
        r="12.85"
        fx="-6.01"
        fy="64.68"
        gradientTransform="matrix(1.07 0 0 1.55 81.08 27.26)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#f60" />
        <stop offset=".5" stopColor="#ff4500" />
        <stop offset=".7" stopColor="#fc4301" />
        <stop offset=".82" stopColor="#f43f07" />
        <stop offset=".92" stopColor="#e53812" />
        <stop offset="1" stopColor="#d4301f" />
      </radialGradient>
      <radialGradient
        xlinkHref="#reddit__snoo-radial-gragient-4"
        id="reddit__snoo-radial-gragient-5"
        cx="-73.55"
        cy="64.68"
        r="12.85"
        fx="-73.55"
        fy="64.68"
        gradientTransform="matrix(-1.07 0 0 1.55 62.87 27.26)"
      />
      <radialGradient
        id="reddit__snoo-radial-gragient-6"
        cx="107.93"
        cy="166.96"
        r="45.3"
        fx="107.93"
        fy="166.96"
        gradientTransform="matrix(1 0 0 .66 0 57.4)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#172e35" />
        <stop offset=".29" stopColor="#0e1c21" />
        <stop offset=".73" stopColor="#030708" />
        <stop offset="1" />
      </radialGradient>
      <radialGradient
        xlinkHref="#reddit__snoo-radial-gragient"
        id="reddit__snoo-radial-gragient-7"
        cx="147.88"
        cy="32.94"
        r="39.77"
        fx="147.88"
        fy="32.94"
        gradientTransform="matrix(1 0 0 .98 0 .54)"
      />
      <radialGradient
        id="reddit__snoo-radial-gragient-8"
        cx="131.31"
        cy="73.08"
        r="32.6"
        fx="131.31"
        fy="73.08"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".48" stopColor="#7a9299" />
        <stop offset=".67" stopColor="#172e35" />
        <stop offset=".75" />
        <stop offset=".82" stopColor="#172e35" />
      </radialGradient>
    </defs>
    <path
      fill="#ff4500"
      d="M108 0C48.35 0 0 48.35 0 108c0 29.82 12.09 56.82 31.63 76.37l-20.57 20.57C6.98 209.02 9.87 216 15.64 216H108c59.65 0 108-48.35 108-108S167.65 0 108 0Z"
    />
    <circle
      cx="169.22"
      cy="106.98"
      r="25.22"
      fill="url(#reddit__snoo-radial-gragient)"
    />
    <circle
      cx="46.78"
      cy="106.98"
      r="25.22"
      fill="url(#reddit__snoo-radial-gragient-2)"
    />
    <ellipse
      cx="108.06"
      cy="128.64"
      fill="url(#reddit__snoo-radial-gragient-3)"
      rx="72"
      ry="54"
    />
    <path
      fill="url(#reddit__snoo-radial-gragient-4)"
      d="M86.78 123.48c-.42 9.08-6.49 12.38-13.56 12.38s-12.46-4.93-12.04-14.01c.42-9.08 6.49-15.02 13.56-15.02s12.46 7.58 12.04 16.66Z"
    />
    <path
      fill="url(#reddit__snoo-radial-gragient-5)"
      d="M129.35 123.48c.42 9.08 6.49 12.38 13.56 12.38s12.46-4.93 12.04-14.01c-.42-9.08-6.49-15.02-13.56-15.02s-12.46 7.58-12.04 16.66Z"
    />
    <ellipse cx="79.63" cy="116.37" rx="2.8" ry="3.05" />
    <ellipse cx="146.21" cy="116.37" rx="2.8" ry="3.05" />
    <path
      fill="url(#reddit__snoo-radial-gragient-6)"
      d="M108.06 142.92c-8.76 0-17.16.43-24.92 1.22-1.33.13-2.17 1.51-1.65 2.74 4.35 10.39 14.61 17.69 26.57 17.69s22.23-7.3 26.57-17.69c.52-1.23-.33-2.61-1.65-2.74-7.77-.79-16.16-1.22-24.92-1.22Z"
    />
    <circle
      cx="147.49"
      cy="49.43"
      r="17.87"
      fill="url(#reddit__snoo-radial-gragient-7)"
    />
    <path
      fill="url(#reddit__snoo-radial-gragient-8)"
      d="M107.8 76.92c-2.14 0-3.87-.89-3.87-2.27 0-16.01 13.03-29.04 29.04-29.04 2.14 0 3.87 1.73 3.87 3.87s-1.73 3.87-3.87 3.87c-11.74 0-21.29 9.55-21.29 21.29 0 1.38-1.73 2.27-3.87 2.27Z"
    />
    <path
      fill="#842123"
      d="M62.82 122.65c.39-8.56 6.08-14.16 12.69-14.16 6.26 0 11.1 6.39 11.28 14.33.17-8.88-5.13-15.99-12.05-15.99s-13.14 6.05-13.56 15.2c-.42 9.15 4.97 13.83 12.04 13.83h.52c-6.44-.16-11.3-4.79-10.91-13.2Zm90.48 0c-.39-8.56-6.08-14.16-12.69-14.16-6.26 0-11.1 6.39-11.28 14.33-.17-8.88 5.13-15.99 12.05-15.99 7.07 0 13.14 6.05 13.56 15.2.42 9.15-4.97 13.83-12.04 13.83h-.52c6.44-.16 11.3-4.79 10.91-13.2Z"
    />
  </svg>
);

export { Reddit };
```

### `components/ui/svgs/redditDark.tsx`

```tsx
import type { SVGProps } from "react";

const RedditDark = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 216 216"
  >
    <defs>
      <radialGradient
        id="reddit_dark__snoo-radial-gragient"
        cx="169.75"
        cy="92.19"
        r="50.98"
        fx="169.75"
        fy="92.19"
        gradientTransform="matrix(1 0 0 .87 0 11.64)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#feffff" />
        <stop offset=".4" stopColor="#feffff" />
        <stop offset=".51" stopColor="#f9fcfc" />
        <stop offset=".62" stopColor="#edf3f5" />
        <stop offset=".7" stopColor="#dee9ec" />
        <stop offset=".72" stopColor="#d8e4e8" />
        <stop offset=".76" stopColor="#ccd8df" />
        <stop offset=".8" stopColor="#c8d5dd" />
        <stop offset=".83" stopColor="#ccd6de" />
        <stop offset=".85" stopColor="#d8dbe2" />
        <stop offset=".88" stopColor="#ede3e9" />
        <stop offset=".9" stopColor="#ffebef" />
      </radialGradient>
      <radialGradient
        xlinkHref="#reddit_dark__snoo-radial-gragient"
        id="reddit_dark__snoo-radial-gragient-2"
        cx="47.31"
        r="50.98"
        fx="47.31"
      />
      <radialGradient
        xlinkHref="#reddit_dark__snoo-radial-gragient"
        id="reddit_dark__snoo-radial-gragient-3"
        cx="109.61"
        cy="85.59"
        r="153.78"
        fx="109.61"
        fy="85.59"
        gradientTransform="matrix(1 0 0 .7 0 25.56)"
      />
      <radialGradient
        id="reddit_dark__snoo-radial-gragient-4"
        cx="-6.01"
        cy="64.68"
        r="12.85"
        fx="-6.01"
        fy="64.68"
        gradientTransform="matrix(1.07 0 0 1.55 81.08 27.26)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#f60" />
        <stop offset=".5" stopColor="#ff4500" />
        <stop offset=".7" stopColor="#fc4301" />
        <stop offset=".82" stopColor="#f43f07" />
        <stop offset=".92" stopColor="#e53812" />
        <stop offset="1" stopColor="#d4301f" />
      </radialGradient>
      <radialGradient
        xlinkHref="#reddit_dark__snoo-radial-gragient-4"
        id="reddit_dark__snoo-radial-gragient-5"
        cx="-73.55"
        cy="64.68"
        r="12.85"
        fx="-73.55"
        fy="64.68"
        gradientTransform="matrix(-1.07 0 0 1.55 62.87 27.26)"
      />
      <radialGradient
        id="reddit_dark__snoo-radial-gragient-6"
        cx="107.93"
        cy="166.96"
        r="45.3"
        fx="107.93"
        fy="166.96"
        gradientTransform="matrix(1 0 0 .66 0 57.4)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#172e35" />
        <stop offset=".29" stopColor="#0e1c21" />
        <stop offset=".73" stopColor="#030708" />
        <stop offset="1" />
      </radialGradient>
      <radialGradient
        xlinkHref="#reddit_dark__snoo-radial-gragient"
        id="reddit_dark__snoo-radial-gragient-7"
        cx="147.88"
        cy="32.94"
        r="39.77"
        fx="147.88"
        fy="32.94"
        gradientTransform="matrix(1 0 0 .98 0 .54)"
      />
      <radialGradient
        id="reddit_dark__snoo-radial-gragient-8"
        cx="131.31"
        cy="73.08"
        r="32.6"
        fx="131.31"
        fy="73.08"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".48" stopColor="#7a9299" />
        <stop offset=".67" stopColor="#172e35" />
        <stop offset=".75" />
        <stop offset=".82" stopColor="#172e35" />
      </radialGradient>
    </defs>
    <path
      fill="#ff4500"
      d="M108 0C48.35 0 0 48.35 0 108c0 29.82 12.09 56.82 31.63 76.37l-20.57 20.57C6.98 209.02 9.87 216 15.64 216H108c59.65 0 108-48.35 108-108S167.65 0 108 0Z"
    />
    <circle
      cx="169.22"
      cy="106.98"
      r="25.22"
      fill="url(#reddit_dark__snoo-radial-gragient)"
    />
    <circle
      cx="46.78"
      cy="106.98"
      r="25.22"
      fill="url(#reddit_dark__snoo-radial-gragient-2)"
    />
    <ellipse
      cx="108.06"
      cy="128.64"
      fill="url(#reddit_dark__snoo-radial-gragient-3)"
      rx="72"
      ry="54"
    />
    <path
      fill="url(#reddit_dark__snoo-radial-gragient-4)"
      d="M86.78 123.48c-.42 9.08-6.49 12.38-13.56 12.38s-12.46-4.93-12.04-14.01c.42-9.08 6.49-15.02 13.56-15.02s12.46 7.58 12.04 16.66Z"
    />
    <path
      fill="url(#reddit_dark__snoo-radial-gragient-5)"
      d="M129.35 123.48c.42 9.08 6.49 12.38 13.56 12.38s12.46-4.93 12.04-14.01c-.42-9.08-6.49-15.02-13.56-15.02s-12.46 7.58-12.04 16.66Z"
    />
    <ellipse cx="79.63" cy="116.37" rx="2.8" ry="3.05" fill="white" />
    <ellipse cx="146.21" cy="116.37" rx="2.8" ry="3.05" fill="white" />
    <path
      fill="url(#reddit_dark__snoo-radial-gragient-6)"
      d="M108.06 142.92c-8.76 0-17.16.43-24.92 1.22-1.33.13-2.17 1.51-1.65 2.74 4.35 10.39 14.61 17.69 26.57 17.69s22.23-7.3 26.57-17.69c.52-1.23-.33-2.61-1.65-2.74-7.77-.79-16.16-1.22-24.92-1.22Z"
    />
    <circle
      cx="147.49"
      cy="49.43"
      r="17.87"
      fill="url(#reddit_dark__snoo-radial-gragient-7)"
    />
    <path
      fill="url(#reddit_dark__snoo-radial-gragient-8)"
      d="M107.8 76.92c-2.14 0-3.87-.89-3.87-2.27 0-16.01 13.03-29.04 29.04-29.04 2.14 0 3.87 1.73 3.87 3.87s-1.73 3.87-3.87 3.87c-11.74 0-21.29 9.55-21.29 21.29 0 1.38-1.73 2.27-3.87 2.27Z"
    />
    <path
      fill="#842123"
      d="M62.82 122.65c.39-8.56 6.08-14.16 12.69-14.16 6.26 0 11.1 6.39 11.28 14.33.17-8.88-5.13-15.99-12.05-15.99s-13.14 6.05-13.56 15.2c-.42 9.15 4.97 13.83 12.04 13.83h.52c-6.44-.16-11.3-4.79-10.91-13.2Zm90.48 0c-.39-8.56-6.08-14.16-12.69-14.16-6.26 0-11.1 6.39-11.28 14.33-.17-8.88 5.13-15.99 12.05-15.99 7.07 0 13.14 6.05 13.56 15.2.42 9.15-4.97 13.83-12.04 13.83h-.52c6.44-.16 11.3-4.79 10.91-13.2Z"
    />
  </svg>
);

export { RedditDark };
```

### `components/ui/svgs/meta.tsx`

```tsx
import type { SVGProps } from "react";

const Meta = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 171">
    <defs>
      <linearGradient
        id="a"
        x1="13.878%"
        x2="89.144%"
        y1="55.934%"
        y2="58.694%"
      >
        <stop offset="0%" stopColor="#0064E1" />
        <stop offset="40%" stopColor="#0064E1" />
        <stop offset="83%" stopColor="#0073EE" />
        <stop offset="100%" stopColor="#0082FB" />
      </linearGradient>
      <linearGradient
        id="b"
        x1="54.315%"
        x2="54.315%"
        y1="82.782%"
        y2="39.307%"
      >
        <stop offset="0%" stopColor="#0082FB" />
        <stop offset="100%" stopColor="#0064E0" />
      </linearGradient>
    </defs>
    <path
      fill="#0081FB"
      d="M27.651 112.136c0 9.775 2.146 17.28 4.95 21.82 3.677 5.947 9.16 8.466 14.751 8.466 7.211 0 13.808-1.79 26.52-19.372 10.185-14.092 22.186-33.874 30.26-46.275l13.675-21.01c9.499-14.591 20.493-30.811 33.1-41.806C161.196 4.985 172.298 0 183.47 0c18.758 0 36.625 10.87 50.3 31.257C248.735 53.584 256 81.707 256 110.729c0 17.253-3.4 29.93-9.187 39.946-5.591 9.686-16.488 19.363-34.818 19.363v-27.616c15.695 0 19.612-14.422 19.612-30.927 0-23.52-5.484-49.623-17.564-68.273-8.574-13.23-19.684-21.313-31.907-21.313-13.22 0-23.859 9.97-35.815 27.75-6.356 9.445-12.882 20.956-20.208 33.944l-8.066 14.289c-16.203 28.728-20.307 35.271-28.408 46.07-14.2 18.91-26.324 26.076-42.287 26.076-18.935 0-30.91-8.2-38.325-20.556C2.973 139.413 0 126.202 0 111.148l27.651.988Z"
    />
    <path
      fill="url(#a)"
      d="M21.802 33.206C34.48 13.666 52.774 0 73.757 0 85.91 0 97.99 3.597 110.605 13.897c13.798 11.261 28.505 29.805 46.853 60.368l6.58 10.967c15.881 26.459 24.917 40.07 30.205 46.49 6.802 8.243 11.565 10.7 17.752 10.7 15.695 0 19.612-14.422 19.612-30.927l24.393-.766c0 17.253-3.4 29.93-9.187 39.946-5.591 9.686-16.488 19.363-34.818 19.363-11.395 0-21.49-2.475-32.654-13.007-8.582-8.083-18.615-22.443-26.334-35.352l-22.96-38.352C118.528 64.08 107.96 49.73 101.845 43.23c-6.578-6.988-15.036-15.428-28.532-15.428-10.923 0-20.2 7.666-27.963 19.39L21.802 33.206Z"
    />
    <path
      fill="url(#b)"
      d="M73.312 27.802c-10.923 0-20.2 7.666-27.963 19.39-10.976 16.568-17.698 41.245-17.698 64.944 0 9.775 2.146 17.28 4.95 21.82L9.027 149.482C2.973 139.413 0 126.202 0 111.148 0 83.772 7.514 55.24 21.802 33.206 34.48 13.666 52.774 0 73.757 0l-.445 27.802Z"
    />
  </svg>
);

export { Meta };
```

### `components/ui/svgs/metaDark.tsx`

```tsx
import type { SVGProps } from "react";

const MetaDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 171">
    <path
      fill="white"
      d="M27.651 112.136c0 9.775 2.146 17.28 4.95 21.82 3.677 5.947 9.16 8.466 14.751 8.466 7.211 0 13.808-1.79 26.52-19.372 10.185-14.092 22.186-33.874 30.26-46.275l13.675-21.01c9.499-14.591 20.493-30.811 33.1-41.806C161.196 4.985 172.298 0 183.47 0c18.758 0 36.625 10.87 50.3 31.257C248.735 53.584 256 81.707 256 110.729c0 17.253-3.4 29.93-9.187 39.946-5.591 9.686-16.488 19.363-34.818 19.363v-27.616c15.695 0 19.612-14.422 19.612-30.927 0-23.52-5.484-49.623-17.564-68.273-8.574-13.23-19.684-21.313-31.907-21.313-13.22 0-23.859 9.97-35.815 27.75-6.356 9.445-12.882 20.956-20.208 33.944l-8.066 14.289c-16.203 28.728-20.307 35.271-28.408 46.07-14.2 18.91-26.324 26.076-42.287 26.076-18.935 0-30.91-8.2-38.325-20.556C2.973 139.413 0 126.202 0 111.148l27.651.988Z"
    />
    <path
      fill="white"
      d="M21.802 33.206C34.48 13.666 52.774 0 73.757 0 85.91 0 97.99 3.597 110.605 13.897c13.798 11.261 28.505 29.805 46.853 60.368l6.58 10.967c15.881 26.459 24.917 40.07 30.205 46.49 6.802 8.243 11.565 10.7 17.752 10.7 15.695 0 19.612-14.422 19.612-30.927l24.393-.766c0 17.253-3.4 29.93-9.187 39.946-5.591 9.686-16.488 19.363-34.818 19.363-11.395 0-21.49-2.475-32.654-13.007-8.582-8.083-18.615-22.443-26.334-35.352l-22.96-38.352C118.528 64.08 107.96 49.73 101.845 43.23c-6.578-6.988-15.036-15.428-28.532-15.428-10.923 0-20.2 7.666-27.963 19.39L21.802 33.206Z"
    />
    <path
      fill="white"
      d="M73.312 27.802c-10.923 0-20.2 7.666-27.963 19.39-10.976 16.568-17.698 41.245-17.698 64.944 0 9.775 2.146 17.28 4.95 21.82L9.027 149.482C2.973 139.413 0 126.202 0 111.148 0 83.772 7.514 55.24 21.802 33.206 34.48 13.666 52.774 0 73.757 0l-.445 27.802Z"
    />
  </svg>
);

export { MetaDark };
```

### `components/ui/svgs/x.tsx`

```tsx
import type { SVGProps } from "react";

const X = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1200 1227">
    <path
      fill="#000"
      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
    />
  </svg>
);

export { X };
```

### `components/ui/svgs/xDark.tsx`

```tsx
import type { SVGProps } from "react";

const XDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1200 1227">
    <path
      fill="#fff"
      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
    />
  </svg>
);

export { XDark };
```

### `components/ui/svgs/instagramIcon.tsx`

```tsx
import type { SVGProps } from "react";

const InstagramIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 264.583 264.583"
  >
    <defs>
      <radialGradient
        xlinkHref="#instagram_icon__a"
        id="instagram_icon__f"
        cx="158.429"
        cy="578.088"
        r="52.352"
        fx="158.429"
        fy="578.088"
        gradientTransform="matrix(0 -4.03418 4.28018 0 -2332.227 942.236)"
        gradientUnits="userSpaceOnUse"
      />
      <radialGradient
        xlinkHref="#instagram_icon__b"
        id="instagram_icon__g"
        cx="172.615"
        cy="600.692"
        r="65"
        fx="172.615"
        fy="600.692"
        gradientTransform="matrix(.67441 -1.16203 1.51283 .87801 -814.366 -47.835)"
        gradientUnits="userSpaceOnUse"
      />
      <radialGradient
        xlinkHref="#instagram_icon__c"
        id="instagram_icon__h"
        cx="144.012"
        cy="51.337"
        r="67.081"
        fx="144.012"
        fy="51.337"
        gradientTransform="matrix(-2.3989 .67549 -.23008 -.81732 464.996 -26.404)"
        gradientUnits="userSpaceOnUse"
      />
      <radialGradient
        xlinkHref="#instagram_icon__d"
        id="instagram_icon__e"
        cx="199.788"
        cy="628.438"
        r="52.352"
        fx="199.788"
        fy="628.438"
        gradientTransform="matrix(-3.10797 .87652 -.6315 -2.23914 1345.65 1374.198)"
        gradientUnits="userSpaceOnUse"
      />
      <linearGradient id="instagram_icon__d">
        <stop offset="0" stopColor="#ff005f" />
        <stop offset="1" stopColor="#fc01d8" />
      </linearGradient>
      <linearGradient id="instagram_icon__c">
        <stop offset="0" stopColor="#780cff" />
        <stop offset="1" stopColor="#820bff" stopOpacity="0" />
      </linearGradient>
      <linearGradient id="instagram_icon__b">
        <stop offset="0" stopColor="#fc0" />
        <stop offset="1" stopColor="#fc0" stopOpacity="0" />
      </linearGradient>
      <linearGradient id="instagram_icon__a">
        <stop offset="0" stopColor="#fc0" />
        <stop offset=".124" stopColor="#fc0" />
        <stop offset=".567" stopColor="#fe4a05" />
        <stop offset=".694" stopColor="#ff0f3f" />
        <stop offset="1" stopColor="#fe0657" stopOpacity="0" />
      </linearGradient>
    </defs>
    <path
      fill="url(#instagram_icon__e)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="url(#instagram_icon__f)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="url(#instagram_icon__g)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="url(#instagram_icon__h)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="#fff"
      d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535 0 26.697.119 30.037.594 40.522.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796 6.517 0 11.804-5.284 11.804-11.796 0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482 0 27.879 22.62 50.471 50.52 50.471s50.51-22.592 50.51-50.471c0-27.879-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767-18.11 0-32.791-14.671-32.791-32.767 0-18.098 14.68-32.767 32.791-32.767z"
    />
  </svg>
);

export { InstagramIcon };
```

### `components/ui/svgs/instagramIconDark.tsx`

```tsx
import type { SVGProps } from "react";

const InstagramIconDark = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 264.583 264.583"
  >
    <defs>
      <radialGradient
        xlinkHref="#instagram_icon_dark__a"
        id="instagram_icon_dark__f"
        cx="158.429"
        cy="578.088"
        r="52.352"
        fx="158.429"
        fy="578.088"
        gradientTransform="matrix(0 -4.03418 4.28018 0 -2332.227 942.236)"
        gradientUnits="userSpaceOnUse"
      />
      <radialGradient
        xlinkHref="#instagram_icon_dark__b"
        id="instagram_icon_dark__g"
        cx="172.615"
        cy="600.692"
        r="65"
        fx="172.615"
        fy="600.692"
        gradientTransform="matrix(.67441 -1.16203 1.51283 .87801 -814.366 -47.835)"
        gradientUnits="userSpaceOnUse"
      />
      <radialGradient
        xlinkHref="#instagram_icon_dark__c"
        id="instagram_icon_dark__h"
        cx="144.012"
        cy="51.337"
        r="67.081"
        fx="144.012"
        fy="51.337"
        gradientTransform="matrix(-2.3989 .67549 -.23008 -.81732 464.996 -26.404)"
        gradientUnits="userSpaceOnUse"
      />
      <radialGradient
        xlinkHref="#instagram_icon_dark__d"
        id="instagram_icon_dark__e"
        cx="199.788"
        cy="628.438"
        r="52.352"
        fx="199.788"
        fy="628.438"
        gradientTransform="matrix(-3.10797 .87652 -.6315 -2.23914 1345.65 1374.198)"
        gradientUnits="userSpaceOnUse"
      />
      <linearGradient id="instagram_icon_dark__d">
        <stop offset="0" stopColor="#ff005f" />
        <stop offset="1" stopColor="#fc01d8" />
      </linearGradient>
      <linearGradient id="instagram_icon_dark__c">
        <stop offset="0" stopColor="#780cff" />
        <stop offset="1" stopColor="#820bff" stopOpacity="0" />
      </linearGradient>
      <linearGradient id="instagram_icon_dark__b">
        <stop offset="0" stopColor="#fc0" />
        <stop offset="1" stopColor="#fc0" stopOpacity="0" />
      </linearGradient>
      <linearGradient id="instagram_icon_dark__a">
        <stop offset="0" stopColor="#fc0" />
        <stop offset=".124" stopColor="#fc0" />
        <stop offset=".567" stopColor="#fe4a05" />
        <stop offset=".694" stopColor="#ff0f3f" />
        <stop offset="1" stopColor="#fe0657" stopOpacity="0" />
      </linearGradient>
    </defs>
    <path
      fill="url(#instagram_icon_dark__e)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="url(#instagram_icon_dark__f)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="url(#instagram_icon_dark__g)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="url(#instagram_icon_dark__h)"
      d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z"
      transform="translate(-71.816 -18.143)"
    />
    <path
      fill="#fff"
      d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535 0 26.697.119 30.037.594 40.522.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796 6.517 0 11.804-5.284 11.804-11.796 0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482 0 27.879 22.62 50.471 50.52 50.471s50.51-22.592 50.51-50.471c0-27.879-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767-18.11 0-32.791-14.671-32.791-32.767 0-18.098 14.68-32.767 32.791-32.767z"
    />
  </svg>
);

export { InstagramIconDark };
```

### `components/ui/svgs/telegram.tsx`

```tsx
import type { SVGProps } from "react";

const Telegram = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 256 256" preserveAspectRatio="xMidYMid">
    <defs>
      <linearGradient id="telegram__a" x1="50%" x2="50%" y1="0%" y2="100%">
        <stop offset="0%" stopColor="#2AABEE" />
        <stop offset="100%" stopColor="#229ED9" />
      </linearGradient>
    </defs>
    <path
      fill="url(#telegram__a)"
      d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.038 128.038 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51 0-33.934-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0Z"
    />
    <path
      fill="#FFF"
      d="M57.94 126.648c37.32-16.256 62.2-26.974 74.64-32.152 35.56-14.786 42.94-17.354 47.76-17.441 1.06-.017 3.42.245 4.96 1.49 1.28 1.05 1.64 2.47 1.82 3.467.16.996.38 3.266.2 5.038-1.92 20.24-10.26 69.356-14.5 92.026-1.78 9.592-5.32 12.808-8.74 13.122-7.44.684-13.08-4.912-20.28-9.63-11.26-7.386-17.62-11.982-28.56-19.188-12.64-8.328-4.44-12.906 2.76-20.386 1.88-1.958 34.64-31.748 35.26-34.45.08-.338.16-1.598-.6-2.262-.74-.666-1.84-.438-2.64-.258-1.14.256-19.12 12.152-54 35.686-5.1 3.508-9.72 5.218-13.88 5.128-4.56-.098-13.36-2.584-19.9-4.708-8-2.606-14.38-3.984-13.82-8.41.28-2.304 3.46-4.662 9.52-7.072Z"
    />
  </svg>
);

export { Telegram };
```

### `components/ui/svgs/telegramDark.tsx`

```tsx
import type { SVGProps } from "react";

const TelegramDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 256 256" preserveAspectRatio="xMidYMid">
    <defs>
      <linearGradient id="telegram_dark__a" x1="50%" x2="50%" y1="0%" y2="100%">
        <stop offset="0%" stopColor="#2AABEE" />
        <stop offset="100%" stopColor="#229ED9" />
      </linearGradient>
    </defs>
    <path
      fill="url(#telegram_dark__a)"
      d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.038 128.038 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51 0-33.934-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0Z"
    />
    <path
      fill="#FFF"
      d="M57.94 126.648c37.32-16.256 62.2-26.974 74.64-32.152 35.56-14.786 42.94-17.354 47.76-17.441 1.06-.017 3.42.245 4.96 1.49 1.28 1.05 1.64 2.47 1.82 3.467.16.996.38 3.266.2 5.038-1.92 20.24-10.26 69.356-14.5 92.026-1.78 9.592-5.32 12.808-8.74 13.122-7.44.684-13.08-4.912-20.28-9.63-11.26-7.386-17.62-11.982-28.56-19.188-12.64-8.328-4.44-12.906 2.76-20.386 1.88-1.958 34.64-31.748 35.26-34.45.08-.338.16-1.598-.6-2.262-.74-.666-1.84-.438-2.64-.258-1.14.256-19.12 12.152-54 35.686-5.1 3.508-9.72 5.218-13.88 5.128-4.56-.098-13.36-2.584-19.9-4.708-8-2.606-14.38-3.984-13.82-8.41.28-2.304 3.46-4.662 9.52-7.072Z"
    />
  </svg>
);

export { TelegramDark };
```

### `components/ui/svgs/youtube.tsx`

```tsx
import type { SVGProps } from "react";

const Youtube = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 180">
    <path
      fill="red"
      d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
    />
    <path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z" />
  </svg>
);

export { Youtube };
```