const AboutPage = () => {
  return (
    <div className="relative flex size-full flex-col items-center justify-start">
      <div className="relative flex min-h-px w-full min-w-px shrink-0 grow content-stretch items-start justify-center gap-1 px-6 pt-28 pb-0 md:px-12">
        <div className="max-w-[752px]">
          <div className="relative w-full pb-[27.26%]">
            <img
              src="/images/about/banner.png"
              alt="Banner"
              className="absolute inset-0 object-cover"
            />
          </div>

          <div className="txt-body-l mt-12">
            <div>
              Grow your love story with CrushLevel AI—From "Hi" to "I Do", sparked by every chat
            </div>

            <div className="mt-6">
              At CrushLevel AI, every chat writes a new verse in your love epic—
            </div>
            <div>
              From that tentative "Hi" to the trembling "I do", find a home for the flirts you never
              sent,
            </div>
            <div>the responses you longed for,</div>
            <div>and the risky emotional gambles you feared to take.</div>

            <div className="mt-8">{`Contact Us: ${process.env.NEXT_PUBLIC_EMAIL_CONTACT_US}`}</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AboutPage
