chore(site): pricing

[NicholasKissel]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-site	Ready	Preview	Comment	Dec 5, 2025 0:52am

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Dec 5, 2025 0:52am
rivet-inspector	Ignored	Preview		Dec 5, 2025 0:52am
rivetkit-serverless	Skipped			Dec 5, 2025 0:52am

[NicholasKissel]

• chore(site): pricing #3572 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: Pricing Page Updates

Overview

This PR updates the pricing page and related documentation. The changes are primarily focused on the marketing website content with significant updates to the pricing page component and documentation files.

Code Quality

Positive Aspects

✅ Well-structured React component - The PricingPageClient.tsx is organized into clear, reusable sections
✅ Consistent design system - Good use of shared components like Badge, CodeBlock, and FeatureCard
✅ Responsive design - Mobile-friendly with proper grid layouts and responsive classes
✅ Accessibility considerations - Semantic HTML and proper use of ARIA-friendly elements

Areas for Improvement

1. Component Complexity (website/src/app/(v2)/(marketing)/pricing/PricingPageClient.tsx)

The main component file is quite large (749 lines). Consider splitting into separate files:

// Suggested structure:
/pricing
  ├── PricingPageClient.tsx (main orchestrator)
  ├── components/
  │   ├── Hero.tsx
  │   ├── ArchitectureExplainer.tsx
  │   ├── CloudFeatures.tsx
  │   ├── Pricing.tsx
  │   ├── ComparisonTable.tsx
  │   └── shared/
  │       ├── Badge.tsx
  │       ├── CodeBlock.tsx
  │       └── FeatureCard.tsx

2. TypeScript Type Safety

Several components lack proper TypeScript typing:

// Current (line 45):
const Badge = ({ text, color = "orange" }) => {

// Suggested:
interface BadgeProps {
  text: string;
  color?: 'orange' | 'blue' | 'red' | 'zinc';
}

const Badge: React.FC<BadgeProps> = ({ text, color = "orange" }) => {

Same issue for CodeBlock (line 61), FeatureCard (line 84), and other components.

3. Hardcoded Values

Multiple magic numbers and strings throughout:

// Line 199: Hardcoded dimensions
<div className="relative h-[500px] w-full rounded-2xl...">

// Line 580-584: Pricing data should be in a separate config
const usagePricing = [
  { resource: "Active Actors", price: "$0.05", unit: "per 1k actor-hours" },
  // ...
];

Consider extracting to a configuration file for easier maintenance.

4. Animation Performance

The drop animation (lines 273-278) uses CSS keyframes inline. Consider moving to a CSS module or styled-component for better performance and reusability.

5. Accessibility Improvements

// Line 174: Button without aria-label
<button 
  onClick={() => document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })}
  className="..."
>

// Suggested:
<button 
  onClick={() => document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })}
  className="..."
  aria-label="Scroll to pricing section"
>

Documentation Changes

llms-full.txt Updates:

• ✅ Added comprehensive API reference links throughout
• ✅ Expanded lifecycle documentation with clear hooks
• ✅ Improved error handling examples
• ✅ Better connection lifecycle explanations

Potential Issues:

• Some code examples in the diff show incomplete snippets (e.g., line 122 has a stray })
• Consider validating all code examples compile/run correctly

Performance Considerations

1. Component Re-renders
The Pricing component uses useState for the cloud/self-hosted toggle. This is fine, but ensure child components are memoized if they don't depend on this state:

const CloudFeatures = React.memo(() => {
  // ... component code
});

2. Bundle Size
Many Lucide icons are imported individually (lines 5-40). This is actually good practice! Just verify tree-shaking is working correctly in your build.

Security Concerns

✅ No major security issues identified
✅ External links use proper Link components
✅ No unsafe HTML rendering or XSS vectors

Minor consideration:

• Verify the dashboard link (https://dashboard.rivet.dev) uses HTTPS (it does)

Testing Recommendations

Since this is a marketing page, consider:

1. Visual regression tests - Ensure the layout doesn't break across viewports
2. Link validation - All CTAs and navigation links work correctly
3. Accessibility audit - Run Lighthouse/axe to catch any a11y issues
4. Performance metrics - Check First Contentful Paint and Largest Contentful Paint

Minor Issues

1. Inconsistent spacing (website/src/components/Header.jsx:9 and Navigation.jsx:10)

- href="https://dashboard.rivet.dev/"
+ href="https://dashboard.rivet.dev"

Trailing slashes should be consistent across the codebase.

2. Date in blog post (website/src/posts/2025-11-02-weekly-updates/page.mdx)
The file is named 2025-11-02 but that date is in the future. Is this intentional or should it be 2024-11-02?

Summary

Overall Assessment: ✅ Approval with Suggestions

This is solid work that significantly improves the pricing page presentation. The code is functional and follows React best practices. The main recommendations are around:

• Code organization (splitting the large component file)
• TypeScript type safety
• Accessibility enhancements
• Consider extracting configuration data

None of these are blocking issues, but they would improve maintainability for future updates.

Action Items

High Priority:

• Add proper TypeScript types to all components
• Verify date in blog post filename

Medium Priority:

• Consider splitting PricingPageClient.tsx into smaller components
• Extract pricing/usage data to configuration files
• Add aria-labels to interactive elements

Low Priority:

• Add visual regression tests
• Consider memoizing static components
• Move inline styles/animations to CSS modules

---

Great work on this update! The pricing page looks much more polished and the documentation improvements are valuable additions. 🚀

[pkg-pr-new]

More templates

• example-ai-agent
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• example-counter
• example-counter-next-js
• example-counter-serverless
• example-cursors
• example-cursors-raw-websocket
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-freestyle
• example-hono
• example-hono-bun
• example-hono-react
• example-kitchen-sink
• example-next-js
• quickstart-actions
• quickstart-cross-actor-actions
• quickstart-multi-region
• quickstart-raw-websockets
• quickstart-realtime
• quickstart-scheduling
• quickstart-state
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• starter
• example-stream
• example-trpc

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3572

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3572

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3572

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3572

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3572

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3572

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3572

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3572

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3572

commit: 17e711c