feat: implement carousel components for news section and update layout styles

app/pages/news/index.tsx

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