chore(site): soultions pages

[NicholasKissel]

No description provided.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
rivet-cloud	Ready	Preview, Comment	Jan 10, 2026 0:50am
rivet-site	Error		Jan 10, 2026 0:50am

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
rivet-inspector	Ignored	Preview	Jan 10, 2026 0:50am
rivetkit-serverless	Skipped		Jan 10, 2026 0: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
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• cross-actor-actions
• example-cursors
• example-cursors-raw-websocket
• custom-serverless
• example-sqlite
• example-elysia
• example-experimental-durable-streams-ai-agent
• hello-world
• example-hono
• hono-react
• example-kitchen-sink
• multi-region
• native-websockets
• next-js
• 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/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@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: 574de59

[claude]

PR Review: Solutions Pages Update

Overview

This PR introduces several new marketing solution pages for the Rivet website, showcasing different use cases for Rivet Actors. The changes include 4 new solution pages and updates to existing navigation components.

Positive Aspects ✅

1. Consistent Design System: All pages follow a cohesive design pattern with shared components (Badge, CodeBlock, SolutionCard/FeatureCard)
2. Good Visual Hierarchy: Effective use of hero sections, feature grids, and call-to-action sections
3. Motion Animations: Thoughtful use of framer-motion for scroll animations and interactivity
4. Comprehensive Coverage: The pages cover diverse use cases (agents, app generators, background jobs, geo-distributed DBs, per-tenant DBs, MCP)

Issues & Recommendations

1. TypeScript Type Safety ⚠️

Issue: Missing TypeScript types in multiple components

Examples:

• website/src/app/(v2)/(marketing)/solutions/app-generators/page.tsx:40-42: No type for color parameter

const Badge = ({ text, color = "pink" }) => {  // Missing types

Recommendation: Add proper TypeScript types:

type BadgeColor = "orange" | "blue" | "purple" | "pink" | "zinc";
interface BadgeProps {
  text: string;
  color?: BadgeColor;
}
const Badge = ({ text, color = "pink" }: BadgeProps) => {

Files affected: app-generators/page.tsx, background-jobs/page.tsx, agents/page.tsx

---

2. Code Duplication 🔴

Issue: Significant duplication of shared components across files

The following components are duplicated across multiple solution pages:

• Badge component (5+ copies)
• CodeBlock component with syntax highlighting logic (5+ copies)
• SolutionCard/FeatureCard with color classes (5+ copies)

Example: The getColorClasses function appears in app-generators/page.tsx:142-199, background-jobs/page.tsx:116-163, and agents/page.tsx:126-183 with identical code.

Recommendation: Extract shared components to website/src/components/solutions/ directory. This would:

• Reduce bundle size significantly
• Make maintenance easier
• Ensure consistency across pages
• Follow DRY principles

---

3. Performance Concerns ⚡

Issue: Complex inline syntax highlighting logic in CodeBlock component

Location: All CodeBlock components (e.g., agents/page.tsx:46-117)

The syntax highlighting runs complex regex operations on every render. Recommendations:

1. Move tokenization outside render function and memoize with useMemo
2. Consider using lightweight syntax highlighting library
3. Current implementation does not handle edge cases (nested quotes, escape sequences)

---

4. Accessibility Issues ♿

Issues identified:

1. No reduced-motion support: All framer-motion animations should respect prefers-reduced-motion user preference
2. Missing ARIA labels: Interactive buttons need proper labels
3. Color contrast: Some text colors like text-zinc-500 on dark backgrounds may not meet WCAG AA standards

Recommendation: Add accessibility attributes and test with axe-core or similar tools.

---

5. Header Navigation Inconsistency 🔍

File: website/src/components/v2/Header.tsx

Issues:

1. Typo in commit: PR title says "soultions" instead of "solutions"
2. Incomplete list: Header dropdown shows 6 solutions but footer shows 10 (missing commerce, MCP, background-jobs, workflows)

Recommendation: Sync the solutions list between Header.tsx (lines 55-92) and Footer.jsx (lines 24-35).

---

6. Code Syntax Error 🐛

Issue: Type error in code example

Location: background-jobs/page.tsx:260

const delay = Math.pow(2, job.attempts) + "s";  // number + string = runtime error

Fix:

const delay = `${Math.pow(2, job.attempts)}s`;

---

7. SEO & Metadata Missing 🔎

Issue: No metadata exports for Next.js pages

All solution pages are missing SEO metadata. Add:

export const metadata = {
  title: "Agent Orchestration | Rivet",
  description: "Build durable AI assistants with Rivet Actors...",
  openGraph: {
    title: "...",
    description: "...",
  }
}

---

8. Unused Imports 🧹

Examples:

• app-generators/page.tsx:3: useState and useEffect imported but never used
• background-jobs/page.tsx:3: useState imported but not used
• Multiple unused icon imports

Recommendation: Remove to reduce bundle size.

---

9. Animation Performance ⚙️

Issue: Heavy CSS animations without GPU optimization

Location: background-jobs/page.tsx:369-388

Recommendation:

• Use will-change CSS property
• Stick to GPU-accelerated properties (transform, opacity)
• Add @media (prefers-reduced-motion: reduce) support

---

10. Magic Numbers 🔢

Issue: Hardcoded animation values throughout (e.g., duration: 0.5, delay: i * 0.05)

Recommendation: Extract to named constants for maintainability.

---

Summary Priority Matrix

Priority	Issue	Estimated Fix Time
🔴 Critical	Add TypeScript types	2 hours
🔴 Critical	Extract duplicated components	3 hours
🟠 High	Fix syntax error (background-jobs)	5 minutes
🟠 High	Add SEO metadata	1 hour
🟠 High	Sync header/footer navigation	15 minutes
🟡 Medium	Accessibility improvements	2 hours
🟡 Medium	Optimize CodeBlock performance	1 hour
🟢 Low	Clean up unused imports	30 minutes
🟢 Low	Fix commit message typo	N/A

Total Estimated Technical Debt: ~4-6 hours for critical and high-priority items

---

Testing Recommendations 🧪

1. Visual regression testing across viewports
2. Accessibility audit with axe-core
3. Lighthouse performance scores
4. Cross-browser testing (Safari, Firefox, Chrome)

---

Overall Assessment

This is a well-designed set of marketing pages with good UX and visual polish. The code quality is solid but would benefit from:

• Better TypeScript typing
• Component extraction to reduce duplication
• Accessibility improvements
• SEO optimization

The issues identified are largely technical debt that should be addressed before merging to production, especially the critical items around type safety and code duplication.

Recommendation: Address critical and high-priority items before merge.

[claude]

PR Review: Solutions Pages

This PR adds several new marketing solution pages to the website. Here's my detailed review:

🎯 Overall Assessment

Positive aspects:

• Well-structured, consistent component architecture across all solution pages
• Clean separation of concerns with reusable components (Badge, CodeBlock, FeatureCard/SolutionCard)
• Good use of motion animations for progressive disclosure
• Professional design with consistent color theming

Areas for improvement:

• Several code quality issues that need addressing
• Missing type safety in multiple places
• Duplicate code that could be consolidated

---

🔍 Detailed Feedback

1. Type Safety Issues ⚠️

Multiple files are missing proper TypeScript types:

website/src/components/marketing/solutions/AgentsPage.tsx:68

const tokens: JSX.Element[] = [];

Good! But this pattern is inconsistent across other solution pages.

website/src/app/(v2)/(marketing)/solutions/mcp/page.tsx:69

const tokens = [];  // Missing type annotation

Recommendation: Add explicit type annotations consistently:

const tokens: JSX.Element[] = [];

Also, many function parameters are untyped (e.g., Badge, CodeBlock, SolutionCard). Since these are TypeScript files, all props should have proper interface definitions.

---

2. Code Duplication 🔄

The Badge, CodeBlock, and SolutionCard/FeatureCard components are duplicated across all solution pages. This violates DRY principles.

Files with duplicated components:

• solutions/agents/page.tsx
• solutions/mcp/page.tsx
• solutions/geo-distributed-db/page.tsx
• solutions/background-jobs/page.tsx
• And 3 more...

Recommendation: Extract these to shared components:

website/src/components/marketing/solutions/
  ├── Badge.tsx
  ├── CodeBlock.tsx
  ├── FeatureCard.tsx
  └── index.ts

Then import them:

import { Badge, CodeBlock, FeatureCard } from '@/components/marketing/solutions';

This would reduce the PR size by ~2000+ lines and make future updates easier.

---

3. Inconsistent Prop Types 🎨

The color prop handling varies between components:

// In some files:
const Badge = ({ text, color = "orange" }) => { ... }

// In others:
const Badge = ({ text, color = "purple" }: { text: string; color?: "purple" | "blue" | "orange" }) => { ... }

Recommendation: Use consistent TypeScript interfaces:

interface BadgeProps {
  text: string;
  color?: 'orange' | 'blue' | 'red' | 'zinc' | 'purple' | 'indigo' | 'emerald';
}

const Badge = ({ text, color = 'orange' }: BadgeProps) => { ... }

---

4. Syntax Highlighting Logic 🎨

The CodeBlock component implements custom syntax highlighting inline. This is 2000+ lines of duplicated logic across all files.

Issues:

1. Not performant - tokenizing on every render
2. Limited language support
3. Hard to maintain
4. No proper AST parsing

Recommendation: Consider using a proper syntax highlighting library:

• prism-react-renderer for React
• shiki for accurate highlighting
• Or at least memoize the tokenization logic

Example with memoization:

import { useMemo } from 'react';

const CodeBlock = ({ code, fileName }: CodeBlockProps) => {
  const highlightedCode = useMemo(() => {
    return highlightCode(code);
  }, [code]);
  
  return <pre>{highlightedCode}</pre>;
};

---

5. Header Component Changes ⚠️

website/src/components/v2/Header.tsx

Good:

• New Solutions dropdown is well-implemented
• Proper hover/click handling with timeout management
• Mobile responsive

Issues:

1. Memory leak potential (Lines 124-130):

useEffect(() => {
  return () => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
    }
  };
}, []);

This cleanup is good, but the timeout is set in multiple places without always being cleared before setting a new one.

Recommendation: Add cleanup in all handlers:

const handleMouseEnter = () => {
  if (closeTimeoutRef.current) {
    clearTimeout(closeTimeoutRef.current);
    closeTimeoutRef.current = null;
  }
  setIsOpen(true);
};

✅ Already done correctly!

2. Hardcoded Solutions List (Lines 53-90):
   The solutions array is hardcoded in both desktop and mobile navigation. If this list changes, it needs updating in 2+ places.

Recommendation: Extract to a shared constant:

// website/src/constants/solutions.ts
export const SOLUTIONS = [
  { label: "Agent Orchestration", href: "/solutions/agents", ... },
  // ...
];

---

6. Footer Updates ✅

website/src/components/Footer.jsx

The footer solutions list update looks good! Matches the header navigation.

Minor suggestion: Consider moving from .jsx to .tsx for type safety.

---

7. Accessibility Concerns ♿

Several interactive elements lack proper ARIA attributes:

<button className="...">
  Deploy Agent
  <ArrowRight className="w-4 h-4" />
</button>

Recommendation:

<button 
  className="..."
  aria-label="Deploy Agent - Get Started"
>
  Deploy Agent
  <ArrowRight className="w-4 h-4" aria-hidden="true" />
</button>

Also, decorative icons should have aria-hidden="true".

---

8. Performance Considerations ⚡

1. Heavy use of framer-motion - Each page has 10+ motion components. Consider:

   • Lazy loading the motion library
   • Using CSS animations for simple cases
   • Reducing animation complexity on mobile

2. Large SVG file - world-map.svg is inline and could be optimized

3. No code splitting - All solution pages load their full content upfront

Recommendation:

import dynamic from 'next/dynamic';

const MotionDiv = dynamic(() => import('framer-motion').then(mod => mod.motion.div), {
  ssr: false
});

---

📝 Action Items

Must Fix:

1. ✅ Add proper TypeScript types to all component props
2. ✅ Extract duplicated components to shared location
3. ✅ Add ARIA labels to interactive elements

Should Fix:
4. Implement proper syntax highlighting or memoize current approach
5. Extract solutions list to shared constant
6. Add error boundaries for motion components

Nice to Have:
7. Convert Footer.jsx to Footer.tsx
8. Add loading states for async operations
9. Optimize animations for performance

---

🎯 Conclusion

This is a solid foundation for the solutions pages with good design consistency. However, the code needs refactoring to reduce duplication and improve type safety before merging.

Estimated refactoring effort: 2-3 hours to extract shared components and add types.

Recommendation: Request changes to address the duplication and type safety issues before merging.

---

Review generated by Claude Code - Last updated: 2026-01-15 01:47 UTC

[graphite-app]

Merge activity

• Jan 15, 1:48 AM UTC: NicholasKissel added this pull request to the Graphite merge queue.
• Jan 15, 1:48 AM UTC: CI is running for this pull request on a draft pull request (#3909) due to your merge queue CI optimization settings.
• Jan 15, 1:49 AM UTC: Merged by the Graphite merge queue via draft PR: #3909.