chore: create branch for v3 website changes on v2

[NicholasKissel]

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]

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

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-site	Error			Nov 4, 2025 7:48pm

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Nov 4, 2025 7:48pm
rivet-inspector	Ignored	Preview		Nov 4, 2025 7:48pm
rivetkit-serverless	Skipped			Nov 4, 2025 7:48pm

[NicholasKissel]

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

• chore: create branch for v3 website changes on v2 #3304 👈 (View in Graphite)
• chore(website): flatten actors docs structure #3280
• 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: 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]

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

1. Visual Testing: Verify the bento box grid layout works correctly across different screen sizes (mobile, tablet, desktop)
2. Navigation Testing: Ensure all updated links (especially the new quickstart paths) resolve correctly
3. Accessibility Testing:
   • Test keyboard navigation through the feature cards
   • Verify screen reader compatibility
   • Check color contrast ratios for WCAG compliance
4. 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:

1. Type safety issues (using any)
2. Code duplication and maintainability
3. Accessibility improvements needed
4. 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!