import { imgDescription, imgText, imgGooglePlayLogo, imgStoreBadge, imgGroup, imgText1, imgImageSvgrepoCom } from "./svg-0l4uo";

function SectionHeading() {
  return (
    <div className="content-stretch flex flex-col gap-2 items-start justify-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]">Access all your city cards on your phone.</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 <img className="block max-w-none size-full" src={imgDescription} />;
}

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%]">
        <img className="block max-w-none size-full" src={imgText} />
      </div>
    </div>
  );
}

function GooglePlayLogo() {
  return (
    <div className="absolute inset-[17.83%_75.51%_17.82%_7.38%]" data-name="Google Play logo">
      <img className="block max-w-none size-full" src={imgGooglePlayLogo} />
    </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 <img className="block max-w-none size-full" src={imgStoreBadge} />;
}

function Group() {
  return (
    <div className="absolute inset-[21.8%_73.54%_23.76%_13.33%]" data-name="<Group>">
      <img className="block max-w-none size-full" src={imgGroup} />
    </div>
  );
}

function Text1() {
  return (
    <div className="absolute inset-[21.09%_12.95%_16.27%_31.45%]" data-name="Text">
      <img className="block max-w-none size-full" src={imgText1} />
    </div>
  );
}

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

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

function GetTheApp() {
  return (
    <div className="content-stretch flex flex-col gap-2 items-start justify-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="content-stretch flex flex-col gap-12 items-start justify-start overflow-clip relative shrink-0" data-name="Content">
      <SectionHeading />
      <GetTheApp />
    </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">
      <img className="block max-w-none size-full" src={imgImageSvgrepoCom} />
    </div>
  );
}

function Img() {
  return (
    <div className="bg-[#d9d9d9] h-[558px] relative shrink-0 w-[592px]" data-name="img">
      <ImageSvgrepoCom />
    </div>
  );
}

export default function Cta06() {
  return (
    <div className="bg-white relative size-full" data-name="CTA 06">
      <div className="flex flex-row items-center relative size-full">
        <div className="box-border content-stretch flex gap-8 items-center justify-start px-28 py-0 relative size-full">
          <Content />
          <Img />
        </div>
      </div>
    </div>
  );
}