import svgPaths from "./svg-uozb6wgfml";
import imgImage from "figma:asset/ad526a204d3f66901399ea0452aaf33e105b0f32.png";
import imgImage583 from "figma:asset/0920e544195a4f6cffeb43277fdbb28bbf0e88b6.png";

function Frame1261155305() {
  return (
    <div className="bg-[#5b5f62] box-border content-stretch flex gap-[8px] items-center justify-center px-[9px] py-0 relative rounded-[29px] shrink-0 w-[65px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[12px] text-nowrap text-white">
        <p className="leading-[22px] whitespace-pre">Active</p>
      </div>
    </div>
  );
}

function Frame1261155307() {
  return (
    <div className="content-stretch flex gap-[12px] items-center relative shrink-0 w-[620px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">Melbourne- Unlimited Card</p>
      </div>
      <Frame1261155305 />
    </div>
  );
}

function Frame73() {
  return (
    <div className="content-stretch flex items-center justify-between relative shrink-0 w-full">
      <Frame1261155307 />
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#5b5f62] text-[16px] text-nowrap text-right">
        <p className="leading-[12px] whitespace-pre">22/12/2024</p>
      </div>
    </div>
  );
}

function Frame1261155295() {
  return (
    <div className="content-stretch flex gap-[8px] items-center relative shrink-0">
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
        <p className="leading-[normal] whitespace-pre">2 Days</p>
      </div>
      <div className="relative shrink-0 size-[3px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
        </svg>
      </div>
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
        <p className="leading-[normal] whitespace-pre">Adults-3</p>
      </div>
      <div className="relative shrink-0 size-[3px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
        </svg>
      </div>
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
        <p className="leading-[normal] whitespace-pre">Kids-3</p>
      </div>
    </div>
  );
}

function Frame74() {
  return (
    <div className="relative shrink-0 w-full">
      <div className="flex flex-row items-center relative size-full">
        <div className="box-border content-stretch flex gap-[148px] items-center pl-px pr-[8px] py-0 relative w-full">
          <Frame1261155295 />
        </div>
      </div>
    </div>
  );
}

function Frame75() {
  return (
    <div className="basis-0 content-stretch flex flex-col gap-[4px] grow items-start min-h-px min-w-px relative shrink-0">
      <Frame73 />
      <Frame74 />
    </div>
  );
}

function Frame76() {
  return (
    <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full">
      <Frame75 />
    </div>
  );
}

function Frame83() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[24px] items-start left-[16px] top-[13px] w-[1010px]">
      <Frame76 />
    </div>
  );
}

function LinkImage() {
  return <div className="bg-[rgba(0,0,0,0.2)] rounded-[12px] shrink-0 size-[50px]" data-name="Link → image" />;
}

function Frame48095477() {
  return (
    <div className="content-stretch flex flex-col gap-[4px] items-start leading-[0] not-italic relative shrink-0 text-[#05073c]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center relative shrink-0 text-[17.719px] w-full">
        <p className="leading-[27px]">Colosseum</p>
      </div>
      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center relative shrink-0 text-[13.234px] w-full">
        <p className="leading-[26.25px]">100+ Tours</p>
      </div>
    </div>
  );
}

function Frame() {
  return (
    <div className="content-stretch flex gap-[8px] items-center relative shrink-0" data-name="Frame">
      <LinkImage />
      <Frame48095477 />
    </div>
  );
}

function Frame48095487() {
  return (
    <div className="content-stretch flex gap-[20px] items-center overflow-clip relative shrink-0 w-[820px]">
      {[...Array(9).keys()].map((_, i) => (
        <Frame key={i} />
      ))}
    </div>
  );
}

function ChevronDown() {
  return (
    <div className="relative size-[24px]" data-name="Chevron down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="Chevron down">
          <path d="M6 9L12 15L18 9" id="Icon" stroke="var(--stroke-0, #1E1E1E)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" />
        </g>
      </svg>
    </div>
  );
}

function LinkImage9() {
  return (
    <div className="h-[50px] relative rounded-[12px] shrink-0 w-[151px]" data-name="Link → image">
      <div className="flex flex-row items-center justify-center overflow-clip relative size-full">
        <div className="box-border content-stretch flex gap-[9px] h-[50px] items-center justify-center px-[82px] py-[36px] relative w-[151px]">
          <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#05073c] text-[17.719px] text-nowrap">
            <p className="leading-[27px] whitespace-pre">View All</p>
          </div>
          <div className="flex h-[24px] items-center justify-center relative shrink-0 w-[24px]">
            <div className="flex-none rotate-[270deg]">
              <ChevronDown />
            </div>
          </div>
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#e4e4e4] border-solid inset-0 pointer-events-none rounded-[12px]" />
    </div>
  );
}

function Frame1261155336() {
  return (
    <div className="absolute content-stretch flex gap-[24px] items-center left-[16px] top-[106px]">
      <Frame48095487 />
      <LinkImage9 />
    </div>
  );
}

function Frame1261155337() {
  return (
    <div className="bg-[#f2f2f2] mr-[-26px] relative rounded-[120px] shrink-0 size-[58px]">
      <div className="overflow-clip relative size-[58px]">
        <div className="absolute h-[36px] left-1/2 rounded-bl-[5px] rounded-tl-[5px] top-1/2 translate-x-[-50%] translate-y-[-50%] w-[30.449px]" data-name="image">
          <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none rounded-bl-[5px] rounded-tl-[5px] size-full" src={imgImage} />
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[120px]" />
    </div>
  );
}

function Frame1261155342() {
  return (
    <div className="absolute box-border content-stretch flex items-center left-[16px] pl-0 pr-[26px] py-0 top-[198px]">
      {[...Array(5).keys()].map((_, i) => (
        <Frame1261155337 key={i} />
      ))}
    </div>
  );
}

function ChevronDown1() {
  return (
    <div className="relative size-[24px]" data-name="Chevron down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="Chevron down">
          <path d="M6 9L12 15L18 9" id="Icon" stroke="var(--stroke-0, #1E1E1E)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" />
        </g>
      </svg>
    </div>
  );
}

function LinkImage10() {
  return (
    <div className="absolute h-[50px] left-[216px] rounded-[12px] top-[206px] w-[151px]" data-name="Link → image">
      <div className="box-border content-stretch flex gap-[4px] h-[50px] items-center justify-center overflow-clip pl-[20px] pr-[16px] py-[16px] relative w-[151px]">
        <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#1e1e1e] text-[17.719px] text-nowrap">
          <p className="leading-[27px] whitespace-pre">50+ Offers</p>
        </div>
        <div className="flex h-[24px] items-center justify-center relative shrink-0 w-[24px]">
          <div className="flex-none rotate-[270deg]">
            <ChevronDown1 />
          </div>
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#e4e4e4] border-solid inset-0 pointer-events-none rounded-[12px]" />
    </div>
  );
}

function Frame1261155303() {
  return (
    <div className="absolute h-[315px] left-1/2 top-[136px] translate-x-[-50%] w-[1026px]">
      <div className="h-[315px] overflow-clip relative w-[1026px]">
        <Frame83 />
        <Frame1261155336 />
        <Frame1261155342 />
        <LinkImage10 />
      </div>
      <div aria-hidden="true" className="absolute border-[0px_0px_1px] border-black border-dashed inset-0 pointer-events-none" />
    </div>
  );
}

function Menu() {
  return (
    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">{`Download `}</p>
        <p className="mb-0">Help Center</p>
        <p>&nbsp;</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">Why Travellers</p>
        <p className="mb-0">Customer Stories</p>
        <p>Instagram post</p>
      </div>
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">Terms and Conditions</p>
        <p className="mb-0">Privacy Policy</p>
        <p className="mb-0">FAQs</p>
        <p>Information</p>
      </div>
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">App Store</p>
        <p>Google Play Store</p>
      </div>
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
      </div>
    </div>
  );
}

function ICon() {
  return (
    <div className="absolute left-[135px] size-[32px] top-[226px]" data-name="ICon">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ICon">
          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
          <path d={svgPaths.pe943800} fill="var(--fill-0, #5B5F62)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ICon1() {
  return (
    <div className="absolute left-[227px] size-[32px] top-[226px]" data-name="ICon">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ICon">
          <circle cx="16" cy="16" id="Ellipse 2614" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
          <path d={svgPaths.p3754fa00} fill="var(--fill-0, #5B5F62)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ICon2() {
  return (
    <div className="absolute left-[181px] size-[32px] top-[226px]" data-name="ICon">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ICon">
          <circle cx="16" cy="16" id="Ellipse 2613" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
          <path clipRule="evenodd" d={svgPaths.p2eab3c00} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function SocailIcon() {
  return (
    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
      <ICon />
      <ICon1 />
      <ICon2 />
    </div>
  );
}

function Img() {
  return (
    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
        <p className="leading-[20px] whitespace-pre">Logo</p>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div className="absolute h-[339px] left-1/2 overflow-clip top-[1243px] translate-x-[-50%] w-[1440px]" data-name="Footer">
      <Menu />
      <SocailIcon />
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
        <p className="leading-[26px]">Enjoy the touring with Salty</p>
      </div>
      <Img />
    </div>
  );
}

function ImageSvgrepoCom() {
  return (
    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
        <g id="image_svgrepo.com">
          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
        </g>
      </svg>
    </div>
  );
}

function Img1() {
  return (
    <div className="absolute bg-[#d9d9d9] h-[252px] left-[1698px] rounded-[20px] top-[2084px] w-[362px]" data-name="img">
      <ImageSvgrepoCom />
    </div>
  );
}

function Button() {
  return (
    <div className="absolute contents left-[1948px] top-[2439px]" data-name="Button">
      <div className="absolute h-[37px] left-[1948px] rounded-[26px] top-[2439px] w-[100px]">
        <div aria-hidden="true" className="absolute border border-[#2d3134] border-solid inset-0 pointer-events-none rounded-[26px]" />
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1964px] not-italic text-[14px] text-nowrap top-[2451px]">
        <p className="leading-[14px] whitespace-pre">Book Now</p>
      </div>
    </div>
  );
}

function Card8() {
  return (
    <div className="absolute contents left-[1686px] top-[2072px]" data-name="Card 8">
      <div className="absolute bg-white h-[440px] left-[1686px] rounded-[16px] top-[2072px] w-[386px]">
        <div aria-hidden="true" className="absolute border-2 border-solid border-white inset-0 pointer-events-none rounded-[16px]" />
      </div>
      <Img1 />
      <Button />
      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[0px] text-nowrap top-[2447px]">
        <p className="leading-[20px] whitespace-pre">
          <span className="text-[24px]">$99</span>
          <span className="text-[#5b5f62] text-[24px]"> </span>
          <span className="font-['Inter:Regular',_sans-serif] font-normal not-italic text-[#5b5f62] text-[16px]">/Person</span>
        </p>
      </div>
      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[24px] text-nowrap top-[2360px]">
        <p className="leading-[24px] whitespace-pre">Rome, Italy</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1710px] not-italic text-[#5b5f62] text-[14px] text-nowrap top-[2398px]">
        <p className="leading-[14px] whitespace-pre">Mountain Hiking Tour</p>
      </div>
    </div>
  );
}

function Frame1261155253() {
  return (
    <div className="absolute content-stretch flex font-['Poppins:Regular',_sans-serif] gap-[37px] items-center leading-[0] left-[305px] not-italic text-[#2d3134] text-[16px] text-nowrap top-[43px] tracking-[0.16px]">
      <div className="relative shrink-0">
        <p className="leading-[16px] text-nowrap whitespace-pre">About Us</p>
      </div>
      <div className="relative shrink-0">
        <p className="leading-[16px] text-nowrap whitespace-pre">Our Products</p>
      </div>
      <div className="relative shrink-0">
        <p className="leading-[16px] text-nowrap whitespace-pre">Your Card</p>
      </div>
    </div>
  );
}

function Frame1261155252() {
  return (
    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[1131px] px-[24px] py-[16px] rounded-[24px] top-[27px]">
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[0.16px]">
        <p className="leading-[16px] whitespace-pre">Get a City Card</p>
      </div>
    </div>
  );
}

function Img2() {
  return (
    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[34px] w-[98px]" data-name="img">
      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
        <p className="leading-[20px] whitespace-pre">Logo</p>
      </div>
    </div>
  );
}

function LanguageSvgrepoCom() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="language_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="language_svgrepo.com">
          <path d={svgPaths.p317063f1} fill="var(--fill-0, #2D3134)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function CartLargeMinimalisticSvgrepoCom() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="cart-large-minimalistic_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="cart-large-minimalistic_svgrepo.com">
          <path d={svgPaths.p1873f780} id="Vector" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
          <path d={svgPaths.p1358f400} id="Vector_2" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
          <path d={svgPaths.p2ddd6280} id="Vector_3" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeWidth="1.5" />
        </g>
      </svg>
    </div>
  );
}

function Frame48095472() {
  return (
    <div className="absolute content-stretch flex gap-[16px] items-center left-[1030px] top-[39px]">
      <LanguageSvgrepoCom />
      <CartLargeMinimalisticSvgrepoCom />
    </div>
  );
}

function Navigation() {
  return (
    <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.3)] h-[102px] left-0 overflow-clip top-0 w-[1440px]" data-name="Navigation">
      <Frame1261155253 />
      <Frame1261155252 />
      <Img2 />
      <Frame48095472 />
    </div>
  );
}

function ArrowLeft() {
  return (
    <div className="relative size-[54px]" data-name="Arrow left">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 54 54">
        <g id="Arrow left">
          <circle cx="27" cy="27" id="Ellipse 2616" r="26.5" stroke="var(--stroke-0, #2D3134)" />
          <path d="M24 33L30 27L24 21" id="Vector 796" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
        </g>
      </svg>
    </div>
  );
}

function SectionHeading() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start leading-[0] not-italic overflow-clip relative shrink-0 w-[592px]" data-name="Section heading">
      <div className="css-9el0wq font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-[#2d3134] text-[48px] tracking-[-1.2px] w-full">
        <p className="leading-[60px]">Download App to view your Pass</p>
      </div>
      <div className="css-sdralp font-['Inter:Regular',_sans-serif] font-normal relative shrink-0 text-[18px] text-gray-900 w-full">
        <p className="leading-[28px]">Download the app to manage your projects, keep track of the progress and complete tasks without procastinating. Stay on track and complete on time!</p>
      </div>
    </div>
  );
}

function Bg() {
  return (
    <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 135 40">
      <g id="Bg">
        <path d={svgPaths.p11d0cb00} fill="var(--fill-0, black)" id="Vector" />
        <path d={svgPaths.p1ab2e500} fill="var(--fill-0, #A6A6A6)" id="Vector_2" />
      </g>
    </svg>
  );
}

function Text() {
  return (
    <div className="absolute inset-[17.16%_6.8%_14.81%_30.4%]" data-name="Text">
      <div className="absolute bottom-0 left-0 right-0 top-[-0.37%]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 85 29">
          <g id="Text">
            <g id="Vector">
              <path d={svgPaths.p360ff200} fill="white" />
              <path d={svgPaths.p2e09de00} fill="white" />
              <path d={svgPaths.p2edcc080} fill="white" />
              <path d={svgPaths.p146a6200} fill="white" />
              <path d={svgPaths.p234bdb12} fill="white" />
              <path d={svgPaths.p190f4c00} fill="white" />
              <path d={svgPaths.p3f96e4c0} fill="white" />
              <path d={svgPaths.p360ff200} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
              <path d={svgPaths.p2e09de00} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
              <path d={svgPaths.p2edcc080} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
              <path d={svgPaths.p146a6200} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
              <path d={svgPaths.p234bdb12} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
              <path d={svgPaths.p190f4c00} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
              <path d={svgPaths.p3f96e4c0} stroke="var(--stroke-0, white)" strokeMiterlimit="10" strokeWidth="0.2" />
            </g>
            <path d={svgPaths.p949f00} fill="var(--fill-0, white)" id="Vector_2" />
          </g>
        </svg>
      </div>
    </div>
  );
}

function GooglePlayLogo() {
  return (
    <div className="absolute inset-[17.83%_75.51%_17.82%_7.38%]" data-name="Google Play logo">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 26">
        <g id="Google Play logo">
          <path d={svgPaths.p3aebff00} fill="url(#paint0_linear_9181_882)" id="Vector" />
          <path d={svgPaths.p1ae2b0c0} fill="url(#paint1_linear_9181_882)" id="Vector_2" />
          <path d={svgPaths.p2ddae880} fill="url(#paint2_linear_9181_882)" id="Vector_3" />
          <path d={svgPaths.p1b13c280} fill="url(#paint3_linear_9181_882)" id="Vector_4" />
          <path d={svgPaths.p1b75f800} fill="var(--fill-0, black)" id="Vector_5" opacity="0.2" />
          <path d={svgPaths.p26d43100} fill="var(--fill-0, black)" id="Vector_6" opacity="0.12" />
          <path d={svgPaths.p25f97b00} fill="var(--fill-0, black)" id="Vector_7" opacity="0.12" />
          <path d={svgPaths.p20fe0080} fill="var(--fill-0, white)" id="Vector_8" opacity="0.25" />
        </g>
        <defs>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_9181_882" x1="11.8308" x2="-4.95164" y1="1.57842" y2="18.3608">
            <stop stopColor="#00A0FF" />
            <stop offset="0.00657" stopColor="#00A1FF" />
            <stop offset="0.2601" stopColor="#00BEFF" />
            <stop offset="0.5122" stopColor="#00D2FF" />
            <stop offset="0.7604" stopColor="#00DFFF" />
            <stop offset="1" stopColor="#00E3FF" />
          </linearGradient>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint1_linear_9181_882" x1="23.8654" x2="-0.33149" y1="12.8702" y2="12.8702">
            <stop stopColor="#FFE000" />
            <stop offset="0.4087" stopColor="#FFBD00" />
            <stop offset="0.7754" stopColor="#FFA500" />
            <stop offset="1" stopColor="#FF9C00" />
          </linearGradient>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint2_linear_9181_882" x1="14.858" x2="-7.9003" y1="15.1648" y2="37.9231">
            <stop stopColor="#FF3A44" />
            <stop offset="1" stopColor="#C31162" />
          </linearGradient>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint3_linear_9181_882" x1="-2.67164" x2="7.49088" y1="-6.95511" y2="3.20741">
            <stop stopColor="#32A071" />
            <stop offset="0.0685" stopColor="#2DA771" />
            <stop offset="0.4762" stopColor="#15CF74" />
            <stop offset="0.8009" stopColor="#06E775" />
            <stop offset="1" stopColor="#00F076" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}

function StoreBadge() {
  return (
    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
      <Bg />
      <Text />
      <GooglePlayLogo />
    </div>
  );
}

function Bg1() {
  return (
    <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 135 40">
      <g id="Bg">
        <path clipRule="evenodd" d={svgPaths.pd6ee900} fill="var(--fill-0, #A6A6A6)" fillRule="evenodd" id="Vector" />
        <path d={svgPaths.p3394cd00} fill="var(--fill-0, black)" id="Vector_2" />
      </g>
    </svg>
  );
}

function Group() {
  return (
    <div className="absolute inset-[21.8%_73.54%_23.76%_13.33%]" data-name="<Group>">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 18 22">
        <g id="<Group>">
          <path d={svgPaths.p1ba7a100} fill="var(--fill-0, white)" id="<Path>" />
          <path d={svgPaths.p26de8970} fill="var(--fill-0, white)" id="<Path>_2" />
        </g>
      </svg>
    </div>
  );
}

function Text1() {
  return (
    <div className="absolute inset-[21.09%_12.95%_16.27%_31.45%]" data-name="Text">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 76 26">
        <g id="Text">
          <g id="Vector">
            <path d={svgPaths.p330e6600} fill="white" />
            <path d={svgPaths.p140623c0} fill="white" />
            <path d={svgPaths.p35419200} fill="white" />
            <path d={svgPaths.p48005c0} fill="white" />
            <path d={svgPaths.p21d6a400} fill="white" />
            <path d={svgPaths.p3c536e80} fill="white" />
            <path d={svgPaths.p3709a00} fill="white" />
            <path d={svgPaths.p14978a80} fill="white" />
          </g>
          <g id="Vector_2">
            <path d={svgPaths.pa6cfb80} fill="white" />
            <path d={svgPaths.p1c846872} fill="white" />
            <path d={svgPaths.p235e2a00} fill="white" />
            <path d={svgPaths.p3c1952c0} fill="white" />
            <path d={svgPaths.p3b676a80} fill="white" />
            <path d={svgPaths.pd9336c0} fill="white" />
            <path d={svgPaths.p22016470} fill="white" />
            <path d={svgPaths.p7fb1900} fill="white" />
            <path d={svgPaths.p35e78e00} fill="white" />
            <path d={svgPaths.p28b0e180} fill="white" />
            <path d={svgPaths.p4ac700} fill="white" />
            <path d={svgPaths.p1fa9cb00} fill="white" />
            <path d={svgPaths.p1865d740} fill="white" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function StoreBadge1() {
  return (
    <div className="h-[40px] overflow-clip relative shrink-0 w-[135px]" data-name="Store badge">
      <Bg1 />
      <Group />
      <Text1 />
    </div>
  );
}

function Badges() {
  return (
    <div className="content-stretch flex gap-[12px] items-start overflow-clip relative shrink-0" data-name="Badges">
      <StoreBadge />
      <StoreBadge1 />
    </div>
  );
}

function GetTheApp() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start overflow-clip relative shrink-0" data-name="Get the App">
      <div className="css-sdralp font-['Inter:Medium',_sans-serif] font-medium leading-[0] not-italic relative shrink-0 text-[18px] text-gray-900 text-nowrap">
        <p className="leading-[28px] whitespace-pre">Get the App</p>
      </div>
      <Badges />
    </div>
  );
}

function Content() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[20px] items-start left-[135px] overflow-clip top-[561px]" data-name="Content">
      <SectionHeading />
      <div className="relative shrink-0 size-[150px]" data-name="image 583">
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <img alt="" className="absolute h-[334.29%] left-[-9.8%] max-w-none top-[-9.96%] w-[334.37%]" src={imgImage583} />
        </div>
      </div>
      <GetTheApp />
    </div>
  );
}

function ImageSvgrepoCom1() {
  return (
    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
        <g id="image_svgrepo.com">
          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
        </g>
      </svg>
    </div>
  );
}

function Img3() {
  return (
    <div className="absolute bg-[#d9d9d9] h-[478px] left-[896px] top-[561px] w-[356px]" data-name="img">
      <ImageSvgrepoCom1 />
    </div>
  );
}

export default function TravelLandingPage() {
  return (
    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
      <Frame1261155303 />
      <Footer />
      <Card8 />
      <Navigation />
      <div className="absolute flex items-center justify-center left-[135px] size-[54px] top-[136px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <ArrowLeft />
        </div>
      </div>
      <Content />
      <Img3 />
    </div>
  );
}