feat: restructure News layout with new header and footer components; remove redundant files

app/pages/news/index.tsx

@@ -1,31 +1,7 @@
-import React, { type FC, type PropsWithChildren } from 'react'
+export const NewsPage = () => {
-
-import { FooterLinks } from './footer-links'
-import { FooterNewsletter } from './footer-newsletter'
-import { HeaderMenu } from './header-menu'
-import { HeaderTop } from './header-top'
-
-export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <main className="relative min-h-dvh bg-[#ECECEC]">
+    <div className="border-[.2px] border-black bg-white p-[30px]">
-      <header>
+      <div>News</div>
-        <HeaderTop />
+    </div>
-        <HeaderMenu />
-      </header>
-      <div className="mx-[50px] my-[25px] grid gap-y-[25px]">
-        <img
-          src="/images/banner.png"
-          alt="banner"
-          className="h-[100px] w-full object-contain"
-        />
-        <div className="border-[.2px] border-black bg-white p-[30px]">
-          {children}
-        </div>
-      </div>
-      <footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
-        <FooterNewsletter />
-        <FooterLinks />
-      </footer>
-    </main>
   )
 }

app/routes/_layout.news._index.tsx

@@ -1,5 +1,7 @@
+import { NewsPage } from '~/pages/news'
+
 const NewsIndexLayout = () => {
-  return <div>News</div>
+  return <NewsPage />
 }
 
 export default NewsIndexLayout

app/routes/_layout.news.tsx

@@ -1,12 +1,30 @@
 import { Outlet } from 'react-router'
 
-import { NewsPage } from '~/pages/news'
+import { FooterLinks } from '~/layouts/footer-links'
+import { FooterNewsletter } from '~/layouts/footer-newsletter'
+import { HeaderMenu } from '~/layouts/header-menu'
+import { HeaderTop } from '~/layouts/header-top'
 
 const NewsLayout = () => {
   return (
-    <NewsPage>
+    <main className="relative min-h-dvh bg-[#ECECEC]">
-      <Outlet />
+      <header>
-    </NewsPage>
+        <HeaderTop />
+        <HeaderMenu />
+      </header>
+      <div className="mx-[50px] my-[25px] grid gap-y-[25px]">
+        <img
+          src="/images/banner.png"
+          alt="banner"
+          className="h-[100px] w-full object-contain"
+        />
+        <Outlet />
+      </div>
+      <footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
+        <FooterNewsletter />
+        <FooterLinks />
+      </footer>
+    </main>
   )
 }