Implemented tab title = current page

next.config.ts

@@ -7,6 +7,10 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "techmasters.space",
       },
+      {
+        protocol: "https",
+        hostname: "tech-masters.guru",
+      },
     ],
   },
 };

src/app/components/Header/Header.tsx

@@ -4,6 +4,8 @@ import { BellOutlined, UserOutlined } from "@ant-design/icons";
 import { Avatar, Button, Menu, MenuProps, Typography } from "antd";
 import { motion } from "framer-motion";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo } from "react";
 import styles from "./Header.module.css";
 
 const { Title } = Typography;
@@ -31,7 +33,41 @@ const items: MenuProps['items'] = [
   },
 ];
 
+const TITLE_SUFFIX = "Tech Masters";
+
 const Header = () => {
+  const pathname = usePathname();
+
+  const selectedKey = useMemo(() => {
+    if (!pathname || pathname === "/") return "home";
+    const key = pathname.split("/")[1];
+    return key || "home";
+  }, [pathname]);
+
+  const pageTitle = useMemo(() => {
+    switch (selectedKey) {
+      case "home":
+        return "Home";
+      case "services":
+        return "Services";
+      case "projects":
+        return "Projects";
+      case "about":
+        return "About";
+      case "contact":
+        return "Contact";
+      case "testimonials":
+        return "Testimonials";
+      default:
+        return null;
+    }
+  }, [selectedKey]);
+
+  useEffect(() => {
+    if (!pageTitle) return;
+    document.title = `${pageTitle} | ${TITLE_SUFFIX}`;
+  }, [pageTitle]);
+
   return (
     <header className={styles.header}>
       <div className={styles.headerContainer}>
@@ -68,7 +104,7 @@ const Header = () => {
               mode="horizontal" 
               items={items} 
               className={styles.menu}
-              selectedKeys={['home']}
+              selectedKeys={[selectedKey]}
             />
           </motion.div>
         </nav>

src/app/projects/page.tsx

@@ -5,7 +5,7 @@ import {
   EyeOutlined,
   LinkOutlined,
   RocketOutlined,
-  UserOutlined
+  UserOutlined,
 } from "@ant-design/icons";
 import {
   Badge,
@@ -403,8 +403,8 @@ export default function ProjectsPage() {
               Featured <span className={styles.gradientText}>Work</span>
             </Title>
             <Paragraph className={styles.projectsSubtitle}>
-              Discover our latest projects and see how we&apos;ve helped businesses
+              Discover our latest projects and see how we&apos;ve helped
-              achieve their digital transformation goals.
+              businesses achieve their digital transformation goals.
             </Paragraph>
           </motion.div>