feat: build landing page for codectx.granth.tech

[Srujan-Amaragatti05]

Closes #2

[vercel]

@Srujan-Amaragatti05 is attempting to deploy a commit to the hey-granth's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for codectx ready!

Name	Link
🔨 Latest commit	65c3762
🔍 Latest deploy log	https://app.netlify.com/projects/codectx/deploys/69ff631be2e6d900085932e1
😎 Deploy Preview	https://deploy-preview-6--codectx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Srujan-Amaragatti05]

Hi @hey-granth! The landing page is ready for review. Netlify preview is live at https://deploy-preview-6--codectx.netlify.app/ — built from scratch with animated terminal demo, pepy.tech download stats, problem/solution prose section, before/after comparison, and benchmark table. Closes #2.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[hey-granth]

Great first contribution. The structure is solid: the before/after comparison, benchmark table, problem/solution split, pipeline diagram, and hero copy ("Feed LLMs signal, not noise") are all correct decisions. The green accent, footer, and nav are good as-is. The revision pass needed is execution quality, not structure.

---

Blocking

Deployment preview is broken
The preview link is not loading. Please share the build logs from the failed deploy so this can be diagnosed before merge.

Terminal animation uses fake output
The hero terminal output is scripted with invented numbers. Visitors will install codectx and see different output, which breaks trust immediately. Replace with actual output from a real, named repo.

Options:

• Record with asciinema and embed via asciinema-player
• Build a typewriter animation driven by real captured output, noting the source repo (e.g. # running on fastapi/fastapi)

Text contrast fails readability
Muted gray text on dark background likely fails WCAG AA (4.5:1 minimum). Affected: stat bar labels, pipeline descriptions, install command secondary line, benchmark table headers. Audit with https://wave.webaim.org and increase luminance on all secondary text.

Benchmark data is hardcoded
Benchmark numbers change with every release. Hardcoding them means they will be wrong within one release cycle. Fetch them at build time from the benchmarking repo instead:

---
const res = await fetch(
  'https://raw.githubusercontent.com/hey-granth/codectx-benchmarking/main/benchmark_results/results.json'
)
const benchmarks = await res.json()
---

This way the landing page always reflects the latest results without any manual update to this repo. The benchmarking repo can run its own CI on each release and push fresh results to that path automatically.

---

Significant

Excessive blank space between sections
Large unintentional gaps between hero, stats bar, problem/solution, and pipeline sections make the page feel unfinished. Tighten section padding throughout.

Terminal font is too small
Minimum 13-14px with a proper monospace stack:

font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

Benchmark table undersells the numbers
92% reduction on rich and 89.5% on httpx are strong numbers that the current flat table buries. The reduction column should be the most visually prominent: larger, bold, green. Remove the arrow icon between token columns, it adds no information. Consider a subtle inline bar behind each reduction percentage to make magnitude immediately scannable.

Before/after summary lines need more prominence
The lines at the bottom of each panel ("224,000 tokens · exceeds 128k window" vs "28,000 tokens · 87% reduction · structured") are the punchline of the section. Increase font size and padding so they land visually.

No mobile layout
Two-column sections need to stack on narrow viewports. The page should not break on mobile even if desktop is the primary target.

---

Minor

• Pipeline icons are generic and add noise without meaning. Replace with concept-appropriate icons or remove them entirely.
• "How It Works" nav anchor: verify it scrolls smoothly to the correct section.
• Avoid em dashes in copy. Use colons or commas instead.
• "76% avg token reduction" in the stats bar should be derived from the fetched benchmark JSON so it stays accurate automatically.

---

Stack

Astro is fine. No need to rebuild in React or Next.js for a static landing page.

---

Checklist (from issue #N)

• Deployment preview loads correctly
• Animated terminal demo visible above the fold without scrolling
• Terminal output is real, sourced from an actual named repository
• Benchmark data fetched from benchmarking repo JSON at build time
• Average token reduction stat derived from fetched benchmark data
• Text contrast passes WCAG AA throughout
• Problem/solution section explains dependency graph ordering clearly
• Before/after code comparison present with prominent summary lines
• Benchmark table reduction column is visually prominent
• Install command is the only call to action
• Page weight under 50KB excluding fonts
• No broken links or non-functional anchors
• Mobile layout: two-column sections stack on narrow viewports
• Passes Lighthouse accessibility score >= 90
• Deploys correctly to codectx.granth.tech (currently hosted on Vercel)

---

Good work getting this to a reviewable state. Fix the blocking items first and the rest can follow in the same PR. Happy to review a follow-up commit.