feat: refactor news components and add news detail layout

app/pages/news-detail/data.ts

@@ -0,0 +1,11 @@
+import type { TNewsDetail } from '~/types/news'
+
+export const CONTENT: TNewsDetail = {
+  title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
+  content:
+    'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
+  featured: '/images/news-1.jpg',
+  slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
+  author: 'John Doe',
+  date: new Date(),
+}

app/pages/news-detail/index.tsx

@@ -0,0 +1,17 @@
+import { Card } from '~/components/ui/card'
+
+import { CONTENT } from './data'
+
+export const NewsDetailPage = () => {
+  const { title } = CONTENT
+  return (
+    <div className="relative">
+      <Card>
+        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+          {title}
+        </h2>
+        News Detail
+      </Card>
+    </div>
+  )
+}

app/pages/news/data.ts

@@ -9,7 +9,8 @@ export const SPOTLIGHT: TNews = {
       title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
       content:
         'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
-      image: '/images/news-1.jpg',
+      featured: '/images/news-1.jpg',
+      slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
     },
   ],
 }
@@ -23,22 +24,25 @@ export const BERITA: TNews = {
       title: 'Travelling as a way of self-discovery and progress',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      image: '/images/news-2.jpg',
+      featured: '/images/news-2.jpg',
       tag: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
     {
       title: 'How does writing influence your personal brand?',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      image: '/images/news-3.jpg',
+      featured: '/images/news-3.jpg',
       tag: ['Hukum'],
+      slug: 'how-does-writing-influence-your-personal-brand',
     },
     {
       title: 'Helping a local business reinvent itself',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      image: '/images/news-4.jpg',
+      featured: '/images/news-4.jpg',
       tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      slug: 'helping-a-local-business-reinvent-itself',
     },
   ],
 }
@@ -52,22 +56,25 @@ export const KAJIAN: TNews = {
       title: 'Travelling as a way of self-discovery and progress',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      image: '/images/news-2.jpg',
+      featured: '/images/news-2.jpg',
       tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
     {
       title: 'How does writing influence your personal brand?',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      image: '/images/news-3.jpg',
+      featured: '/images/news-3.jpg',
       tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      slug: 'how-does-writing-influence-your-personal-brand',
     },
     {
       title: 'Helping a local business reinvent itself',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      image: '/images/news-4.jpg',
+      featured: '/images/news-4.jpg',
       tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      slug: 'helping-a-local-business-reinvent-itself',
     },
   ],
 }

app/pages/news/index.tsx

@@ -1,8 +1,8 @@
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
+import { Newsletter } from '~/components/ui/newsletter'
 
 import { BERITA, KAJIAN, SPOTLIGHT } from './data'
-import { Newsletter } from './newsletter'
 
 export const NewsPage = () => {
   return (

app/pages/news/newsletter.tsx

@@ -1,3 +0,0 @@
-export const Newsletter = () => {
-  return <div>Newsletter</div>
-}