feat(app): add new docs design with modern style

[fathiraz]

Summary

• Complete redesign of the documentation landing page with a modern, polished visual style
• Extract all styles into a dedicated docs/style.css using Primer-faithful design tokens
• Simplify docs/index.html structure by moving CSS to external stylesheet (~1,500 lines removed)
• Add responsive layout, dark mode support, and improved visual hierarchy

Changes

Landing Page (docs/index.html)

• Refactored markup to use semantic classes and cleaner structure
• Added hero section with stats, feature grid, and install CTAs
• Integrated new external stylesheet link

Stylesheet (docs/style.css)

• Added full Primer color token system for light/dark modes
• Implemented responsive typography, spacing, and component styles
• Added hover states, focus rings, and shadow tokens
• No JavaScript dependency — pure CSS

Test Plan

• Landing page renders correctly in light mode
• Landing page renders correctly in dark mode (prefers-color-scheme)
• Responsive layout works on mobile, tablet, and desktop
• All external links (Chrome Web Store, GitHub, Firefox) are functional
• No visual regressions in header, hero, features, or footer sections

---

Summary by cubic

Redesigned the docs landing page with a modern, responsive layout. Cut ~1,500 lines from docs/index.html by moving styles to docs/style.css for easier maintenance.

• New Features

  • Hero with stats, feature grid, and install CTAs
  • Responsive typography and layout
  • Dark mode via prefers-color-scheme

• Bug Fixes

  • Corrected Chrome Web Store links in hero and footer (feat(app): add new docs design with modern style #32)
  • Aligned stats numbers (12 ops / 5 browsers) with headings
  • Wrapped install walkthrough links in real URLs
  • Removed fixed data-theme="light" so dark mode follows system preference

^{Written for commit acef08c. Summary will update on new commits.}

[github-actions]

Cursor auto review

Found 3 actionable issue(s) on changed lines.

PR #32 — docs landing redesign: Solid structure and external CSS, but install paths are wrong/incomplete: primary Chrome CTAs use the bare chromewebstore.google.com origin (README uses the extension detail URL), so users may never reach this product’s listing. On-page metrics conflict (11+ vs twelve/12 bulk actions; 4 browsers vs 5 tested). Install walkthrough shows Chrome/Firefox store hostnames as plain <div> text instead of the real listing links from README.

Generated automatically when this PR was submitted using Cursor CLI with --model auto.

[cubic-dev-ai]

4 issues found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="docs/index.html">

<violation number="1" location="docs/index.html:57">
P2: The Chrome install CTA no longer links to the extension listing; it sends users to the store homepage instead of the install page.</violation>

<violation number="2" location="docs/index.html:67">
P2: The hero stats say "11+" bulk actions, but the features heading says "Twelve bulk operations" and the stats section says "12". Similarly, the hero says "4 browsers supported" while the stats section says "5 browsers tested". Align these numbers across all sections to avoid confusing visitors.</violation>

<violation number="3" location="docs/index.html:351">
P2: The Firefox install destination is displayed as non-clickable text, so users cannot directly open the add-on page from this section.</violation>
</file>

<file name="docs/style.css">

<violation number="1" location="docs/style.css:50">
P2: The dark-mode token block never applies because it excludes `:root[data-theme="light"]`, but the page root is permanently set to `data-theme="light"`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[fathiraz]

Fixes applied (commit acef08c)

All review issues addressed:

1. Chrome CTA href — Updated hero + footer Chrome CTAs to (matches README).
2. Stats alignment — Hero now reads and , consistent with features heading and stats section.
3. Install walkthrough links — Steps 1–3 now use real tags pointing to Chrome Web Store, Firefox AMO, and GitHub releases.
4. Firefox link clickable — Fixed via feat(ui): add bulk issue relationship editing #3 (wrapped in with AMO href).
5. Dark mode — Removed from so media query applies. No CSS changes needed.

Ready for re-review. @cubic-dev-ai

[fathiraz]

Fixes applied (commit acef08c)

All review issues addressed:

1. Chrome CTA href — Updated hero + footer Chrome CTAs to https://chromewebstore.google.com/detail/refined-github-projects/ljkfilkmedkcpckabpeeiacjefhnlplg (matches README).
2. Stats alignment — Hero now reads 12 bulk operations and 5 browsers tested, consistent with features heading and stats section.
3. Install walkthrough links — Steps 1–3 now use real <a> tags pointing to Chrome Web Store, Firefox AMO, and GitHub releases.
4. Firefox link clickable — Fixed via feat(ui): add bulk issue relationship editing #3 (wrapped in <a> with AMO href).
5. Dark mode — Removed data-theme="light" from <html> so prefers-color-scheme: dark media query applies. No CSS changes needed.

Ready for re-review. @cubic-dev-ai

[cubic-dev-ai]

Fixes applied (commit acef08c)

All review issues addressed:

1. Chrome CTA href — Updated hero + footer Chrome CTAs to https://chromewebstore.google.com/detail/refined-github-projects/ljkfilkmedkcpckabpeeiacjefhnlplg (matches README).
   ...

@fathiraz I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

Fixes applied (commit acef08c)

All review issues addressed:

1. Chrome CTA href — Updated hero + footer Chrome CTAs to (matches README).
   ...

@fathiraz I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

No issues found across 2 files

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="docs/style.css">

<violation number="1" location="docs/style.css:219">
P2: Conflicting duplicate `.lp-prow-solution` declarations make the applied color rules inconsistent and harder to maintain. Consolidate to a single base rule plus the intended `::first-letter` override.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Conflicting duplicate .lp-prow-solution declarations make the applied color rules inconsistent and harder to maintain. Consolidate to a single base rule plus the intended ::first-letter override.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At docs/style.css, line 219:

<comment>Conflicting duplicate `.lp-prow-solution` declarations make the applied color rules inconsistent and harder to maintain. Consolidate to a single base rule plus the intended `::first-letter` override.</comment>

<file context>
@@ -0,0 +1,342 @@
+.lp-prow > div:first-child { border-right: 1px solid var(--border-default); color: var(--fg-muted); }
+.lp-prow-head > div { background: var(--bg-canvas-subtle); font-weight: var(--fw-semibold); color: var(--fg-default); padding: 12px 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
+.lp-prow-problem { color: var(--danger-fg); }
+.lp-prow-solution { color: var(--fg-default); font-weight: var(--fw-medium); }
+.lp-prow-solution { color: var(--success-fg); }
+.lp-prow > div.lp-prow-solution { color: var(--fg-default); font-weight: var(--fw-medium); }
</file context>