chore(site): soultions pages

[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 11, 2025 6:50am

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Dec 11, 2025 6:50am
rivet-inspector	Ignored	Preview		Dec 11, 2025 6:50am
rivetkit-serverless	Skipped			Dec 11, 2025 6:50am

[NicholasKissel]

• chore(site): soultions pages #3606 👈 (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.

[pkg-pr-new]

More templates

• actor-actions
• example-ai-agent
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-next-js
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• cross-actor-actions
• example-cursors
• example-cursors-raw-websocket
• custom-serverless
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-hono
• hono-bun
• hono-react
• example-kitchen-sink
• multi-region
• native-websockets
• next-js
• node
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• scheduling
• state
• example-stream
• example-trpc

@rivetkit/cloudflare-workers

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

@rivetkit/db

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

@rivetkit/framework-base

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

@rivetkit/next-js

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

@rivetkit/react

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

rivetkit

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

@rivetkit/sql-loader

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

@rivetkit/engine-runner

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

@rivetkit/engine-runner-protocol

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

commit: b406bef

[claude]

PR Review: Solutions Pages

This PR adds five new solution pages for the Rivet website. Overall, the implementation is solid with good component reusability and visual consistency. Below are my findings:

---

✅ Strengths

1. Excellent Code Reuse: Shared components (Badge, CodeBlock, SolutionCard) are well-designed and consistently applied across all pages
2. Strong Visual Design: Consistent color theming (pink, orange, indigo, cyan) creates distinct branding for each solution
3. Good UX Patterns: Animations, hover states, and transitions enhance user experience without being overwhelming
4. Comprehensive Content: Each page includes hero, features, use cases, and ecosystem sections

---

🔴 Critical Issues

1. Missing TypeScript Types (Multiple Files)

The shared components lack proper TypeScript typing, which could lead to runtime errors. All Badge, CodeBlock, and SolutionCard components should have proper interfaces defined.

Files affected: All new solution pages (app-generators, background-jobs, mcp, per-tenant-db, geo-distributed-db)
Impact: Medium - Could cause runtime errors with invalid props

2. Unused Import (background-jobs/page.tsx:3)

useState is imported but never used - should be removed for code cleanliness.

3. Accessibility Issues

• Missing ARIA Labels: Interactive elements lack proper accessibility attributes. Buttons should have aria-labels for screen readers.
• Missing Alt Text: The world map SVG should have proper semantic markup if used decoratively.

Impact: High - Affects screen reader users

4. Dead Links (All Pages)

All CTA buttons are styled as buttons but have no navigation functionality:

• Start Building / Start Building Now
• Read the Docs / View Examples
• Deploy MCP Server / Start Scheduling

These should either be converted to proper Link components with destinations or be disabled with appropriate styling if not ready.

Impact: High - Core user flow is broken

---

⚠️ Performance Concerns

1. Inefficient Key Generation (All Pages)

Using array indices as React keys in the tokenizer (line ~100 in each file) may cause re-render issues. Consider using more stable keys.

2. Animation Performance (background-jobs/page.tsx:369-389)

Custom CSS animations could benefit from GPU acceleration by adding translateZ(0) and will-change hints.

Impact: Medium - May cause jank on lower-end devices

---

🟡 Code Quality Issues

1. Duplicated Color Logic (All Pages)

The getColorClasses function is duplicated across 5+ files with identical logic (80+ lines of duplication).

Recommendation: Extract to shared utility file at @/lib/colorClasses.ts

Impact: Medium - DRY violation, maintenance burden

2. Inconsistent Token Highlighting

Each page implements custom syntax highlighting with different keyword lists:

• app-generators: [actor, spawn, rpc, ...]
• background-jobs: [actor, schedule, sendEmail, ...]
• mcp: [actor, McpServer, tool, ...]

Recommendation: Use a proper syntax highlighting library or unify the approach.

3. Magic Numbers (background-jobs/page.tsx:331-347)

Animation delays and durations are hardcoded throughout. Consider extracting to named constants.

---

📋 Navigation Updates

Header.tsx (Lines 56-92)

Good additions to the Solutions dropdown! However:

Missing Solutions in Dropdown:

• ❌ Background Jobs (/solutions/background-jobs)
• ❌ Stateful MCP Servers (/solutions/mcp)

Label Inconsistency: Vibe-Coded Backends in dropdown vs App Generators in the page title

Impact: Medium - Discoverability issue

Footer.jsx (Lines 25-35)

Excellent! All new solutions are properly linked in the footer.

---

🎨 Design Feedback

1. Color Palette Consistency: Good use of distinct colors per solution, but ensure they meet WCAG contrast ratios (especially cyan on dark backgrounds)
2. Responsive Design: The layouts look good, but verify on mobile devices—especially the grid layouts in feature sections
3. Animation Overload: Some pages have multiple simultaneous animations. Consider reducing for users with prefers-reduced-motion

---

🧪 Testing Recommendations

1. Accessibility Audit: Run automated tools (axe, Lighthouse) and manual screen reader testing
2. Cross-Browser Testing: Verify CSS animations work in Safari
3. Performance Testing: Check page load times with all animations
4. Link Validation: Test all navigation links before merge

---

📝 Minor Improvements

1. Typo in PR Title: soultions → solutions
2. Console Warnings: Check for any React warnings in dev console
3. Bundle Size: Consider lazy loading framer-motion if not used elsewhere

---

✨ Overall Assessment

Good work! The pages are visually appealing and well-structured. The main concerns are:

1. Fix the dead CTA links (blocking issue)
2. Add TypeScript types for safety
3. Improve accessibility (ARIA labels, keyboard nav)
4. Extract duplicated color logic
5. Update header dropdown with missing solutions

Once these are addressed, this will be a great addition to the site!

Recommendation: Request changes for accessibility and dead links, then approve after fixes.