From a9e634bf8e639b7bae6c6fa46a1901b4992cd5cc Mon Sep 17 00:00:00 2001 From: Nicholas Kissel Date: Tue, 13 May 2025 13:14:16 -0700 Subject: [PATCH] chore: pricing page --- site/package.json | 188 +++++++------- site/src/app/(v2)/(marketing)/page.tsx | 331 ++++++++++++++++++++----- 2 files changed, 368 insertions(+), 151 deletions(-) diff --git a/site/package.json b/site/package.json index 31dcc58310..d312a5b094 100644 --- a/site/package.json +++ b/site/package.json @@ -1,96 +1,96 @@ { - "name": "rivet-site", - "version": "0.1.0", - "private": true, - "scripts": { - "build": "./scripts/buildcf.sh", - "dev": " next dev", - "lint": "next lint", - "format": "prettier --write .", - "create-article": "vite-node scripts/generateArticle.js", - "generate-favicon": "npx cli-real-favicon generate scripts/faviconConfig.json faviconData.json public/icons" - }, - "browserslist": "defaults, not ie <= 11", - "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.5.2", - "@fortawesome/free-brands-svg-icons": "^6.5.2", - "@fortawesome/free-solid-svg-icons": "^6.5.2", - "@fortawesome/react-fontawesome": "^0.2.2", - "@giscus/react": "^3.1.0", - "@headlessui/react": "^2.2.3", - "@heroicons/react": "^2.0.18", - "@inquirer/prompts": "^6.0.1", - "@mdx-js/loader": "^3.1.0", - "@mdx-js/react": "^3.1.0", - "@next/mdx": "^15.1.7", - "@next/third-parties": "latest", - "@orama/react-components": "^0.5.0", - "@rivet-gg/api": "^0.0.1-rc19", - "@rivet-gg/components": "workspace:*", - "@rivet-gg/icons": "workspace:*", - "@shikijs/transformers": "^1.17.6", - "@sindresorhus/slugify": "^2.1.1", - "@tailwindcss/forms": "^0.5.3", - "@tailwindcss/typography": "^0.5.8", - "@types/json-schema": "^7.0.15", - "acorn": "^8.8.1", - "autoprefixer": "^10.4.7", - "chart.js": "^4.4.2", - "chartjs-adapter-date-fns": "^3.0.0", - "clsx": "^2.1.0", - "csv-parser": "^3.0.0", - "date-fns": "^3.6.0", - "dedent": "^1.5.3", - "esast-util-from-js": "^2.0.1", - "escape-html": "^1.0.3", - "estree-util-to-js": "^2.0.0", - "fast-glob": "^3.2.12", - "feed": "^4.2.2", - "flexsearch": "^0.7.31", - "focus-visible": "^5.2.0", - "framer-motion": "*", - "mdast-util-to-string": "^3.2.0", - "mdx-annotations": "^0.1.1", - "next": "^15.2.4", - "next-router-mock": "^0.9.7", - "postcss": "^8.4.24", - "postcss-focus-visible": "^6.0.4", - "posthog-js": "^1.206", - "react": "*", - "react-chartjs-2": "^5.2.0", - "react-github-btn": "^1.4.0", - "react-highlight-words": "^0.20.0", - "react-markdown": "^9.0.1", - "recma-nextjs-static-props": "^1.0.0", - "rehype-mdx-title": "^2.0.0", - "rehype-parse": "^8.0.4", - "rehype-remark": "^9.1.2", - "remark": "^15.0.1", - "remark-gfm": "^4.0.1", - "remark-mdx": "^3.1.0", - "remark-stringify": "^10.0.3", - "sharp": "^0.32.1", - "shiki": "^1.0.0", - "simple-functional-loader": "^1.2.1", - "socket.io": "^4.7.1", - "socket.io-client": "^4.7.1", - "tailwindcss": "^3.3.0", - "unified": "^10.1.2", - "unist-util-filter": "^4.0.1", - "unist-util-visit": "^4.1.1", - "zustand": "^4.3.2" - }, - "devDependencies": { - "@types/escape-html": "^1", - "axios": "^1.5.0", - "eslint": "8.26.0", - "eslint-config-next": "13.0.2", - "file-loader": "^6.2.0", - "prettier": "^2.8.8", - "prettier-plugin-tailwindcss": "^0.3.0", - "typescript": "^5.1.6", - "vite-node": "^2.1.1", - "yaml": "^2.3.1" - }, - "packageManager": "yarn@4.6.0" + "name": "rivet-site", + "version": "0.1.0", + "private": true, + "scripts": { + "build": "./scripts/buildcf.sh", + "dev": " next dev", + "lint": "next lint", + "format": "prettier --write .", + "create-article": "vite-node scripts/generateArticle.js", + "generate-favicon": "npx cli-real-favicon generate scripts/faviconConfig.json faviconData.json public/icons" + }, + "browserslist": "defaults, not ie <= 11", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-brands-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", + "@giscus/react": "^3.1.0", + "@headlessui/react": "^2.2.3", + "@heroicons/react": "^2.0.18", + "@inquirer/prompts": "^6.0.1", + "@mdx-js/loader": "^3.1.0", + "@mdx-js/react": "^3.1.0", + "@next/mdx": "^15.1.7", + "@next/third-parties": "latest", + "@orama/react-components": "^0.5.0", + "@rivet-gg/api": "^0.0.1-rc19", + "@rivet-gg/components": "workspace:*", + "@rivet-gg/icons": "workspace:*", + "@shikijs/transformers": "^1.17.6", + "@sindresorhus/slugify": "^2.1.1", + "@tailwindcss/forms": "^0.5.3", + "@tailwindcss/typography": "^0.5.8", + "@types/json-schema": "^7.0.15", + "acorn": "^8.8.1", + "autoprefixer": "^10.4.7", + "chart.js": "^4.4.2", + "chartjs-adapter-date-fns": "^3.0.0", + "clsx": "^2.1.0", + "csv-parser": "^3.0.0", + "date-fns": "^3.6.0", + "dedent": "^1.5.3", + "esast-util-from-js": "^2.0.1", + "escape-html": "^1.0.3", + "estree-util-to-js": "^2.0.0", + "fast-glob": "^3.2.12", + "feed": "^4.2.2", + "flexsearch": "^0.7.31", + "focus-visible": "^5.2.0", + "framer-motion": "*", + "mdast-util-to-string": "^3.2.0", + "mdx-annotations": "^0.1.1", + "next": "^15.2.4", + "next-router-mock": "^0.9.7", + "postcss": "^8.4.24", + "postcss-focus-visible": "^6.0.4", + "posthog-js": "^1.206", + "react": "*", + "react-chartjs-2": "^5.2.0", + "react-github-btn": "^1.4.0", + "react-highlight-words": "^0.20.0", + "react-markdown": "^9.0.1", + "recma-nextjs-static-props": "^1.0.0", + "rehype-mdx-title": "^2.0.0", + "rehype-parse": "^8.0.4", + "rehype-remark": "^9.1.2", + "remark": "^15.0.1", + "remark-gfm": "^4.0.1", + "remark-mdx": "^3.1.0", + "remark-stringify": "^10.0.3", + "sharp": "^0.32.1", + "shiki": "^1.0.0", + "simple-functional-loader": "^1.2.1", + "socket.io": "^4.7.1", + "socket.io-client": "^4.7.1", + "tailwindcss": "^3.3.0", + "unified": "^10.1.2", + "unist-util-filter": "^4.0.1", + "unist-util-visit": "^4.1.1", + "zustand": "^4.3.2" + }, + "devDependencies": { + "@types/escape-html": "^1", + "axios": "^1.5.0", + "eslint": "8.26.0", + "eslint-config-next": "13.0.2", + "file-loader": "^6.2.0", + "prettier": "^2.8.8", + "prettier-plugin-tailwindcss": "^0.3.0", + "typescript": "^5.1.6", + "vite-node": "^2.1.1", + "yaml": "^2.3.1" + }, + "packageManager": "yarn@4.6.0" } diff --git a/site/src/app/(v2)/(marketing)/page.tsx b/site/src/app/(v2)/(marketing)/page.tsx index 93421e13e4..5dcfe3091c 100644 --- a/site/src/app/(v2)/(marketing)/page.tsx +++ b/site/src/app/(v2)/(marketing)/page.tsx @@ -3,21 +3,37 @@ import Link from "next/link"; import { Button } from "@rivet-gg/components"; import { Icon, + faCode, + faLayerGroup, + faTerminal, + faDesktop, + faListCheck, + faArrowsToCircle, + faReact, + faVuejs, + faAngular, + faNodeJs, + faPython, + faPhp, + faJava, + faCss3Alt, + faHtml5, + faRust, + faSwift, + faJsSquare, + faGolang, + faDatabase, + faDocker, faArrowRight, + faRobot, + faServer, + faVectorSquare, } from "@rivet-gg/icons"; import { CopyCommand } from "./CopyCommand"; import { TutorialsSection } from "./TutorialsSection"; import { CommandCenterSection } from "./CommandCenterSection"; import { CommunitySection } from "./CommunitySection"; import { CtaSection } from "./CtaSection"; -import { MarketingButton } from "./MarketingButton"; -import { CtaButtons } from "./CtaButtons"; -import { PowerfulPrimitivesSection } from "./PowerfulPrimitivesSection"; -import { ServerlessLimitationsSection } from "./ServerlessLimitationsSection"; -import { RivetCloudSection } from "./RivetCloudSection"; -import { PerformanceSection } from "./PerformanceSection"; -import { FeaturesGrid } from "./FeaturesGrid"; -import { FrameworksSection } from "./FrameworksSection"; export const metadata: Metadata = { title: "Rivet - The Open-Source Serverless Platform", @@ -31,37 +47,92 @@ export default function IndexPage() { return ( <>
- - {/* BG gradient */} - {/*
*/} - - {/* Content */} -
+
- - - - {/**/} - {/**/} + + -
); } + // Hero component with title, subtitle, and CTA buttons const Hero = () => { return ( -
-
{/* Width/padding ocpied from FancyHeader */} -
- {/* On-Prem CF Workers */} - {/*
+
+
+
+

+ The Open-Source +
+ Serverless Platform +

+

+ Easily build & scale{" "} + + AI agents + + ,{" "} + + functions + + ,{" "} + + stateful services + + , and more. +
+ + Open-source & self-hostable. + +

+
+ + +
+ +
+

or run locally

+ +
+
@@ -83,44 +154,190 @@ const Hero = () => {
+
+
+
+ ); +}; -
*/} +// Feature component for individual features +const Feature = ({ + title, + description, + faIcon, + href, + useCases, +}: { + title: string; + description: string; + faIcon: any; + href: string; + useCases?: string[]; +}) => { + return ( + +
+ {/* Simple icon that lights up on hover */} +
+ +
- {/* Title */} -
-

- The open-source serverless platform -

-

- Easily deploy & scale{" "} - AI agents,{" "} - - complex workloads - , and{" "} - backends{" "} - — all on a frictionless platform that runs anywhere. - {/* - Open-source - &{" "} - - self-hostable - .*/} -

+ {/* Text content */} +
+

+ {title} +

+

{description}

+ + {useCases && useCases.length > 0 && ( +
+ Good for: + {useCases.map((useCase, index) => ( + + {useCase}{index < useCases.length - 1 ? "," : ""} + + ))} +
+ )} + +
+ Learn more +
+
+
+ + ); +}; -
+// Features grid component +const FeaturesGrid = () => { + const features = [ + { + title: "Functions", + description: "Deploy serverless functions that scale automatically", + faIcon: faCode, + href: "/docs/functions", + useCases: ["APIs", "Edge computing", "Microservices"] + }, + { + title: "Stateful Actors", + description: "Long-running tasks with built-in state persistence & hibernation", + faIcon: faLayerGroup, + href: "/docs/stateful-jobs", + useCases: ["AI agents", "Realtime apps", "Rate limiting"] + }, + { + title: "Sandboxed Containers", + description: "Run long-running tasks in isolated environments", + faIcon: faServer, + href: "/docs/stateful-jobs", + useCases: ["Code interpreters", "Remote desktop", "UGC games"] + }, + { + title: "Workflows", + description: "Orchestrate complex, multi-step processes", + faIcon: faArrowsToCircle, + href: "/docs/workflows", + useCases: ["AI agents", "Business logic", "Data pipelines"] + }, + { + title: "SQLite Databases", + description: "On-demand SQL databases 10x faster than Postgres with vector stores & full text search", + faIcon: faDatabase, + href: "/docs/sqlite-databases", + useCases: ["Agent memory", "Per-tenant databases", "Local-first apps"] + }, + ]; - {/* CTA */} -
- -
+ return ( +
+
+ {features.map((feature, index) => ( + + ))} +
+
+

+ + Use one or use them all. + {" "} + Best-in-class products integrated into a single platform. +

+
+
+ ); +}; - {/*
-

or run locally with Docker

- -
*/} +// Frameworks section +const FrameworksSection = () => { + const frameworks = [ + { icon: faReact, name: "React", href: "/docs/frameworks/react" }, + { icon: faVuejs, name: "Vue", href: "/docs/frameworks/vue" }, + { icon: faAngular, name: "Angular", href: "/docs/frameworks/angular" }, + { icon: faNodeJs, name: "Node.js", href: "/docs/frameworks/nodejs" }, + { icon: faPython, name: "Python", href: "/docs/frameworks/python" }, + { icon: faPhp, name: "PHP", href: "/docs/frameworks/php" }, + { icon: faJava, name: "Java", href: "/docs/frameworks/java" }, + { icon: faRust, name: "Rust", href: "/docs/frameworks/rust" }, + { icon: faSwift, name: "Swift", href: "/docs/frameworks/swift" }, + { + icon: faJsSquare, + name: "JavaScript", + href: "/docs/frameworks/javascript", + }, + { icon: faHtml5, name: "HTML5", href: "/docs/frameworks/html5" }, + { icon: faCss3Alt, name: "CSS3", href: "/docs/frameworks/css3" }, + { icon: faGolang, name: "Go", href: "/docs/frameworks/go" }, + { icon: faDatabase, name: "SQL", href: "/docs/frameworks/sql" }, + { icon: faDocker, name: "Docker", href: "/docs/frameworks/docker" }, + ]; + + return ( +
+
+
+

+ Rivet works with any framework +

+

+ Integrate with your existing tech stack or start fresh + with your preferred tools and languages. +

+
+
+
+ {frameworks.map((framework, index) => ( + +
+ +
+ + ))} +
); -}; \ No newline at end of file +};