style: slicing home page, adjust for mobile view

slicing home page, adjust for mobile view
2025-02-20 01:37:35 +07:00
parent fe441ad5ac
commit f17627bdf2
13 changed files with 412 additions and 128 deletions
@@ -0,0 +1,44 @@
+import { Button } from '~/components/ui/button'
+import { APP } from '~/data/meta'
+
+export const UiNewsLetter = () => {
+  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>
+    </>
+  )
+}