feat: update news detail content structure and enhance styling for improved readability

app/pages/news-detail/data.ts

@@ -2,39 +2,34 @@ import type { TNews, TNewsDetail } from '~/types/news'
 
 export const CONTENT: TNewsDetail = {
   title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
-  content: `<div class="container">
-        <h1>Pengertian dan Jenis Hukum</h1><p>Hukum adalah sistem aturan yang dibuat dan ditegakkan oleh lembaga berwenang untuk mengatur perilaku manusia dalam masyarakat. Hukum bertujuan untuk menciptakan ketertiban, keadilan, dan keseimbangan dalam kehidupan sosial.</p>
-        
-        <h2>Jenis-Jenis Hukum</h2>
-        <h3>1. Hukum Berdasarkan Sumbernya</h3>
-        <ul>
-            <li><strong>Hukum Undang-Undang:</strong> Hukum yang tertulis dan dibuat oleh pemerintah atau legislatif.</li>
-            <li><strong>Hukum Kebiasaan:</strong> Hukum yang berkembang berdasarkan adat dan kebiasaan masyarakat.</li>
-            <li><strong>Hukum Yurisprudensi:</strong> Hukum yang ditetapkan berdasarkan keputusan hakim sebelumnya.</li>
-            <li><strong>Hukum Traktat:</strong> Hukum yang berasal dari perjanjian antarnegara.</li>
-        </ul>
-        
-        <h3>2. Hukum Berdasarkan Wilayah Berlakunya</h3>
-        <ul>
-            <li><strong>Hukum Nasional:</strong> Hukum yang berlaku dalam suatu negara tertentu.</li>
-            <li><strong>Hukum Internasional:</strong> Hukum yang mengatur hubungan antara negara-negara.</li>
-        </ul>
-        
-        <h3>3. Hukum Berdasarkan Isinya</h3>
-        <ul>
-            <li><strong>Hukum Publik:</strong> Hukum yang mengatur hubungan antara negara dengan warga negara, termasuk hukum pidana, tata negara, dan administrasi.</li>
-            <li><strong>Hukum Privat:</strong> Hukum yang mengatur hubungan antarindividu, seperti hukum perdata dan dagang.</li>
-        </ul>
-        
-        <h3>4. Hukum Berdasarkan Bentuknya</h3>
-        <ul>
-            <li><strong>Hukum Tertulis:</strong> Hukum yang dicantumkan dalam peraturan resmi seperti undang-undang.</li>
-            <li><strong>Hukum Tidak Tertulis:</strong> Hukum yang hidup dalam masyarakat dan diakui oleh norma sosial.</li>
-        </ul>
-        
-        <h2>Kesimpulan</h2>
-        <p>Hukum memainkan peran penting dalam mengatur kehidupan masyarakat. Dengan adanya hukum, ketertiban dan keadilan dapat terwujud. Memahami jenis-jenis hukum membantu kita dalam mengetahui hak dan kewajiban sebagai warga negara.</p>
-    </div>`,
+  content: `  <section>
+        <h1>Introduction</h1>
+    </secti>
+    <section>
+        <p>Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id.</p>
+        <p>Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat.</p>
+        <figure>
+            <img src="/images/dummy-image.png" alt="Image caption goes here">
+            <figcaption>Image caption goes here</figcaption>
+        </figure>
+        <p>Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla.</p>
+        <blockquote>
+            <p>"Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus."</p>
+        </blockquote>
+        <p>Tristique odio senectus nam posuere ornare leo metus, ultricies. Blandit duis ultricies vulputate morbi feugiat cras placerat elit. Aliquam tellus lorem sed ac. Montes, sed mattis pellentesque suscipit accumsan. Cursus viverra aenean magna risus elementum faucibus molestie pellentesque. Arcu ultricies sed mauris vestibulum.</p>
+    </section>
+    <section>
+        <h2>Conclusion</h2>
+        <p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.</p>
+        <p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.</p>
+        <p>Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor. Nulla adipiscing erat a erat. Condimentum lorem posuere gravida enim posuere cursus diam.</p>
+    </section>
+    <section>       
+            <span>MOM</span>
+            <span>FOOD</span>
+            <span>BOOKS</span>
+            <span>WORDPRESS</span>
+    </section>`,
   featured: '/images/news-1.jpg',
   slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
   author: 'John Doe',

app/pages/news-detail/index.tsx

@@ -40,11 +40,15 @@ export const NewsDetailPage = () => {
             <img
               src={featured}
               alt={title}
-              className="object-center"
+              className="h-[600px] w-full object-cover object-center"
             />
           </div>
 
-          <article className="prose prose-stone">{htmlParse(content)}</article>
+          <div className="mt-8 flex items-center justify-center">
+            <article className="prose prose-stone">
+              {htmlParse(content)}
+            </article>
+          </div>
           <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
             <div className="flex flex-col">
               <p className="mb-2">Share this post</p>