- Install {productName} and run it locally while you build. + Install {productName} and run it locally while you build. When you ship, + run the same open-source control plane as a Rust binary or container on + your own infrastructure.
- Run the open-source Rivet control plane as a Rust binary or container on - your infrastructure. + Run the control plane inside your own VPC, fully managed by Rivet. Your + data never leaves your cloud and there is no inbound management + connection.
- - Read self-hosting docs + + Read the BYOC docs{model.hint}
- - {model.cta} - +- Add multi-tenancy, access controls, backups, and deployment guidance to a self-hosted deployment. + Add multi-tenancy, access controls, backups, and deployment guidance to a BYOC or self-hosted deployment.
Explore Enterprise diff --git a/src/components/marketing/sections/AgentStackSection.tsx b/src/components/marketing/sections/AgentStackSection.tsx index 0595ff54..5807acc3 100644 --- a/src/components/marketing/sections/AgentStackSection.tsx +++ b/src/components/marketing/sections/AgentStackSection.tsx @@ -634,8 +634,26 @@ ${answeringLayers // cards in normal document flow so every need remains readable below it, // including the taller agentOS step, without introducing a nested scroll // container. + // On phones each card snaps to the slot between the diagram and the bottom + // of the screen and grows to fill it. The root is the snap container (the + // cards live in normal flow), with `proximity` so the rest of the page + // scrolls freely and only settles when a card is already close. `[data-agent-stack-story]{ --agent-stack-sticky-top:calc(var(--header-height,3.5rem) + 2.5rem); + --agent-stack-panel-height:38svh; + --agent-stack-card-top:calc(var(--agent-stack-sticky-top) + var(--agent-stack-panel-height) + 1.5rem); + } + @media (max-width: 47.999rem){ + html{scroll-snap-type:y proximity;} + [data-agent-stack-step]{ + scroll-snap-align:start; + scroll-margin-top:var(--agent-stack-card-top); + } + [data-agent-stack-card]{ + display:flex; + flex-direction:column; + min-height:calc(100svh - var(--agent-stack-card-top) - 1rem); + } } [data-agent-stack-story] [data-mobile-plate]{ opacity:.24; @@ -811,7 +829,7 @@ const MobileStackStory = () => ( className="pointer-events-none absolute inset-x-0 bottom-full h-10 bg-paper" />What agents need
diff --git a/src/components/marketing/sections/OnPremSection.tsx b/src/components/marketing/sections/OnPremSection.tsx index 51609092..94774faa 100644 --- a/src/components/marketing/sections/OnPremSection.tsx +++ b/src/components/marketing/sections/OnPremSection.tsx @@ -11,11 +11,11 @@ import { const pillars = [ { title: "Single Rust binary", - body: "One process to install, monitor, and upgrade.", + body: "One process to install, monitor, and upgrade, on Kubernetes with the Enterprise Helm chart or as a systemd unit.", }, { - title: "Kubernetes or systemd", - body: "Deploy with the Enterprise Helm chart or a systemd unit.", + title: "Managed in your VPC", + body: "With BYOC, Rivet deploys and maintains the control plane inside your cloud over an outbound connection.", }, { title: "Storage you control", diff --git a/src/components/marketing/sections/SolutionsSection.module.css b/src/components/marketing/sections/SolutionsSection.module.css new file mode 100644 index 00000000..a51a012d --- /dev/null +++ b/src/components/marketing/sections/SolutionsSection.module.css @@ -0,0 +1,422 @@ +/* Hover playback for the solution-card vignettes. At rest every vignette is a + finished still; hovering (or keyboard-focusing) the card replays the story + once: terminal lines type in, steps tick, wires draw, messages arrive, a + cursor sweeps. Pure CSS so the section stays hook-free and unhydrated. + Only on pointer devices that can hover, and never under reduced motion. + Stagger comes from a per-element `--i` index set inline. */ + +@media (hover: hover) and (prefers-reduced-motion: no-preference) { + /* Every vignette resets to its opening frame the instant the hover begins. + Do not fade the whole stage to cover that cut: the ink panels going + transparent for a frame reads as a bright flash, far worse than the cut. */ + + /* Coding agent: terminal replays line by line, status dot blinks. */ + .card:hover .typeLine, + .card:focus-visible .typeLine { + animation: type-in 200ms ease-out both; + animation-delay: calc(var(--i, 0) * 240ms + 80ms); + } + .card:hover .runDot, + .card:focus-visible .runDot { + animation: blink 900ms steps(2, end) infinite; + } + + /* App builder: prompt lands, steps tick through, the app rises and its rows fill in. */ + .card:hover .prompt, + .card:focus-visible .prompt { + animation: type-in 260ms ease-out both; + } + .card:hover .step, + .card:focus-visible .step { + animation: type-in 220ms ease-out both; + animation-delay: calc(var(--i, 0) * 280ms + 320ms); + } + .card:hover .panel, + .card:focus-visible .panel { + animation: rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 1200ms; + } + .card:hover .row, + .card:focus-visible .row { + animation: type-in 240ms ease-out both; + animation-delay: calc(var(--i, 0) * 160ms + 1550ms); + } + .card:hover .liveDot, + .card:focus-visible .liveDot { + animation: pulse 1.4s ease-in-out infinite; + animation-delay: 1200ms; + } + + /* Company agent: a ticket lands, the agent wakes, wires draw out to each + system, systems light up, the resolution posts. */ + .card:hover .ticket, + .card:focus-visible .ticket { + animation: flash 700ms ease-out both; + } + .card:hover .ticketDot, + .card:focus-visible .ticketDot { + animation: ping 900ms ease-out both; + } + .card:hover .agentBox, + .card:focus-visible .agentBox { + animation: connect 320ms ease-out both; + animation-delay: 350ms; + } + .card:hover .wire, + .card:focus-visible .wire { + transform-origin: left center; + animation: grow 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: calc(var(--i, 0) * 260ms + 500ms); + } + .card:hover .system, + .card:focus-visible .system { + animation: connect 320ms ease-out both; + animation-delay: calc(var(--i, 0) * 260ms + 860ms); + } + .card:hover .resultChip, + .card:focus-visible .resultChip { + transform-origin: left center; + animation: pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 1800ms; + } + .card:hover .connectedDot, + .card:focus-visible .connectedDot { + animation: pulse 1.4s ease-in-out infinite; + animation-delay: 1300ms; + } + + /* Personal agent: the schedule fires, the request lands, the agent types, + replies, pins the reminder, and the memory count ticks up. */ + .card:hover .schedule, + .card:focus-visible .schedule { + animation: flash 700ms ease-out both; + } + .card:hover .scheduleDot, + .card:focus-visible .scheduleDot { + animation: ping 900ms ease-out both; + } + .card:hover .bubbleOut, + .card:focus-visible .bubbleOut { + animation: slide-from-right 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 350ms; + } + .card:hover .typing, + .card:focus-visible .typing { + animation: hold 1000ms ease-in-out both; + animation-delay: 650ms; + } + .card:hover .typingDot, + .card:focus-visible .typingDot { + animation: bob 700ms ease-in-out infinite; + animation-delay: calc(var(--i, 0) * 140ms); + } + .card:hover .bubbleIn, + .card:focus-visible .bubbleIn { + animation: slide-from-left 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 1650ms; + } + .card:hover .chip, + .card:focus-visible .chip { + transform-origin: left center; + animation: pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 2150ms; + } + .card:hover .countOld, + .card:focus-visible .countOld { + animation: count-out 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 2250ms; + } + .card:hover .countNew, + .card:focus-visible .countNew { + animation: count-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 2250ms; + } + + /* Realtime: collaborators arrive, JM types a line, the box ticks, RS types + the next line, sync settles. A typed line is one clip-path wipe over the + full text plus one marker (caret + name tag) that sweeps from the left + edge to the right edge on the same linear clock, so the text edge and the + marker move together and the tag glides instead of jumping. The line + always occupies its full width, so nothing reflows while typing. */ + .card:hover .avatar, + .card:focus-visible .avatar { + animation: pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: calc(var(--i, 0) * 120ms + 80ms); + } + .card:hover .typedText, + .card:focus-visible .typedText { + animation: wipe var(--dur) linear var(--start) both; + } + .card:hover .typedMarker, + .card:focus-visible .typedMarker { + animation: + sweep var(--dur) linear var(--start) both, + appear var(--dur) step-start var(--start) both; + } + .card:hover .tick, + .card:focus-visible .tick { + animation: tick 260ms ease-out both; + animation-delay: 1650ms; + } + .card:hover .tickMark, + .card:focus-visible .tickMark { + animation: pop 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; + animation-delay: 1720ms; + } + .card:hover .synced, + .card:focus-visible .synced { + animation: hidden-while 2500ms step-end both; + animation-delay: 450ms; + } + .card:hover .syncing, + .card:focus-visible .syncing { + animation: shown-while 2500ms step-end both; + animation-delay: 450ms; + } +} + +/* Typed line: full-width inline box; the marker hangs off its right edge at + rest and sweeps across it on hover. */ +.typed { + position: relative; + display: inline-block; + white-space: pre; +} +.typedMarker { + position: absolute; + top: 50%; + left: 100%; + display: flex; + align-items: center; + gap: 0.25rem; + transform: translateY(-50%); + pointer-events: none; +} +.typedCaret { + width: 1px; + height: 1.15em; + background: var(--caret); +} +.typedTag { + padding: 1px 4px; + border-radius: 2px; + background: var(--caret); + color: #fff; + font-size: 8px; + font-weight: 500; + line-height: 1; + white-space: nowrap; +} + +@keyframes wipe { + from { + clip-path: inset(0 100% 0 0); + } + to { + clip-path: inset(0 0 0 0); + } +} +@keyframes sweep { + from { + left: 0; + } + to { + left: 100%; + } +} +/* Hidden until its start; `step-start` (not step-end) so a rounding-short + finish can never leave it stuck on the `from` frame. */ +@keyframes appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes type-in { + from { + opacity: 0; + transform: translateY(3px); + } + to { + opacity: 1; + transform: none; + } +} + +@keyframes blink { + 50% { + opacity: 0.25; + } +} + +@keyframes pulse { + 50% { + opacity: 0.35; + transform: scale(0.8); + } +} + +@keyframes rise { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: none; + } +} + +@keyframes grow { + from { + transform: scaleX(0); + } + to { + transform: scaleX(1); + } +} + +@keyframes connect { + from { + border-color: rgb(27 25 22 / 0.1); + color: #56524a; + } + to { + border-color: rgb(46 64 52 / 0.6); + color: #1b1916; + } +} + +@keyframes flash { + 0% { + background-color: rgb(46 64 52 / 0.12); + } + 100% { + background-color: #efefef; + } +} + +@keyframes slide-from-right { + from { + opacity: 0; + transform: translateX(10px); + } + to { + opacity: 1; + transform: none; + } +} + +@keyframes slide-from-left { + from { + opacity: 0; + transform: translateX(-10px); + } + to { + opacity: 1; + transform: none; + } +} + +@keyframes pop { + from { + opacity: 0; + transform: scale(0.6); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes tick { + from { + background-color: transparent; + } + to { + background-color: #2e4034; + } +} + +/* Quick expand-and-settle ring for a scheduled trigger firing. */ +@keyframes ping { + 0% { + box-shadow: 0 0 0 0 rgb(46 64 52 / 0.45); + } + 100% { + box-shadow: 0 0 0 7px rgb(46 64 52 / 0); + } +} + +/* Visible only for the middle of its run (used for transient states such as + a typing indicator or a "syncing…" label). */ +@keyframes hold { + 0%, + 100% { + opacity: 0; + } + 12%, + 88% { + opacity: 1; + } +} + +/* Inverse of `hold` with hard edges, for the label that gets replaced. */ +@keyframes hidden-while { + 0%, + 100% { + opacity: 1; + } + 1%, + 99% { + opacity: 0; + } +} + +@keyframes shown-while { + 0%, + 100% { + opacity: 0; + } + 1%, + 99% { + opacity: 1; + } +} + +@keyframes bob { + 0%, + 100% { + transform: translateY(0); + opacity: 0.5; + } + 40% { + transform: translateY(-2px); + opacity: 1; + } +} + +@keyframes count-out { + from { + opacity: 1; + transform: none; + } + to { + opacity: 0; + transform: translateY(-100%); + } +} + +@keyframes count-in { + from { + opacity: 0; + transform: translateY(100%); + } + to { + opacity: 1; + transform: none; + } +} diff --git a/src/components/marketing/sections/SolutionsSection.tsx b/src/components/marketing/sections/SolutionsSection.tsx new file mode 100644 index 00000000..efe31aff --- /dev/null +++ b/src/components/marketing/sections/SolutionsSection.tsx @@ -0,0 +1,582 @@ +import { Fragment, type CSSProperties, type ReactNode } from "react"; +import { ProductBadge } from "@/components/ProductBar"; +import { canonicalizeInternalHref } from "@/lib/internalHref"; +import { products, type Product } from "@/sitemap/products"; +import { SITE_SECTION_CLASS, SITE_STANDARD_RAIL_CLASS } from "../layout"; +import { CARD_TITLE_CLASS, SECTION_H2_CLASS } from "../typography"; +import styles from "./SolutionsSection.module.css"; + +// Solutions catalog: what people build on Rivet, one card per kind of +// product. Each card names the shape of the workload, the products it leans +// on, and a small hand-built vignette of the thing itself. The grid is two +// wide plates over three narrow ones so the two biggest stories get the room. +// Hook-free so the landing page renders it with no client directive. Each +// vignette replays its story on card hover via SolutionsSection.module.css; +// `stagger(i)` sets the per-element delay index those keyframes read. + +type ProductId = "actors" | "agentos" | "workflows" | "dynamic-apps"; + +interface Solution { + id: string; + title: string; + href: string; + linkLabel: string; + uses: ProductId[]; + vignette: ReactNode; + wide?: boolean; +} + +const stagger = (index: number) => ({ "--i": index }) as CSSProperties; + +const productById = (id: ProductId): Product | undefined => + products.find((product) => product.id === id); + +// Vignette frame on porcelain: white fill, hairline, clipped. Ink variants +// (terminal) paint their own surface. +const VIGNETTE_CLASS = `relative flex flex-1 flex-col overflow-hidden rounded-lg border border-ink/10 bg-white text-[12px] leading-snug text-ink-soft`; + +const MiniChromeBar = ({ children }: { children?: ReactNode }) => ( ++ › Fix the flaky test in + checkout.spec.ts +
++ $ pnpm vitest run checkout +
++ {" "}12 passed · 1 failed · + total.ts:41 rounding +
++ ~ src/checkout/total.ts{" "} + +3{" "} + −1 +
++ $ pnpm vitest run checkout +
++ {" "}13 passed +
++ › Opened PR #482 · resumed after 2 + restarts +
++ Release v3 · live for 2 users +
++ + Refund issued · ticket resolved + + + + 3 systems connected + +
++ Online 214 days + + + + 1,205 memories + + +
+Launch checklist
++ + + 3 editing now + + + + synced · 12 ms + + + +
+Keep runtime, control plane, and data under the controls your team already - operates. The same platform that powers Rivet Cloud. + operates, managed by Rivet in your VPC or run entirely by you. The same + platform that powers Rivet Cloud.
+ Both run the same Enterprise Edition control plane. Choose whether Rivet operates it or your team does. +
+{path.body}
+