From 176033f1e9a4e57e24bfea579cf3e564487ba98b Mon Sep 17 00:00:00 2001
From: Shraddha Bonde <skbonde05@gmail.com>
Date: Tue, 6 Jan 2026 13:18:59 +0530
Subject: [PATCH] Improve navigation clarity with active routes and page layout

---
 .../Dashboard/V1/Component/Pages/HomePage.tsx | 107 ++++++++++--------
 .../src/shared/component/v1/Navbar.tsx        |   4 +-
 .../src/shared/component/v1/PageLayout.tsx    |  24 ++++
 3 files changed, 89 insertions(+), 46 deletions(-)
 create mode 100644 LocalMind-Frontend/src/shared/component/v1/PageLayout.tsx

diff --git a/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/HomePage.tsx b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/HomePage.tsx
index ed4259d..4c95619 100644
--- a/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/HomePage.tsx
+++ b/LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/HomePage.tsx
@@ -1,25 +1,30 @@
 import { useEffect, useState } from 'react'
+
 import tubeImg from '../../../../../assets/tubeImg.png'
 import blobImg from '../../../../../assets/blobImg.png'
 import waveImg from '../../../../../assets/waveImg.png'
 import dotShadowImg from '../../../../../assets/dotShadowImg.png'
 import globeImg from '../../../../../assets/globeImg.png'
 import linesImg from '../../../../../assets/linesImg.png'
+
 import Card from '../../../../../shared/component/v1/Card'
 import type { CardProps } from '../../../../../types/Interfaces'
 import InlineLoader from '../Loader/InlineLoader'
 import EmptyState from '../EmptyState'
+import PageLayout from '../../../../../shared/component/v1/PageLayout'
+
 import gsap from 'gsap'
 import { ScrollTrigger, SplitText } from 'gsap/all'
 import { useGSAP } from '@gsap/react'
 
+
 gsap.registerPlugin(ScrollTrigger, SplitText)
 
 const HomePage: React.FC = () => {
   const [features, setFeatures] = useState<CardProps[]>([])
   const [isLoading, setIsLoading] = useState(true)
 
-  // Simulate async fetch (realistic frontend pattern)
+  // Simulate async fetch
   useEffect(() => {
     const timer = setTimeout(() => {
       setFeatures([
@@ -48,6 +53,7 @@ const HomePage: React.FC = () => {
 
   useGSAP(() => {
     const split = new SplitText('.about-para', { type: 'words' })
+
     gsap.from(split.words, {
       opacity: 0,
       y: 20,
@@ -64,56 +70,67 @@ const HomePage: React.FC = () => {
   }, [])
 
   return (
-    <div className="relative min-h-screen w-full bg-[#1E1E1E] text-white overflow-hidden">
-      <div className="w-full h-screen relative">
-        <img
-          className="w-full h-full absolute top-0 left-0 object-cover object-[25%_55%]"
-          src={globeImg}
-          alt="bgImage"
-        />
-        <div className="absolute top-0 left-0 z-20 w-full flex flex-col gap-y-75 items-center justify-center h-full">
-          <h1 className="font-Fontspring text-6xl mt-15">Local Mind</h1>
-          <p className="uppercase font-Satoshi font-bold leading-15 text-4xl w-1/2 text-center">
-            "Build For Speed. Designed For Intelligence."
-          </p>
+    <PageLayout
+      title="Local AI Chat"
+      subtitle="Interact with your local language models"
+    >
+      <div className="relative min-h-screen w-full bg-[#1E1E1E] text-white overflow-hidden">
+        {/* Hero Section */}
+        <div className="w-full h-screen relative">
+          <img
+            className="w-full h-full absolute top-0 left-0 object-cover object-[25%_55%]"
+            src={globeImg}
+            alt="Background globe"
+          />
+
+          <div className="absolute top-0 left-0 z-20 w-full flex flex-col gap-y-10 items-center justify-center h-full">
+            <h1 className="font-Fontspring text-6xl mt-15">Local Mind</h1>
+            <p className="uppercase font-Satoshi font-bold leading-15 text-4xl w-1/2 text-center">
+              "Build For Speed. Designed For Intelligence."
+            </p>
+          </div>
+
+          <img src={linesImg} alt="" className="absolute w-full -bottom-15" />
         </div>
-        <img src={linesImg} alt="" className="absolute w-full -bottom-15" />
-      </div>
 
-      {/* Features Section (Loading / Empty / Data) */}
-      <div className="py-20 px-10">
-        {isLoading && <InlineLoader />}
+        {/* Features Section */}
+        <div className="py-20 px-10">
+          {isLoading && <InlineLoader />}
 
-        {!isLoading && features.length === 0 && (
-          <EmptyState
-            title="No features found"
-            description="Features will appear here once available."
-          />
-        )}
+          {!isLoading && features.length === 0 && (
+            <EmptyState
+              title="No features found"
+              description="Features will appear here once available."
+            />
+          )}
 
-        {!isLoading && features.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {features.map((feature, index) => (
-              <Card key={feature.title} {...feature} />
-            ))}
-          </div>
-        )}
-      </div>
+          {!isLoading && features.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {features.map((feature) => (
+                <Card key={feature.title} {...feature} />
+              ))}
+            </div>
+          )}
+        </div>
 
-      <div className="about w-full min-h-screen relative flex flex-col justify-center pt-10 font-Satoshi">
-        <h1 className="text-white text-center uppercase text-3xl tracking-wider font-bold">
-          About
-        </h1>
-        <p className="about-para w-2/3 mx-auto text-center text-xl mt-15">
-          LocalMind is a free, open-source platform made for students, developers, and anyone who
-          wants to use AI without paying expensive fees or worrying about usage limits.
-        </p>
-        <p className="about-para w-2/3 mx-auto text-center text-xl mt-15">
-          With LocalMind, you can run powerful AI models directly on your computer or connect to
-          cloud models using your own API key.
-        </p>
+        {/* About Section */}
+        <div className="about w-full min-h-screen relative flex flex-col justify-center pt-10 font-Satoshi">
+          <h1 className="text-white text-center uppercase text-3xl tracking-wider font-bold">
+            About
+          </h1>
+
+          <p className="about-para w-2/3 mx-auto text-center text-xl mt-15">
+            LocalMind is a free, open-source platform made for students, developers, and anyone who
+            wants to use AI without paying expensive fees or worrying about usage limits.
+          </p>
+
+          <p className="about-para w-2/3 mx-auto text-center text-xl mt-15">
+            With LocalMind, you can run powerful AI models directly on your computer or connect to
+            cloud models using your own API key.
+          </p>
+        </div>
       </div>
-    </div>
+    </PageLayout>
   )
 }
 
diff --git a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
index bfe080a..1637a1b 100644
--- a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
+++ b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
@@ -4,7 +4,9 @@ import { NavLink } from 'react-router-dom'
 
 const Navbar: React.FC = () => {
   const navLinkClass = ({ isActive }: { isActive: boolean }) =>
-    isActive ? 'text-white line-through opacity-80' : 'text-white'
+  isActive
+    ? 'text-blue-400 font-semibold underline underline-offset-8'
+    : 'text-white hover:text-blue-300 transition-colors'
 
   return (
     <div className="fixed top-2 left-1/2 z-30 flex gap-x-50 items-center justify-between -translate-x-1/2 bg-zinc-900/40 backdrop-blur-md px-5 py-2 rounded-full border border-zinc-500/50 text-white">
diff --git a/LocalMind-Frontend/src/shared/component/v1/PageLayout.tsx b/LocalMind-Frontend/src/shared/component/v1/PageLayout.tsx
new file mode 100644
index 0000000..0d49340
--- /dev/null
+++ b/LocalMind-Frontend/src/shared/component/v1/PageLayout.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+type Props = {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+};
+
+const PageLayout: React.FC<Props> = ({ title, subtitle, children }) => {
+  return (
+    <div className="pt-24 px-8 max-w-7xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-white">{title}</h1>
+        {subtitle && (
+          <p className="text-zinc-400 mt-2">{subtitle}</p>
+        )}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default PageLayout;