.

apps/blogai/components/article/card.tsx

@@ -36,7 +36,7 @@ export const Card: React.FC<ArticleData> = (articleData) => {
     <article style={{ width: '100%', padding: '0px', border: '1px solid #fff', backgroundColor: '#f6f6f6', }}
       onClick={() => {
 
-        router.push(`/blog/${articleData.id}`, { scroll: false })
+        router.push(`/details/${articleData.id}`, { scroll: false })
       }}
 
       className="cursor-pointer rounded border border-[#243c5a] overflow-hidden"

apps/blogai/components/header.tsx

@@ -103,6 +103,70 @@ export function Header() {
 }
 
 
+export function DetailPageHeader() {
+  
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  const [userData, setUserData] = useLocalStorage(
+    'UserData',
+    {
+      auth_token: "",
+      id: 1,
+      login_ip: "",
+      login_time: 0,
+      role: "",
+      user_name: "",
+      version: ""
+    } as UserData
+  )
+
+  const soonFunc = () => {
+    message.info(t("soon"))
+  }
+//w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2
+  return (
+    <header className="sticky top-0 z-50 flex shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem] w-[80%]  mx-auto">
+
+      <a href="/">
+      <LogoAI className="flex text-center ml-0" />
+      </a>
+
+      <div className="flex items-center justify-between ">
+        <div className="flex items-center ">
+          {(!!userData && !!userData.user_name) ? (
+            <div className='flex text-[#1A1A1A]'>
+              <UserMenu user={userData} />
+            </div>
+
+          ) : (
+            <div className='flex gap-4 grid-cols-2 text-[#1A1A1A]'>
+              <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'>
+                <Link href="/#subscribe-target"
+                >
+                  {t('subscribe.subscribe')}
+                </Link>
+              </Button>
+
+
+              <LoginButton
+                variant="ghost"
+                // variant="link"
+                showGithubIcon={true}
+                text={t('login')}
+                className="-ml-2 text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]"
+              />
+            </div>
+
+
+          )}
+        </div>
+      </div>
+
+    </header>
+  )
+}
+
 // export function Header() {
   
 //   const router = useRouter();