Skip to content

Instantly share code, notes, and snippets.

@aimproxy

aimproxy/vercel_landing_page.tsx

Created January 26, 2026 15:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aimproxy/6771a07b4697aec0da78b1cb897c5442 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aimproxy/6771a07b4697aec0da78b1cb897c5442 to your computer and use it in GitHub Desktop.
Download ZIP
vercel_landing_page.tsx
Raw
vercel_landing_page.tsx
// @ts-nocheck
// @ts-ignore
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
export function App() {
return (
<div
className="stack-module__UbbKhW__stack stack geist-soft-reset grid-module__4pDFEa__page lg:first:pt-[calc(var(--banner-min-height))] lg:first:has->[data-slot=banner]]:pt-0 stack-module__UbbKhW__padding"
data-version="v1"
style={{
"--stack-flex": "initial",
"--stack-direction": "column",
"--stack-align": "stretch",
"--stack-justify": "flex-start",
"--sm-stack-padding": "16px 0px",
"--md-stack-padding": "32px 0px",
"--lg-stack-padding": "90px 0px",
"--xl-stack-padding": "90px 0px",
"--stack-gap": "0px",
}}
>
<div className="grid-module__4pDFEa__gridSystemContentWrapper">
<div
className="grid-module__4pDFEa__gridSystem geist-soft-reset"
style={{ "--min-width": "250px" }}
>
<div
className="grid-module__4pDFEa__cross"
data-grid-cross=""
style={{ "--cross-row": "1", "--cross-column": "1" }}
>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-half-size)",
height: "var(--cross-size)",
borderRightWidth: "var(--guide-width)",
}}
></div>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-size)",
height: "var(--cross-half-size)",
borderBottomWidth: "var(--guide-width)",
}}
></div>
</div>
<div className="hero-module__Pw_UFW__root">
<section
className="grid-module__4pDFEa__grid"
data-grid=""
style={{
"--sm-grid-rows": "5",
"--lg-grid-rows": "4",
"--sm-grid-columns": "8",
"--md-grid-columns": "12",
"--sm-height":
"calc(var(--width) / var(--grid-columns) * var(--grid-rows))",
}}
>
<div className="flex flex-col items-center justify-center flex-initial hero-module__Pw_UFW__hero"></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "2", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "3", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "4", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "5", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "6", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "7", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "8", "--y": "1", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "2", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "3", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "4", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "5", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "6", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "7", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "8", "--y": "2", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "2", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "3", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "4", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "5", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "6", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "7", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "8", "--y": "3", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "2", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "3", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "4", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "5", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "6", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "7", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "8", "--y": "4", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "2", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "3", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "4", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "5", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "6", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "7", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{
"--x": "8",
"--y": "5",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "2", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "3", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "4", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "5", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "6", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "7", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "8", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "2", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "3", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "4", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "5", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "6", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "7", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "8", "--y": "2", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "2", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "3", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "4", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "5", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "6", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "7", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "8", "--y": "3", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "2", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "3", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "4", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "5", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "6", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "7", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "8", "--y": "4", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "2", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "3", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "4", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "5", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "6", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "7", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{
"--x": "8",
"--y": "5",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "2", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "3", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "4", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "5", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "6", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "7", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "8", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "9", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "10", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "11", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "12", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "2", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "3", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "4", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "5", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "6", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "7", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "8", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "9", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "10", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "11", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "12", "--y": "2", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "2", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "3", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "4", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "5", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "6", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "7", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "8", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "9", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "10", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "11", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "12", "--y": "3", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "2", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "3", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "4", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "5", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "6", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "7", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "8", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "9", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "10", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "11", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "12", "--y": "4", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "2", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "3", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "4", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "5", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "6", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "7", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "8", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "9", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "10", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "11", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{
"--x": "12",
"--y": "5",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "2", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "3", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "4", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "5", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "6", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "7", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "8", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "9", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "10", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "11", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "12", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "2", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "3", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "4", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "5", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "6", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "7", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "8", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "9", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "10", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "11", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "12", "--y": "2", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "2", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "3", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "4", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "5", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "6", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "7", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "8", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "9", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "10", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "11", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "12", "--y": "3", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "2", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "3", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "4", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "5", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "6", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "7", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "8", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "9", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "10", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "11", "--y": "4" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "12", "--y": "4", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "2", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "3", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "4", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "5", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "6", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "7", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "8", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "9", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "10", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "11", "--y": "5", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{
"--x": "12",
"--y": "5",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "2", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "3", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "4", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "5", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "6", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "7", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "8", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "9", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "10", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "11", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "12", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "1", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "2", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "3", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "4", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "5", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "6", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "7", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "8", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "9", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "10", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "11", "--y": "2" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "12", "--y": "2", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "1", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "2", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "3", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "4", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "5", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "6", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "7", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "8", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "9", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "10", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "11", "--y": "3" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "12", "--y": "3", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "1", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "2", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "3", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "4", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "5", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "6", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "7", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "8", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "9", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "10", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "11", "--y": "4", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{
"--x": "12",
"--y": "4",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
</section>
<section
className="grid-module__4pDFEa__grid"
data-grid=""
style={{
"--grid-rows": "1",
"--grid-columns": "1",
"--sm-height": "fit-content",
}}
>
<div
className="grid-module__4pDFEa__block hero-module__Pw_UFW__cell"
data-grid-cell=""
style={{
"--sm-grid-row": "1",
"--sm-grid-column": "1",
"--xs-cell-rows": "NaN",
"--sm-cell-rows": "NaN",
"--smd-cell-rows": "NaN",
"--md-cell-rows": "NaN",
"--lg-cell-rows": "NaN",
"--xs-cell-columns": "NaN",
"--sm-cell-columns": "NaN",
"--smd-cell-columns": "NaN",
"--md-cell-columns": "NaN",
"--lg-cell-columns": "NaN",
overflow: "visible",
}}
data-variant="ctas"
>
<h1 className="text-heading-24 md:text-heading-32 lg:text-heading-40 font-semibold hero-module__Pw_UFW__title">
A deployment for every idea.
</h1>
<p className="text-copy-14 md:text-copy-18 lg:text-copy-20 text-gray-900 hero-module__Pw_UFW__subtitle">
Traditional deployment tools weren’t built for frontend
development. Get the
<strong>DX Platform</strong> that has teams shipping faster
with higher quality.
</p>
<div className="flex flex-row items-stretch justify-start gap-3 md:gap-4 flex-initial">
<a
role="link"
href="/new"
type="submit"
tabIndex="0"
data-react-aria-pressable="true"
data-track-intent="Get Started"
data-zone="2d9dc9"
className="button-module__QyrFCa__base reset-module__ylizOa__reset button-module__QyrFCa__button reset-module__ylizOa__reset button-module__QyrFCa__rounded button-module__QyrFCa__responsive button-module__QyrFCa__invert"
data-geist-button=""
data-prefix="true"
data-suffix="false"
data-version="v1"
style={{
"--geist-icon-size": "16px",
"--sm-x-padding": "10px",
"--sm-height": "40px",
"--md-x-padding": "10px",
"--md-height": "40px",
"--lg-x-padding": "14px",
"--lg-height": "48px",
}}
data-prefetch="true"
>
<span className="button-module__QyrFCa__prefix">
<svg
aria-label="Vercel logomark"
height="14"
role="img"
style={{ width: "auto", overflow: "visible" }}
viewBox="0 0 74 64"
>
<path
d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
fill="var(--ds-background-200)"
></path>
</svg>
</span>
<span className="button-module__QyrFCa__content">
<span aria-hidden="true" data-size="small">
Deploy
</span>
<span data-size="large">Start Deploying</span>
</span>
</a>
<a
role="link"
type="submit"
tabIndex="0"
data-react-aria-pressable="true"
data-track-intent="Contact Sales"
data-zone="same"
className="button-module__QyrFCa__base reset-module__ylizOa__reset button-module__QyrFCa__button reset-module__ylizOa__reset button-module__QyrFCa__secondary button-module__QyrFCa__rounded button-module__QyrFCa__shadow button-module__QyrFCa__responsive button-module__QyrFCa__invert"
data-geist-button=""
data-prefix="false"
data-suffix="false"
data-version="v1"
style={{
"--geist-icon-size": "16px",
"--sm-x-padding": "10px",
"--sm-height": "40px",
"--md-x-padding": "10px",
"--md-height": "40px",
"--lg-x-padding": "14px",
"--lg-height": "48px",
}}
href="/contact/sales"
>
<span className="button-module__QyrFCa__content">
Get a Demo
</span>
</a>
</div>
</div>
<div
className="grid-module__4pDFEa__cross"
data-grid-cross=""
style={{
transform: "translateY(1px)",
"--cross-row": "-1",
"--cross-column": "-1",
}}
>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-half-size)",
height: "var(--cross-size)",
borderRightWidth: "var(--guide-width)",
}}
></div>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-size)",
height: "var(--cross-half-size)",
borderBottomWidth: "var(--guide-width)",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide"
style={{
"--x": "1",
"--y": "1",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
</section>
</div>
<section
className="grid-module__4pDFEa__grid tailwind-preflight"
data-grid=""
style={{ "--sm-grid-rows": "3", "--lg-grid-rows": "1", "--sm-grid-columns": "1", "--lg-grid-columns": "3", "--sm-height": "fit-content" }}
>
<div
className="grid-module__4pDFEa__block features-module__zUmr6a__featureCell"
data-grid-cell=""
style={{ "--sm-grid-row": "auto", "--sm-grid-column": "auto", "--sm-cell-rows": "auto", "--sm-cell-columns": "auto" }}
>
<div className="flex flex-col items-stretch justify-start gap-8 flex-initial lg:h-72">
<div className="flex flex-col items-stretch justify-start gap-4 flex-initial">
<h3 className="text-heading-20 text-balance">
One endpoint, all your models
</h3>
<div className="text-copy-16 text-gray-900">
<p>
Access all of your favorite models without ripping out
your backend.
</p>
</div>
</div>
<div className="flex-grow flex items-end select-none pointer-events-none justify-center">
<div className="ai-gateway-endpoint-module__QmfmtG__root">
<img
alt="Diagram of multiple AI models connected by lines to a single unified endpoint, representing seamless access to different models through one gateway."
data-theme="light"
decoding="async"
data-nimg="fill"
className="ai-gateway-endpoint-module__QmfmtG__image"
src="https://assets.vercel.com/image/upload/v1753121283/gateway-endpoint-light_zvtn3k.svg"
style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent" }}
/>
<img
alt="Diagram of multiple AI models connected by lines to a single unified endpoint, representing seamless access to different models through one gateway."
data-theme="dark"
decoding="async"
data-nimg="fill"
className="ai-gateway-endpoint-module__QmfmtG__image"
src="https://assets.vercel.com/image/upload/v1753121283/gateway-endpoint-dark_tox51y.svg"
style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent" }}
/>
</div>
</div>
</div>
</div>
<div
className="grid-module__4pDFEa__block features-module__zUmr6a__featureCell"
data-grid-cell=""
style={{ "--sm-grid-row": "auto", "--sm-grid-column": "auto", "--sm-cell-rows": "auto", "--sm-cell-columns": "auto" }}
>
<div className="flex flex-col items-stretch justify-start gap-8 flex-initial lg:h-72">
<div className="flex flex-col items-stretch justify-start gap-4 flex-initial">
<h3 className="text-heading-20 text-balance">
Eliminate overhead, ship faster.
</h3>
<div className="text-copy-16 text-gray-900">
<p>
Stop managing API keys, rate limits, or provider accounts.
All under a single source of billing.
</p>
</div>
</div>
<div className="flex-grow flex items-end select-none pointer-events-none justify-center">
<div className="ai-gateway-overhead-module__iOH-tW__root">
<img
alt="Graphic showing several API and service icons converging into one central AI Gateway node, symbolizing simplified API management and centralized billing."
data-theme="light"
decoding="async"
data-nimg="fill"
className="ai-gateway-overhead-module__iOH-tW__image"
src="https://assets.vercel.com/image/upload/v1753121283/gateway-overhead-light_pjh6vv.svg"
style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent" }}
/>
<img
alt="Graphic showing several API and service icons converging into one central AI Gateway node, symbolizing simplified API management and centralized billing."
data-theme="dark"
decoding="async"
data-nimg="fill"
className="ai-gateway-overhead-module__iOH-tW__image"
src="https://assets.vercel.com/image/upload/v1753121283/gateway-overhead-dark_zhqwwj.svg"
style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent" }}
/>
</div>
</div>
</div>
</div>
<div
className="grid-module__4pDFEa__block features-module__zUmr6a__featureCell"
data-grid-cell=""
style={{ "--sm-grid-row": "auto", "--sm-grid-column": "auto", "--sm-cell-rows": "auto", "--sm-cell-columns": "auto" }}
>
<div className="flex flex-col items-stretch justify-start gap-8 flex-initial lg:h-72">
<div className="flex flex-col items-stretch justify-start gap-4 flex-initial">
<h3 className="text-heading-20 text-balance">
Intelligent failovers, increase uptime
</h3>
<div className="text-copy-16 text-gray-900">
<p>Automatically fall back during provider outages.</p>
</div>
</div>
<div className="flex-grow flex items-end select-none pointer-events-none justify-center">
<div className="ai-gateway-routing-module__7oj_wG__root">
<img
alt="Circular flowchart with AI provider icons linked in a ring to a central triangle, illustrating automatic failover and high availability during service outages."
data-theme="light"
decoding="async"
data-nimg="fill"
className="ai-gateway-routing-module__7oj_wG__image"
src="https://assets.vercel.com/image/upload/v1753121283/gateway-routing-light_uwjld4.svg"
style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent" }}
/>
<img
alt="Circular flowchart with AI provider icons linked in a ring to a central triangle, illustrating automatic failover and high availability during service outages."
data-theme="dark"
decoding="async"
data-nimg="fill"
className="ai-gateway-routing-module__7oj_wG__image"
src="https://assets.vercel.com/image/upload/v1753121283/gateway-routing-dark_nsl9zl.svg"
style={{ position: "absolute", height: "100%", width: "100%", inset: "0px", color: "transparent" }}
/>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "2", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "3", "borderRight": "none", "borderBottom": "none" }}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "1", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "2", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "3", "borderRight": "none", "borderBottom": "none" }}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "1", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "2", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "3", "borderRight": "none", "borderBottom": "none" }}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "1", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "2", "borderRight": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "3", "borderRight": "none", "borderBottom": "none" }}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "1", "--y": "1", "borderBottom": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "2", "--y": "1", "borderBottom": "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__lgGuide"
style={{ "--x": "3", "--y": "1", "borderRight": "none", "borderBottom": "none" }}
></div>
</div>
</section>
<div className="grid-module__4pDFEa__gridSystemLazyContent">
<section
className="grid-module__4pDFEa__grid"
data-grid=""
style={{
"--sm-grid-rows": "2",
"--lg-grid-rows": "1",
"--sm-grid-columns": "2",
"--lg-grid-columns": "3",
"--sm-height": "fit-content",
}}
>
<div
className="grid-module__4pDFEa__block footer-module__QGSwJW__primaryCell"
data-grid-cell=""
style={{
"--sm-grid-row": "1 / span 1",
"--sm-grid-column": "1/3",
"--sm-cell-rows": "1",
"--sm-cell-columns": "2",
}}
>
<div className="flex flex-col items-center lg:items-start justify-center gap-6 flex-initial">
<div className="footer-module__QGSwJW__primaryDescription">
<p>
<b>Ready to deploy? </b>Start building with a free
account. Speak to an expert for your
<i>Pro</i> or
<u>Enterprise</u> needs.
</p>
</div>
<div className="flex flex-row items-stretch justify-start gap-4 flex-initial undefined">
<a
role="link"
href="/new"
type="submit"
tabIndex="0"
data-react-aria-pressable="true"
data-track="true"
data-track-intent="Get Started"
data-zone="2d9dc9"
className="button-module__QyrFCa__base reset-module__ylizOa__reset button-module__QyrFCa__button reset-module__ylizOa__reset geist-new-themed geist-new-default geist-new-default-fill button-module__QyrFCa__rounded button-module__QyrFCa__invert"
data-geist-button=""
data-prefix="false"
data-suffix="false"
data-version="v1"
style={{ "--geist-icon-size": "16px" }}
data-prefetch="true"
>
<span className="button-module__QyrFCa__content">
<div className="flex flex-row items-center justify-start gap-2 flex-initial">
Start Deploying
</div>
</span>
</a>
<a
role="link"
type="submit"
tabIndex="0"
data-react-aria-pressable="true"
data-track="true"
data-track-intent="Contact Sales"
data-zone="same"
className="button-module__QyrFCa__base reset-module__ylizOa__reset button-module__QyrFCa__button reset-module__ylizOa__reset button-module__QyrFCa__secondary button-module__QyrFCa__rounded button-module__QyrFCa__shadow button-module__QyrFCa__invert"
data-geist-button=""
data-prefix="false"
data-suffix="false"
data-version="v1"
style={{ "--geist-icon-size": "16px" }}
href="/contact/sales"
>
<span className="button-module__QyrFCa__content">
<div className="flex flex-row items-center justify-start gap-2 flex-initial">
Talk to an Expert
</div>
</span>
</a>
</div>
</div>
</div>
<div
className="grid-module__4pDFEa__block footer-module__QGSwJW__secondaryCell footer-module__QGSwJW__secondaryCellRenderingCTAAsButton"
data-grid-cell=""
style={{
"--sm-grid-row": "2 / span 1",
"--lg-grid-row": "1 / span 1",
"--sm-grid-column": "1/3",
"--lg-grid-column": "3/4",
"--sm-cell-rows": "1",
"--sm-cell-columns": "2",
"--lg-cell-columns": "1",
overflow: "visible",
}}
>
<div className="flex flex-col lg:flex-col items-center lg:items-start justify-center gap-4 lg:gap-6 flex-initial">
<div className="footer-module__QGSwJW__secondaryDescription">
<p>
<b>Explore Vercel Enterprise</b> with an interactive
product tour, trial, or a personalized demo.
</p>
</div>
<div className="flex flex-row items-center justify-center lg:justify-between gap-6 lg:gap-2 flex-initial">
<a
role="link"
type="submit"
tabIndex="0"
data-react-aria-pressable="true"
data-track="true"
data-track-intent="Contact Sales"
data-zone="same"
className="button-module__QyrFCa__base reset-module__ylizOa__reset button-module__QyrFCa__button reset-module__ylizOa__reset button-module__QyrFCa__secondary button-module__QyrFCa__rounded button-module__QyrFCa__shadow button-module__QyrFCa__invert"
data-geist-button=""
data-prefix="false"
data-suffix="false"
data-version="v1"
style={{ "--geist-icon-size": "16px" }}
href="/try-enterprise"
>
<span className="button-module__QyrFCa__content">
<div className="flex flex-row items-center justify-start gap-2 flex-initial">
Explore Enterprise
</div>
</span>
</a>
</div>
</div>
</div>
<div
className="grid-module__4pDFEa__cross"
data-grid-cross=""
style={{ "--cross-row": "1", "--cross-column": "1" }}
>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-half-size)",
height: "var(--cross-size)",
borderRightWidth: "var(--guide-width)",
}}
></div>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-size)",
height: "var(--cross-half-size)",
borderBottomWidth: "var(--guide-width)",
}}
></div>
</div>
<div
className="grid-module__4pDFEa__cross"
data-grid-cross=""
style={{
transform: "translateY(1px)",
"--sm-cross-row": "3",
"--lg-cross-row": "2",
"--cross-column": "-1",
}}
>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-half-size)",
height: "var(--cross-size)",
borderRightWidth: "var(--guide-width)",
}}
></div>
<div
className="grid-module__4pDFEa__crossLine"
style={{
width: "var(--cross-size)",
height: "var(--cross-half-size)",
borderBottomWidth: "var(--guide-width)",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__xsGuide"
style={{ "--x": "2", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__xsGuide"
style={{ "--x": "1", "--y": "2", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__xsGuide"
style={{
"--x": "2",
"--y": "2",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smGuide"
style={{ "--x": "2", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smGuide"
style={{ "--x": "1", "--y": "2", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smGuide"
style={{
"--x": "2",
"--y": "2",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smdGuide"
style={{ "--x": "2", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smdGuide"
style={{ "--x": "1", "--y": "2", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__smdGuide"
style={{
"--x": "2",
"--y": "2",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "1" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__mdGuide"
style={{ "--x": "2", "--y": "1", borderRight: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__mdGuide"
style={{ "--x": "1", "--y": "2", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__mdGuide"
style={{
"--x": "2",
"--y": "2",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guides"
data-grid-guides="true"
>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__lgGuide"
style={{ "--x": "1", "--y": "1", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__lgGuide"
style={{ "--x": "2", "--y": "1", borderBottom: "none" }}
></div>
<div
aria-hidden="true"
className="grid-module__4pDFEa__guide grid-module__4pDFEa__dashedGuide grid-module__4pDFEa__lgGuide"
style={{
"--x": "3",
"--y": "1",
borderRight: "none",
borderBottom: "none",
}}
></div>
</div>
</section>
</div>
</div>
</div>
</div>
);
}
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment