assets

const labels = [
  {
    id: 1,
    name: 'Accessibility',
    icon: '1',
    top: '15rem',
    left: '60rem',
    transform: 'translateX(3.72556px) translateY(-13.6604px) translateZ(0px)',
    color: 'bg-red-600',
    svgClass: '-rotate-90 -top-4 -left-4',
  },
  {
    id: 2,
    name: 'Education',
    icon: '2',
    top: '15rem',
    left: '0rem',
    transform: 'translateX(0px) translateY(.83019px) translateZ(0px)',
    color: 'bg-blue-600',
    svgClass: '-top-4 -right-4',
  },
  {
    id: 3,
    name: 'Convenience',
    icon: '3',
    top: '6.18322rem',
    left: '5.72949rem',
    transform:
      'translateX(0.0250712px) translateY(0.0167141px) translateZ(0px)',
    color: 'bg-purple-600',
    svgClass: 'rotate-90 -bottom-4 -right-4',
  },
  {
    id: 4,
    name: 'Automation',
    icon: '4',
    top: '0.734152rem',
    left: '39.2705rem',
    transform: 'none',
    color: 'bg-pink-600',
    svgClass: '-rotate-180 -bottom-4 -left-4',
  },
  {
    id: 5,
    name: 'Entertainment',
    icon: '5',
    top: '0.734152rem',
    left: '20.7295rem',
    transform: 'none',
    color: 'bg-green-600',
    svgClass: 'rotate-90 -bottom-4 -right-4',
  },

  {
    id: 6,
    name: 'Assistance',
    icon: '7',
    top: '6.18322rem',
    left: '54.2705rem',
    transform: 'translateX(0.12546px) translateY(-0.052825px) translateZ(0px)',
    color: 'bg-lime-600',
    svgClass: 'rotate-180 -bottom-4 -left-4',
  },
];




//music wave


<svg
        id="wave"
        className={`fill-[#ff00a2] w-[200px] h-[200px]`}
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 50 38.05"
      >
        <title>Audio Wave</title>
        <path
          id="Line_1"
          data-name="Line 1"
          d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"
        />
        <path
          id="Line_2"
          data-name="Line 2"
          d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"
        />
        <path
          id="Line_3"
          data-name="Line 3"
          d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"
        />
        <path
          id="Line_4"
          data-name="Line 4"
          d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"
        />
        <path
          id="Line_5"
          data-name="Line 5"
          d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"
        />
        <path
          id="Line_6"
          data-name="Line 6"
          d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"
        />
        <path
          id="Line_7"
          data-name="Line 7"
          d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"
        />
        <path
          id="Line_8"
          data-name="Line 8"
          d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"
        />
        <path
          id="Line_9"
          data-name="Line 9"
          d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"
        />
      </svg>


//Pattern Grid

<svg
            xmlns="http://www.w3.org/2000/svg"
            className="absolute h-full inset-0 w-full"
          >
            <defs>
              <pattern
                height="32"
                id="grid-pattern"
                patternTransform="translate(0 -1)"
                patternUnits="userSpaceOnUse"
                width="32"
                x="50%"
                y="100%"
              >
                <path d="M0 32V.5H32" fill="none" stroke="currentColor"></path>
              </pattern>
            </defs>
            <rect fill="url(#grid-pattern)" height="100%" width="100%"></rect>
          </svg>