import svgPaths from "./svg-te3jp5uahp";
import img938886Odhggd01 from "figma:asset/183ba346669a0a079762ab3f9535b7d1469ed4d9.png";
import imgFrame1000003903 from "figma:asset/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png";
import img7326E6090Fb09C3Ae7046Baa345E86111 from "figma:asset/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png";

function Group1216258262() {
  return (
    <div className="h-[63.844px] relative w-[47.511px]">
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 48 64"
      >
        <g id="Group 1216258262">
          <path
            d={svgPaths.p285ae700}
            fill="var(--fill-0, #765840)"
            id="Vector"
          />
          <path
            d={svgPaths.p33bc9700}
            fill="var(--fill-0, #F2E4CD)"
            id="Vector_2"
          />
        </g>
      </svg>
    </div>
  );
}

function Group1216258507() {
  return (
    <div className="[grid-area:1_/_1] h-[81px] ml-1 mt-4 relative w-[216px]">
      <div className="absolute bottom-0 left-0 right-0 top-[-0.494%]">
        <svg
          className="block size-full"
          fill="none"
          preserveAspectRatio="none"
          viewBox="0 0 216 82"
        >
          <g id="Group 1216258507">
            <line
              id="Line 34"
              stroke="var(--stroke-0, #6E5D40)"
              strokeWidth="0.4"
              x2="216"
              y1="0.8"
              y2="0.8"
            />
            <line
              id="Line 35"
              stroke="var(--stroke-0, #6E5D40)"
              strokeWidth="0.4"
              x2="216"
              y1="27.8"
              y2="27.8"
            />
            <line
              id="Line 36"
              stroke="var(--stroke-0, #6E5D40)"
              strokeWidth="0.4"
              x2="216"
              y1="54.8"
              y2="54.8"
            />
            <line
              id="Line 37"
              stroke="var(--stroke-0, #6E5D40)"
              strokeWidth="0.4"
              x2="216"
              y1="81.8"
              y2="81.8"
            />
          </g>
        </svg>
      </div>
    </div>
  );
}

function Group1216258508() {
  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] [text-shadow:rgba(0,0,0,0.15)_2.293px_2.293px_36.681px] css-qhcors font-['Thesignature:Regular',_sans-serif] ml-0 mt-0 not-italic relative text-[#070707] text-[32.096px] text-left tracking-[0.321px] w-[223.192px]">
        <p className="adjustLetterSpacing block leading-[0.82]">
          Pick from iconic attraction images to frame your memory.
        </p>
      </div>
      <Group1216258507 />
    </div>
  );
}

function ConvertTextToACircleFigmaPlugin1() {
  return (
    <div
      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-[42.459px] mt-0 place-items-start relative"
      data-name="Convert text to a circle figma plugin!1"
    >
      <div className="[grid-area:1_/_1] flex h-[18.133px] items-center justify-center ml-0 mt-0 relative w-[11.187px]">
        <div className="flex-none rotate-[8.861deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">C</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[16.946px] items-center justify-center ml-[9.114px] mt-[2.563px] relative w-[8.292px]">
        <div className="flex-none rotate-[19.54deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">i</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[17.785px] items-center justify-center ml-[12.473px] mt-[4.467px] relative w-[13.677px]">
        <div className="flex-none rotate-[29.576deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">t</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[15.785px] items-center justify-center ml-[16.114px] mt-[9.563px] relative w-[17.35px]">
        <div className="flex-none rotate-[51.084deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">y</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[14.51px] items-center justify-center ml-[19.692px] mt-[17.064px] relative w-[19.024px]">
        <div className="flex-none rotate-[67.534deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">C</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[11.447px] items-center justify-center ml-[24.115px] mt-[26.563px] relative w-[18.324px]">
        <div className="flex-none rotate-[76.015deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">a</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[6.973px] items-center justify-center ml-[26.115px] mt-[37.562px] relative w-[17.058px]">
        <div className="flex-none rotate-[90.489deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">r</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[12.009px] items-center justify-center ml-[24.115px] mt-[43.563px] relative w-[18.462px]">
        <div className="flex-none rotate-[104.769deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">d</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[14.193px] items-center justify-center ml-[21.114px] mt-[50.563px] relative w-[18.023px]">
        <div className="flex-none rotate-[119.915deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">s</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function ConvertTextToACircleFigmaPlugin2() {
  return (
    <div
      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-0 mt-[15.823px] place-items-start relative"
      data-name="Convert text to a circle figma plugin!1"
      style={{
        width:
          "calc(1px * ((var(--transform-inner-height) * 0.07898440957069397) + (var(--transform-inner-width) * 0.9968758225440979)))",
        height:
          "calc(1px * ((var(--transform-inner-width) * 0.07898440957069397) + (var(--transform-inner-height) * 0.9968758225440979)))",
      }}
    >
      <div className="[grid-area:1_/_1] flex h-[18.546px] items-center justify-center ml-0 mt-0 relative w-[12.373px]">
        <div className="flex-none rotate-[193.391deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">C</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[16.65px] items-center justify-center ml-[9.114px] mt-[2.562px] relative w-[9.459px]">
        <div className="flex-none rotate-[204.071deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">i</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[17.484px] items-center justify-center ml-[12.473px] mt-[4.466px] relative w-[14.565px]">
        <div className="flex-none rotate-[214.106deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">t</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[15.017px] items-center justify-center ml-[16.114px] mt-[9.562px] relative w-[17.736px]">
        <div className="flex-none rotate-[235.614deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">y</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[13.486px] items-center justify-center ml-[19.692px] mt-[17.064px] relative w-[18.844px]">
        <div className="flex-none rotate-[252.064deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">C</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[10.252px] items-center justify-center ml-[24.115px] mt-[26.563px] relative w-[18.011px]">
        <div className="flex-none rotate-[260.545deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">a</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[8.289px] items-center justify-center ml-[26.116px] mt-[37.563px] relative w-[17.532px]">
        <div className="flex-none rotate-[275.019deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">r</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[13.11px] items-center justify-center ml-[24.115px] mt-[43.563px] relative w-[18.668px]">
        <div className="flex-none rotate-[289.299deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">d</p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[15.053px] items-center justify-center ml-[21.115px] mt-[50.562px] relative w-[17.749px]">
        <div className="flex-none rotate-[304.445deg]">
          <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[11.227px] text-left text-nowrap uppercase">
            <p className="block leading-[normal] whitespace-pre">s</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function IconoirSeaWaves() {
  return (
    <div
      className="h-[2.098px] relative w-[3.227px]"
      data-name="iconoir:sea-waves"
    >
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 4 3"
      >
        <g clipPath="url(#clip0_2048_120)" id="iconoir:sea-waves">
          <path
            d={svgPaths.p1347bee0}
            id="Vector"
            stroke="var(--stroke-0, #87E9FF)"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="0.231944"
          />
        </g>
        <defs>
          <clipPath id="clip0_2048_120">
            <rect fill="white" height="2.09758" width="3.22705" />
          </clipPath>
        </defs>
      </svg>
    </div>
  );
}

function NounCoconutTree77945312() {
  return (
    <div
      className="h-[8.39px] relative w-[6.849px]"
      data-name="noun-coconut-tree-7794531 2"
    >
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 7 9"
      >
        <g id="noun-coconut-tree-7794531 2">
          <path d={svgPaths.p80f500} fill="var(--fill-0, black)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function Group58657() {
  return (
    <div
      className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-[19px] mt-[26px] place-items-start relative"
      style={{
        width:
          "calc(1px * ((var(--transform-inner-height) * 0.44725897908210754) + (var(--transform-inner-width) * 0.8944044709205627)))",
        height:
          "calc(1px * ((var(--transform-inner-width) * 0.44725897908210754) + (var(--transform-inner-height) * 0.8944044709205627)))",
      }}
    >
      <div className="[grid-area:1_/_1] flex h-[3.312px] items-center justify-center ml-[16.665px] mt-[5.095px] relative w-[3.815px]">
        <div className="flex-none rotate-[333.432deg]">
          <IconoirSeaWaves />
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[30.203px] items-center justify-center ml-0 mt-0 relative w-[45.643px]">
        <div className="flex-none rotate-[333.432deg]">
          <div className="font-['Goodly:Medium',_sans-serif] leading-[0] not-italic relative text-[#000000] text-[10.245px] text-left text-nowrap">
            <p className="leading-[normal] whitespace-pre">
              <span>{`C `}</span>
              <span className="tracking-[-3.2px]"> </span>tyCards
            </p>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[10.552px] items-center justify-center ml-[5.994px] mt-[1.948px] relative w-[9.867px]">
        <div className="flex-none rotate-[153.432deg] scale-y-[-100%]">
          <NounCoconutTree77945312 />
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[4.822px] items-center justify-center ml-[29.217px] mt-[5.245px] relative w-[4.822px]">
        <div className="flex-none rotate-[333.432deg]">
          <div className="relative size-[3.596px]">
            <svg
              className="block size-full"
              fill="none"
              preserveAspectRatio="none"
              viewBox="0 0 4 4"
            >
              <circle
                cx="1.79793"
                cy="1.79793"
                id="Ellipse 1"
                r="1.49827"
                stroke="var(--stroke-0, black)"
                strokeWidth="0.59931"
              />
            </svg>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex h-[1.999px] items-center justify-center ml-[31.091px] mt-[8.839px] relative w-[2.802px]">
        <div className="flex-none rotate-[333.432deg]">
          <div className="h-[0.899px] relative w-[2.697px]">
            <svg
              className="block size-full"
              fill="none"
              preserveAspectRatio="none"
              viewBox="0 0 3 1"
            >
              <path
                d={svgPaths.p3794ff00}
                fill="var(--fill-0, black)"
                id="Vector 10"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function Group1216258263() {
  return (
    <div className="[grid-area:1_/_1] grid-cols-[max-content] grid-rows-[max-content] inline-grid ml-0 mt-0 place-items-start relative">
      <div className="[grid-area:1_/_1] flex items-center justify-center ml-[2.575px] mt-[0.563px] relative size-[83.58px]">
        <div className="flex-none rotate-[358.074deg] size-[80.907px]">
          <div className="relative size-full" data-name="Vector">
            <div className="absolute inset-[-0.463%]">
              <svg
                className="block size-full"
                fill="none"
                preserveAspectRatio="none"
                viewBox="0 0 83 83"
              >
                <path
                  d={svgPaths.p1a313240}
                  id="Vector"
                  stroke="var(--stroke-0, #765840)"
                  strokeMiterlimit="10"
                  strokeWidth="0.75"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div className="[grid-area:1_/_1] flex items-center justify-center ml-[15.782px] mt-[13.79px] relative size-[57.208px]">
        <div className="flex-none rotate-[356.727deg] size-[54.202px]">
          <div className="relative size-full" data-name="Vector">
            <div className="absolute inset-[-0.692%]">
              <svg
                className="block size-full"
                fill="none"
                preserveAspectRatio="none"
                viewBox="0 0 56 56"
              >
                <path
                  d={svgPaths.pefd30f0}
                  id="Vector"
                  stroke="var(--stroke-0, #765840)"
                  strokeMiterlimit="10"
                  strokeWidth="0.75"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <ConvertTextToACircleFigmaPlugin1 />
      <ConvertTextToACircleFigmaPlugin2 />
      <Group58657 />
    </div>
  );
}

function MaskGroup() {
  return (
    <div
      className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0"
      data-name="Mask group"
    >
      <Group1216258263 />
      <div className="[grid-area:1_/_1] flex h-[313.017px] items-center justify-center ml-[-74px] mt-[-84px] relative w-[313.666px]">
        <div className="flex-none rotate-[298.418deg]">
          <div
            className="bg-center bg-cover bg-no-repeat h-[231.987px] w-[230.381px]"
            data-name="938886_ODHGGD0 1"
            style={{ backgroundImage: `url('${img938886Odhggd01}')` }}
          />
        </div>
      </div>
    </div>
  );
}

function Frame1597884915() {
  return (
    <div className="box-border content-stretch flex flex-col gap-5 items-end justify-start p-0 relative shrink-0">
      <div className="flex h-[76.407px] items-center justify-center relative shrink-0 w-[66.796px]">
        <div className="flex-none rotate-[339.573deg]">
          <Group1216258262 />
        </div>
      </div>
      <Group1216258508 />
      <MaskGroup />
    </div>
  );
}

export default function Frame1000003903() {
  return (
    <div
      className="bg-[62.36%_50%] bg-no-repeat bg-size-[120.48%_131.35%] relative rounded-[9px] size-full"
      style={{ backgroundImage: `url('${imgFrame1000003903}')` }}
    >
      <div className="relative size-full">
        <div className="[flex-flow:wrap] box-border content-start flex gap-5 items-start justify-start p-[30px] relative size-full">
          <div
            className="bg-[45.49%_77.36%] bg-no-repeat bg-size-[120.63%_118.82%] h-[315px] rounded-[4.585px] shrink-0 w-[234px]"
            data-name="7326e6090fb09c3ae7046baa345e8611 1"
            style={{
              backgroundImage: `url('${img7326E6090Fb09C3Ae7046Baa345E86111}')`,
            }}
          />
          <div className="flex h-[261px] items-center justify-center relative shrink-0 w-[0px]">
            <div className="flex-none rotate-[90deg]">
              <div className="h-0 relative w-[261px]">
                <div className="absolute bottom-0 left-0 right-0 top-[-0.4px]">
                  <svg
                    className="block size-full"
                    fill="none"
                    preserveAspectRatio="none"
                    viewBox="0 0 261 1"
                  >
                    <line
                      id="Line 33"
                      stroke="var(--stroke-0, #6E5D40)"
                      strokeWidth="0.4"
                      x2="261"
                      y1="0.8"
                      y2="0.8"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <Frame1597884915 />
        </div>
      </div>
      <div className="absolute inset-0 pointer-events-none shadow-[0px_2.293px_35.535px_1.146px_inset_rgba(76,53,17,0.16)]" />
    </div>
  );
}