From 884e47de012cc2efa530c83620d4d3b92e2b6cf7 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sat, 1 Feb 2025 15:52:08 +0800
Subject: [PATCH] feat: add footer newsletter and links components to NewsPage;
 enhance Button with new variant

---
 app/components/ui/button.tsx         |  1 +
 app/pages/news/footer-links.tsx      |  3 ++
 app/pages/news/footer-newsletter.tsx | 43 ++++++++++++++++++++++++++++
 app/pages/news/index.tsx             | 10 +++++--
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/news/footer-links.tsx
 create mode 100644 app/pages/news/footer-newsletter.tsx

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index cc98452..d63cf17 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -13,6 +13,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
+        newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
         newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
         icon: '',
         // destructive:
diff --git a/app/pages/news/footer-links.tsx b/app/pages/news/footer-links.tsx
new file mode 100644
index 0000000..5b9ecfc
--- /dev/null
+++ b/app/pages/news/footer-links.tsx
@@ -0,0 +1,3 @@
+export const FooterLinks = () => {
+  return <div className="col-span-3">FooterLinks</div>
+}
diff --git a/app/pages/news/footer-newsletter.tsx b/app/pages/news/footer-newsletter.tsx
new file mode 100644
index 0000000..7218dc0
--- /dev/null
+++ b/app/pages/news/footer-newsletter.tsx
@@ -0,0 +1,43 @@
+import { Link } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+import { DUMMY } from '~/data/dummy'
+
+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 py-[5px]"
+        >
+          <img
+            src={DUMMY.logo}
+            alt={DUMMY.title}
+            className="h-full w-auto"
+          />
+        </Link>
+      </div>
+      <h2>Join Our Newsletter</h2>
+      <p>
+        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>
+  )
+}
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index 3559cec..acb09b2 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -1,16 +1,18 @@
 import React, { type FC, type PropsWithChildren } from 'react'
 
+import { FooterLinks } from './footer-links'
+import { FooterNewsletter } from './footer-newsletter'
 import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
 export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <main className="min-h-dvh bg-[#ECECEC]">
+    <main className="relative min-h-dvh bg-[#ECECEC]">
       <header>
         <HeaderTop />
         <HeaderMenu />
       </header>
-      <div className="mx-auto grid w-full max-w-[1340px] gap-y-[25px] bg-[#ECECEC] px-[50px] pt-[25px]">
+      <div className="mx-[50px] my-[25px] grid gap-y-[25px]">
         <img
           src="/images/banner.png"
           alt="banner"
@@ -20,6 +22,10 @@ export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
           {children}
         </div>
       </div>
+      <footer className="absolute bottom-0 grid w-full grid-cols-5 gap-32 bg-[#2E2F7C] px-16 py-20 text-white">
+        <FooterNewsletter />
+        <FooterLinks />
+      </footer>
     </main>
   )
 }