Add isolated landing page in site/

[prathamdby]

Summary

Adds a single-page marketing landing page for PR Agent, fully isolated inside a new site/ directory. It has its own dependencies, build, and config, and imports nothing from the parent application.

The page explains the project for non-technical readers and beginners: what PR Agent does, how it works, why it is self-hosted, and answers to common questions. The design is dark, minimal, and detail-focused, with restrained Motion animation.

Tech stack

• React 19 + Vite
• Tailwind CSS v4 (@tailwindcss/vite)
• shadcn-style UI primitives, owned in site/src/components/ui (button, badge, card, accordion)
• Motion (motion/react) for entrance, stagger, the sliding showcase pill, and crossfades
• Phosphor icons + simple-icons brand marks
• Geist + Geist Mono, self-hosted via Fontsource (no runtime font CDN)

Sections

Hero, integration wall, the problem, features bento, a tabbed "see it in action" showcase, how it works, self-hosting and privacy, social proof (stats + testimonials), FAQ, and a closing call to action.

Notes

• The product screenshots in site/public/shots are copied from docs/readme/assets, so the page shows the real GitHub surfaces rather than mockups.
• The integration wall lists genuine parts of the stack (GitHub, Cursor, Anthropic, Gemini, OpenRouter, Node.js, Docker, PostgreSQL).
• No changes to the main application.

Run it

cd site
npm install
npm run dev

  

---

PR Agent Description

PR Type

Enhancement

Description

• Add a self-contained React 19 + Vite static site under site/ with its own dependencies and build
• Build 10-page sections (Hero, Features, Showcase, FAQ, Self-Hosted, etc.) with animated reveals
• Use shadcn-style UI primitives, Tailwind CSS v4, Motion, and Phosphor icons throughout
• Include real product screenshots and brand logos (GitHub, Docker, Anthropic, etc.) on the integrations wall
• Wire up tabbed screenshot showcase, animated FAQ accordion, and scroll-aware sticky nav

Changes Diagram

flowchart LR
  A["Vite + React 19 entry"] --> B["App component"]
  B --> C["Nav (scroll-aware)"]
  B --> D["Hero (animated badge + CTA)"]
  D --> E["Integrations (brand logos)"]
  E --> F["Problem / Features / Showcase"]
  F --> G["How It Works / Self-Hosted"]
  G --> H["Social Proof / FAQ / CTA Footer"]

Loading

File Walkthrough

Enhancement (20 files)

Site package manifest and dependencies

site/package.json

• Declares React 19, Vite 8, Tailwind CSS v4, Motion, Phosphor icons, simple-icons, Radix UI primitives
• Isolated from main project with its own build scripts and dev dependencies

HTML entry point with SEO metadata

site/index.html

• Sets dark color scheme, favicon, viewport
• Includes og:title, og:description, and meta description for social sharing

Root App component composing all sections

site/src/App.tsx

• Renders Nav, Hero, Integrations, Problem, Features, Showcase, HowItWorks, SelfHosted, SocialProof, Faq, CtaFooter in order

Sticky navigation with scroll-aware styling

site/src/components/sections/Nav.tsx

• Fixed header with pill-shaped container, blur backdrop on scroll
• Links to section anchors, GitHub button, brand mark

Hero section with animated intro and screenshot frame

site/src/components/sections/Hero.tsx

• Motion-animated badge, headline, description, and CTA buttons
• Frame component with /shots/review.png screenshot and shimmer status text

Features grid with staggered reveal and slash commands

site/src/components/sections/Features.tsx

• 5 feature cards in CSS grid layout with Phosphor icons
• Each card shows the slash command (/review, /describe, etc.) in a code badge

Tabbed screenshot showcase with animated transitions

site/src/components/sections/Showcase.tsx

• AnimatePresence-driven tab switcher for 5 product screenshots
• Spring-animated pill indicator on active tab

FAQ accordion section

site/src/components/sections/Faq.tsx

• Radix Accordion with custom trigger (Plus icon rotates on open)
• 6 questions covering hosting, models, rate limits, and large PRs

Self-hosting section with guarantees and terminal preview

site/src/components/sections/SelfHosted.tsx

• Lists 4 self-hosting guarantees with icons (Key, Cpu, Database, Shield)
• Mock terminal window showing docker compose workflow

Browser-frame wrapper for product screenshots

site/src/components/Frame.tsx

• Renders window chrome (traffic lights, label bar) around images
• Optional status indicator slot

Brand logo SVG renderer from simple-icons

site/src/components/BrandLogo.tsx

• Maps brand names to simple-icons SVG path data
• Renders single-color glyphs for GitHub, Docker, Anthropic, etc.

Reusable scroll-triggered reveal animations

site/src/components/motion/Reveal.tsx

• Reveal: fade-in + slide-up on scroll with reduced-motion support
• Stagger/StaggerItem: coordinated child entrance animations

Centralized marketing copy and data

site/src/content.ts

• All text content: nav links, features, steps, FAQ, testimonials, stats, integrations
• Typed exports for feature, step, FAQ, and testimonial shapes

Tailwind v4 design tokens and global styles

site/src/index.css

• Custom dark theme with accent color (#34D399), surface tokens, and Geist fonts
• Shimmer text animation, accordion keyframes, reduced-motion overrides

Button component with CVA variants

site/src/components/ui/button.tsx

• primary/secondary/ghost/link variants with sizes sm/md/lg
• Uses Radix Slot for asChild pattern

Accordion UI primitive

site/src/components/ui/accordion.tsx

• Wraps Radix Accordion with custom styling and Plus icon trigger
• CSS keyframe animations for open/close

PR Agent brand mark SVG

site/src/components/Mark.tsx

• Inline SVG checkmark logo with dark background
• Reused in Nav and CTA footer

Vite configuration with React and Tailwind plugins

site/vite.config.ts

• Path alias @/ maps to src/
• React plugin v6 and Tailwind CSS v4 via @tailwindcss/vite

Site-specific gitignore

site/.gitignore

• Ignores node_modules, dist, tsbuildinfo, .local, .DS_Store

cn utility for class merging

site/src/lib/utils.ts

• Combines clsx and tailwind-merge for conflict-free class composition

[zeus-review]

PR Agent Review

Note

Adds a new marketing landing page site/ for PR Agent, built with React 19, Vite, Tailwind CSS v4, and Motion. The site includes sections for hero, integrations, why, capabilities, how it works, self-hosting, social proof, FAQ, and a CTA footer. It is fully isolated from the main application with its own package.json, dependencies, and build configuration.

Effort	Light · 1/5
P1	GITHUB_URL points to GitHub homepage, not the PR Agent repo On the diff · site/src/content.ts · line 3 Fix prompt on the inline thread.
P2	last:hidden never matches for vertical Pipeline connector line On the diff · site/src/components/demos/Pipeline.tsx · line 60 Fix prompt on the inline thread.
Relevant tests	no
Security	No security concerns identified
Follow-ups	The site README mentions screenshots in `public/shots` copied from `docs/readme/assets`, but no `public/shots` directory is included in this PR.
Follow-ups	The `CellShell` component in Capabilities.tsx uses raw string concatenation for className instead of the project's `cn()` utility, which could lead to Tailwind class conflicts in future edits.

[zeus-review]

Note

Full review is in the PR conversation. Expand below to copy fixes for your coding agent.

Fix all findings (agent prompt)

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate.

Repository: prathamdby/pr-agent
Pull request: #59
Head SHA: a7adb4d9dac3c43c6a4edd60bc36310e12683611

Findings:

[P1] @site/src/content.ts line 10
Update `GITHUB_URL` to the actual repository URL: `"https://github.com/prathamdby/pr-agent"`.

[zeus-review]

P1 · GITHUB_URL points to github.com homepage, not the actual repo

site/src/content.ts · line 10

The exported GITHUB_URL constant is set to "https://github.com/" — the generic GitHub homepage. This value is used in Nav.tsx (line 46), Hero.tsx (line 68), and CtaFooter.tsx (lines 38, 44, 73) for all "View on GitHub" and "Get started" CTAs. Every external link directing users to the project will land on github.com instead of the actual repository (https://github.com/prathamdby/pr-agent). This makes the primary call-to-action across the entire marketing site non-functional.

Prompt to fix

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate.

Repository: prathamdby/pr-agent
Pull request: #59
Head SHA: a7adb4d9dac3c43c6a4edd60bc36310e12683611

[P1] @site/src/content.ts line 10
Update `GITHUB_URL` to the actual repository URL: `"https://github.com/prathamdby/pr-agent"`.

[zeus-review]

View the updated review.

Fix all findings (agent prompt)

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate.

Repository: prathamdby/pr-agent
Pull request: #59
Head SHA: 1c72d9e3dd6d4c43762fa7efd2062a282967b0ed

Findings:

[P1] @site/src/content.ts line 3
Change `GITHUB_URL` to `"https://github.com/prathamdby/pr-agent"` so that all GitHub links and CTA buttons point to the actual repository.

[P2] @site/src/components/demos/Pipeline.tsx line 60
Move the `last:hidden` class to the parent `<div className="relative flex gap-4 md:block">` instead, or conditionally render the connector only for non-last items using the array index.

[zeus-review]

P1 · GITHUB_URL points to GitHub homepage, not the PR Agent repo

site/src/content.ts · line 3

The constant GITHUB_URL is set to "https://github.com/" instead of the actual repository URL https://github.com/prathamdby/pr-agent. This value is used in 6 link locations across three components: Nav (line 48), Hero (line 60), and CtaFooter (lines 32, 39, 69) plus the footer GitHub link. Every "GitHub", "View on GitHub", and "Get started" button on the site will navigate to github.com's homepage rather than the PR Agent repository. The root README and ADRs consistently reference github.com/prathamdby/pr-agent.

Prompt to fix

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate.

Repository: prathamdby/pr-agent
Pull request: #59
Head SHA: 1c72d9e3dd6d4c43762fa7efd2062a282967b0ed

[P1] @site/src/content.ts line 3
Change `GITHUB_URL` to `"https://github.com/prathamdby/pr-agent"` so that all GitHub links and CTA buttons point to the actual repository.

[zeus-review]

P2 · last:hidden never matches for vertical Pipeline connector line

site/src/components/demos/Pipeline.tsx · line 60

The vertical connector <div> on line 60 uses last:hidden to hide the line on the last pipeline stage in mobile view. However, this <div> is the first child of its parent <div className="relative flex gap-4 md:block"> — there are sibling elements after it. The CSS :last-child pseudo-class only matches when the element is the last child of its parent, so last:hidden never activates. A dangling connector line will render below the final pipeline stage on mobile.

Prompt to fix

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate.

Repository: prathamdby/pr-agent
Pull request: #59
Head SHA: 1c72d9e3dd6d4c43762fa7efd2062a282967b0ed

[P2] @site/src/components/demos/Pipeline.tsx line 60
Move the `last:hidden` class to the parent `<div className="relative flex gap-4 md:block">` instead, or conditionally render the connector only for non-last items using the array index.