diff --git a/website/src/app/(v2)/(marketing)/(index)/page.tsx b/website/src/app/(v2)/(marketing)/(index)/page.tsx index eb39c854af..9e41d1103d 100644 --- a/website/src/app/(v2)/(marketing)/(index)/page.tsx +++ b/website/src/app/(v2)/(marketing)/(index)/page.tsx @@ -1,73 +1,43 @@ -import { HeroBackground } from "./components/HeroBackground"; -import { HeroSection } from "./sections/HeroSection"; -import { UseCases } from "./sections/UseCases"; -import { PlatformSection } from "./sections/PlatformSection"; -import { CodeSnippetsSection } from "./sections/CodeSnippetsSection"; -import { FeaturesSection } from "./sections/FeaturesSection"; -import { FeaturesBentoBox } from "./sections/FeaturesBentoBox"; -import { TechSection } from "./sections/TechSection"; -import { DeploymentOptionsSection } from "./sections/DeploymentOptionsSection"; -import { StudioSection } from "./sections/StudioSection"; -import { CommunitySection } from "./sections/CommunitySection"; -import { CTASection } from "./sections/CTASection"; +"use client"; + +// Import new sections +import { NewHeroSection } from "./sections/NewHeroSection"; +import { SocialProofSection } from "./sections/SocialProofSection"; +import { ProblemSection } from "./sections/ProblemSection"; +import { SolutionSection } from "./sections/SolutionSection"; +import { NewFeaturesBento } from "./sections/NewFeaturesBento"; +import { NewUseCases } from "./sections/NewUseCases"; +import { NewCTASection } from "./sections/NewCTASection"; +import { ScrollObserver } from "@/components/ScrollObserver"; export default function IndexPage() { return ( - <> -
+ +
+ {/* Main container */} +
+ {/* Hero Section */} + - {/**/} + {/* Social Proof */} + - {/* Content */} -
- + {/* The Problem */} + -
- -
- -
- -
- -
- -
- -
- -
- - {/*
- -
*/} + {/* The Solution */} + -
- -
- -
- -
- -
- -
- - {/*
- -
*/} - -
- -
+ {/* Features Bento */} + -
+ {/* Use Cases */} + -
- + {/* Final CTA */} +
-
- +
+ ); } diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewCTASection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewCTASection.tsx new file mode 100644 index 0000000000..58787137be --- /dev/null +++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewCTASection.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; + +export function NewCTASection() { + return ( +
+
+

+ Build Your Next App with Rivet. +

+ +

+ Start in 5 minutes. Deploy anywhere. Scale to millions. +

+ +
+ + Get Started Now + + + Talk to an Engineer + +
+
+
+ ); +} diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewFeaturesBento.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewFeaturesBento.tsx new file mode 100644 index 0000000000..7dd700bec6 --- /dev/null +++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewFeaturesBento.tsx @@ -0,0 +1,158 @@ +"use client"; + +import { useEffect } from "react"; + +export function NewFeaturesBento() { + useEffect(() => { + // Bento box glow effect + const bentoBoxes = document.querySelectorAll(".bento-box"); + bentoBoxes.forEach((box) => { + const handleMouseMove = (e: MouseEvent) => { + const rect = box.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + box.style.setProperty("--mouse-x", `${x}px`); + box.style.setProperty("--mouse-y", `${y}px`); + }; + + const handleMouseLeave = () => { + box.style.setProperty("--mouse-x", "50%"); + box.style.setProperty("--mouse-y", "50%"); + }; + + box.addEventListener("mousemove", handleMouseMove); + box.addEventListener("mouseleave", handleMouseLeave); + + return () => { + box.removeEventListener("mousemove", handleMouseMove); + box.removeEventListener("mouseleave", handleMouseLeave); + }; + }); + }, []); + + return ( +
+

+ A New Primitive for Your Backend. +

+ +
+
+ + + +

Long-Lived Compute

+

Like Lambda, but with memory. No 5-minute timeouts. No state loss.

+
+ +
+ + + +

Zero-Latency State

+

+ State lives with your compute. Reads and writes are in-memory. No database round-trips. +

+
+ +
+ + + +

Realtime, Built-in

+

+ WebSockets and SSE out-of-the-box. Broadcast updates with one line of code. +

+
+ +
+ + + +

Sleep When Idle

+

+ Actors automatically hibernate to save costs and wake up instantly (zero cold start) on demand. +

+
+ +
+ + GitHub + + +

Open Source & Self-Hostable

+

+ No vendor lock-in, ever. Run on Rivet Cloud, Vercel, Railway, or your own bare metal. +

+
+ +
+ + + +

Resilient by Design

+

+ Built-in failover and automatic restarts preserve state integrity. +

+
+
+
+ ); +} diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewHeroSection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewHeroSection.tsx new file mode 100644 index 0000000000..d538657849 --- /dev/null +++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewHeroSection.tsx @@ -0,0 +1,408 @@ +"use client"; + +import { useEffect, useState } from "react"; +import Link from "next/link"; + +// StyleInjector Component - Injects custom CSS +const StyleInjector = () => ( +