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

import { twMerge } from 'tailwind-merge'

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

type NewsletterProperties = {
  className?: string
  title?: string
  description?: string
  textButton?: string
  onClick?: () => void
}
export const Newsletter = (property: NewsletterProperties) => {
  const { className, title, description } = property

  return (
    <div className="relative">
      <div
        className={`absolute flex h-[400px] w-screen flex-col sm:h-[300px] md:flex-row ${twMerge('', className)}`}
      >
        <div className="flex h-1/2 w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:h-full sm:w-[50%] sm:px-30">
          <h2 className="text-2xl font-bold sm:text-4xl">
            {title ? `${title}` : 'Join Our Newsletter'}
          </h2>
          <p className="text:md sm:text-lg">
            {description
              ? `${description}`
              : `Tidak ingin ketinggalan Berita Hukum terhangat? 
              Ingin mendapat informasi kajian dan networking terbaru?  
              Ikuti Newsletter kami dan Stay up to Speed!`}
          </p>
        </div>
        <div
          style={{
            backgroundImage: "url('/images/bg-newsletter.png')",
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
          className="flex h-1/2 w-full flex-col items-center justify-center text-center sm:h-full sm:w-[50%]"
        >
          <form className="grid w-[50%] 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>
    </div>
  )
}