From 0a6731ad2ed79dc291060ad2fbaf907e31a598e8 Mon Sep 17 00:00:00 2001
From: zihluwang <real@zihluwang.me>
Date: Fri, 16 Jan 2026 10:57:16 +0800
Subject: [PATCH] feat: enhance About and Contact pages with new content and
 layout updates

- Added GitHub and deployment information to the About page, including links and self-hosting instructions.
- Updated the Contact page to emphasize transparency in the development process with improved text styling.
- Removed outdated sections to streamline content presentation.
---
 src/layout/hero-layout/index.tsx |   2 +-
 src/page/about/index.tsx         | 134 ++++++++++---------------------
 src/page/contact/index.tsx       |   4 +-
 3 files changed, 44 insertions(+), 96 deletions(-)

diff --git a/src/layout/hero-layout/index.tsx b/src/layout/hero-layout/index.tsx
index c1ffde4..5f92388 100644
--- a/src/layout/hero-layout/index.tsx
+++ b/src/layout/hero-layout/index.tsx
@@ -1,4 +1,4 @@
-import { Outlet, Link } from "react-router-dom"
+import { Outlet, Link, useLocation } from "react-router-dom"
 import { useMemo } from "react"
 import dayjs from "dayjs"
 
diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx
index 734ac78..757afa0 100644
--- a/src/page/about/index.tsx
+++ b/src/page/about/index.tsx
@@ -13,68 +13,47 @@ export default function About() {
         </p>
       </div>
 
-      {/* Content Sections */}
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        {/* Technology Stack */}
-        <div className="bg-white shadow rounded-lg p-6 border border-gray-100">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
-            <span className="mr-2">🛠️</span> Technology Stack
-          </h2>
-          <ul className="space-y-3">
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">
-                <strong>React 19 & TS</strong> - Type-safe UI components
-              </span>
-            </li>
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">
-                <strong>jsonpath</strong> - Robust query engine for data extraction
-              </span>
-            </li>
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">
-                <strong>Tailwind CSS</strong> - Modern, responsive styling
-              </span>
-            </li>
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">
-                <strong>Vite</strong> - Optimised build pipeline and dev experience
-              </span>
-            </li>
-          </ul>
-        </div>
-
-        {/* Features */}
-        <div className="bg-white shadow rounded-lg p-6 border border-gray-100">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
-            <span className="mr-2">🚀</span> Key Features
-          </h2>
-          <ul className="space-y-3">
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">
-                Interactive <strong>collapsible</strong> tree navigation
-              </span>
-            </li>
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">
-                Real-time JSONPath field <strong>highlighting</strong>
-              </span>
-            </li>
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">One-click copy for matched results</span>
-            </li>
-            <li className="flex items-center">
-              <span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
-              <span className="text-gray-700">Zero-latency local processing</span>
-            </li>
-          </ul>
+      {/* GitHub & Deployment */}
+      <div className="bg-white shadow rounded-lg p-6 border border-gray-100">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
+          <span className="mr-2">📦</span> Open Source & Deployment
+        </h2>
+        <div className="space-y-4 text-gray-700">
+          <p>
+            This project is open source and available on GitHub. You can view the source code,
+            contribute, or deploy your own instance.
+          </p>
+          <div className="flex items-center gap-3">
+            <a
+              href="https://github.com/onixbyte/json-visualiser"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colours font-medium">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fillRule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              View on GitHub
+            </a>
+          </div>
+          <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+            <p className="text-amber-900">
+              <strong>⭐ Star us on GitHub:</strong> If you find this project helpful, we'd greatly
+              appreciate it if you could give us a star on GitHub. It helps others discover the
+              project and motivates us to keep improving!
+            </p>
+          </div>
+          <div className="bg-blue-50 border border-blue-100 rounded-lg p-4 mt-4">
+            <p className="text-blue-900">
+              <strong>💡 Self-Hosting:</strong> You can deploy this application yourself! The
+              repository includes all necessary configuration files. Simply clone the repository,
+              install dependencies, and deploy to your preferred hosting platform (Vercel, Netlify,
+              or any static hosting service).
+            </p>
+          </div>
         </div>
       </div>
 
@@ -90,37 +69,6 @@ export default function About() {
           server, ensuring that sensitive configuration or user data remains entirely private.
         </p>
       </div>
-
-      {/* Architecture Overview */}
-      <div className="bg-white shadow rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
-          <span className="mr-2">🏗️</span> Architecture Overview
-        </h2>
-        <div className="prose max-w-none text-gray-700">
-          <p className="mb-4">
-            The application follows a modular React architecture focused on performance and
-            maintainability:
-          </p>
-          <ul className="list-disc list-inside space-y-2 mb-4">
-            <li>
-              <strong>Recursive Renderer:</strong> A high-performance component tree that handles
-              massive JSON objects without blocking the main thread.
-            </li>
-            <li>
-              <strong>JSONPath Integration:</strong> Standardised path evaluation using the{" "}
-              <code>jsonpath</code> library, ensuring cross-platform query compatibility.
-            </li>
-            <li>
-              <strong>State Management:</strong> Efficient use of React hooks and useMemo to ensure
-              real-time UI updates during text entry.
-            </li>
-          </ul>
-          <p>
-            Hosted on Vercel, this visualiser leverages modern edge deployment whilst strictly
-            adhering to the local-first data processing principle.
-          </p>
-        </div>
-      </div>
     </div>
   )
 }
diff --git a/src/page/contact/index.tsx b/src/page/contact/index.tsx
index 62f4239..54b2ce1 100644
--- a/src/page/contact/index.tsx
+++ b/src/page/contact/index.tsx
@@ -53,8 +53,8 @@ ${message}
             </h2>
             <p className="text-gray-600 leading-relaxed">
               We use GitHub to track all bug reports and feature requests. This ensures our
-              development process remains **transparent** and that your feedback is properly
-              prioritised by the community.
+              development process remains <span className="font-bold">transparent</span> and that
+              your feedback is properly prioritised by the community.
             </p>
           </section>