/* eslint-disable max-len */
import { Box } from '@biom3/react';
import { heroBackGroundStyles, heroImageStyles } from './HeroImageStyles';

export function EthereumPlanetHero() {
  return (
    <Box sx={{ ...heroBackGroundStyles, background: 'base.color.translucent.emphasis.100' }}>
      <Box sx={heroImageStyles}>
        <svg width="430" height="305" viewBox="0 0 430 305" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M302.671 165.007C302.671 209.819 266.343 246.147 221.53 246.147C176.717 246.147 140.39 209.819 140.39 165.007C140.39 120.194 176.717 83.8662 221.53 83.8662C266.343 83.8662 302.671 120.194 302.671 165.007Z" fill="url(#paint0_linear_7858_3468)" stroke="black" />
          <path fillRule="evenodd" clipRule="evenodd" d="M221.585 223.507L254.099 166.971L221.585 183.46L189.072 166.971L221.585 223.507Z" fill="white" />
          <path d="M189.075 162.433L221.589 105.897L254.102 162.433H221.589L189.075 162.433Z" fill="white" />
          <path d="M253.95 162.429L221.437 178.884L188.924 162.429L221.437 162.429L253.95 162.429Z" fill="white" />
          <path d="M285.46 210.21C301.83 185.997 303.176 150.358 288.657 126.436C264.343 181.76 222.7 210.182 162.039 214.668C196.043 256.29 260.627 246.94 285.46 210.21Z" fill="#07064F" fillOpacity="0.15" />
          <path d="M294.236 116.651L294.3 116.982L294.631 117.047L309.365 119.908L294.631 122.77L294.3 122.834L294.236 123.165L291.374 137.899L288.513 123.165L288.448 122.834L288.117 122.77L273.383 119.908L288.117 117.047L288.448 116.982L288.513 116.651L291.374 101.917L294.236 116.651Z" fill="url(#paint1_linear_7858_3468)" stroke="black" />
          <path d="M174.625 103.001C192.219 89.417 213.762 83.7236 234.049 87.152C263.033 92.0497 256.216 108.13 209 125.891C167.74 141.407 142.908 139.054 160.659 116.817C164.674 111.79 169.3 107.11 174.625 103.001Z" fill="white" fillOpacity="0.3" />
          <path d="M126.775 227.174C119.275 227.534 113.486 233.905 113.844 241.405C114.202 248.904 120.572 254.693 128.071 254.333C135.571 253.973 141.36 247.602 141.002 240.102C140.644 232.603 134.275 226.815 126.775 227.174Z" fill="url(#paint2_linear_7858_3468)" stroke="black" />
          <path d="M363.217 245.632L362.789 244L361.157 244.43L361.585 246.063L363.217 245.632Z" fill="white" />
          <path d="M86.4526 104.341L85.9012 102.24L83.8006 102.793L84.3519 104.895L86.4526 104.341Z" fill="white" />
          <path d="M321.747 254.346L319.602 254L319.258 256.145L321.402 256.491L321.747 254.346Z" fill="white" />
          <path d="M354.461 126.906L355.079 125.619L353.794 124.999L353.176 126.285L354.461 126.906Z" fill="white" />
          <path d="M98.4247 201.101L97.8734 199L95.7728 199.554L96.3241 201.655L98.4247 201.101Z" fill="white" />
          <path d="M354.828 140.101L354.277 138L352.176 138.554L352.728 140.655L354.828 140.101Z" fill="white" />
          <path d="M69.1251 245.906L69.743 244.619L68.4575 243.999L67.8396 245.286L69.1251 245.906Z" fill="white" />
          <path d="M92.782 87.5861L94.3684 89.0703L95.8489 87.4805L94.2626 85.9963L92.782 87.5861Z" fill="white" />
          <path d="M55.8704 152.162L56.0323 153.581L57.4504 153.418L57.2884 152L55.8704 152.162Z" fill="white" />
          <defs>
            <linearGradient id="paint0_linear_7858_3468" x1="167.075" y1="106.02" x2="286.338" y2="228.311" gradientUnits="userSpaceOnUse">
              <stop offset="0.0729167" stopColor="#B5C0F2" />
              <stop offset="0.96875" stopColor="#B9C6FE" stopOpacity="0.43" />
            </linearGradient>
            <linearGradient id="paint1_linear_7858_3468" x1="280.221" y1="105.891" x2="301.258" y2="132.847" gradientUnits="userSpaceOnUse">
              <stop stopColor="white" />
              <stop offset="1" stopColor="#A2B0EF" />
            </linearGradient>
            <linearGradient id="paint2_linear_7858_3468" x1="147.465" y1="244.014" x2="128.872" y2="217.089" gradientUnits="userSpaceOnUse">
              <stop stopColor="#5C6184" stopOpacity="0" />
              <stop offset="1" stopColor="#AFBAEB" />
            </linearGradient>
          </defs>
        </svg>

      </Box>
    </Box>
  );
}