feat: improve website header UI and add dynamic github stars

website/next.config.ts

@@ -1,7 +1,10 @@
 import type { NextConfig } from "next";
+import pkg from "../packages/smooth-api-ts/package.json";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  env: {
+    NEXT_PUBLIC_TS_PKG_VERSION: pkg.version,
+  },
 };
 
 export default nextConfig;

website/src/app/page.tsx

@@ -30,6 +30,18 @@ type SimLog = {
 export default function Home() {
   const [activeSection, setActiveSection] = useState("introduction");
   const [codeLang, setCodeLang] = useState<"ts" | "py">("ts");
+  const [githubStars, setGithubStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    fetch("https://api.github.com/repos/AryanSharma48/smoothAPI")
+      .then((res) => res.json())
+      .then((data) => {
+        if (typeof data.stargazers_count === "number") {
+          setGithubStars(data.stargazers_count);
+        }
+      })
+      .catch((err) => console.error("Failed to fetch github stars:", err));
+  }, []);
 
   /*
   // Simulator States
@@ -164,14 +176,28 @@ export default function Home() {
     <div className="min-h-screen flex flex-col bg-[#0b0f19] text-slate-100 selection:bg-rose-500/30 selection:text-rose-200">
 
       {/* STICKY HEADER */}
-      <header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-800 bg-[#0b0f19]/80 backdrop-blur-md px-6 py-4">
+      <header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-800 bg-[#0b0f19]/80 backdrop-blur-md px-8 py-5">
         <div className="flex items-center space-x-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
-          <Image src="/logo.svg" alt="SmoothAPI Logo" width={180} height={40} priority className="h-8 w-auto" />
+          <Image src="/logo.svg" alt="SmoothAPI Logo" width={220} height={48} priority className="h-10 w-auto" />
         </div>
         <div className="flex items-center space-x-6">
-          <span className="text-xs font-mono px-2.5 py-1 bg-slate-800 rounded-md text-slate-400 border border-slate-700">v1.0.0</span>
-          <a href="https://github.com/AryanSharma48/smoothAPI" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-rose-500 transition-colors">
+          <span className="hidden sm:inline-block text-sm font-mono px-3 py-1.5 bg-slate-800 rounded-md text-slate-400 border border-slate-700">v{process.env.NEXT_PUBLIC_TS_PKG_VERSION || "1.0.0"}</span>
+          <a href="https://github.com/AryanSharma48/smoothAPI" target="_blank" rel="noreferrer" className="flex items-center space-x-2 bg-slate-800/80 hover:bg-slate-700 border border-slate-700 text-slate-300 hover:text-white text-base font-medium px-4 py-2 rounded-md transition-colors shadow-sm">
             <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"/></svg>
+            <span className="hidden sm:flex items-center">
+              how about a star?
+              <svg className="w-3.5 h-3.5 ml-1.5 opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
+              </svg>
+            </span>
+            {githubStars !== null && (
+              <span className="flex items-center pl-2 ml-1 border-l border-slate-600 font-mono font-bold text-sm">
+                <svg className="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+                </svg>
+                {githubStars.toLocaleString()}
+              </span>
+            )}
           </a>
         </div>
       </header>