Updated three blog title and wide screen layout.

app/blog/[slug]/page.tsx

@@ -79,7 +79,7 @@ export default async function Post({ params }: Props) {
   const { date, time, author } = postData;
 
   return (
-    params.slug === 'the-3vs-of-bigdata' ? <ThreeVs /> : (
+    params.slug === 'the-threeVs-of-data' ? <ThreeVs /> : (
       <>
         <section className='m-auto max-w-lg px-5 py-14 lg:max-w-6xl'>
           {/* Post Title */}

app/blog/layout.tsx

@@ -7,13 +7,13 @@ import { usePathname } from "next/navigation";
 
 export default function Layout({ children }: PropsWithChildren) {
   const pathname = usePathname();
-  const isMainBlogPage = pathname !== '/blog/the-3vs-of-bigdata';
+  const isMainBlogPage = pathname !== '/blog/the-threeVs-of-data';
 
   return (
     <main>
-      {pathname !== '/blog/the-3vs-of-bigdata' && <Navbar />}
+      {pathname !== '/blog/the-threeVs-of-data' && <Navbar />}
       {children}
-      {pathname !== '/blog/the-3vs-of-bigdata' && <Footer />}
+      {pathname !== '/blog/the-threeVs-of-data' && <Footer />}
     </main>
   );
 }

components/navbar-tp.tsx

@@ -42,9 +42,9 @@ const MenuButton = () => {
 
 const Navbar = ({ showMenu }: { showMenu?: boolean }) => {
   return (
-    <header className={`z-30 ${showMenu ? 'grid md:hidden' : 'hidden md:grid'} grid-cols-12 2xl:px-24 h-18 ${showMenu ? 'absolute' : 'fixed'} top-0 left-0 right-0`}>
+    <header className={`z-30 ${showMenu ? 'grid md:hidden' : 'hidden md:grid'} grid-cols-12 h-18 ${showMenu ? 'absolute' : 'fixed'} top-0 left-0 right-0`}>
       {!showMenu ? <div className='header-mask pointer-events-none absolute inset-0'></div> : null}
-      <div className='z-[1] col-end-[-2] col-start-2 flex items-center justify-between'>
+      <div className='z-[1] col-end-[-2] col-start-2 flex items-center justify-between mx-auto w-full 2xl:max-w-[1345px]'>
         <a href="/" className='grow text-white'>
           <svg role="img" className='w-24 h-16' aria-label="Tetmon logo" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m23 0-6.64 3.91 9.31 5.48-15.47 9.1v4.11l6 3.46v-3.7l16.1-9.43 6.57 3.95-.08 14.63 6.16-3.71.12-14.74zm22 39.57v-7.67l-9.47 5.18.1-17.95-3.47-2.13-6 3.37 3.17 1.9-.15 18.65-6.76 3.61-12.54-7.53v7.19l12.6 7.67zm-45-.79 6.69 3.76.08-10.81 15.63 8.84 3.56-2v-6.97l-3.21 1.86-16.21-9.22.13-7.66 12.7-7.25-6.29-3.48-12.83 7.27z" fillRule="evenodd"></path><path d="m75 19.45v17.37h-4.76v-17.37h-6.64v-4.45h18.07v4.43z"></path><path d="m85.49 36.82v-21.82h16.41v4.27h-11.68v4.42h10.28v4.31h-10.28v4.58h11.84v4.26z"></path><path d="m116.37 19.45v17.37h-4.79v-17.37h-6.64v-4.45h18.06v4.43z"></path><path d="m143.9 36.82v-14.23l-6.14 9.31h-.12l-6.08-9.22v14.14h-4.73v-21.82h5.17l5.73 9.22 5.73-9.22h5.17v21.8z"></path><path d="m175.34 30.3a11.13 11.13 0 0 1 -6.09 6 12.57 12.57 0 0 1 -9.29 0 11.4 11.4 0 0 1 -3.66-2.4 10.61 10.61 0 0 1 -2.4-3.55 11.2 11.2 0 0 1 -.9-4.35v-.07a11 11 0 0 1 .87-4.37 11.32 11.32 0 0 1 2.46-3.56 11.2 11.2 0 0 1 3.67-2.46 11.91 11.91 0 0 1 4.66-.89 11.77 11.77 0 0 1 8.3 3.28 10.76 10.76 0 0 1 2.4 3.56 11.17 11.17 0 0 1 .86 4.37v.06a11.05 11.05 0 0 1 -.88 4.38zm-4.14-4.38a7.27 7.27 0 0 0 -.48-2.64 6.56 6.56 0 0 0 -1.37-2.18 6.44 6.44 0 0 0 -2.11-1.48 6.24 6.24 0 0 0 -2.64-.55 6.59 6.59 0 0 0 -2.67.53 6.14 6.14 0 0 0 -2.05 1.46 7 7 0 0 0 -1.34 2.17 7.18 7.18 0 0 0 -.48 2.63v.06a7.29 7.29 0 0 0 .48 2.65 6.57 6.57 0 0 0 3.46 3.66 6.39 6.39 0 0 0 2.66.55 6.64 6.64 0 0 0 2.65-.53 6 6 0 0 0 2.07-1.47 6.83 6.83 0 0 0 1.34-2.16 7.18 7.18 0 0 0 .48-2.62z"></path><path d="m195.92 36.82-10.56-13.82v13.82h-4.73v-21.82h4.42l10.22 13.43v-13.43h4.73v21.8z"></path></g></svg>
         </a>

components/navbar.tsx

@@ -25,7 +25,7 @@ const Navbar = () => {
   return (
     <header className={`sticky top-0 z-30 grid grid-cols-12 border-b bg-white ${isWhite ? 'border-transparent' : 'border-gray-200'} 2xl:px-24`}>
       <div className='header-mask pointer-events-none absolute inset-0'></div>
-      <div className='z-[1] col-end-[-2] col-start-2 flex items-center justify-between' style={{ color: isWhite ? "#ffffff" : "#215f74" }}>
+      <div className='z-[1] col-end-[-2] col-start-2 flex items-center justify-between mx-auto w-full max-w-[1235px]' style={{ color: isWhite ? "#ffffff" : "#215f74" }}>
         <a href="/" className='grow'>
           <svg role="img" className='w-24 h-16' aria-label="Tetmon logo" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m23 0-6.64 3.91 9.31 5.48-15.47 9.1v4.11l6 3.46v-3.7l16.1-9.43 6.57 3.95-.08 14.63 6.16-3.71.12-14.74zm22 39.57v-7.67l-9.47 5.18.1-17.95-3.47-2.13-6 3.37 3.17 1.9-.15 18.65-6.76 3.61-12.54-7.53v7.19l12.6 7.67zm-45-.79 6.69 3.76.08-10.81 15.63 8.84 3.56-2v-6.97l-3.21 1.86-16.21-9.22.13-7.66 12.7-7.25-6.29-3.48-12.83 7.27z" fillRule="evenodd"></path><path d="m75 19.45v17.37h-4.76v-17.37h-6.64v-4.45h18.07v4.43z"></path><path d="m85.49 36.82v-21.82h16.41v4.27h-11.68v4.42h10.28v4.31h-10.28v4.58h11.84v4.26z"></path><path d="m116.37 19.45v17.37h-4.79v-17.37h-6.64v-4.45h18.06v4.43z"></path><path d="m143.9 36.82v-14.23l-6.14 9.31h-.12l-6.08-9.22v14.14h-4.73v-21.82h5.17l5.73 9.22 5.73-9.22h5.17v21.8z"></path><path d="m175.34 30.3a11.13 11.13 0 0 1 -6.09 6 12.57 12.57 0 0 1 -9.29 0 11.4 11.4 0 0 1 -3.66-2.4 10.61 10.61 0 0 1 -2.4-3.55 11.2 11.2 0 0 1 -.9-4.35v-.07a11 11 0 0 1 .87-4.37 11.32 11.32 0 0 1 2.46-3.56 11.2 11.2 0 0 1 3.67-2.46 11.91 11.91 0 0 1 4.66-.89 11.77 11.77 0 0 1 8.3 3.28 10.76 10.76 0 0 1 2.4 3.56 11.17 11.17 0 0 1 .86 4.37v.06a11.05 11.05 0 0 1 -.88 4.38zm-4.14-4.38a7.27 7.27 0 0 0 -.48-2.64 6.56 6.56 0 0 0 -1.37-2.18 6.44 6.44 0 0 0 -2.11-1.48 6.24 6.24 0 0 0 -2.64-.55 6.59 6.59 0 0 0 -2.67.53 6.14 6.14 0 0 0 -2.05 1.46 7 7 0 0 0 -1.34 2.17 7.18 7.18 0 0 0 -.48 2.63v.06a7.29 7.29 0 0 0 .48 2.65 6.57 6.57 0 0 0 3.46 3.66 6.39 6.39 0 0 0 2.66.55 6.64 6.64 0 0 0 2.65-.53 6 6 0 0 0 2.07-1.47 6.83 6.83 0 0 0 1.34-2.16 7.18 7.18 0 0 0 .48-2.62z"></path><path d="m195.92 36.82-10.56-13.82v13.82h-4.73v-21.82h4.42l10.22 13.43v-13.43h4.73v21.8z"></path></g></svg>
         </a>