Skip to content

Commit cae5143

Browse files
NathanFlurryNathanFlurry
committed
chore: new landing page
1 parent a6334c7 commit cae5143

File tree

9 files changed

+705
-44
lines changed

9 files changed

+705
-44
lines changed

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

Lines changed: 0 additions & 19 deletions
This file was deleted.

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import { Icon, faCheck } from "@rivet-gg/icons";
5+
6+
// Command Center section
7+
export const CommandCenterSection = () => {
8+
const [activeTab, setActiveTab] = useState("monitoring");
9+
10+
const tabs = [
11+
{ id: "monitoring", title: "Monitoring", },
12+
{ id: "logs", title: "Logs", },
13+
{ id: "local-dev", title: "Local Dev", },
14+
{ id: "collaboration", title: "Collaboration", },
15+
];
16+
17+
const features = [
18+
"Live Logs", "Crash Reporting", "Log Retention", "Error Tracing", "Performance Metrics", "Alerts"
19+
];
20+
21+
return (
22+
<div className="mx-auto max-w-7xl px-6 py-28 lg:py-44 lg:px-8 mt-16">
23+
<div className="text-center mb-12">
24+
<h2 className="text-3xl font-bold tracking-tight text-white">The command center your backend is missing</h2>
25+
<p className="mt-4 text-lg text-white/70">Complete visibility and control over your serverless infrastructure</p>
26+
</div>
27+
28+
<div className="flex justify-center mb-12">
29+
<div className="inline-flex space-x-1">
30+
{tabs.map((tab) => (
31+
<button
32+
key={tab.id}
33+
className={`px-6 py-3 rounded-md text-base font-medium transition-all duration-200 border ${
34+
activeTab === tab.id
35+
? "bg-zinc-900 text-white border-zinc-700"
36+
: "text-white/60 hover:text-white hover:bg-black/10 border-transparent"
37+
}`}
38+
onClick={() => setActiveTab(tab.id)}
39+
>
40+
{tab.title}
41+
</button>
42+
))}
43+
</div>
44+
</div>
45+
46+
<div className="flex justify-center mb-12">
47+
<div className="flex space-x-12">
48+
{features.map((feature, index) => (
49+
<div key={index} className="flex items-center">
50+
<div className="text-white/40 mr-2">
51+
<Icon icon={faCheck} className="text-sm" />
52+
</div>
53+
<span className="text-sm text-white/80">{feature}</span>
54+
</div>
55+
))}
56+
</div>
57+
</div>
58+
59+
<div className="flex justify-center">
60+
<div className="w-full max-w-4xl h-[480px] bg-zinc-900 border border-white/5 rounded-xl overflow-hidden">
61+
{/* Placeholder for hub screenshot */}
62+
<div className="w-full h-full flex items-center justify-center text-white/40">
63+
Hub Screenshot Placeholder
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
);
69+
};

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { Icon, faDiscord, faGithub, faTwitter, faBluesky } from "@rivet-gg/icons";
5+
6+
// Community section
7+
export const CommunitySection = () => {
8+
const platforms = [
9+
{ name: "Discord", icon: faDiscord, href: "https://discord.gg/rivet" },
10+
{ name: "Discussions", icon: faGithub, href: "https://github.com/rivet-gg/discussions" },
11+
{ name: "X", icon: faTwitter, href: "https://x.com/rivet_gg" },
12+
{ name: "Bluesky", icon: faBluesky, href: "https://bsky.app/profile/rivet.gg" }
13+
];
14+
15+
// Tweets for each column
16+
const columnTweets = [
17+
// Column 1
18+
[
19+
{
20+
user: "Jane Doe",
21+
handle: "@janedoe",
22+
content: "Just deployed my first stateful job with @rivet_gg and I'm blown away by how simple it was. The documentation is excellent!"
23+
},
24+
{
25+
user: "Mike Williams",
26+
handle: "@mikew",
27+
content: "As someone new to serverless, Rivet made the learning curve much smoother. Their tutorials are super straightforward."
28+
},
29+
{
30+
user: "Sara Chen",
31+
handle: "@sarac",
32+
content: "Been using @rivet_gg for our AI agents and the performance is incredible. Self-hosting was a breeze too!"
33+
}
34+
],
35+
// Column 2
36+
[
37+
{
38+
user: "John Smith",
39+
handle: "@johnsmith",
40+
content: "Rivet has completely changed how we handle our functions. Our team's productivity has doubled since we made the switch."
41+
},
42+
{
43+
user: "Emma Rodriguez",
44+
handle: "@emmar",
45+
content: "The desktop sandbox feature in @rivet_gg is a game changer for our GUI-based applications. Nothing else comes close."
46+
},
47+
{
48+
user: "David Kim",
49+
handle: "@davidk",
50+
content: "Our entire backend is running on Rivet now. The monitoring tools make my job 10x easier as a DevOps engineer."
51+
}
52+
],
53+
// Column 3
54+
[
55+
{
56+
user: "Alex Johnson",
57+
handle: "@alexj",
58+
content: "I've tried all the serverless platforms out there, and @rivet_gg is hands down the best one for my needs. The open-source aspect sealed the deal for me."
59+
},
60+
{
61+
user: "Taylor Morgan",
62+
handle: "@taylorm",
63+
content: "Moving from AWS to self-hosted @rivet_gg cut our costs by 70% while improving performance. Best decision we made this year."
64+
},
65+
{
66+
user: "Jordan Lee",
67+
handle: "@jordanl",
68+
content: "The Rivet community is amazing! Got help with my implementation within minutes of posting a question."
69+
}
70+
]
71+
];
72+
73+
return (
74+
<div className="mx-auto max-w-7xl px-6 py-28 lg:py-44 lg:px-8 mt-16">
75+
<div className="text-center mb-10">
76+
<h2 className="text-3xl font-bold tracking-tight text-white">Join the community</h2>
77+
<p className="mt-4 text-lg text-white/70">Connect with thousands of developers building with Rivet</p>
78+
</div>
79+
80+
<div className="flex justify-center space-x-3 mb-16">
81+
{platforms.map((platform, index) => (
82+
<Link key={index} href={platform.href} className="group">
83+
<div className="flex items-center justify-center h-10 px-5 rounded-md border border-zinc-700 bg-zinc-900 group-hover:bg-zinc-800 group-hover:border-zinc-600 transition-all">
84+
<Icon icon={platform.icon} className="text-white/60 group-hover:text-white/90 mr-2 transition-colors" />
85+
<span className="text-sm text-white/60 group-hover:text-white/90 transition-colors">{platform.name}</span>
86+
</div>
87+
</Link>
88+
))}
89+
</div>
90+
91+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
92+
{columnTweets.map((column, columnIndex) => (
93+
<div key={columnIndex} className="flex flex-col space-y-6">
94+
{column.map((tweet, tweetIndex) => (
95+
<div
96+
key={`${columnIndex}-${tweetIndex}`}
97+
className="rounded-xl p-6 bg-black/20 border border-white/5 flex flex-col hover:bg-black/30 hover:border-white/10 transition-all"
98+
>
99+
<div className="flex items-center mb-4">
100+
<div className="w-10 h-10 rounded-full bg-zinc-700 mr-3"></div>
101+
<div>
102+
<div className="text-white font-medium">{tweet.user}</div>
103+
<div className="text-white/50 text-sm">{tweet.handle}</div>
104+
</div>
105+
</div>
106+
<p className="text-white/80">{tweet.content}</p>
107+
</div>
108+
))}
109+
</div>
110+
))}
111+
</div>
112+
</div>
113+
);
114+
};

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use client";
2+
3+
import { Icon, faCopy, faCheck } from "@rivet-gg/icons";
4+
import { useState } from "react";
5+
6+
// Copy command component with clipboard functionality
7+
export const CopyCommand = ({ command }: { command: string }) => {
8+
const [copied, setCopied] = useState(false);
9+
10+
const handleCopy = () => {
11+
// Copy the command without the $ symbol
12+
navigator.clipboard.writeText(command);
13+
setCopied(true);
14+
setTimeout(() => setCopied(false), 1000);
15+
};
16+
17+
return (
18+
<div
19+
onClick={handleCopy}
20+
className="inline-flex items-center bg-black/40 rounded-md border border-white/10 px-4 py-2.5 font-mono text-sm group relative cursor-pointer active:scale-[0.98] active:bg-black/60 transition-all"
21+
>
22+
<span className="text-gray-500 mr-2 font-mono">$</span>
23+
<span className="text-white/90 font-mono">{command}</span>
24+
<div
25+
className="ml-3 text-gray-400 group-hover:text-[#FF5C00] transition-colors"
26+
aria-label={copied ? "Copied!" : "Copy to clipboard"}
27+
>
28+
<Icon icon={copied ? faCheck : faCopy} className={`${copied ? "text-[#FF5C00]" : ""} transition-all`} />
29+
</div>
30+
<div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity rounded-md pointer-events-none"></div>
31+
</div>
32+
);
33+
};

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { Button } from "@rivet-gg/components";
5+
import { Icon, faArrowRight } from "@rivet-gg/icons";
6+
7+
// CTA section
8+
export const CtaSection = () => {
9+
return (
10+
<div className="mx-auto max-w-7xl px-6 py-36 lg:py-52 lg:px-8 border-t border-white/5 mt-24">
11+
<div className="text-center">
12+
<h2 className="text-4xl font-bold tracking-tight text-white">Get building today</h2>
13+
<p className="mt-6 text-xl text-white/70 max-w-2xl mx-auto">
14+
Start for free, no credit card required. Deploy your first serverless project in minutes.
15+
</p>
16+
17+
<div className="mt-12 flex items-center justify-center gap-x-6">
18+
<Button
19+
size="lg"
20+
asChild
21+
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"
22+
>
23+
<Link href="#deploy" className="flex items-center justify-center relative">
24+
<span>Deploy in 1 Minute</span>
25+
<Icon icon={faArrowRight} className="absolute right-2 text-sm opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" />
26+
</Link>
27+
</Button>
28+
<Button
29+
variant="outline"
30+
size="lg"
31+
asChild
32+
className="px-4 pr-6 py-3 text-base border-white/10 hover:border-white/30 transition-all duration-200 group"
33+
>
34+
<Link href="#demo" className="flex items-center justify-center relative">
35+
<span>Book Demo</span>
36+
<Icon icon={faArrowRight} className="absolute right-2 text-sm opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" />
37+
</Link>
38+
</Button>
39+
</div>
40+
</div>
41+
</div>
42+
);
43+
};

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { Icon, faCode, faLayerGroup, faTerminal, faDesktop, faListCheck, faArrowsToCircle, faArrowRight, faDatabase } from "@rivet-gg/icons";
5+
6+
// Tutorials section
7+
export const TutorialsSection = () => {
8+
const tutorials = [
9+
{
10+
title: "Deploy your first function",
11+
description: "Get started with serverless functions in minutes",
12+
icons: [faCode],
13+
href: "/docs/tutorials/first-function",
14+
useCases: ["APIs", "Webhooks", "Edge computing"]
15+
},
16+
{
17+
title: "Create a stateful actor",
18+
description: "Build services that maintain state between requests",
19+
icons: [faLayerGroup],
20+
href: "/docs/tutorials/stateful-actor",
21+
useCases: ["AI agents", "Stateful workers", "Long-running processes"]
22+
},
23+
{
24+
title: "Build a workflow",
25+
description: "Orchestrate complex multi-step processes",
26+
icons: [faArrowsToCircle],
27+
href: "/docs/tutorials/workflows",
28+
useCases: ["Multi-agent systems", "Business logic", "ETL pipelines"]
29+
},
30+
{
31+
title: "Run AI generated code in a sandbox",
32+
description: "Execute untrusted code safely with isolation",
33+
icons: [faTerminal],
34+
href: "/docs/tutorials/ai-sandbox",
35+
useCases: ["LLM code execution", "User code execution", "AI agents"]
36+
},
37+
{
38+
title: "Access desktop sandbox",
39+
description: "Run GUI applications in an isolated environment",
40+
icons: [faDesktop],
41+
href: "/docs/tutorials/desktop-sandbox",
42+
useCases: ["Remote desktops", "Browser automation", "Visual apps"]
43+
},
44+
{
45+
title: "Store agent memory",
46+
description: "Persist and retrieve AI agent context and knowledge",
47+
icons: [faDatabase],
48+
href: "/docs/tutorials/agent-memory",
49+
useCases: ["RAG", "Vector embeddings", "AI agent state"]
50+
}
51+
];
52+
53+
return (
54+
<div className="mx-auto max-w-7xl px-6 py-28 lg:py-44 lg:px-8 mt-16">
55+
<div className="text-center mb-12">
56+
<h2 className="text-3xl font-bold tracking-tight text-white">Start building in seconds</h2>
57+
<p className="mt-4 text-lg text-white/70">Follow our step-by-step tutorials to deploy your first project quickly</p>
58+
</div>
59+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
60+
{tutorials.map((tutorial, index) => (
61+
<Link key={index} href={tutorial.href} className="group">
62+
<div className="rounded-xl h-[280px] bg-[#121212] group-hover:bg-zinc-800/90 border border-white/5 group-hover:border-white/20 shadow-sm transition-all duration-200 flex flex-col overflow-hidden">
63+
{/* Top section with icons */}
64+
<div className="bg-black/40 p-4 flex items-center justify-center h-[120px] w-full">
65+
<div className="flex space-x-4">
66+
{tutorial.icons.map((icon, iconIndex) => (
67+
<div key={iconIndex} className="flex items-center justify-center w-14 h-14">
68+
<Icon
69+
icon={icon}
70+
className="text-4xl text-white/50 group-hover:text-[#FF5C00] transition-colors duration-200"
71+
/>
72+
</div>
73+
))}
74+
</div>
75+
</div>
76+
77+
{/* Bottom section with content */}
78+
<div className="p-5 flex flex-col flex-1">
79+
<h3 className="text-xl font-semibold text-white mb-2">{tutorial.title}</h3>
80+
<p className="text-white/60 text-sm">{tutorial.description}</p>
81+
82+
<div className="flex items-center mt-auto pt-3 text-[#FF5C00] opacity-0 group-hover:opacity-100 transition-opacity">
83+
<span className="text-sm font-medium">View tutorial</span>
84+
<Icon icon={faArrowRight} className="ml-2 text-xs group-hover:translate-x-0.5 transition-all" />
85+
</div>
86+
</div>
87+
</div>
88+
</Link>
89+
))}
90+
</div>
91+
</div>
92+
);
93+
};

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { FancyHeader } from "@/components/v2/FancyHeader";
2+
3+
export default function Layout({ children }: { children: React.ReactNode }) {
4+
return (
5+
<>
6+
<FancyHeader />
7+
{children}
8+
</>
9+
);
10+
}

0 commit comments

Comments
 (0)