Merge pull request #10 from Sagargupta16/feat/community-polish

refactor: simplify site to single landing page

Author: Sagargupta16

site/src/App.tsx

@@ -2,9 +2,6 @@ import { Routes, Route } from 'react-router-dom'
 import Navbar from './components/Navbar'
 import Footer from './components/Footer'
 import Home from './pages/Home'
-import Calculator from './pages/Calculator'
-import BadgeChecker from './pages/BadgeChecker'
-import RepoAnalyzer from './pages/RepoAnalyzer'
 import styles from './App.module.css'
 
 function App() {
@@ -13,10 +10,7 @@ function App() {
       <Navbar />
       <main className={styles.main}>
         <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/calculator" element={<Calculator />} />
-          <Route path="/badge" element={<BadgeChecker />} />
-          <Route path="/analyzer" element={<RepoAnalyzer />} />
+          <Route path="/*" element={<Home />} />
         </Routes>
       </main>
       <Footer />

site/src/components/Navbar.tsx

@@ -1,47 +1,13 @@
-import { NavLink } from 'react-router-dom'
 import styles from './Navbar.module.css'
 
 function Navbar() {
   return (
     <nav className={styles.navbar}>
       <div className={styles.inner}>
-        <NavLink to="/" className={styles.logo}>
+        <a href="/" className={styles.logo}>
           Claude Cost Optimizer
-        </NavLink>
+        </a>
         <div className={styles.links}>
-          <NavLink
-            to="/"
-            end
-            className={({ isActive }) =>
-              isActive ? `${styles.link} ${styles.active}` : styles.link
-            }
-          >
-            Home
-          </NavLink>
-          <NavLink
-            to="/calculator"
-            className={({ isActive }) =>
-              isActive ? `${styles.link} ${styles.active}` : styles.link
-            }
-          >
-            Calculator
-          </NavLink>
-          <NavLink
-            to="/badge"
-            className={({ isActive }) =>
-              isActive ? `${styles.link} ${styles.active}` : styles.link
-            }
-          >
-            Badge
-          </NavLink>
-          <NavLink
-            to="/analyzer"
-            className={({ isActive }) =>
-              isActive ? `${styles.link} ${styles.active}` : styles.link
-            }
-          >
-            Repo Analyzer
-          </NavLink>
           <a
             href="https://github.com/Sagargupta16/claude-cost-optimizer"
             target="_blank"
@@ -50,6 +16,14 @@ function Navbar() {
           >
             GitHub
           </a>
+          <a
+            href="https://github.com/Sagargupta16/claude-cost-optimizer/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.link}
+          >
+            Discussions
+          </a>
         </div>
       </div>
     </nav>

site/src/pages/Home.tsx

@@ -1,5 +1,4 @@
 import { useState, useCallback } from 'react'
-import { Link } from 'react-router-dom'
 import styles from './Home.module.css'
 
 const INSTALL_CMD = 'npx skills add Sagargupta16/claude-cost-optimizer'
@@ -51,21 +50,21 @@ const benchmarks = [
   { task: 'Error boundary', before: 3454, after: 1040 },
 ]
 
-const tools = [
+const resources = [
   {
-    title: 'Repo Analyzer',
-    desc: 'Paste a GitHub URL. Get a cost audit, grade, and recommendations.',
-    link: '/analyzer',
+    title: '10 Optimization Guides',
+    desc: 'From getting started to three-tier task routing and prompt caching deep dives.',
+    link: 'https://github.com/Sagargupta16/claude-cost-optimizer/tree/main/guides',
   },
   {
-    title: 'Cost Calculator',
-    desc: 'Estimate monthly spend based on model, sessions, and config.',
-    link: '/calculator',
+    title: '10 CLAUDE.md Templates',
+    desc: 'Cost-optimized templates for React, Next.js, FastAPI, Go, Rust, Django, Rails, and more.',
+    link: 'https://github.com/Sagargupta16/claude-cost-optimizer/tree/main/templates/CLAUDE.md',
   },
   {
-    title: 'Badge Checker',
-    desc: 'Score your setup (A+ to F) and get a shields.io badge.',
-    link: '/badge',
+    title: '7 CLI Tools',
+    desc: 'Token estimator, usage analyzer, badge generator, MCP server, budget hooks, and more.',
+    link: 'https://github.com/Sagargupta16/claude-cost-optimizer/tree/main/tools',
   },
 ]
 
@@ -237,16 +236,22 @@ function Home() {
         </div>
       </section>
 
-      {/* Web Tools */}
+      {/* Resources */}
       <section className={styles.section}>
-        <h2 className={styles.sectionTitle}>Web Tools</h2>
+        <h2 className={styles.sectionTitle}>What's in the Repo</h2>
         <div className={styles.toolsGrid}>
-          {tools.map((t) => (
-            <Link key={t.title} to={t.link} className={styles.toolCard}>
-              <h3 className={styles.toolTitle}>{t.title}</h3>
-              <p className={styles.toolDesc}>{t.desc}</p>
-              <span className={styles.toolArrow}>Open</span>
-            </Link>
+          {resources.map((r) => (
+            <a
+              key={r.title}
+              href={r.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.toolCard}
+            >
+              <h3 className={styles.toolTitle}>{r.title}</h3>
+              <p className={styles.toolDesc}>{r.desc}</p>
+              <span className={styles.toolArrow}>View on GitHub</span>
+            </a>
           ))}
         </div>
       </section>
@@ -297,9 +302,14 @@ function Home() {
           >
             Discussions
           </a>
-          <Link to="/analyzer" className={styles.ctaLink}>
-            Repo Analyzer
-          </Link>
+          <a
+            href="https://github.com/Sagargupta16/claude-cost-optimizer/tree/main/guides"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.ctaLink}
+          >
+            Guides
+          </a>
         </div>
       </section>
     </div>