style: slicing home page, adjust for mobile view

slicing home page, adjust for mobile view

app/layouts/footer-newsletter.tsx

@@ -5,39 +5,56 @@ import { APP } from '~/data/meta'
 
 export const FooterNewsletter = () => {
   return (
-    <div className="col-span-2 grid gap-y-6">
-      <div className="h-[75px] bg-white p-3">
-        <Link
-          to="/news"
-          className="h-full"
-        >
-          <img
-            src={APP.logo}
-            alt={APP.title}
-            className="h-full w-auto"
+    <>
+      <div className="col-span-2 hidden gap-y-6 sm:grid">
+        <div className="h-[75px] bg-white p-3">
+          <Link
+            to="/news"
+            className="h-full"
+          >
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-full w-auto"
+            />
+          </Link>
+        </div>
+
+        <h2 className="text-4xl font-bold">Join Our Newsletter</h2>
+        <p className="text-lg">
+          Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
+          informasi kajian dan networking terbaru? ikuti Newsletter kami and
+          Stay up to Speed!
+        </p>
+        <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}
           />
-        </Link>
+          <Button
+            type="submit"
+            variant="newsPrimaryOutline"
+            size="block"
+          >
+            Subscribe
+          </Button>
+        </form>
       </div>
-      <h2 className="text-4xl font-bold">Join Our Newsletter</h2>
-      <p className="text-lg">
-        Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat informasi
-        kajian dan networking terbaru? ikuti Newsletter kami and Stay up to
-        Speed!
-      </p>
-      <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="newsPrimaryOutline"
-          size="block"
-        >
-          Subscribe
-        </Button>
-      </form>
-    </div>
+      <div className="block sm:hidden">
+        <div className="h-[60px] bg-white p-3">
+          <Link
+            to="/news"
+            className="h-full"
+          >
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-full w-auto"
+            />
+          </Link>
+        </div>
+      </div>
+    </>
   )
 }