feat: add KAJIAN section to news page and update content structure

app/pages/news-detail/index.tsx

@@ -4,13 +4,14 @@ import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { IconsSocial } from '~/components/ui/social-share'
+import { BERITA } from '~/data/contents'
 
-import { BERITA, CONTENT } from './data'
+import { CONTENT } from './data'
 
 export const NewsDetailPage = () => {
   const { title, content, featured, slug, author, date, tags } = CONTENT
   return (
-    <div className="relative mx-5 sm:mx-10">
+    <div className="sm-max:mx-5 relative">
       <Card>
         <div className="py-5 sm:px-30">
           <Breadcrumb slug={slug} />
@@ -80,7 +81,7 @@ export const NewsDetailPage = () => {
         </div>
       </Card>
 
-      <Card className="hidden sm:block">
+      <Card className="bg-white p-5 max-sm:hidden">
         <CarouselSection {...BERITA} />
       </Card>
     </div>

app/pages/news/index.tsx

@@ -2,7 +2,7 @@ import { Card } from '~/components/ui/card'
 import { CarouselHero } from '~/components/ui/carousel-hero'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { Newsletter } from '~/components/ui/newsletter'
-import { BERITA, SPOTLIGHT } from '~/data/contents'
+import { BERITA, KAJIAN, SPOTLIGHT } from '~/data/contents'
 
 export const NewsPage = () => {
   return (
@@ -13,9 +13,14 @@ export const NewsPage = () => {
       <div className="min-h-[400px] sm:min-h-[300px]">
         <Newsletter className="mr-0 sm:-ml-14" />
       </div>
-      <Card>
-        <CarouselSection {...BERITA} />
-      </Card>
+      <div>
+        <Card>
+          <CarouselSection {...BERITA} />
+        </Card>
+        <Card>
+          <CarouselSection {...KAJIAN} />
+        </Card>
+      </div>
     </div>
   )
 }