From d7e987cea39e0dc09eccfba935a3de87519981da Mon Sep 17 00:00:00 2001 From: Rami Bitar Date: Tue, 15 Sep 2026 00:07:54 -0400 Subject: [PATCH] Refine Vertex landing page design and animations --- .openai/hosting.json | 3 - app/globals.css | 128 ++++++- app/layout.tsx | 2 +- components/theme-toggle.tsx | 2 +- components/ui/button.tsx | 10 +- components/usage-chart.tsx | 96 +++++ components/vertex-landing.tsx | 402 +++++++++------------ public/logo.svg | 3 + public/logos/cash-app.svg | 1 + public/logos/integrations/dropbox.svg | 1 + public/logos/integrations/figma.svg | 14 + public/logos/integrations/github.svg | 1 + public/logos/integrations/gmail.svg | 11 + public/logos/integrations/google-drive.svg | 8 + public/logos/integrations/notion.svg | 1 + public/logos/integrations/slack.svg | 24 ++ public/logos/integrations/supabase.svg | 15 + public/logos/linear.svg | 1 + public/logos/loom.svg | 1 + public/logos/medium.svg | 1 + public/logos/nextjs.svg | 10 + public/logos/openai.svg | 1 + public/logos/retool.svg | 1 + public/logos/stripe.svg | 1 + public/logos/tailwindcss.svg | 1 + public/logos/wise.svg | 1 + 26 files changed, 480 insertions(+), 260 deletions(-) delete mode 100644 .openai/hosting.json create mode 100644 components/usage-chart.tsx create mode 100644 public/logo.svg create mode 100644 public/logos/cash-app.svg create mode 100644 public/logos/integrations/dropbox.svg create mode 100644 public/logos/integrations/figma.svg create mode 100644 public/logos/integrations/github.svg create mode 100644 public/logos/integrations/gmail.svg create mode 100644 public/logos/integrations/google-drive.svg create mode 100644 public/logos/integrations/notion.svg create mode 100644 public/logos/integrations/slack.svg create mode 100644 public/logos/integrations/supabase.svg create mode 100644 public/logos/linear.svg create mode 100644 public/logos/loom.svg create mode 100644 public/logos/medium.svg create mode 100644 public/logos/nextjs.svg create mode 100644 public/logos/openai.svg create mode 100644 public/logos/retool.svg create mode 100644 public/logos/stripe.svg create mode 100644 public/logos/tailwindcss.svg create mode 100644 public/logos/wise.svg diff --git a/.openai/hosting.json b/.openai/hosting.json deleted file mode 100644 index 027bc0a..0000000 --- a/.openai/hosting.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "project_id": "appgprj_6aa8b6736d9c819189feb17103acc9dc" -} diff --git a/app/globals.css b/app/globals.css index a84ac52..2f431ba 100644 --- a/app/globals.css +++ b/app/globals.css @@ -39,6 +39,9 @@ --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); + --color-blue-400: var(--brand-soft); + --color-blue-500: var(--brand-bright); + --color-blue-600: var(--brand); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); @@ -85,13 +88,16 @@ } :root { + --brand: #173da6; + --brand-bright: #214db9; + --brand-soft: #7898ee; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.55 0.24 263); + --primary: var(--brand); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); @@ -102,7 +108,7 @@ --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); - --ring: oklch(0.62 0.22 263); + --ring: var(--brand-bright); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); @@ -126,7 +132,7 @@ --card-foreground: oklch(0.985 0 0); --popover: oklch(0.185 0.009 270); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.62 0.22 263); + --primary: var(--brand); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); @@ -137,7 +143,7 @@ --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 9%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); + --ring: var(--brand-soft); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); @@ -168,23 +174,109 @@ } @layer utilities { - .vertex-grid { - background-image: - linear-gradient(to right, color-mix(in oklab, var(--border) 72%, transparent) 1px, transparent 1px), - linear-gradient(to bottom, color-mix(in oklab, var(--border) 55%, transparent) 1px, transparent 1px); - background-size: 48px 48px; - background-position: center top; + .pricing-card-popular::before, + .pricing-card-popular::after { + content: ""; + position: absolute; + inset: 0 0 auto; + pointer-events: none; } - .hatched { - background-image: repeating-linear-gradient( - -45deg, - transparent, - transparent 6px, - color-mix(in oklab, var(--border) 85%, transparent) 6px, - color-mix(in oklab, var(--border) 85%, transparent) 7px - ); + .pricing-card-popular::before { + height: 1px; + background: linear-gradient(to right, transparent, #173da6 25%, #5479db 50%, #173da6 75%, transparent); } + + .pricing-card-popular::after { + height: 80px; + background: radial-gradient(ellipse at 50% 0%, rgb(23 61 166 / 0.16), transparent 70%); + } + + .hero-gradient { + isolation: isolate; + background-image: + radial-gradient(circle at 16% 82%, color-mix(in oklab, var(--brand) 24%, transparent), transparent 34%), + radial-gradient(circle at 82% 63%, color-mix(in oklab, var(--brand-bright) 22%, transparent), transparent 36%), + linear-gradient(132deg, transparent 22%, color-mix(in oklab, var(--brand) 10%, transparent) 46%, color-mix(in oklab, var(--brand-bright) 15%, transparent) 62%, transparent 82%), + linear-gradient(to bottom, color-mix(in oklab, var(--background) 96%, black), var(--background)); + } + + .dark .hero-gradient { + background-image: + radial-gradient(circle at 16% 84%, color-mix(in oklab, var(--brand) 34%, transparent), transparent 35%), + radial-gradient(circle at 84% 60%, color-mix(in oklab, var(--brand-bright) 30%, transparent), transparent 38%), + linear-gradient(132deg, transparent 18%, color-mix(in oklab, var(--brand) 15%, transparent) 44%, color-mix(in oklab, var(--brand-bright) 21%, transparent) 62%, transparent 84%), + linear-gradient(to bottom, oklch(0.125 0.01 270), var(--background)); + } + + .hero-gradient::before { + content: ""; + position: absolute; + z-index: 0; + inset: 12% 5% -18%; + background: + radial-gradient(circle at 32% 60%, color-mix(in oklab, var(--brand) 64%, transparent), transparent 34%), + radial-gradient(circle at 68% 48%, color-mix(in oklab, var(--brand-bright) 54%, transparent), transparent 38%); + clip-path: polygon(0 58%, 28% 18%, 62% 8%, 100% 42%, 82% 100%, 18% 92%); + filter: blur(72px); + opacity: 0.52; + pointer-events: none; + } + + .hero-gradient::after { + content: ""; + position: absolute; + z-index: 0; + inset: 0; + background: + linear-gradient(108deg, transparent 28%, color-mix(in oklab, var(--brand) 11%, transparent) 46%, transparent 58%), + linear-gradient(70deg, transparent 37%, color-mix(in oklab, var(--brand-bright) 10%, transparent) 55%, transparent 69%); + mask-image: linear-gradient(to bottom, transparent 8%, black 55%, transparent 100%); + pointer-events: none; + } + + .frame-cross { + position: absolute; + z-index: 20; + width: 25px; + height: 25px; + transform: translate(-50%, -50%); + color: color-mix(in oklab, var(--foreground) 32%, transparent); + pointer-events: none; + } + + .frame-cross.right-0 { + transform: translate(50%, -50%); + } + + .frame-cross.bottom-0 { + transform: translate(-50%, 50%); + } + + .frame-cross.right-0.bottom-0 { + transform: translate(50%, 50%); + } + + .frame-cross::before, + .frame-cross::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + background: currentColor; + transform: translate(-50%, -50%); + } + + .frame-cross::before { + width: 25px; + height: 1px; + } + + .frame-cross::after { + width: 1px; + height: 25px; + } + } @media (prefers-reduced-motion: reduce) { diff --git a/app/layout.tsx b/app/layout.tsx index f6176fc..7b34669 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -24,7 +24,7 @@ const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? (process.env.VERCEL_PROJECT_PRODUCTION_URL ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` - : "https://vertex-ai-gateway.rbitar1.chatgpt.site"); + : "http://localhost:3000"); // Routes only set their own `title`; the template appends the site name. export const metadata: Metadata = { diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx index c8ebf44..b287d91 100644 --- a/components/theme-toggle.tsx +++ b/components/theme-toggle.tsx @@ -16,7 +16,7 @@ export function ThemeToggle() { @@ -625,7 +564,7 @@ export function VertexLandingPage() { type="button" aria-pressed={annual} onClick={() => setAnnual(true)} - className={cn("rounded-full px-4 py-1.5 text-xs font-medium transition", annual ? "bg-background text-foreground shadow-sm" : "text-muted-foreground")} + className={cn("rounded-sm px-4 py-1.5 text-xs font-medium transition", annual ? "bg-background text-foreground shadow-sm" : "text-muted-foreground")} > Annual −20% @@ -661,42 +600,42 @@ export function VertexLandingPage() { features: ["Everything in Team", "SAML SSO and audit logs", "Custom retention and regions", "Dedicated capacity", "Enterprise SLA"], }, ].map((plan) => ( -
- {plan.popular && ( - - Most popular - - )} -

{plan.name}

-
- {plan.price} - {plan.cadence && {plan.cadence}} +
+
+
+

{plan.name}

+ {plan.popular && ( + + Most popular + + )} +
+
+ {plan.price} + {plan.cadence && {plan.cadence}} +
+

{plan.description}

+ + {plan.action} + +
    + {plan.features.map((feature) => ( +
  • + + {feature} +
    • + ))} +
-

{plan.description}

- - {plan.action} - -
-
    - {plan.features.map((feature) => ( -
  • - - {feature} -
    • - ))} -
))}
-

- Model usage is billed separately at transparent provider rates. No long-term contracts. -

@@ -716,21 +655,22 @@ export function VertexLandingPage() {
-
- -
+
© 2026 Vertex, Inc. All rights reserved. - All systems operational
diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..ebd1a97 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/logos/cash-app.svg b/public/logos/cash-app.svg new file mode 100644 index 0000000..98a4d74 --- /dev/null +++ b/public/logos/cash-app.svg @@ -0,0 +1 @@ + diff --git a/public/logos/integrations/dropbox.svg b/public/logos/integrations/dropbox.svg new file mode 100644 index 0000000..4c01c6a --- /dev/null +++ b/public/logos/integrations/dropbox.svg @@ -0,0 +1 @@ + diff --git a/public/logos/integrations/figma.svg b/public/logos/integrations/figma.svg new file mode 100644 index 0000000..78a05a9 --- /dev/null +++ b/public/logos/integrations/figma.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/logos/integrations/github.svg b/public/logos/integrations/github.svg new file mode 100644 index 0000000..7c4a574 --- /dev/null +++ b/public/logos/integrations/github.svg @@ -0,0 +1 @@ + diff --git a/public/logos/integrations/gmail.svg b/public/logos/integrations/gmail.svg new file mode 100644 index 0000000..fc19b56 --- /dev/null +++ b/public/logos/integrations/gmail.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/logos/integrations/google-drive.svg b/public/logos/integrations/google-drive.svg new file mode 100644 index 0000000..361112a --- /dev/null +++ b/public/logos/integrations/google-drive.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/logos/integrations/notion.svg b/public/logos/integrations/notion.svg new file mode 100644 index 0000000..0de885e --- /dev/null +++ b/public/logos/integrations/notion.svg @@ -0,0 +1 @@ + diff --git a/public/logos/integrations/slack.svg b/public/logos/integrations/slack.svg new file mode 100644 index 0000000..6d14c72 --- /dev/null +++ b/public/logos/integrations/slack.svg @@ -0,0 +1,24 @@ + + + + + + + + diff --git a/public/logos/integrations/supabase.svg b/public/logos/integrations/supabase.svg new file mode 100644 index 0000000..574f67e --- /dev/null +++ b/public/logos/integrations/supabase.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/logos/linear.svg b/public/logos/linear.svg new file mode 100644 index 0000000..f98ad4f --- /dev/null +++ b/public/logos/linear.svg @@ -0,0 +1 @@ + diff --git a/public/logos/loom.svg b/public/logos/loom.svg new file mode 100644 index 0000000..95db52e --- /dev/null +++ b/public/logos/loom.svg @@ -0,0 +1 @@ + diff --git a/public/logos/medium.svg b/public/logos/medium.svg new file mode 100644 index 0000000..a419dc3 --- /dev/null +++ b/public/logos/medium.svg @@ -0,0 +1 @@ + diff --git a/public/logos/nextjs.svg b/public/logos/nextjs.svg new file mode 100644 index 0000000..65745d8 --- /dev/null +++ b/public/logos/nextjs.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/logos/openai.svg b/public/logos/openai.svg new file mode 100644 index 0000000..7c57230 --- /dev/null +++ b/public/logos/openai.svg @@ -0,0 +1 @@ + diff --git a/public/logos/retool.svg b/public/logos/retool.svg new file mode 100644 index 0000000..b964e8e --- /dev/null +++ b/public/logos/retool.svg @@ -0,0 +1 @@ + diff --git a/public/logos/stripe.svg b/public/logos/stripe.svg new file mode 100644 index 0000000..76cce7a --- /dev/null +++ b/public/logos/stripe.svg @@ -0,0 +1 @@ + diff --git a/public/logos/tailwindcss.svg b/public/logos/tailwindcss.svg new file mode 100644 index 0000000..8c2cc0b --- /dev/null +++ b/public/logos/tailwindcss.svg @@ -0,0 +1 @@ + diff --git a/public/logos/wise.svg b/public/logos/wise.svg new file mode 100644 index 0000000..0280b42 --- /dev/null +++ b/public/logos/wise.svg @@ -0,0 +1 @@ +