feat: refactor DUMMY to APP and add meta title configuration for improved SEO

app/pages/news/footer-links.tsx

@@ -1,7 +1,8 @@
 import { Link } from 'react-router'
 
-import { DUMMY } from '~/data/dummy'
-import { COPYRIGHT_MENU, FOOTER_MENU } from '~/data/menu'
+import { APP } from '~/data/dummy'
+
+import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
 
 export const FooterLinks = () => {
   return (
@@ -36,7 +37,7 @@ export const FooterLinks = () => {
       </div>
       <div className="flex justify-between border-t border-white pt-8 text-sm">
         <div>
-          {new Date().getFullYear()} {DUMMY.title}. All rights reserved.
+          {new Date().getFullYear()} {APP.title}. All rights reserved.
         </div>
         <div className="flex gap-6">
           {COPYRIGHT_MENU.map(({ url, title }, index) => (

app/pages/news/footer-newsletter.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import { DUMMY } from '~/data/dummy'
+import { APP } from '~/data/dummy'
 
 export const FooterNewsletter = () => {
   return (
@@ -12,8 +12,8 @@ export const FooterNewsletter = () => {
           className="h-full"
         >
           <img
-            src={DUMMY.logo}
-            alt={DUMMY.title}
+            src={APP.logo}
+            alt={APP.title}
             className="h-full w-auto"
           />
         </Link>

app/pages/news/header-menu.tsx

@@ -1,8 +1,7 @@
 import { Link } from 'react-router'
 
-import { MENU } from '~/data/menu'
-
 import { HeaderSearch } from './header-search'
+import { MENU } from './menu'
 
 export const HeaderMenu = () => {
   return (

app/pages/news/header-top.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import { DUMMY } from '~/data/dummy'
+import { APP } from '~/data/dummy'
 
 export const HeaderTop = () => {
   return (
@@ -11,13 +11,13 @@ export const HeaderTop = () => {
         className="h-full py-[5px]"
       >
         <img
-          src={DUMMY.logo}
-          alt={DUMMY.title}
+          src={APP.logo}
+          alt={APP.title}
           className="h-full w-auto"
         />
       </Link>
       <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
-        {DUMMY.description}
+        {APP.description}
       </div>
       <div className="flex items-center gap-[15px]">
         <Button>About Us</Button>

app/pages/news/menu.ts

@@ -0,0 +1,140 @@
+import type { JSX } from 'react'
+
+import { FacebookIcon } from '~/components/icons/facebook'
+import { InstagramIcon } from '~/components/icons/instagram'
+import { LinkedinIcon } from '~/components/icons/linkedin'
+import { XIcon } from '~/components/icons/x'
+
+export const MENU = [
+  {
+    title: 'Spotlight',
+    url: '/news/topic?category=spotlight',
+  },
+  {
+    title: 'Berita',
+    url: '/news/topic?category=berita',
+  },
+  {
+    title: 'Kasus',
+    url: '/news/topic?category=kasus',
+  },
+  {
+    title: 'Kajian',
+    url: '/news/topic?category=kajian',
+  },
+  {
+    title: 'Lifestyle',
+    url: '/news/topic?category=lifestyle',
+  },
+  {
+    title: 'Event',
+    url: '/news/topic?category=event',
+  },
+  {
+    title: 'Travel',
+    url: '/news/topic?category=travel',
+  },
+]
+
+type FooterMenu = {
+  group: string
+  items: Array<{
+    title: string
+    url: string
+    icon?: (
+      properties: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+    ) => JSX.Element
+  }>
+}
+export const FOOTER_MENU: FooterMenu[] = [
+  {
+    group: 'About Us',
+    items: [
+      {
+        title: 'Popular',
+        url: '/news/list?sort=popular',
+      },
+      {
+        title: 'Trending',
+        url: '/news/list?sort=trending',
+      },
+      {
+        title: 'Contact',
+        url: '/news/contact',
+      },
+      {
+        title: 'Support/Help',
+        url: '/news/support',
+      },
+      {
+        title: 'Rquest Topic',
+        url: '/news/request-topic',
+      },
+    ],
+  },
+  {
+    group: 'Column Two',
+    items: [
+      {
+        title: 'FAQs',
+        url: '/news/faq',
+      },
+      {
+        title: 'Terms and Condition',
+        url: '/news/terms-condition',
+      },
+      {
+        title: 'Support',
+        url: '/news/support',
+      },
+      {
+        title: 'Link Nine',
+        url: '/news',
+      },
+      {
+        title: 'Link Ten',
+        url: '/news',
+      },
+    ],
+  },
+  {
+    group: 'Follow Us',
+    items: [
+      {
+        title: 'Facebook',
+        icon: FacebookIcon,
+        url: 'https://facebook.com',
+      },
+      {
+        title: 'Instagram',
+        icon: InstagramIcon,
+        url: 'https://instagram.com',
+      },
+      {
+        title: 'X',
+        icon: XIcon,
+        url: 'https://x.com',
+      },
+      {
+        title: 'Linkedin',
+        icon: LinkedinIcon,
+        url: 'https://linkedin.com',
+      },
+    ],
+  },
+]
+
+export const COPYRIGHT_MENU = [
+  {
+    title: 'Privacy Policy',
+    url: '/news/privacy-policy',
+  },
+  {
+    title: 'Terms of Service',
+    url: '/news/terms-of-service',
+  },
+  {
+    title: 'Cookies Settings',
+    url: '/news/cookies-settings',
+  },
+]