import svgPaths from "./svg-7b6pdtz4h8";

function IconoirSeaWaves() {
  return (
    <div
      className="absolute h-[6.871px] left-[72.59px] top-[20.69px] w-[10.571px]"
      data-name="iconoir:sea-waves"
    >
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 11 7"
      >
        <g clipPath="url(#clip0_5035_107)" id="iconoir:sea-waves">
          <path
            d={svgPaths.p2e6ec460}
            id="Vector"
            stroke="var(--stroke-0, #87E9FF)"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="0.759792"
          />
        </g>
        <defs>
          <clipPath id="clip0_5035_107">
            <rect fill="white" height="6.87117" width="10.571" />
          </clipPath>
        </defs>
      </svg>
    </div>
  );
}

function NounCoconutTree77945312() {
  return (
    <div
      className="h-[27.485px] relative w-[22.436px]"
      data-name="noun-coconut-tree-7794531 2"
    >
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 23 28"
      >
        <g id="noun-coconut-tree-7794531 2">
          <path
            d={svgPaths.pd3b5ac0}
            fill="var(--fill-0, #3B8782)"
            id="Vector"
          />
        </g>
      </svg>
    </div>
  );
}

function Group58656() {
  return (
    <div className="absolute contents left-[18px] top-1">
      <IconoirSeaWaves />
      <div className="absolute font-['Goodly:Medium',_sans-serif] leading-[0] left-[18px] not-italic text-[#3b8782] text-[33.559px] text-left text-nowrap top-1">
        <p className="leading-[normal] whitespace-pre">
          <span>{`C `}</span>
          <span className="tracking-[-3.2px]"> </span>tyCards
        </p>
      </div>
      <div className="absolute flex h-[27.485px] items-center justify-center left-[37.63px] top-[10.38px] w-[22.436px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <NounCoconutTree77945312 />
        </div>
      </div>
      <div className="absolute left-[113.71px] size-[11.779px] top-[21.18px]">
        <svg
          className="block size-full"
          fill="none"
          preserveAspectRatio="none"
          viewBox="0 0 12 12"
        >
          <circle
            cx="5.88957"
            cy="5.88957"
            id="Ellipse 1"
            r="4.90798"
            stroke="var(--stroke-0, #3B8782)"
            strokeWidth="1.96319"
          />
        </svg>
      </div>
      <div className="absolute h-[2.945px] left-[119.84px] top-[32.96px] w-[8.834px]">
        <svg
          className="block size-full"
          fill="none"
          preserveAspectRatio="none"
          viewBox="0 0 9 3"
        >
          <path
            d={svgPaths.pa2b3d80}
            fill="var(--fill-0, #3B8782)"
            id="Vector 10"
          />
        </svg>
      </div>
    </div>
  );
}

function Frame1597884922() {
  return (
    <div className="bg-[#ffffff] h-12 relative rounded-[100px] shrink-0 w-[196px]">
      <Group58656 />
    </div>
  );
}

function Group1000001931() {
  return (
    <div className="capitalize font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0 text-[#1e1e1e] text-[14px] text-left text-nowrap">
      <div className="[grid-area:1_/_1] ml-0 mt-0 relative">
        <p className="block leading-[1.2] text-nowrap whitespace-pre">
          About Us
        </p>
      </div>
      <div className="[grid-area:1_/_1] ml-[94px] mt-0 relative">
        <p className="block leading-[1.2] text-nowrap whitespace-pre">
          Our Products
        </p>
      </div>
      <div className="[grid-area:1_/_1] ml-[285px] mt-0 relative">
        <p className="block leading-[1.2] text-nowrap whitespace-pre">
          Your Card
        </p>
      </div>
      <div className="[grid-area:1_/_1] ml-[216px] mt-0 relative">
        <p className="block leading-[1.2] text-nowrap whitespace-pre">Offer</p>
      </div>
    </div>
  );
}

function WeuiArrowOutlined() {
  return (
    <div className="h-2.5 relative w-[6.667px]" data-name="weui:arrow-outlined">
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 7 10"
      >
        <g id="weui:arrow-outlined">
          <path
            d={svgPaths.p2d96d520}
            fill="var(--fill-0, #1E1E1E)"
            id="Vector"
          />
        </g>
      </svg>
    </div>
  );
}

function Group1000002493() {
  return (
    <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
      <div className="[grid-area:1_/_1] font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium ml-0 mt-0 relative text-[#1e1e1e] text-[14px] text-left text-nowrap uppercase">
        <p className="block leading-[1.2] whitespace-pre">eng</p>
      </div>
      <div className="[grid-area:1_/_1] flex h-[6.656px] items-center justify-center ml-[35px] mt-[5px] relative w-[10px]">
        <div className="flex-none rotate-[90deg]">
          <WeuiArrowOutlined />
        </div>
      </div>
    </div>
  );
}

function UilCart() {
  return (
    <div className="relative shrink-0 size-6" data-name="uil:cart">
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 24 24"
      >
        <g id="uil:cart">
          <path
            d={svgPaths.p268fe000}
            fill="var(--fill-0, #1E1E1E)"
            id="Vector"
            stroke="var(--stroke-0, white)"
            strokeWidth="0.545455"
          />
        </g>
      </svg>
    </div>
  );
}

function WeuiArrowOutlined1() {
  return (
    <div
      className="absolute h-[13px] translate-x-[-50%] translate-y-[-50%] w-[7.8px]"
      data-name="weui:arrow-outlined"
      style={{ top: "calc(50% + 0.5px)", left: "calc(50% + 0.9px)" }}
    >
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 8 13"
      >
        <g clipPath="url(#clip0_5035_86)" id="weui:arrow-outlined">
          <path
            d={svgPaths.p1a0ff300}
            fill="var(--fill-0, white)"
            id="Vector"
          />
          <path
            d={svgPaths.p5f6c800}
            fill="var(--fill-0, white)"
            id="Vector_2"
          />
        </g>
        <defs>
          <clipPath id="clip0_5035_86">
            <rect fill="white" height="13" width="7.8" />
          </clipPath>
        </defs>
      </svg>
    </div>
  );
}

function Frame1597884878() {
  return (
    <div className="absolute bg-[#4aa9a3] left-[139px] overflow-clip rounded-[100px] size-[30px] top-2">
      <WeuiArrowOutlined1 />
    </div>
  );
}

function Frame1597884879() {
  return (
    <div className="absolute font-['Plus_Jakarta_Sans:Medium',_sans-serif] font-medium h-[17px] leading-[0] left-4 overflow-clip text-[#2c6562] text-[14px] text-left text-nowrap top-[14.5px] uppercase w-[115px]">
      <div className="absolute left-0 top-0">
        <p className="block leading-[1.2] text-nowrap whitespace-pre">
          get a city card
        </p>
      </div>
      <div className="absolute left-0 top-4">
        <p className="block leading-[1.2] text-nowrap whitespace-pre">
          get a city card
        </p>
      </div>
    </div>
  );
}

function Frame1597884880() {
  return (
    <div className="h-[46px] relative rounded-[100px] shrink-0 w-[177px]">
      <div className="h-[46px] overflow-clip relative w-[177px]">
        <Frame1597884878 />
        <Frame1597884879 />
      </div>
      <div
        aria-hidden="true"
        className="absolute border border-[#4aa9a3] border-solid inset-0 pointer-events-none rounded-[100px]"
      />
    </div>
  );
}

function Frame1597884921() {
  return (
    <div className="box-border content-stretch flex flex-row gap-5 items-center justify-start p-0 relative shrink-0">
      <Group1000002493 />
      <UilCart />
      <Frame1597884880 />
    </div>
  );
}

export default function Frame1597884853() {
  return (
    <div className="backdrop-blur-[5px] backdrop-filter bg-[rgba(250,250,250,0.8)] relative rounded-[100px] shadow-[0px_4px_20px_0px_rgba(59,135,130,0.15)] size-full">
      <div className="flex flex-row items-center justify-center relative size-full">
        <div className="[flex-flow:wrap] box-border content-center flex gap-20 items-center justify-center overflow-clip p-[8px] relative size-full">
          <Frame1597884922 />
          <Group1000001931 />
          <Frame1597884921 />
        </div>
      </div>
    </div>
  );
}