Skip to content

Commit f98de53

Browse files
NicholasKisselNicholasKissel
committed
chore: pricing page
1 parent d4f2bbf commit f98de53

File tree

2 files changed

+277
-59
lines changed

2 files changed

+277
-59
lines changed

‎site/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@fortawesome/free-solid-svg-icons": "^6.5.2",
1818
"@fortawesome/react-fontawesome": "^0.2.2",
1919
"@giscus/react": "^3.1.0",
20-
"@headlessui/react": "^1.7.13",
20+
"@headlessui/react": "^2.0.0",
2121
"@heroicons/react": "^2.0.18",
2222
"@inquirer/prompts": "^6.0.1",
2323
"@mdx-js/loader": "^3.1.0",
@@ -56,8 +56,9 @@
5656
"postcss": "^8.4.24",
5757
"postcss-focus-visible": "^6.0.4",
5858
"posthog-js": "^1.206",
59-
"react": "*",
59+
"react": "^18.2.0",
6060
"react-chartjs-2": "^5.2.0",
61+
"react-dom": "^18.2.0",
6162
"react-github-btn": "^1.4.0",
6263
"react-highlight-words": "^0.20.0",
6364
"react-markdown": "^9.0.1",

‎site/src/app/(v2)/(marketing)/page.tsx‎

Lines changed: 274 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,37 @@ import Link from "next/link";
33
import { Button } from "@rivet-gg/components";
44
import {
55
Icon,
6+
faCode,
7+
faLayerGroup,
8+
faTerminal,
9+
faDesktop,
10+
faListCheck,
11+
faArrowsToCircle,
12+
faReact,
13+
faVuejs,
14+
faAngular,
15+
faNodeJs,
16+
faPython,
17+
faPhp,
18+
faJava,
19+
faCss3Alt,
20+
faHtml5,
21+
faRust,
22+
faSwift,
23+
faJsSquare,
24+
faGolang,
25+
faDatabase,
26+
faDocker,
627
faArrowRight,
28+
faRobot,
29+
faServer,
30+
faVectorSquare,
731
} from "@rivet-gg/icons";
832
import { CopyCommand } from "./CopyCommand";
933
import { TutorialsSection } from "./TutorialsSection";
1034
import { CommandCenterSection } from "./CommandCenterSection";
1135
import { CommunitySection } from "./CommunitySection";
1236
import { CtaSection } from "./CtaSection";
13-
import { MarketingButton } from "./MarketingButton";
14-
import { CtaButtons } from "./CtaButtons";
15-
import { PowerfulPrimitivesSection } from "./PowerfulPrimitivesSection";
16-
import { ServerlessLimitationsSection } from "./ServerlessLimitationsSection";
17-
import { RivetCloudSection } from "./RivetCloudSection";
18-
import { PerformanceSection } from "./PerformanceSection";
19-
import { FeaturesGrid } from "./FeaturesGrid";
20-
import { FrameworksSection } from "./FrameworksSection";
2137

2238
export const metadata: Metadata = {
2339
title: "Rivet - The Open-Source Serverless Platform",
@@ -31,37 +47,92 @@ export default function IndexPage() {
3147
return (
3248
<>
3349
<div />
34-
35-
{/* BG gradient */}
36-
{/*<div className="absolute inset-0 h-[800px] w-full bg-gradient-to-bl from-[rgba(255,255,255,0.03)] via-[rgba(255,255,255,0.01)] to-transparent z-[-1]"></div>*/}
37-
38-
{/* Content */}
39-
<main className="min-h-screen w-full max-w-[1500px] mx-auto px-4 md:px-8">
50+
<main className="min-h-screen w-full max-w-[1500px] mx-auto md:px-8">
4051
<Hero />
4152
<FeaturesGrid />
42-
<PowerfulPrimitivesSection />
43-
<ServerlessLimitationsSection />
44-
<PerformanceSection />
45-
{/*<FrameworksSection />*/}
46-
{/*<TutorialsSection />*/}
53+
<FrameworksSection />
54+
<TutorialsSection />
4755
<CommandCenterSection />
48-
<RivetCloudSection />
4956
<CommunitySection />
5057
<CtaSection />
5158
</main>
5259
</>
5360
);
5461
}
62+
5563
// Hero component with title, subtitle, and CTA buttons
5664
const Hero = () => {
5765
return (
58-
<div className="relative isolate overflow-hidden pb-8 sm:pb-10 pt-40">
59-
<div className="mx-auto max-w-[1200px] md:px-8"> {/* Width/padding ocpied from FancyHeader */}
60-
<div className="max-w-2xl mx-auto sm:mx-0">
61-
{/* On-Prem CF Workers */}
62-
{/*<div>
66+
<div className="relative isolate overflow-hidden pt-14">
67+
<div className="mx-auto max-w-7xl px-6 pt-24 pb-12 sm:pt-32 sm:pb-16 lg:px-8">
68+
<div className="mx-auto max-w-4xl text-center">
69+
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl md:text-6xl">
70+
The Open-Source
71+
<br className="hidden sm:block" />
72+
Serverless Platform
73+
</h1>
74+
<p className="mt-8 text-lg leading-8 text-white/70 max-w-2xl mx-auto">
75+
Easily build & scale{" "}
76+
<span className="text-white font-medium">
77+
AI agents
78+
</span>
79+
,{" "}
80+
<span className="text-white font-medium">
81+
functions
82+
</span>
83+
,{" "}
84+
<span className="text-white font-medium">
85+
stateful services
86+
</span>
87+
, and more.
88+
<br />
89+
<span className="text-white/60 font-light">
90+
Open-source & self-hostable.
91+
</span>
92+
</p>
93+
<div className="mt-10 flex items-center justify-center gap-x-6">
94+
<Button
95+
size="lg"
96+
asChild
97+
className="px-4 pr-6 py-3 text-base bg-gradient-to-b from-[#FF5C00] to-[#FF5C00]/90 border border-[#FF5C00]/30 hover:border-[#FF5C00]/60 transition-all duration-200 group"
98+
>
99+
<Link
100+
href="#deploy"
101+
className="flex items-center justify-center relative"
102+
>
103+
<span>Deploy in 1 Minute</span>
104+
<Icon
105+
icon={faArrowRight}
106+
className="absolute right-2 text-sm opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200"
107+
/>
108+
</Link>
109+
</Button>
110+
<Button
111+
variant="outline"
112+
size="lg"
113+
asChild
114+
className="px-4 pr-6 py-3 text-base border-white/10 hover:border-white/30 transition-all duration-200 group"
115+
>
116+
<Link
117+
href="#demo"
118+
className="flex items-center justify-center relative"
119+
>
120+
<span>Book Demo</span>
121+
<Icon
122+
icon={faArrowRight}
123+
className="absolute right-2 text-sm opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200"
124+
/>
125+
</Link>
126+
</Button>
127+
</div>
128+
129+
<div className="mt-6 text-center">
130+
<p className="text-white/40 mb-6">or run locally</p>
131+
<CopyCommand command="docker run rivetgg/rivet:latest" />
132+
</div>
133+
<div className="mt-8 inline-flex">
63134
<Link
64-
href="/docs/rivet-vs-cloudflare-workers"
135+
href="/docs/cloudflare-compatibility"
65136
className="group"
66137
>
67138
<div className="text-sm px-4 py-2 bg-[#FF5C00]/5 border border-[#FF5C00]/10 rounded-full inline-flex items-center group-hover:bg-[#FF5C00]/10 group-hover:border-[#FF5C00]/20 transition-all">
@@ -83,44 +154,190 @@ const Hero = () => {
83154
</div>
84155
</Link>
85156
</div>
157+
</div>
158+
</div>
159+
</div>
160+
);
161+
};
86162

87-
<div className="h-8" />*/}
163+
// Feature component for individual features
164+
const Feature = ({
165+
title,
166+
description,
167+
faIcon,
168+
href,
169+
useCases,
170+
}: {
171+
title: string;
172+
description: string;
173+
faIcon: any;
174+
href: string;
175+
useCases?: string[];
176+
}) => {
177+
return (
178+
<Link href={href} className="block group">
179+
<div className="rounded-xl bg-[#121212] group-hover:bg-zinc-800/90 border border-white/5 group-hover:border-[white]/20 shadow-sm transition-all duration-200 relative overflow-hidden h-[280px] flex flex-col">
180+
{/* Simple icon that lights up on hover */}
181+
<div className="h-32 w-full flex items-center justify-center mt-6">
182+
<Icon
183+
icon={faIcon}
184+
className="text-6xl text-white/10 group-hover:text-[#FF5C00]/90 transition-colors duration-300"
185+
/>
186+
</div>
88187

89-
{/* Title */}
90-
<div className="space-y-6 text-center sm:text-left">
91-
<h1 className="text-4xl sm:text-5xl md:text-6xl font-700 text-white leading-[1.3] sm:leading-[1.1] tracking-normal">
92-
The open-source serverless platform
93-
</h1>
94-
<p className="text-lg sm:text-xl leading-[1.2] tracking-tight font-500 text-white/40 max-w-lg mx-auto sm:mx-0">
95-
Easily deploy & scale{" "}
96-
<span className="text-white/90">AI agents</span>,{" "}
97-
<span className="text-white/90">
98-
complex workloads
99-
</span>, and{" "}
100-
<span className="text-white/90">backends</span>{" "}
101-
— all on a frictionless platform that runs anywhere.
102-
{/*<span className="text-white/80">
103-
Open-source
104-
</span> &{" "}
105-
<span className="text-white/80">
106-
self-hostable
107-
</span>.*/}
108-
</p>
188+
{/* Text content */}
189+
<div className="px-8 pb-8 flex-1 mt-4">
190+
<h3 className="text-xl font-semibold text-white mb-2">
191+
{title}
192+
</h3>
193+
<p className="text-white/60 text-sm">{description}</p>
194+
195+
{useCases && useCases.length > 0 && (
196+
<div className="mt-2 flex flex-wrap gap-x-2 text-xs text-white/50">
197+
<span className="text-white/40">Good for:</span>
198+
{useCases.map((useCase, index) => (
199+
<span key={index} className="text-white/70">
200+
{useCase}{index < useCases.length - 1 ? "," : ""}
201+
</span>
202+
))}
203+
</div>
204+
)}
205+
206+
<div className="flex items-center mt-4 text-[#FF5C00] opacity-0 group-hover:opacity-100 transition-opacity">
207+
<span className="text-sm font-medium">Learn more</span>
208+
<Icon
209+
icon={faArrowRight}
210+
className="ml-2 text-xs group-hover:translate-x-0.5 transition-all"
211+
/>
109212
</div>
213+
</div>
214+
</div>
215+
</Link>
216+
);
217+
};
110218

111-
<div className="h-10" />
219+
// Features grid component
220+
const FeaturesGrid = () => {
221+
const features = [
222+
{
223+
title: "Functions",
224+
description: "Deploy serverless functions that scale automatically",
225+
faIcon: faCode,
226+
href: "/docs/functions",
227+
useCases: ["APIs", "Edge computing", "Microservices"]
228+
},
229+
{
230+
title: "Stateful Actors",
231+
description: "Long-running tasks with built-in state persistence & hibernation",
232+
faIcon: faLayerGroup,
233+
href: "/docs/stateful-jobs",
234+
useCases: ["AI agents", "Realtime apps", "Rate limiting"]
235+
},
236+
{
237+
title: "Sandboxed Containers",
238+
description: "Run long-running tasks in isolated environments",
239+
faIcon: faServer,
240+
href: "/docs/stateful-jobs",
241+
useCases: ["Code interpreters", "Remote desktop", "UGC games"]
242+
},
243+
{
244+
title: "Workflows",
245+
description: "Orchestrate complex, multi-step processes",
246+
faIcon: faArrowsToCircle,
247+
href: "/docs/workflows",
248+
useCases: ["AI agents", "Business logic", "Data pipelines"]
249+
},
250+
{
251+
title: "SQLite Databases",
252+
description: "On-demand SQL databases 10x faster than Postgres with vector stores & full text search",
253+
faIcon: faDatabase,
254+
href: "/docs/sqlite-databases",
255+
useCases: ["Agent memory", "Per-tenant databases", "Local-first apps"]
256+
},
257+
];
112258

113-
{/* CTA */}
114-
<div className="flex justify-center sm:justify-start">
115-
<CtaButtons />
116-
</div>
259+
return (
260+
<div className="mx-auto w-full px-6 pt-0 pb-16 -mt-8">
261+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16 md:mt-20">
262+
{features.map((feature, index) => (
263+
<Feature
264+
key={index}
265+
title={feature.title}
266+
description={feature.description}
267+
faIcon={feature.faIcon}
268+
href={feature.href}
269+
useCases={feature.useCases}
270+
/>
271+
))}
272+
</div>
273+
<div className="text-center mt-16">
274+
<p className="text-white/80 text-lg">
275+
<span className="font-medium text-white">
276+
Use one or use them all.
277+
</span>{" "}
278+
Best-in-class products integrated into a single platform.
279+
</p>
280+
</div>
281+
</div>
282+
);
283+
};
117284

118-
{/*<div className="mt-4">
119-
<p className="text-sm text-white/40 mb-3">or run locally with Docker</p>
120-
<CopyCommand command="docker run rivetgg/rivet:latest" />
121-
</div>*/}
285+
// Frameworks section
286+
const FrameworksSection = () => {
287+
const frameworks = [
288+
{ icon: faReact, name: "React", href: "/docs/frameworks/react" },
289+
{ icon: faVuejs, name: "Vue", href: "/docs/frameworks/vue" },
290+
{ icon: faAngular, name: "Angular", href: "/docs/frameworks/angular" },
291+
{ icon: faNodeJs, name: "Node.js", href: "/docs/frameworks/nodejs" },
292+
{ icon: faPython, name: "Python", href: "/docs/frameworks/python" },
293+
{ icon: faPhp, name: "PHP", href: "/docs/frameworks/php" },
294+
{ icon: faJava, name: "Java", href: "/docs/frameworks/java" },
295+
{ icon: faRust, name: "Rust", href: "/docs/frameworks/rust" },
296+
{ icon: faSwift, name: "Swift", href: "/docs/frameworks/swift" },
297+
{
298+
icon: faJsSquare,
299+
name: "JavaScript",
300+
href: "/docs/frameworks/javascript",
301+
},
302+
{ icon: faHtml5, name: "HTML5", href: "/docs/frameworks/html5" },
303+
{ icon: faCss3Alt, name: "CSS3", href: "/docs/frameworks/css3" },
304+
{ icon: faGolang, name: "Go", href: "/docs/frameworks/go" },
305+
{ icon: faDatabase, name: "SQL", href: "/docs/frameworks/sql" },
306+
{ icon: faDocker, name: "Docker", href: "/docs/frameworks/docker" },
307+
];
308+
309+
return (
310+
<div className="mx-auto max-w-7xl px-6 py-28 lg:py-44 lg:px-8 mt-16">
311+
<div className="flex flex-col md:flex-row md:items-start">
312+
<div className="md:w-1/3 mb-8 md:mb-0 md:pr-8">
313+
<h2 className="text-3xl font-bold tracking-tight text-white text-left">
314+
Rivet works with any framework
315+
</h2>
316+
<p className="mt-4 text-lg text-white/70 text-left">
317+
Integrate with your existing tech stack or start fresh
318+
with your preferred tools and languages.
319+
</p>
320+
</div>
321+
<div className="md:w-2/3">
322+
<div className="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-x-6 gap-y-6">
323+
{frameworks.map((framework, index) => (
324+
<Link
325+
key={index}
326+
href={framework.href}
327+
className="group"
328+
>
329+
<div className="h-16 w-16 mx-auto flex items-center justify-center">
330+
<Icon
331+
icon={framework.icon}
332+
className="text-5xl text-white/30 group-hover:text-white/90 transition-colors duration-200"
333+
title={framework.name}
334+
/>
335+
</div>
336+
</Link>
337+
))}
338+
</div>
122339
</div>
123340
</div>
124341
</div>
125342
);
126-
};
343+
};

0 commit comments

Comments
 (0)