feat: refactor news components and add news detail layout

app/routes/_layout.news.$slug.tsx

@@ -0,0 +1,7 @@
+import { NewsDetailPage } from '~/pages/news-detail'
+
+const NewsDetailLayout = () => {
+  return <NewsDetailPage />
+}
+
+export default NewsDetailLayout

app/routes/_layout.news.tsx

@@ -1,5 +1,6 @@
 import { Outlet } from 'react-router'
 
+import { Banner } from '~/components/ui/banner'
 import { FooterLinks } from '~/layouts/footer-links'
 import { FooterNewsletter } from '~/layouts/footer-newsletter'
 import { HeaderMenu } from '~/layouts/header-menu'
@@ -13,11 +14,7 @@ const NewsLayout = () => {
         <HeaderMenu />
       </header>
       <div className="grid sm:mx-[50px] sm:my-[25px] sm:gap-y-[25px]">
-        <img
-          src="/images/banner.png"
-          alt="banner"
-          className="h-[50px] w-full object-fill sm:h-[100px] sm:object-contain"
-        />
+        <Banner />
         <Outlet />
       </div>