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

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'

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