59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
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="primary"
|
|
size="block"
|
|
>
|
|
Subscribe
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|