Philosophy & Principles Cards

'use client'

import React from 'react'
import { Badge } from '@/components/ui/badge'
import { Card, CardPanel } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import { BalanceIcon, BookIcon, LongitudeIcon, WandIcon } from '@/components/blocks/card-info/card-info-1/icons'

export function DetailsCard({
  icon,
  title,
  description,
}: {
  icon: string | React.ReactNode
  title: string
  description: string
}) {
  return (
    <Card className="bg-muted rounded-3xl md:rounded-5xl overflow-hidden h-full md:max-w-xl">
      <CardPanel
        className={cn(
          'flex relative flex-col min-h-60 items-center justify-center p-4 rounded-xl md:rounded-3xl bg-background overflow-hidden',
        )}
      >
        <div className="flex flex-col items-start gap-4 w-full max-w-[90%] py-12 mx-auto">
          <Badge
            variant="secondary"
            className="aspect-square p-4 rounded-full size-auto! [&>svg]:size-12! [&>img]:size-12!"
          >
            {typeof icon === 'string' ? (
              <img className="object-cover pointer-events-none" src={icon} alt={title} loading="lazy" />
            ) : (
              icon
            )}
          </Badge>
          <h3 className="text-3xl tracking-wide leading-[120%]">{title}</h3>

          <p className="text-muted-foreground whitespace-pre-line text-xl leading-[140%]">{description}</p>
        </div>
      </CardPanel>
    </Card>
  )
}

interface PhilosophyCard {
  title: string
  icon: React.ReactNode
  alt: string
  description: string
}

const data: PhilosophyCard[] = [
  {
    title: 'User First',
    icon: <WandIcon />,
    alt: 'Symbol',
    description:
      'Every project starts with a simple question: what truly matters to the user?\nMy role: turn that answer into experiences people love to use — and that exceed their expectations.',
  },
  {
    title: 'Always Learning',
    icon: <BookIcon />,
    alt: 'Book',
    description:
      "Design, AI, growth, systems… I love staying curious and exploring what's next.\nEvery new insight is a chance to improve what I create — and inspire those I work with.",
  },
  {
    title: 'Teams that Rise Together',
    icon: <LongitudeIcon />,
    alt: 'Longitude',
    description:
      'A great product is always a team effort. I love creating spaces where ideas flow, everyone feels involved, and we build something everyone is proud of.',
  },
  {
    title: 'Move Fast, Move Right',
    icon: <BalanceIcon />,
    alt: 'Balance default',
    description:
      'I believe in fast iterations and intentional decisions.\nEvery test is a compass, every adjustment brings the product closer to its best version.',
  },
]

export default function Particle() {
  return (
    <div
      className={cn(
        'md:grid grid-cols-1 md:grid-cols-2 md:max-w-5xl gap-6 items-center justify-center justify-items-center self-center place-self-center w-full place-items-center',
      )}
    >
      {data.map((item, index) => (
        <DetailsCard key={index} icon={item.icon} title={item.title} description={item.description} />
      ))}
    </div>
  )
}

import type React from 'react'

export function PlayingCardsIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.51 20.1958C3.36647 15.9281 5.89913 11.5414 10.1669 10.3978L18.6203 8.13275C22.888 6.98922 27.2747 9.52187 28.4182 13.7896L33.3688 32.2653C34.5123 36.533 31.9796 40.9197 27.7119 42.0632L19.2585 44.3283C14.9908 45.4718 10.6041 42.9392 9.46054 38.6715L4.51 20.1958Z"
        fill="url(#paint0_linear_card_1)"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20.204 10.7898C21.3475 6.52205 25.7342 3.9894 30.0019 5.13293L39.6612 7.72112C43.9289 8.86466 46.4616 13.2514 45.3181 17.5191L40.4486 35.6922C39.3051 39.9599 34.9184 42.4926 30.6506 41.349L20.9914 38.7608C16.7236 37.6173 14.191 33.2306 15.3345 28.9629L20.204 10.7898Z"
        fill="url(#paint1_linear_card_1)"
      />
      <path
        d="M30.953 18.493C31.4929 17.9941 32.3685 18.2287 32.5866 18.9308L33.6844 22.4646C33.9148 23.2062 33.6951 24.0141 33.1209 24.5369L30.422 26.9938C29.8832 27.4843 29.0175 27.2523 28.7961 26.5581L27.6873 23.081C27.4513 22.3411 27.665 21.5316 28.2353 21.0045L30.953 18.493Z"
        fill="url(#paint2_linear_card_1)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_card_1"
          x1="20.518"
          y1="-3.7403"
          x2="28.8946"
          y2="45.6031"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FF5018" />
          <stop offset="1" stopColor="#FF9E0D" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_card_1"
          x1="35.7326"
          y1="3.06423"
          x2="25.821"
          y2="40.0549"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FFFBDB" />
          <stop offset="1" stopColor="#FFDBA5" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_card_1"
          x1="29.8617"
          y1="30.4595"
          x2="28.4516"
          y2="15.4374"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#D80000" />
          <stop offset="1" stopColor="#FF7A00" />
        </linearGradient>
      </defs>
    </svg>
  )
}

export function ThreeDIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M24.8889 27.0118L7.38892 36.5118L11.613 20.5542C11.7937 19.8715 12.152 19.2488 12.6514 18.7494L24.8889 6.51184V27.0118Z"
        fill="url(#paint0_linear_3d_1)"
      />
      <path
        d="M24.8889 27.0118L42.3889 36.5118L38.1648 20.5542C37.9841 19.8715 37.6258 19.2488 37.1264 18.7494L24.8889 6.51184V27.0118Z"
        fill="url(#paint1_linear_3d_1)"
      />
      <path
        d="M42.8889 36.5118L24.8889 27.0118L6.88892 36.5118L23.72 41.6547C24.4819 41.8875 25.2959 41.8875 26.0578 41.6547L42.8889 36.5118Z"
        fill="url(#paint2_linear_3d_1)"
      />
      <path
        d="M6.93856 26.7415C7.29592 25.4079 8.6674 24.6166 10.0011 24.974C11.3344 25.3315 12.1259 26.702 11.7686 28.0355L10.7423 31.8656L17.7628 27.8118L17.9903 27.6947C19.1461 27.1751 20.5306 27.6058 21.1778 28.7269C21.8248 29.8479 21.5054 31.2621 20.4776 32.0032L20.2628 32.1409L13.2423 36.1947L17.0714 37.221C18.405 37.5784 19.1962 38.9489 18.839 40.2825C18.4816 41.6162 17.1111 42.4075 15.7774 42.0501L6.11825 39.4622C4.78469 39.1049 3.99342 37.7343 4.35067 36.4007L6.93856 26.7415ZM39.7774 24.974C41.1111 24.6166 42.4826 25.4079 42.8399 26.7415L45.4278 36.4007C45.785 37.7342 44.9936 39.1047 43.6602 39.4622L34.0011 42.0501C32.6674 42.4075 31.2959 41.6162 30.9386 40.2825C30.5814 38.9491 31.3728 37.5785 32.7061 37.221L36.5362 36.1947L29.5157 32.1409L29.3009 32.0032C28.2731 31.2621 27.9535 29.8479 28.6007 28.7269C29.2479 27.6058 30.6324 27.1751 31.7882 27.6947L32.0157 27.8118L39.0362 31.8656L38.0098 28.0355C37.6525 26.7019 38.4439 25.3314 39.7774 24.974ZM23.172 5.69465C24.1353 4.78479 25.6421 4.78498 26.6056 5.69465L32.6056 11.3616L32.7823 11.5462C33.6105 12.5048 33.5946 13.9539 32.7061 14.8948C31.8175 15.8356 30.3716 15.9344 29.3673 15.1624L29.172 14.9964L27.3888 13.3118V19.512C27.3884 20.8923 26.2691 22.0119 24.8888 22.012C23.5084 22.0118 22.3891 20.8923 22.3888 19.512V13.3118L20.6056 14.9964C19.6019 15.9442 18.0194 15.8983 17.0714 14.8948C16.1239 13.8912 16.1688 12.3096 17.172 11.3616L23.172 5.69465Z"
        fill="url(#paint3_linear_3d_1)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_3d_1"
          x1="24.8889"
          y1="43.5431"
          x2="-2.46282"
          y2="25.9662"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#D5E0FF" />
          <stop offset="1" stopColor="#F0E1FF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_3d_1"
          x1="24.8889"
          y1="43.5431"
          x2="52.2407"
          y2="25.9662"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#819CFF" />
          <stop offset="1" stopColor="#CFC8FF" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_3d_1"
          x1="42.8889"
          y1="45.5275"
          x2="32.9392"
          y2="19.221"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#819CFF" />
          <stop offset="1" stopColor="#CFC8FF" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_3d_1"
          x1="45.5136"
          y1="50.8369"
          x2="9.0512"
          y2="6.20522"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3662FD" />
          <stop offset="1" stopColor="#8673FF" />
        </linearGradient>
      </defs>
    </svg>
  )
}

export function HandshakeIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M33.6004 5.07701C30.7306 4.75771 27.8333 5.45038 25.0745 6.80117C22.3204 8.14961 19.4815 10.3792 17.3972 12.1894C16.3392 13.1083 15.4441 13.947 14.8125 14.5569C14.4963 14.8622 14.2452 15.1112 14.0715 15.2854C13.9847 15.3725 13.9172 15.441 13.8706 15.4886L13.8164 15.544L13.8015 15.5595L13.7996 15.5614L13.7971 15.564L13.7956 15.5655L7.5759 21.963C5.4747 24.1243 5.4747 27.6118 7.57591 29.7731C7.97297 30.1815 8.41676 30.5136 8.8898 30.7692C7.59347 32.8998 7.84087 35.736 9.65047 37.5973C11.4547 39.4531 14.2238 39.7319 16.318 38.4338C16.5613 38.8996 16.8744 39.3374 17.2572 39.7311C19.0346 41.5594 21.7485 41.8572 23.831 40.6245C24.023 40.9385 24.252 41.2356 24.5182 41.5093C26.4505 43.4969 29.6004 43.4969 31.5327 41.5093L41.5597 31.1957C47.4801 25.1061 47.4801 15.2494 41.5597 9.1598C39.2066 6.73941 36.5014 5.39978 33.6004 5.07701Z"
        fill="url(#paint0_radial_hs_1)"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M14.3996 5.07701C17.2694 4.75771 20.1667 5.45038 22.9255 6.80117C25.6796 8.14961 28.5185 10.3792 30.6028 12.1894C31.6608 13.1083 32.5559 13.947 33.1875 14.5569C33.5037 14.8622 33.7548 15.1112 33.9285 15.2854C34.0153 15.3725 34.0828 15.441 34.1294 15.4886L34.1836 15.544L34.1985 15.5595L34.2004 15.5614L34.2029 15.564L34.2044 15.5655L40.4241 21.963C42.5253 24.1243 42.5253 27.6118 40.4241 29.7731C40.027 30.1815 39.5832 30.5136 39.1102 30.7692C40.4065 32.8998 40.1591 35.736 38.3495 37.5973C36.5453 39.4531 33.7762 39.7319 31.682 38.4338C31.4387 38.8996 31.1256 39.3374 30.7428 39.7311C28.9654 41.5594 26.2515 41.8572 24.169 40.6245C23.977 40.9385 23.748 41.2356 23.4818 41.5093C21.5495 43.4969 18.3996 43.4969 16.4673 41.5093L6.44028 31.1957C0.519907 25.1061 0.519905 15.2494 6.44028 9.1598C8.7934 6.73941 11.4986 5.39978 14.3996 5.07701Z"
        fill="url(#paint1_radial_hs_1)"
      />
      <path
        d="M39.8861 33.0275C39.793 32.2385 39.5342 31.4663 39.1102 30.7695C39.5833 30.5138 40.0271 30.1818 40.4241 29.7734C42.5253 27.6121 42.5253 24.1245 40.4241 21.9632L34.2044 15.5657L34.203 15.5643L34.2004 15.5616L34.1986 15.5597L34.1836 15.5443L34.1295 15.4889C34.0828 15.4413 34.0153 15.3728 33.9285 15.2857C33.7549 15.1115 33.5037 14.8625 33.1875 14.5572C32.8259 14.208 32.3779 13.7838 31.8625 13.3125L24.0326 21.1423C21.9149 22.6589 18.9617 22.4527 17.0711 20.5237C14.9763 18.3863 14.9763 14.9373 17.0711 12.7999L20.2724 9.53358C26.1969 3.48881 35.8193 3.48881 41.7437 9.53358C47.6462 15.5559 47.6462 25.3037 41.7437 31.3261L41.7051 31.3655L39.8861 33.0275Z"
        fill="url(#paint2_radial_hs_1)"
      />
      <defs>
        <radialGradient
          id="paint0_radial_hs_1"
          cx="0"
          cy="0"
          r="1"
          gradientTransform="matrix(1.74145 -41.3895 -46.5527 -2.11684 26 43)"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FFB629" />
          <stop offset="0.965094" stopColor="#FF5C00" />
        </radialGradient>
        <radialGradient
          id="paint1_radial_hs_1"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(22 43) rotate(-90) scale(41.8 47.0144)"
        >
          <stop stopColor="#FFE976" />
          <stop offset="0.965094" stopColor="#FFC328" />
        </radialGradient>
        <radialGradient
          id="paint2_radial_hs_1"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(30.8353 33.0275) rotate(-92.5045) scale(30.5567 35.7291)"
        >
          <stop stopColor="#FFB629" />
          <stop offset="0.965094" stopColor="#FF5C00" />
        </radialGradient>
      </defs>
    </svg>
  )
}

export function ShapeIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M32.8889 25.012C29.5752 25.012 26.8889 27.6983 26.8889 31.012V38.012C26.8889 41.3257 29.5752 44.012 32.8889 44.012H39.8889C43.2026 44.012 45.8889 41.3257 45.8889 38.012V31.012C45.8889 27.6983 43.2026 25.012 39.8889 25.012H32.8889Z"
        fill="url(#paint0_linear_shape_1)"
      />
      <path
        d="M3.88892 34.512C3.88892 29.2653 8.14221 25.012 13.3889 25.012C18.6356 25.012 22.8889 29.2653 22.8889 34.512C22.8889 39.7587 18.6356 44.012 13.3889 44.012C8.14221 44.012 3.88892 39.7587 3.88892 34.512Z"
        fill="url(#paint1_linear_shape_1)"
      />
      <path
        d="M20.5588 6.51196C22.4833 3.17863 27.2945 3.17863 29.219 6.51196L34.4152 15.512C36.3397 18.8453 33.9341 23.012 30.0851 23.012H19.6928C15.8438 23.012 13.4381 18.8453 15.3626 15.512L20.5588 6.51196Z"
        fill="url(#paint2_linear_shape_1)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_shape_1"
          x1="44.1616"
          y1="48.762"
          x2="32.0707"
          y2="21.9892"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#2BBFFF" />
          <stop offset="1" stopColor="#0167FF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_shape_1"
          x1="23.1264"
          y1="46.387"
          x2="0.712287"
          y2="33.5199"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FFB21E" />
          <stop offset="1" stopColor="#FFE665" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_shape_1"
          x1="27.2079"
          y1="26.812"
          x2="22.5989"
          y2="0.293283"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FF1725" />
          <stop offset="1" stopColor="#FF9431" />
        </linearGradient>
      </defs>
    </svg>
  )
}

export function WandIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M10.8889 24.8889C11.9935 24.8889 12.8889 25.7843 12.8889 26.8889C12.8889 27.9935 13.7843 28.8889 14.8889 28.8889C15.9935 28.8889 16.8889 29.7843 16.8889 30.8889C16.8889 31.9935 15.9935 32.8889 14.8889 32.8889C13.7843 32.8889 12.8889 33.7843 12.8889 34.8889C12.8889 35.9935 11.9935 36.8889 10.8889 36.8889C9.78435 36.8889 8.88892 35.9935 8.88892 34.8889C8.88892 33.7843 7.99349 32.8889 6.88892 32.8889C5.78435 32.8889 4.88892 31.9935 4.88892 30.8889C4.88892 29.7843 5.78435 28.8889 6.88892 28.8889C7.99349 28.8889 8.88892 27.9935 8.88892 26.8889C8.88892 25.7843 9.78435 24.8889 10.8889 24.8889ZM10.8889 3.88892C11.9935 3.88892 12.8889 4.78435 12.8889 5.88892C12.8889 7.54577 14.2321 8.88892 15.8889 8.88892C16.9935 8.88892 17.8889 9.78435 17.8889 10.8889C17.8889 11.9935 16.9935 12.8889 15.8889 12.8889C14.2321 12.8889 12.8889 14.2321 12.8889 15.8889C12.8889 16.9935 11.9935 17.8889 10.8889 17.8889C9.78435 17.8889 8.88892 16.9935 8.88892 15.8889C8.88892 14.2321 7.54577 12.8889 5.88892 12.8889C4.78435 12.8889 3.88892 11.9935 3.88892 10.8889C3.88892 9.78435 4.78435 8.88892 5.88892 8.88892C7.54577 8.88892 8.88892 7.54577 8.88892 5.88892C8.88892 4.78435 9.78435 3.88892 10.8889 3.88892ZM28.8889 4.88892C29.9935 4.88892 30.8889 5.78435 30.8889 6.88892C30.8889 7.99349 31.7843 8.88892 32.8889 8.88892C33.9935 8.88892 34.8889 9.78435 34.8889 10.8889C34.8889 11.9935 33.9935 12.8889 32.8889 12.8889C31.7843 12.8889 30.8889 13.7843 30.8889 14.8889C30.8889 15.9935 29.9935 16.8889 28.8889 16.8889C27.7843 16.8889 26.8889 15.9935 26.8889 14.8889C26.8889 13.7843 25.9935 12.8889 24.8889 12.8889C23.7843 12.8889 22.8889 11.9935 22.8889 10.8889C22.8889 9.78435 23.7843 8.88892 24.8889 8.88892C25.9935 8.88892 26.8889 7.99349 26.8889 6.88892C26.8889 5.78435 27.7843 4.88892 28.8889 4.88892Z"
        fill="url(#paint0_linear_wand_1)"
      />
      <rect
        x="14.9514"
        y="21.3049"
        width="8.98391"
        height="35.9356"
        rx="4.49196"
        transform="rotate(-45 14.9514 21.3049)"
        fill="url(#paint1_linear_wand_1)"
      />
      <path
        d="M18.1275 18.1283C19.8817 16.3741 22.7258 16.3743 24.4801 18.1283L27.8072 21.4554L21.4547 27.808L18.1275 24.4808C16.3736 22.7266 16.3734 19.8824 18.1275 18.1283Z"
        fill="url(#paint2_linear_wand_1)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_wand_1"
          x1="46.9445"
          y1="11.5043"
          x2="-1.19805"
          y2="22.5389"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FF9900" />
          <stop offset="1" stopColor="#FFD951" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_wand_1"
          x1="20.9033"
          y1="12.321"
          x2="-0.156309"
          y2="32.2722"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#001D86" />
          <stop offset="1" stopColor="#71479B" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_wand_1"
          x1="27.9447"
          y1="29.1824"
          x2="14.9737"
          y2="21.7363"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#FFA011" />
          <stop offset="1" stopColor="#FFE351" />
        </linearGradient>
      </defs>
    </svg>
  )
}

export function BookIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M5.88892 36.6431H43.8889V38.6431C43.8889 40.8522 42.0981 42.6431 39.8889 42.6431H9.88892C7.67978 42.6431 5.88892 40.8522 5.88892 38.6431V36.6431Z"
        fill="url(#paint0_linear_book_1)"
      />
      <path
        d="M24.8889 16.0211V39.6431H41.236C43.6843 39.6431 45.5581 37.4634 45.1907 35.0428L42.5697 17.7742C42.4002 16.6578 41.7673 15.6594 40.7381 15.195C39.2164 14.5083 36.6859 13.6431 33.5963 13.6431C28.4744 13.6431 24.8889 16.0211 24.8889 16.0211Z"
        fill="url(#paint1_linear_book_1)"
      />
      <path
        d="M24.8889 16.0211V39.6431H8.54185C6.09357 39.6431 4.21975 37.4634 4.58714 35.0428L7.20818 17.7742C7.37761 16.6578 8.01053 15.6594 9.03972 15.195C10.5614 14.5083 13.0919 13.6431 16.1815 13.6431C21.3034 13.6431 24.8889 16.0211 24.8889 16.0211Z"
        fill="url(#paint2_linear_book_1)"
      />
      <path
        d="M24.8889 16.0209V39.6429C24.8889 39.6429 27.1877 34.6622 36.4805 33.4206C38.8261 33.1072 40.684 31.1045 40.4446 28.7502C39.8546 22.9483 38.9562 14.1777 38.5728 10.4362C38.4682 9.41603 37.6086 8.64907 36.5882 8.75169C34.8145 8.93009 32.0624 9.4008 29.8889 10.6428C26.3889 12.6428 24.8889 16.0209 24.8889 16.0209Z"
        fill="url(#paint3_linear_book_1)"
      />
      <path
        d="M15.7493 4.91549C20.8034 6.0624 24.0571 10.736 24.8889 16.143V39.6429L23.8889 38.1429C23.8889 38.1429 21.3917 34.2689 13.817 33.5993C11.2856 33.3755 9.18233 31.2446 9.49427 28.7225L12.0635 7.95027C12.2987 6.04878 13.8808 4.49148 15.7493 4.91549Z"
        fill="url(#paint4_linear_book_1)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_book_1"
          x1="43.8889"
          y1="44.0493"
          x2="42.1997"
          y2="32.2635"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3662FD" />
          <stop offset="1" stopColor="#8673FF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_book_1"
          x1="35.771"
          y1="13.9561"
          x2="35.771"
          y2="39.6407"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#0D51FF" />
          <stop offset="1" stopColor="#7280FF" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_book_1"
          x1="14.0068"
          y1="13.9561"
          x2="14.0068"
          y2="39.6407"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#0D51FF" />
          <stop offset="1" stopColor="#7280FF" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_book_1"
          x1="40.8889"
          y1="46.9085"
          x2="14.187"
          y2="31.7262"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#819CFF" />
          <stop offset="1" stopColor="#CFC8FF" />
        </linearGradient>
        <linearGradient
          id="paint4_linear_book_1"
          x1="24.8889"
          y1="47.8452"
          x2="-3.29577"
          y2="33.6496"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#D5E0FF" />
          <stop offset="1" stopColor="#F0E1FF" />
        </linearGradient>
      </defs>
    </svg>
  )
}

export function LongitudeIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <circle
        cx="24.8889"
        cy="24.8889"
        r="20"
        transform="rotate(90 24.8889 24.8889)"
        fill="url(#paint0_linear_long_1)"
      />
      <path
        d="M4.88892 24.8889L44.8889 24.8889C44.8889 35.9346 35.9346 44.8889 24.8889 44.8889C13.8432 44.8889 4.88892 35.9346 4.88892 24.8889Z"
        fill="url(#paint1_linear_long_1)"
      />
      <ellipse
        cx="24.8889"
        cy="24.8889"
        rx="12"
        ry="20"
        transform="rotate(90 24.8889 24.8889)"
        fill="url(#paint2_linear_long_1)"
      />
      <path
        d="M4.88892 24.8889L44.8889 24.8889C44.8889 31.5163 35.9346 36.8889 24.8889 36.8889C13.8432 36.8889 4.88892 31.5163 4.88892 24.8889Z"
        fill="url(#paint3_linear_long_1)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_long_1"
          x1="25.6167"
          y1="5.37044"
          x2="25.6167"
          y2="44.8852"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#8FD0FF" />
          <stop offset="1" stopColor="#E7F6FF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_long_1"
          x1="53.4603"
          y1="24.8889"
          x2="15.8054"
          y2="53.7749"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3360FF" />
          <stop offset="1" stopColor="#193F9F" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_long_1"
          x1="25.3256"
          y1="5.37044"
          x2="25.3256"
          y2="44.8852"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#5BBAFF" />
          <stop offset="1" stopColor="#ACE1FF" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_long_1"
          x1="-5.11109"
          y1="35.798"
          x2="15.6654"
          y2="4.5216"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#25C4E7" />
          <stop offset="1" stopColor="#3B53CE" />
        </linearGradient>
      </defs>
    </svg>
  )
}

export function BalanceIcon({ size = 48, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M20.8893 33.6431H23.3893C23.3893 33.2434 23.2935 32.8495 23.1098 32.4945L20.8893 33.6431ZM5.88928 33.6431L3.66874 32.4945C3.48511 32.8495 3.38928 33.2434 3.38928 33.6431H5.88928ZM13.3893 19.1431L15.6098 17.9945C15.1804 17.1644 14.3239 16.6431 13.3893 16.6431C12.4547 16.6431 11.5981 17.1644 11.1687 17.9945L13.3893 19.1431ZM43.889 33.6431H46.389C46.389 33.2434 46.2932 32.8495 46.1096 32.4945L43.889 33.6431ZM28.889 33.6431L26.6685 32.4945C26.4849 32.8495 26.389 33.2434 26.389 33.6431H28.889ZM36.389 19.1431L38.6096 17.9945C38.1802 17.1644 37.3236 16.6431 36.389 16.6431C35.4544 16.6431 34.5979 17.1644 34.1685 17.9945L36.389 19.1431ZM4.38904 14.6431C4.38904 16.0238 5.50833 17.1431 6.88904 17.1431C8.26975 17.1431 9.38904 16.0238 9.38904 14.6431H4.38904ZM40.389 14.6431C40.389 16.0238 41.5083 17.1431 42.889 17.1431C44.2697 17.1431 45.389 16.0238 45.389 14.6431H40.389ZM20.8893 33.6431H18.3893C18.3893 34.9011 17.9914 36.6631 17.1035 38.034C16.2744 39.3139 15.1191 40.1431 13.3893 40.1431V42.6431V45.1431C17.1594 45.1431 19.7541 43.1389 21.3001 40.7522C22.7871 38.4564 23.3893 35.7184 23.3893 33.6431H20.8893ZM13.3893 42.6431V40.1431C11.6594 40.1431 10.5041 39.3139 9.67507 38.034C8.78712 36.6631 8.38928 34.9011 8.38928 33.6431H5.88928H3.38928C3.38928 35.7184 3.99144 38.4564 5.4785 40.7522C7.02442 43.1389 9.61914 45.1431 13.3893 45.1431V42.6431ZM5.88928 33.6431L8.10983 34.7916L15.6098 20.2916L13.3893 19.1431L11.1687 17.9945L3.66874 32.4945L5.88928 33.6431ZM13.3893 19.1431L11.1687 20.2916L18.6687 34.7916L20.8893 33.6431L23.1098 32.4945L15.6098 17.9945L13.3893 19.1431ZM20.8893 33.6431V31.1431H5.88928V33.6431V36.1431H20.8893V33.6431ZM43.889 33.6431H41.389C41.389 34.9011 40.9912 36.6631 40.1033 38.034C39.2742 39.3139 38.1189 40.1431 36.389 40.1431V42.6431V45.1431C40.1592 45.1431 42.7539 43.1389 44.2998 40.7522C45.7869 38.4564 46.389 35.7184 46.389 33.6431H43.889ZM36.389 42.6431V40.1431C34.6592 40.1431 33.5039 39.3139 32.6748 38.034C31.7869 36.6631 31.389 34.9011 31.389 33.6431H28.889H26.389C26.389 35.7184 26.9912 38.4564 28.4783 40.7522C30.0242 43.1389 32.6189 45.1431 36.389 45.1431V42.6431ZM28.889 33.6431L31.1096 34.7916L38.6096 20.2916L36.389 19.1431L34.1685 17.9945L26.6685 32.4945L28.889 33.6431ZM36.389 19.1431L34.1685 20.2916L41.6685 34.7916L43.889 33.6431L46.1096 32.4945L38.6096 17.9945L36.389 19.1431ZM43.889 33.6431V31.1431H28.889V33.6431V36.1431H43.889V33.6431ZM10.889 10.6431V8.14307C7.29919 8.14307 4.38904 11.0532 4.38904 14.6431H6.88904H9.38904C9.38904 13.8146 10.0606 13.1431 10.889 13.1431V10.6431ZM38.889 10.6431V13.1431C39.7175 13.1431 40.389 13.8146 40.389 14.6431H42.889H45.389C45.389 11.0532 42.4789 8.14307 38.889 8.14307V10.6431ZM10.889 10.6431V13.1431H38.889V10.6431V8.14307H10.889V10.6431Z"
        fill="url(#paint0_linear_bal_1)"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6.88916 34.8738C6.88916 34.1941 7.50182 33.6431 8.25758 33.6431H18.5207C19.2765 33.6431 19.8892 34.1941 19.8892 34.8738C19.8892 36.1007 19.4911 37.7255 18.5147 39.0814C17.506 40.482 15.8291 41.6431 13.3892 41.6431C10.9492 41.6431 9.27234 40.482 8.26365 39.0814C7.28719 37.7255 6.88916 36.1007 6.88916 34.8738Z"
        fill="url(#paint1_linear_bal_1)"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M29.8891 34.8738C29.8891 34.1941 30.5018 33.6431 31.2575 33.6431H41.5207C42.2765 33.6431 42.8891 34.1941 42.8891 34.8738C42.8891 36.1007 42.4911 37.7255 41.5146 39.0814C40.5059 40.482 38.8291 41.6431 36.3891 41.6431C33.9492 41.6431 32.2723 40.482 31.2636 39.0814C30.2871 37.7255 29.8891 36.1007 29.8891 34.8738Z"
        fill="url(#paint2_linear_bal_1)"
      />
      <circle cx="24.889" cy="10.6431" r="6" fill="url(#paint3_linear_bal_1)" />
      <defs>
        <linearGradient
          id="paint0_linear_bal_1"
          x1="43.889"
          y1="50.1431"
          x2="12.9382"
          y2="9.65356"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#819CFF" />
          <stop offset="1" stopColor="#CFC8FF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_bal_1"
          x1="42.8889"
          y1="43.5181"
          x2="39.7806"
          y2="28.1079"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3662FD" />
          <stop offset="1" stopColor="#8673FF" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_bal_1"
          x1="42.8889"
          y1="43.5181"
          x2="39.7806"
          y2="28.1079"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3662FD" />
          <stop offset="1" stopColor="#8673FF" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_bal_1"
          x1="30.889"
          y1="19.4556"
          x2="18.9173"
          y2="6.26699"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3662FD" />
          <stop offset="1" stopColor="#8673FF" />
        </linearGradient>
      </defs>
    </svg>
  )
}