chore: create branch for v3 website changes on v2 #3304

NicholasKissel · 2025-11-01T00:59:49Z

chore: create branch for v3 website changes on v2

chore(site): website changes v3

Add Quickstart tab to docs page and update all Get Started links

Added new Quickstart tab next to Overview and Integrations in docs navigation
Created new quickstart page at /docs/quickstart/
Removed quickstart section from Overview tab sidebar
Updated all 'Get Started' buttons on home page to point to /docs/quickstart/
Updated Local Development quickstart arrow to point to /docs/quickstart/
Added quickstart to mobile navigation dropdown

vercel · 2025-11-01T00:59:55Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-site	Error			Nov 13, 2025 9:10pm
rivetkit-serverless	Error			Nov 13, 2025 9:10pm

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Nov 13, 2025 9:10pm
rivet-inspector	Ignored	Preview		Nov 13, 2025 9:10pm

NicholasKissel · 2025-11-01T01:00:06Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

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 · 2025-11-01T01:03:09Z

PR Review: Website V3 Changes

Overview

This PR introduces significant marketing website improvements including a new Quickstart tab, redesigned deployment options, a features bento box component, and updated copy throughout. Overall, this is a solid update with good UX improvements. However, there are several issues that should be addressed.

Critical Issues

1. Unused Import in FeaturesBentoBox.tsx

Location: website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:13

The faCheckCircle import is never used in the component. Please remove the unused import.

2. Overly Broad Type for Icon Prop

Location: website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:21

The icon prop uses any type, which defeats TypeScript type safety. Use a proper type from the icon library instead of any.

3. Unused Variant in TypeScript Union

Location: website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:22

The variant type includes wide but there is no corresponding implementation for this variant. Either remove wide from the type definition, or add the implementation.

4. Misleading Link Text

Location: website/src/app/(v2)/(marketing)/(index)/sections/DeploymentOptionsSection.tsx:55

The link text says Contact Sales but it points to /docs/general/self-hosting, not a sales contact page. Either update the link to point to an actual sales contact page or change the text to match the destination.

Code Quality Issues

5. Inconsistent Tab/Space Indentation

Location: website/src/app/(v2)/(marketing)/(index)/components/MarketingButton.tsx:20-21

Mixed tabs and spaces in the indentation for target and rel props. Ensure consistent formatting across the file.

6. Unused Code Variant

Location: website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:131-154

The code variant is fully implemented but never used in the features array. Either remove it or add a feature that uses it.

7. Hardcoded Code Example

The code example in the code variant is hardcoded with manual syntax highlighting. Consider using a proper syntax highlighting library or accepting the code as a prop.

Performance Considerations

8. Mouse Move Event Listener Efficiency

Location: website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:35-48

The handleMouseMove function performs querySelector on every mouse move event. Mouse move events fire frequently, so this could impact performance. Consider using a ref for the icon container instead of querySelector.

Accessibility Issues

9. Missing Icon Accessibility Labels

The Icon components do not appear to have accessibility labels. Ensure icons are either decorative (with aria-hidden) or have proper labels.

UX/Content Issues

10. Removed Descriptive Text

The description paragraph was removed from the Run It Your Way section. Was this intentional? It provided helpful context for users.

11. Deleted Cloud Marketing Page

The entire cloud marketing page was removed. Ensure any inbound links to /cloud are redirected and SEO implications are considered.

Positive Observations

New Quickstart tab improves discoverability
FeaturesBentoBox provides an engaging visual layout
Consistent link styling with hover effects
Updated copy is more concise and clear
Proper use of semantic HTML
Good responsive design patterns
External links properly use rel noopener noreferrer
Proper use of refs and key props in mapped components

Summary

This is good work overall with solid UI/UX improvements. The main concerns are type safety, unused code, and the misleading Contact Sales link. Once these issues are addressed, this should be ready to merge.

Recommendation: Request changes to address critical issues 1-4.

claude · 2025-11-04T19:50:06Z

PR Review: Website Changes v3

Overview

This PR introduces several improvements to the marketing website, including a new Quickstart navigation tab, updated hero messaging, a new features bento box component, and reorganized deployment options. The changes are primarily focused on improving the user experience and better communicating Rivet's value proposition.

Positive Aspects

✅ Good UX improvements: The new dedicated Quickstart tab is a smart addition that makes it easier for new users to get started quickly.

✅ Cleaner messaging: Updated hero section text ("The Primitive for Real-Time and Agent Applications") is more concise and clear about Rivet's purpose.

✅ Visual improvements: The new FeaturesBentoBox component provides a modern, interactive way to showcase features with nice hover effects.

✅ Consistent styling: Font sizes have been normalized across sections (4xl/5xl → 2xl/3xl) for better visual hierarchy.

Issues & Recommendations

1. Unused Import (FeaturesBentoBox.tsx:13)

import { faCheckCircle } from "@rivet-gg/icons";

Issue: faCheckCircle is imported but never used in the component.

Recommendation: Remove the unused import to keep the code clean.

2. Type Safety Issue (FeaturesBentoBox.tsx:21)

icon: any;

Issue: Using any type defeats TypeScript's type safety benefits.

Recommendation: Use a more specific type. Based on the imports, this should be:

import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
// or
icon: typeof faBolt; // or the appropriate FontAwesome icon type

3. Duplicate Icons in Features Array (FeaturesBentoBox.tsx:191, 205)

Issue: Both "Long-Lived Stateful Compute" and "Built-in Realtime" use faBolt icon, which creates visual confusion.

Recommendation: Use distinct icons for different features. Consider faMemory or faServer for one of them to better differentiate the features.

4. Unused Variant in Interface (FeaturesBentoBox.tsx:22)

Issue: The variant type includes "wide" and "code" options, but "wide" is never implemented (only "code" variant is used in the conditional logic).

Recommendation: Either implement the "wide" variant or remove it from the type definition to avoid confusion.

5. Missing rel Attribute Usage (MarketingButton.tsx)

Issue: While the rel prop is added to the component props and passed through, none of the call sites actually use it.

Recommendation: If this is intended for external links, ensure it's used with target="_blank" links for security:

<MarketingButton 
  href="https://external-site.com" 
  target="_blank" 
  rel="noopener noreferrer"
>

6. Accessibility Concern (FeaturesBentoBox.tsx)

Issue: The interactive cards use mouse position for spotlight effects but may not provide adequate feedback for keyboard navigation or screen readers.

Recommendation: Consider adding:

Focus visible states for keyboard navigation
ARIA labels for screen readers
Alternative visual feedback for non-mouse users

7. Code Duplication in FeatureCard Variants

Issue: There's significant code duplication across the different variant implementations (large, medium, small, default). The hover overlay and structure are repeated.

Recommendation: Extract common elements into reusable components or variables:

const HoverOverlay = () => (
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none bg-gradient-to-b from-white/[0.04] via-white/[0.01] to-transparent" />
);

8. Inconsistent Link Behavior (DeploymentOptionsSection.tsx)

Issue: Some links use Link component, others use <a> tags, and some have target="_blank" while others don't, without a clear pattern.

Recommendation: Establish consistent patterns:

Internal links → <Link> without target
External links → <Link> with target="_blank" rel="noopener noreferrer"

9. Hardcoded Code Example (FeaturesBentoBox.tsx:131-154)

Issue: The "code" variant contains a hardcoded, complex JSX structure with syntax highlighting. This makes it difficult to reuse and maintain.

Recommendation:

Extract the code example to a separate constant or prop
Consider using a proper code syntax highlighter library
This variant appears unused in the current implementation—consider removing if not needed

10. Missing Error Handling (FeatureCard.tsx:35-47)

Issue: The handleMouseMove function doesn't handle cases where querySelector might fail gracefully beyond a simple return.

Recommendation: While the early return is good, consider logging errors in development for debugging.

Testing Recommendations

Visual Testing: Verify the bento box grid layout works correctly across different screen sizes (mobile, tablet, desktop)
Navigation Testing: Ensure all updated links (especially the new quickstart paths) resolve correctly
Accessibility Testing:
- Test keyboard navigation through the feature cards
- Verify screen reader compatibility
- Check color contrast ratios for WCAG compliance
Performance Testing: The mousemove handler runs frequently—verify it doesn't cause performance issues on lower-end devices

Security Considerations

⚠️ External Links: Some external links are missing proper rel="noopener noreferrer" attributes, which could be a security concern with target="_blank". While the rel prop has been added to MarketingButton, ensure it's actually used for all external links.

Documentation

The new quickstart page at /docs/quickstart/index.mdx is minimal but functional. Consider adding:

Brief overview text about what users can expect from each quickstart
Estimated time to complete each guide
Prerequisites section

Performance Considerations

The handleMouseMove event handler in FeatureCard runs on every mouse movement over the card. Consider:

Throttling the handler to reduce CPU usage
Using requestAnimationFrame for smoother animations
Testing performance on mobile devices

Summary

Overall, this is a solid PR that improves the user experience and modernizes the website. The main concerns are:

Type safety issues (using any)
Code duplication and maintainability
Accessibility improvements needed
Minor security/best practice issues with external links

Recommendation: Address the type safety and accessibility concerns before merging. The code duplication and other issues can be addressed in follow-up PRs if needed.

Checklist Before Merge

Remove unused imports
Fix type safety issues (any types)
Use distinct icons for different features
Add accessibility improvements (focus states, ARIA labels)
Ensure all external links have proper rel attributes
Test across different screen sizes and devices
Verify all new routes are accessible

Let me know if you'd like me to help implement any of these suggestions!

claude · 2025-11-13T01:43:44Z

Pull Request Review: Website Changes v3

Overview

This PR introduces v3 website changes including a new Quickstart section, a features bento box component, and various UI/UX improvements to the marketing pages.

Positive Aspects

✅ Good User Experience Changes

Adding a dedicated /docs/quickstart/ page improves discoverability and provides a clear entry point for new users
Consolidating all "Get Started" links to point to the quickstart page creates a consistent user journey
The new bento box layout provides an engaging way to showcase features

✅ Clean Component Structure

The FeaturesBentoBox component is well-organized with clear variant support
Good use of TypeScript for type safety with FeatureCardProps

Issues & Recommendations

1. Type Safety Issues (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx)

Line 21:

icon: any;

❌ Using any defeats the purpose of TypeScript. Should be properly typed:

import type { IconDefinition } from "@rivet-gg/icons";

interface FeatureCardProps {
  // ...
  icon: IconDefinition;
  // ...
}

Line 13:

import { faCheckCircle } from "@rivet-gg/icons";

⚠️ faCheckCircle is imported but never used - should be removed.

2. Unused Code & Props

FeaturesBentoBox.tsx Line 22:

The variant type includes "wide" and "code" but "wide" is never implemented or used
The "code" variant (lines 131-154) is defined but never used in the features array
Either implement these variants or remove them to reduce bundle size

MarketingButton.tsx:

Adding rel prop is good for security, but it should be used consistently with target="_blank" links

3. Accessibility Concerns

FeaturesBentoBox.tsx Lines 35-48:

const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
  // ... spotlight effect logic
};

⚠️ The spotlight effect only works with mouse movement, making it inaccessible for:

Keyboard navigation users
Touch device users
Screen reader users

Recommendation: Ensure the cards have proper focus states and consider a fallback hover effect that doesn't rely solely on mouse positioning.

4. Performance Considerations

Lines 35-48: The handleMouseMove handler performs DOM queries and style updates on every mouse movement:

const iconContainer = card.querySelector('.icon-spotlight-container') as HTMLElement;

⚠️ Potential Issues:

querySelector on every mousemove is expensive
No debouncing/throttling
Will cause layout thrashing on lower-end devices

Recommendation:

const iconContainerRef = useRef<HTMLElement>(null);

// Use ref instead of querySelector
// Consider throttling with requestAnimationFrame

5. Hardcoded Code Snippet

Lines 138-149: The code example in the "code" variant is hardcoded with extensive inline styling.

Recommendations:

Extract to a separate constant for maintainability
Consider using a proper syntax highlighting library
The code snippet doesn't match the actual Rivet API exactly (based on other examples in the codebase)

6. Missing Content

website/src/content/docs/quickstart/index.mdx:

The quickstart page only contains links to other quickstart guides
Consider adding a brief introduction or "Which quickstart should I choose?" section
No actual content - users might expect to see at least a basic example here

7. Inconsistent Styling

Multiple sections had their heading sizes reduced from text-4xl sm:text-5xl to text-2xl sm:text-3xl:

CodeSnippetsSection
CommunitySection
DeploymentOptionsSection
FeaturesSection
QuotesSection
TechSection

⚠️ This creates inconsistency. Ensure this is intentional and part of a unified design system update.

8. SEO & Metadata

The new quickstart page should have:

Proper meta description
Open Graph tags
Structured data for documentation

9. Deleted File

website/src/app/(v2)/(marketing)/cloud/page.tsx was completely removed (104 lines deleted).

Ensure this doesn't break any existing links
Consider adding a redirect if this was a public page
Verify this deletion is intentional

10. Sitemap Changes

website/src/sitemap/mod.ts Lines 333-373:
The new Quickstart tab structure looks good, but:

The sidebar duplicates the quickstart guides that appear in Overview tab
Consider whether this duplication is necessary or if it creates confusion

Security

✅ No obvious security issues
✅ Good addition of rel attribute support in MarketingButton

Testing Recommendations

Since this is a website/frontend change:

Test responsive behavior at all breakpoints (especially the bento grid)
Test keyboard navigation through the feature cards
Verify all new links work correctly
Test the spotlight effect performance on mobile devices
Validate the quickstart page renders properly with the MDX content
Check for any broken links from the removed cloud page

Summary

This PR makes good UX improvements but has some code quality issues to address:

Must Fix:

Replace any type with proper icon type
Remove unused imports (faCheckCircle)
Optimize handleMouseMove performance

Should Consider:

Remove unused variants or implement them
Add accessibility improvements for keyboard/touch users
Add more content to the quickstart landing page
Verify the cloud page deletion doesn't break anything

Nice to Have:

Extract hardcoded code snippets
Add SEO metadata
Throttle mouse move handlers

Overall: Good direction for the website, but needs some technical cleanup before merging.

claude · 2025-11-13T01:44:51Z

PR Review: Website Changes for V3

This PR makes significant marketing website updates with a new quickstart page and redesigned homepage sections. Overall, the changes look good with some minor recommendations below.

Code Quality & Best Practices ✅

Strengths:

Clean component structure following React best practices
Good separation of concerns with dedicated section components
Consistent use of TypeScript types and interfaces
Proper use of Next.js Link components for navigation

Recommendations:

Missing accessibility attributes - The new FeaturesBentoBox.tsx component has several accessibility concerns:
- Links should have aria-label attributes for better screen reader support, especially when the visual design is important
- The spotlight effect relies on visual hover states without keyboard navigation alternatives
Suggestion in FeaturesBentoBox.tsx:33-47:
```
<Link
  ref={cardRef}
  href={href}
  className={`group relative block ${className}`}
  onMouseMove={handleMouseMove}
  aria-label={`${title}: ${description}`}
>
```
CSS custom property initialization - In the handleMouseMove function (line 35-47), CSS variables are set without checking if they're initialized:
```
iconContainer.style.setProperty('--mouse-x', `${x}%`);
iconContainer.style.setProperty('--mouse-y', `${y}%`);
```
These variables are referenced but never used in the component. Either implement the spotlight effect CSS or remove this unused code to reduce bundle size.
Unused imports - FeaturesBentoBox.tsx:14 imports faCheckCircle but never uses it. Should be removed.
Hard-coded values - The VS Code-style syntax highlighting in the code variant (lines 131-149) uses hard-coded color values. Consider extracting these to a theme constant for maintainability.

Performance Considerations ⚡

Mouse event handlers - The handleMouseMove handlers in FeaturesBentoBox.tsx will fire on every mouse movement. Consider throttling these events:

import { throttle } from 'lodash-es'; // or implement your own

const handleMouseMove = throttle((e: React.MouseEvent<HTMLAnchorElement>) => {
  // existing logic
}, 16); // ~60fps

Component size - FeaturesBentoBox.tsx is 290 lines in a single file. The different card variants could be extracted into separate components for better code splitting and maintainability.
Missing next/image optimization - Verify that all images in the tech section are using Next.js Image component for automatic optimization (they appear to be, which is good).

Security Concerns 🔒

Missing rel attribute on external links - Good catch adding the rel prop to MarketingButton component! However, ensure all external links use rel="noopener noreferrer":
- StudioSection.tsx:106 - Has it ✅
- DeploymentOptionsSection.tsx:61 - Has it ✅
- All MarketingButton external links should verify they pass the rel prop

Potential Bugs 🐛

Fragment in unused state - UseCases.tsx imports AnimatePresence and motion from framer-motion (line 7) and adds a useState hook (line 13) but these are never used. The onHover callback is defined but the hover state isn't tracked anywhere. Either:
- Complete the animation implementation
- Remove the unused imports and state
Missing null check - In FeatureCard.handleMouseMove (line 35-40), there's a check for iconContainer but the element with class icon-spotlight-container only exists in the default variant (line 175). This could cause issues in other variants.

Best Practices from CLAUDE.md 📋

Logging patterns - This is frontend code, so backend logging patterns don't apply ✅
Git commit conventions - The PR uses Graphite CLI with conventional commits as required ✅
Dependencies - All dependencies appear to be existing workspace dependencies ✅

Test Coverage 🧪

Missing:

No tests included for the new components
Consider adding:
- Snapshot tests for the new FeaturesBentoBox component
- Integration tests for the new quickstart page routing
- Accessibility tests (a11y) for interactive elements

Documentation 📝

New quickstart page - The new quickstart/index.mdx is only 21 lines. Verify this provides sufficient content for new users.
Removed cloud page - cloud/page.tsx was completely removed (104 lines deleted). Ensure:
- No internal links point to /cloud
- External references are updated
- SEO redirects are in place if needed

Summary

This is a solid website update with good component architecture. The main areas for improvement are:

High Priority:
- Remove unused imports and dead code (framer-motion, unused icons)
- Fix incomplete animation implementation or remove it
- Add missing accessibility attributes
Medium Priority:
- Throttle mouse event handlers for better performance
- Consider splitting large components
- Add test coverage for new components
Low Priority:
- Extract hard-coded theme colors
- Consider adding animations if that was the intent

Overall: Approved with suggestions ✨

The changes improve the user experience and maintain code quality standards. Address the high-priority items before merging, and consider the medium-priority suggestions for follow-up PRs.

vercel · 2025-11-13T02:47:20Z

Deployment failed with the following error:

Too many requests - try again in 5 minutes (more than 120, code: "api-deployments-flood-pro").

Learn More: https://vercel.com/docs/limits#rate-limits

claude · 2025-11-13T03:03:56Z

PR Review - Website V3 Changes

Overview

This PR introduces significant updates to the marketing website, including a new quickstart navigation tab, updated deployment options section, a new features bento box component, and various content/styling improvements across multiple sections.

Code Quality & Best Practices

Strengths

Good component structure with well-defined props interfaces
Consistent use of TypeScript for type safety
Proper use of React hooks (useRef) for DOM manipulation
Good separation of concerns with dedicated components

Issues & Concerns

1. Type Safety Issue (FeaturesBentoBox.tsx)

icon: any;  // Line 21

Using any defeats the purpose of TypeScript. Should use a proper icon type from @rivet-gg/icons. Consider:

import type { IconDefinition } from '@rivet-gg/icons';
icon: IconDefinition;

2. Unused Import (FeaturesBentoBox.tsx:13)

faCheckCircle,  // Line 13 - imported but never used

This should be removed to keep the codebase clean.

3. Unused Import (UseCases.tsx)

import { AnimatePresence, motion } from "framer-motion";  // Line 7

These imports are added but never used in the visible diff. If not used, they should be removed to avoid unnecessary bundle size.

4. Unused Prop (UseCases.tsx:16)

onHover?: (title: string | null) => void;  // Added but never called in the component

The onHover prop is added to the interface and passed down but doesn't appear to be implemented/used. This suggests incomplete feature implementation.

5. Dead Code in HeroSection.tsx
Multiple commented-out alternative headlines (lines 16-18) should be removed rather than left as comments in production code.

Performance Considerations

1. Mouse Move Handler (FeaturesBentoBox.tsx:35-47)
The handleMouseMove function performs DOM queries on every mouse movement:

const iconContainer = card.querySelector('.icon-spotlight-container') as HTMLElement;

This could cause performance issues. Consider:

Caching the iconContainer reference in useRef
Throttling the mouse move handler
Using CSS-only solutions for spotlight effects where possible

2. Component Variants
The FeatureCard component has 5 different rendering paths (large, medium, small, code, default). Consider:

Extracting each variant into separate components for better code splitting
Using composition over conditional rendering for better performance

Accessibility Concerns

1. Missing rel Attribute on External Links
In MarketingButton.tsx, the rel prop is added but should be enforced for external links:

// Should add validation:
{target === '_blank' && \!rel && console.warn('External links should have rel="noopener noreferrer"')}

2. Link Descriptions
Many links lack clear aria-labels or descriptive text for screen readers, especially icon-only links.

Security Concerns

No major security issues found. The addition of the rel prop to MarketingButton is a good security practice for external links.

Content & UX Issues

1. Inconsistent Messaging
The DeploymentOptionsSection removes the "Bring Your Own Cloud" option and simplifies to three deployment types, but this might cause confusion for existing users expecting that option.

2. Broken Link Risk
The removal of /cloud/page.tsx (deleted file) needs verification that all references to this route are updated throughout the codebase.

3. Navigation Structure
Adding a new "Quickstart" tab is good for UX, but verify:

Mobile navigation handles the additional tab properly
The quickstart content at /docs/quickstart/ is comprehensive enough to stand alone
Breadcrumb navigation is updated accordingly

Test Coverage

Missing Tests:

No tests visible for the new FeaturesBentoBox component
No tests for the updated UseCases component with hover functionality
No visual regression tests for the significant layout changes

Recommendations:

Add unit tests for FeaturesBentoBox variants
Add integration tests for the new navigation structure
Consider visual regression testing for the bento box grid layout

Specific File Concerns

sitemap/mod.ts (lines 333-373)
The new Quickstart section duplicates some content from the Overview section. Consider:

Whether this duplication is intentional
If the sidebar structure could be DRYed up with shared configuration

Recommendations

Immediate fixes:
- Remove unused imports (faCheckCircle, AnimatePresence, motion)
- Fix the icon: any type to use proper IconDefinition type
- Implement or remove the unused onHover prop
- Remove commented-out code in HeroSection
Before merge:
- Verify all references to deleted /cloud/page.tsx are updated
- Test mobile navigation with new Quickstart tab
- Add basic tests for FeaturesBentoBox component
- Consider performance optimization for mouse move handler
Follow-up issues:
- Consider extracting FeatureCard variants into separate components
- Add comprehensive visual regression tests
- Improve accessibility with proper aria-labels
- Document the hover functionality design for UseCases

Overall Assessment

This is a solid PR with good improvements to the marketing site. The main concerns are:

Several unused imports/props suggesting incomplete implementation
Type safety regression with any type
Performance consideration for mouse move handlers
Missing test coverage

The changes improve UX with better navigation structure, but need cleanup and testing before merge.

Recommendation: Request changes for the type safety and unused code issues, then approve after fixes.

Review performed by Claude Code

claude · 2025-11-13T03:10:49Z

Pull Request Review

Thanks for the work on updating the website! This PR makes significant improvements to the marketing pages and documentation structure. Here's my review:

Positive Changes

Improved Navigation Structure: The addition of a dedicated quickstart page at /docs/quickstart/ is a great UX improvement, consolidating entry points for new users.
Consistent Link Updates: All Get Started buttons and CTAs now properly point to the new quickstart page, creating a unified user journey.
New FeaturesBentoBox Component: The bento box layout is visually appealing and provides a good overview of Actor features.

Code Quality Issues

FeaturesBentoBox.tsx (lines 1-290)

Unused Import (line 13): faCheckCircle is imported but never used in the component. Remove this unused import.
Weak Type Definition (line 21): The icon prop uses any type, which defeats TypeScript's type safety. Replace with proper type from @rivet-gg/icons.
Unused Variant (line 22): The variant type includes wide and code options, but wide is never used and code variant has hardcoded JSX instead of using props. Either remove unused variants or implement them properly.
Performance Concern (lines 35-48): The handleMouseMove function queries the DOM and updates CSS properties on every mouse movement using querySelector. This could cause performance issues with many cards. Consider using a ref for the icon container, throttling/debouncing mouse move events, or using requestAnimationFrame for smoother updates.
CSS Variables Without Fallback (lines 46-47): CSS variables --mouse-x and --mouse-y are set but ensure corresponding CSS exists and has fallback values.

UseCases.tsx (lines 1-260)

Non-Null Assertions (lines 144-151): Multiple uses of non-null assertion operator (!) without fallback handling. If a use case is not found, this will throw runtime errors. Add proper error handling instead.
Duplicate Icon Maps (lines 154-207): Both getIconPath and getHighlightedDescription use similar key-based lookups with hardcoded titles. Consider consolidating this into a single configuration object.

Security Considerations

External links: Verify all links with target="_blank" also include rel="noopener noreferrer" to prevent tabnapping attacks. Most external links look properly configured.

Performance Considerations

Mouse Move Handlers: Both FeaturesBentoBox and UseCases components attach onMouseMove handlers to multiple cards. With 7+ cards, this could impact performance on lower-end devices.
querySelector in Event Handlers: Repeated DOM queries in mouse move handlers should use refs for better performance.

Content and UX

Deleted Cloud Page: website/src/app/(v2)/(marketing)/cloud/page.tsx was deleted (104 lines removed). Ensure any incoming links to /cloud are redirected and SEO isn't negatively impacted.

Test Coverage

No tests included for the new FeaturesBentoBox component or updated components. Recommendations: Add snapshot tests for new components, test responsive grid behavior, verify links point to correct destinations, test mouse interaction handlers.

Summary

Must Fix Before Merge:

Remove unused imports (faCheckCircle)
Replace any type with proper type for icon prop
Add error handling for use case lookups (remove ! assertions)
Use refs instead of querySelector in mouse handlers

Should Consider:

Performance optimization for mouse move handlers
Consolidate duplicate configuration objects
Add tests for new components
Verify /cloud page deletion doesn't break SEO or redirects

Overall, this is a solid improvement to the website's UX and content structure. The main concerns are type safety, error handling, and performance optimization for the interactive elements.

claude · 2025-11-13T03:26:05Z

PR Review - Website V3 Changes

Thank you for this PR! This is a significant update to the marketing website with new navigation structure and visual improvements. Here's my detailed review:

✅ Positive Aspects

Good UX Improvements: The addition of a dedicated Quickstart page at /docs/quickstart/ improves user onboarding by providing a clear entry point
Consistent Link Updates: All "Get Started" buttons now correctly point to /docs/quickstart/, providing a unified user journey
Visual Polish: The new FeaturesBentoBox component provides an attractive, modern bento-grid layout for showcasing features
Responsive Design: Good attention to responsive breakpoints in the bento box grid (grid-cols-1 sm:grid-cols-2 md:grid-cols-4)

🐛 Potential Bugs & Issues

Unused Import in FeaturesBentoBox (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:13)
- faCheckCircle is imported but never used
- Fix: Remove this import to keep the code clean
Unused Prop in MarketingButton (website/src/app/(v2)/(marketing)/(index)/components/MarketingButton.tsx:8)
- Added rel prop but it's not used in most places where the component is called
- While not breaking, this inconsistency could be addressed
Unused State Variable (website/src/app/(v2)/(marketing)/(index)/sections/UseCases.tsx:3)
- useState is imported but based on the diff, the hover state tracking with onHover callback may not be fully utilized
- Recommendation: Verify if the useState import is actually needed or if it's leftover from development
icon Type Safety (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:21)
- Using icon: any bypasses TypeScript type checking
- Recommendation: Use a more specific type like IconDefinition from FontAwesome or create a proper icon type

🎨 Code Quality & Best Practices

Component Structure: The FeatureCard component uses multiple conditional renders for variants. Consider extracting each variant into its own sub-component for better maintainability:
```
function LargeFeatureCard(...) { ... }
function MediumFeatureCard(...) { ... }
function SmallFeatureCard(...) { ... }
```
Hardcoded Styles: The "code" variant in FeaturesBentoBox (line 131-153) has hardcoded code content inline. This makes it difficult to maintain. Consider:
- Moving code snippets to a separate data file
- Using a syntax highlighting library instead of manual span coloring
Missing Variant Support: The FeatureCard interface declares "wide" and "code" variants, but the actual implementation doesn't use "wide", and "code" variant is defined but never used in the features array
CSS Custom Properties: The mouse tracking effect uses --mouse-x and --mouse-y CSS variables, but there's no corresponding CSS that consumes these variables. Make sure the stylesheet has the appropriate spotlight effect styles.

⚡ Performance Considerations

Mouse Event Handlers: The handleMouseMove handlers call getBoundingClientRect() on every mouse move, which can be expensive. Consider:
- Throttling the handler using requestAnimationFrame
- Caching the rect dimensions when possible
querySelector in Event Handler: Running card.querySelector('.icon-spotlight-container') on every mouse move is inefficient
- Recommendation: Use a ref to store the icon container reference instead
Framer Motion Import: AnimatePresence and motion are imported in UseCases.tsx but the diff doesn't show their usage. If unused, remove to reduce bundle size

🔒 Security Concerns

External Links: The PR adds rel prop support to MarketingButton but doesn't always use rel="noopener noreferrer" for external links
- The GitHub link in DeploymentOptionsSection properly uses these attributes ✅
- Ensure all external links have proper rel attributes for security

📝 Content & Documentation

Deleted Cloud Page: The PR deletes website/src/app/(v2)/(marketing)/cloud/page.tsx entirely (104 lines)
- Make sure there are no internal links pointing to /cloud that would now be broken
- Consider adding a redirect if this was a previously published page
Quickstart Content: The new quickstart page is minimal (21 lines). Consider adding:
- Estimated time to complete each quickstart
- Prerequisites section
- "What you'll build" overview

🧪 Testing Recommendations

Since this is a Next.js website, consider:

Testing all updated links to ensure they point to valid routes
Verifying responsive behavior at all breakpoints
Testing the bento grid layout on different screen sizes
Ensuring the mouse spotlight effects work correctly (or gracefully degrade if the CSS is missing)

📊 Suggested Changes

High Priority:

Remove unused imports (faCheckCircle, possibly useState)
Improve type safety for the icon prop
Verify CSS for spotlight effect exists
Check for broken links to /cloud page

Medium Priority:

Refactor FeatureCard to use composition instead of large if-else chains
Optimize mouse event handlers with refs and throttling
Remove unused variant types or implement them

Low Priority:

Extract hardcoded code snippet to data file
Add more content to quickstart page
Create sub-components for better maintainability

Summary

This is a solid update that improves the user experience with better navigation and visual design. The main concerns are around code cleanliness (unused imports), performance optimization opportunities (event handlers), and ensuring all the interactive effects work as intended. The changes are primarily cosmetic and low-risk, but addressing the unused imports and type safety issues would improve code quality.

Overall: ✅ Approve with suggestions - The PR is functional but would benefit from the cleanup items mentioned above.

Review generated by Claude Code

- Added new Quickstart tab next to Overview and Integrations in docs navigation - Created new quickstart page at /docs/quickstart/ - Removed quickstart section from Overview tab sidebar - Updated all 'Get Started' buttons on home page to point to /docs/quickstart/ - Updated Local Development quickstart arrow to point to /docs/quickstart/ - Added quickstart to mobile navigation dropdown

claude · 2025-11-13T21:15:56Z

PR Review: Website V3 Marketing Changes

Summary

This PR introduces significant website marketing improvements including a new Quickstart section, updated copy, simplified deployment options, and a new features bento box component. Overall, the changes improve user onboarding and messaging clarity.

Code Quality & Best Practices

FeaturesBentoBox.tsx (New Component)

Issues:

TypeScript Type Safety (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:21)
- icon: any; should use a proper type. Consider using the icon type from @rivet-gg/icons or defining a union type.
```
// Instead of:
icon: any;

// Use:
icon: IconDefinition; // or whatever the proper type is from @rivet-gg/icons
```
Unused Import (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:13)
- faCheckCircle is imported but never used. Should be removed.
Code Variant Not Used (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:22)
- The "code" variant is defined but never used in the features array. Consider removing if not needed, or document if it's for future use.
Mouse Tracking Performance (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:35-47)
- The handleMouseMove function runs on every mouse movement. Consider throttling/debouncing for better performance, especially on lower-end devices.

Good Patterns:

Proper use of refs for DOM access
Clean variant-based rendering pattern
Consistent styling structure

MarketingButton.tsx

Issues:

Inconsistent Indentation (website/src/app/(v2)/(marketing)/(index)/components/MarketingButton.tsx:20)
- Uses spaces instead of tabs. According to CLAUDE.md, this codebase uses hard tabs for formatting.
```
// Line 20 uses spaces, should use tabs:
	  target={target}
	  rel={rel}  // This line has inconsistent indentation
```

UseCases.tsx

Issues:

Unused Import (website/src/app/(v2)/(marketing)/(index)/sections/UseCases.tsx:7)
- AnimatePresence and motion from framer-motion are imported but not used in the visible code.
Unused State (website/src/app/(v2)/(marketing)/(index)/sections/UseCases.tsx:3)
- useState is imported but the diff doesn't show it being used. The onHover callback is added but the hover state management isn't visible.

Potential Bugs

Missing rel Attribute on External Links (website/src/app/(v2)/(marketing)/(index)/sections/DeploymentOptionsSection.tsx:48-49)
- External link to GitHub doesn't include rel="noopener noreferrer" for security.
Grid Layout Responsiveness (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx:244)
- auto-rows-[200px] with dynamic content might cause overflow issues on small screens or with longer text.

Performance Considerations

Multiple Mouse Event Handlers
- Both FeaturesBentoBox.tsx and UseCases.tsx have similar mouse tracking patterns. Consider extracting to a shared hook to reduce duplication and bundle size.
CSS-in-JS Classes
- Long template literal classes could be extracted to constants for better performance and readability.

Content & UX

Strengths:

Clearer value proposition: "The Primitive for Real-Time and Agent Applications"
Simplified deployment options focus on the most important paths
New Quickstart section improves discoverability
Better CTA consistency across the site

Questions:

The cloud page was deleted (website/src/app/(v2)/(marketing)/cloud/page.tsx). Is this intentional? Make sure all links to /cloud are updated.
Copy Clarity (website/src/app/(v2)/(marketing)/(index)/sections/DeploymentOptionsSection.tsx:27-28)
- "Build on any cloud while we manage the Actors for you" - Consider being more specific about what "manage" means.

Security Concerns

External Links Without rel Attributes
- Some external links are missing rel="noopener noreferrer". This is a security best practice to prevent tabnabbing.
- Locations: DeploymentOptionsSection.tsx:48

Test Coverage

Missing:

No tests visible for the new FeaturesBentoBox component
No tests for the updated MarketingButton props (rel attribute)

Recommendation:

Add component tests for FeaturesBentoBox to verify proper rendering of all variants
Add accessibility tests for interactive cards

Style & Conventions

Following CLAUDE.md:

✅ TypeScript is used appropriately
✅ Component structure follows existing patterns
❌ Indentation issues in MarketingButton.tsx (should use hard tabs)

Recommendations

High Priority:

Fix TypeScript any type in FeaturesBentoBox
Fix indentation in MarketingButton to use hard tabs
Add rel="noopener noreferrer" to external GitHub link
Remove unused imports (faCheckCircle, AnimatePresence, motion, useState if not used)

Medium Priority:
5. Consider throttling mouse move handlers for performance
6. Extract common mouse tracking pattern to shared hook
7. Add accessibility attributes (aria-labels) to interactive cards
8. Verify all /cloud references are updated after page deletion

Low Priority:
9. Document or remove unused "code" variant
10. Consider extracting long className strings to constants

Overall Assessment

This is a solid PR that improves the marketing site's messaging and UX. The main issues are minor TypeScript and code quality concerns. Once the type safety and unused imports are cleaned up, this should be good to merge.

Recommendation: Approve with minor changes requested

🤖 Generated with Claude Code

claude · 2025-11-13T21:16:59Z

PR Review - Website Content & Navigation Updates

Thank you for the website improvements! This PR makes significant UX enhancements to the marketing site. Here's my review:

Strengths

Improved Navigation: Adding a dedicated Quickstart page at /docs/quickstart/ and updating CTAs is a positive UX change
Content Refinement: Simplified headings (4xl to 3xl) and messaging makes the site more approachable
New FeaturesBentoBox Component: Well-structured component with good accessibility (semantic HTML, proper Link usage)
Consistent Styling: Props additions to MarketingButton maintain consistency

Potential Issues

Unused Import (FeaturesBentoBox.tsx:13): faCheckCircle is imported but never used
Icon Type Safety (FeaturesBentoBox.tsx:21): The icon prop uses any type, which bypasses TypeScript safety
- Suggestion: Use IconDefinition type from @fortawesome/fontawesome-svg-core
Unused Variant (FeaturesBentoBox.tsx:22): wide variant is defined but never implemented
Inconsistent Tab/Space Mixing (MarketingButton.tsx:20-21): Lines use tabs while surrounding lines use spaces
Missing Usage: Added useState and AnimatePresence, motion imports to UseCases.tsx but they may not be fully utilized

Performance Considerations

Mouse Move Handler: The handleMouseMove in FeatureCard queries DOM on every mouse move. Consider:
- Memoizing the selector result using useRef
- Adding throttling for high-frequency updates
- Caching the querySelector result
Map Key Stability: Using feature.href as key is good, but ensure hrefs are unique

Security

External Links: MarketingButton now accepts rel prop (good!), and external links properly use rel="noopener noreferrer" consistently

Suggestions

TypeScript Type Safety: Replace icon: any with a proper type like IconDefinition
Remove Unused Code:
- Remove faCheckCircle import
- Remove wide variant or implement it
- Remove unused imports in UseCases.tsx
Optimize Mouse Handler: Cache the DOM query result in a ref instead of calling querySelector on every mouse move
Accessibility: Consider adding aria-label attributes to icon-only elements for screen readers

Test Coverage

No test files were modified. Consider adding:

Visual regression tests for the new FeaturesBentoBox component
E2E tests for the new quickstart navigation flow
Tests for MarketingButton with new props

Overall Assessment

This is a solid UI/UX improvement PR. The code quality is good with minor issues to address. The main concerns are:

Cleanup unused imports/variants
Improve type safety
Optimize mouse move handler for better performance

Recommendation: Approve with minor revisions suggested above.

This review was generated with assistance from Claude Code

NicholasKissel mentioned this pull request Nov 1, 2025

chore(website): flatten actors docs structure #3280

Open

NicholasKissel force-pushed the 10-25-chore_website_changes_v3_on_v2 branch from 3ac1277 to 8c067ef Compare November 4, 2025 19:48

vercel bot temporarily deployed to Preview – rivetkit-serverless November 4, 2025 19:48 Inactive

vercel bot had a problem deploying to Preview – rivet-site November 4, 2025 19:48 Failure

NathanFlurry force-pushed the 10-25-chore_website_changes_v3_on_v2 branch from 8c067ef to b5990b2 Compare November 13, 2025 01:31

NathanFlurry force-pushed the 10-25-chore_website_flatten_actors_docs_structure branch from 3c9700f to 5e287ca Compare November 13, 2025 01:31

vercel bot had a problem deploying to Preview – rivet-site November 13, 2025 01:31 Failure

vercel bot had a problem deploying to Preview – rivetkit-serverless November 13, 2025 01:32 Failure

NathanFlurry marked this pull request as ready for review November 13, 2025 01:33

NathanFlurry force-pushed the 10-25-chore_website_changes_v3_on_v2 branch from b5990b2 to 457d118 Compare November 13, 2025 02:47

NathanFlurry force-pushed the 10-25-chore_website_flatten_actors_docs_structure branch from 5e287ca to 1f1b0e0 Compare November 13, 2025 02:47

NathanFlurry force-pushed the 10-25-chore_website_flatten_actors_docs_structure branch from 1f1b0e0 to 9737523 Compare November 13, 2025 03:24

NathanFlurry force-pushed the 10-25-chore_website_changes_v3_on_v2 branch from 457d118 to 72676eb Compare November 13, 2025 03:24

vercel bot had a problem deploying to Preview – rivet-site November 13, 2025 03:24 Failure

vercel bot had a problem deploying to Preview – rivetkit-serverless November 13, 2025 03:24 Failure

This was referenced Nov 13, 2025

chore(rivetkit-typescript): remove dependency on node modules #3460

Merged

chore(rivetkit): switch dynamic node imports to use require #3461

Merged

NathanFlurry mentioned this pull request Nov 13, 2025

chore(rivetkit): fix type checks #3462

Merged

NicholasKissel added 3 commits November 13, 2025 12:51

chore: create branch for v3 website changes on v2

858d55d

chore(site): website changes v3

cad6172

NathanFlurry force-pushed the 10-25-chore_website_changes_v3_on_v2 branch from 72676eb to afd0d10 Compare November 13, 2025 21:09

NathanFlurry force-pushed the 10-25-chore_website_flatten_actors_docs_structure branch from 9737523 to 1a35970 Compare November 13, 2025 21:09

vercel bot had a problem deploying to Preview – rivet-site November 13, 2025 21:10 Failure

vercel bot had a problem deploying to Preview – rivetkit-serverless November 13, 2025 21:10 Failure

chore: create branch for v3 website changes on v2 #3304

Are you sure you want to change the base?

chore: create branch for v3 website changes on v2 #3304

Uh oh!

Conversation

NicholasKissel commented Nov 1, 2025

Uh oh!

vercel bot commented Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NicholasKissel commented Nov 1, 2025 • edited by NathanFlurry Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

claude bot commented Nov 1, 2025

PR Review: Website V3 Changes

Overview

Critical Issues

1. Unused Import in FeaturesBentoBox.tsx

2. Overly Broad Type for Icon Prop

3. Unused Variant in TypeScript Union

4. Misleading Link Text

Code Quality Issues

5. Inconsistent Tab/Space Indentation

6. Unused Code Variant

7. Hardcoded Code Example

Performance Considerations

8. Mouse Move Event Listener Efficiency

Accessibility Issues

9. Missing Icon Accessibility Labels

UX/Content Issues

10. Removed Descriptive Text

11. Deleted Cloud Marketing Page

Positive Observations

Summary

Uh oh!

claude bot commented Nov 4, 2025

PR Review: Website Changes v3

Overview

Positive Aspects

Issues & Recommendations

1. Unused Import (FeaturesBentoBox.tsx:13)

2. Type Safety Issue (FeaturesBentoBox.tsx:21)

3. Duplicate Icons in Features Array (FeaturesBentoBox.tsx:191, 205)

4. Unused Variant in Interface (FeaturesBentoBox.tsx:22)

5. Missing rel Attribute Usage (MarketingButton.tsx)

6. Accessibility Concern (FeaturesBentoBox.tsx)

7. Code Duplication in FeatureCard Variants

8. Inconsistent Link Behavior (DeploymentOptionsSection.tsx)

9. Hardcoded Code Example (FeaturesBentoBox.tsx:131-154)

10. Missing Error Handling (FeatureCard.tsx:35-47)

Testing Recommendations

Security Considerations

Documentation

Performance Considerations

Summary

Checklist Before Merge

Uh oh!

claude bot commented Nov 13, 2025

Pull Request Review: Website Changes v3

Overview

Positive Aspects

Issues & Recommendations

1. Type Safety Issues (website/src/app/(v2)/(marketing)/(index)/sections/FeaturesBentoBox.tsx)

2. Unused Code & Props

3. Accessibility Concerns

4. Performance Considerations

5. Hardcoded Code Snippet

6. Missing Content

7. Inconsistent Styling

8. SEO & Metadata

9. Deleted File

10. Sitemap Changes

Security

Testing Recommendations

Summary

Uh oh!

claude bot commented Nov 13, 2025

PR Review: Website Changes for V3

Code Quality & Best Practices ✅

vercel bot commented Nov 1, 2025 •

edited

Loading

NicholasKissel commented Nov 1, 2025 •

edited by NathanFlurry

Loading