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

import { Button } from '~/components/ui/button'

export const Newsletter = () => {
  return (
    <div className="flex h-[300px] w-full flex-col md:flex-row">
      <div className="flex w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:px-30 md:w-[50%]">
        <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 dan
          Stay up to Speed!
        </p>
      </div>

      <div
        className="flex flex-col justify-center bg-cover bg-center px-20 py-5 sm:w-full md:w-[50%]"
        style={{
          backgroundImage: "url('https://placehold.co/400x300.png')",
        }}
      >
        <form className="grid gap-5">
          <input
            type="email"
            placeholder="Daftarkan Email Disini"
            className="w-full rounded-md border border-gray-300 bg-white p-4 text-sm focus:outline-none"
          />
          <Button
            type="submit"
            variant="newsPrimary"
            size="block"
          >
            Subscribe
          </Button>
        </form>
      </div>
    </div>
  )
}