feat: adj ui page detail, add breadcom component, add media sosial group

app/components/ui/newsletter.tsx

@@ -1,44 +1,38 @@
 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 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>
   )
 }