legalgo-FE-reactrouter/app/components/ui/newsletter.tsx

import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'

export const Newsletter = () => {
  return (
    <>
      <div className="relative col-span-2 my-5 grid max-h-[400px] gap-y-6 bg-[#2E2F7C] p-5 px-10 text-white sm:grid-cols-2 sm:px-10">
        <div className="grid-1">
          <h2 className="text-2xl font-bold sm:text-4xl">
            Join Our Newsletter
          </h2>
          <p className="text:md sm:text-lg">
            Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
            informasi kajian dan networking terbaru? ikuti Newsletter kami and
            Stay up to Speed!
          </p>
        </div>
        <div className="w-max-h-[400px] absolute right-0 bottom-0 w-auto sm:top-0">
          <img
            src={'https://placehold.co/800x200.png'}
            alt={APP.title}
            className="h-full w-auto"
          />
        </div>
        <div className="z-10">
          <form className="grid gap-5">
            <input
              placeholder="Daftarkan Email Disini"
              className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
              size={1}
            />
            <Button
              type="submit"
              variant="newsPrimary"
              size="block"
            >
              Subscribe
            </Button>
          </form>
        </div>
      </div>
    </>
  )
}