legalgo-FE-reactrouter/app/pages/news/index.tsx

import { Card } from '~/components/ui/card'
import { Carousel } from '~/components/ui/carousel'
import { Newsletter } from '~/components/ui/newsletter'

import { BERITA, KAJIAN, SPOTLIGHT } from './data'

export const NewsPage = () => {
  return (
    <div className="relative">
      <Card>
        <Carousel {...SPOTLIGHT} />
      </Card>
      <div className="min-h-[400px] sm:min-h-[300px]">
        <Newsletter className="mr-0 lg:-ml-14" />
      </div>
      <Card>
        <Carousel {...BERITA} />
      </Card>
      <Card>
        <Carousel {...KAJIAN} />
      </Card>
    </div>
  )
}