from-to search route

frontend/app/(urls)/news/[slug]/page.tsx

@@ -1,7 +1,54 @@
 import React from 'react'
+import Image from 'next/image'
+import { getNews } from '@/lib/main/fetchNews'
+import { notFound } from 'next/navigation'
 
-const page = () => {
-  return <div>page</div>
+interface PageProps {
+  params: Promise<{
+    slug: string
+  }>
 }
 
-export default page
+async function getNewsItem(slug: string) {
+  const news = await getNews()
+  return news.find(item => item.slug === slug)
+}
+
+export default async function NewsPage({ params }: PageProps) {
+  const { slug } = await params
+  const newsItem = await getNewsItem(slug)
+
+  if (!newsItem) {
+    notFound()
+  }
+
+  return (
+    <article className="mx-auto max-w-5xl px-4 py-8">
+      <div className="w-full overflow-hidden rounded-2xl bg-white shadow-lg">
+        <div className="relative h-[400px] w-full">
+          <Image
+            src={
+              newsItem.titleImage.startsWith('http')
+                ? newsItem.titleImage
+                : `http://127.0.0.1:8000${newsItem.titleImage}` || '/placeholder-image.jpg'
+            }
+            alt={newsItem.title}
+            fill
+            className="object-cover"
+            priority
+            sizes="(max-width: 1280px) 100vw, 1280px"
+          />
+          <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+            <h1 className="px-4 text-center text-4xl font-bold text-white md:text-5xl">
+              {newsItem.title}
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      <div className="prose prose-lg mt-8 max-w-none">
+        <div className="whitespace-pre-wrap">{newsItem.content}</div>
+      </div>
+    </article>
+  )
+}