From 300b175f8e10a7b8bb3f8b7d8f82b5b3989a7eb5 Mon Sep 17 00:00:00 2001 From: gsvprharsha Date: Thu, 3 Sep 2026 22:12:28 +0530 Subject: [PATCH 1/2] feat(web): new landing page - app/new-landing/: hero, feature-grid, how-it-works, why-tempest, screenshot - feature-grid: inline visuals for One window, Worktrees, Threads (canvas), Diff/commit/PR; 3-col responsive grid - components/slider/: infinite marquee for the agent cycle - assets: hero video, noise texture, feature illustrations - deps + globals wiring for the new route Co-authored-by: Tempest --- package-lock.json | 42 ++++ web/app/globals.css | 1 + web/app/layout.tsx | 10 +- web/app/new-landing/_components/.gitkeep | 0 .../new-landing/_components/agent-cycle.tsx | 81 +++++++ web/app/new-landing/_components/aurora.tsx | 82 +++++++ web/app/new-landing/_components/button.tsx | 96 ++++++++ web/app/new-landing/_components/container.tsx | 16 ++ .../_components/feature-visuals.tsx | 216 ++++++++++++++++++ web/app/new-landing/_components/header.tsx | 96 ++++++++ .../new-landing/_sections/feature-grid.tsx | 142 ++++++++++++ .../new-landing/_sections/how-it-works.tsx | 125 ++++++++++ web/app/new-landing/_sections/screenshot.tsx | 36 +++ web/app/new-landing/_sections/why-tempest.tsx | 155 +++++++++++++ web/app/new-landing/layout.tsx | 14 ++ web/app/new-landing/page.tsx | 100 ++++++++ web/components/slider/infinite-slider.tsx | 101 ++++++++ web/components/slider/progressive-blur.tsx | 65 ++++++ web/package.json | 3 + .../new-landing/continuity-anywhere.png | Bin 0 -> 1567141 bytes web/public/new-landing/token-intelligence.png | Bin 0 -> 1400368 bytes web/public/new-landing/total-isolation.png | Bin 0 -> 729396 bytes web/public/noise.webp | Bin 0 -> 37856 bytes web/public/video/hero-bg.mp4 | Bin 0 -> 1973273 bytes 24 files changed, 1379 insertions(+), 2 deletions(-) create mode 100644 web/app/new-landing/_components/.gitkeep create mode 100644 web/app/new-landing/_components/agent-cycle.tsx create mode 100644 web/app/new-landing/_components/aurora.tsx create mode 100644 web/app/new-landing/_components/button.tsx create mode 100644 web/app/new-landing/_components/container.tsx create mode 100644 web/app/new-landing/_components/feature-visuals.tsx create mode 100644 web/app/new-landing/_components/header.tsx create mode 100644 web/app/new-landing/_sections/feature-grid.tsx create mode 100644 web/app/new-landing/_sections/how-it-works.tsx create mode 100644 web/app/new-landing/_sections/screenshot.tsx create mode 100644 web/app/new-landing/_sections/why-tempest.tsx create mode 100644 web/app/new-landing/layout.tsx create mode 100644 web/app/new-landing/page.tsx create mode 100644 web/components/slider/infinite-slider.tsx create mode 100644 web/components/slider/progressive-blur.tsx create mode 100644 web/public/new-landing/continuity-anywhere.png create mode 100644 web/public/new-landing/token-intelligence.png create mode 100644 web/public/new-landing/total-isolation.png create mode 100644 web/public/noise.webp create mode 100644 web/public/video/hero-bg.mp4 diff --git a/package-lock.json b/package-lock.json index b6c9aa1..d941940 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5450,6 +5450,30 @@ "fast-deep-equal": "^3.1.3" } }, + "node_modules/@paper-design/shaders": { + "version": "0.0.80", + "resolved": "https://registry.npmjs.org/@paper-design/shaders/-/shaders-0.0.80.tgz", + "integrity": "sha512-pcabvt5xDlFoEhpjUj4b1tGJMfqb0i5mXifWMNQf6z7FoOJYxYDo7F8R6k0JAh5D/7ouxjX5+N0cIq5WURyQ1Q==", + "license": "Apache-2.0" + }, + "node_modules/@paper-design/shaders-react": { + "version": "0.0.80", + "resolved": "https://registry.npmjs.org/@paper-design/shaders-react/-/shaders-react-0.0.80.tgz", + "integrity": "sha512-Y1oxUeh5D2AECo05O+4UYRbaMfQzKKYH3Q5jcvirOcoX0hTPYbezCLn5g94nvcuzxy5LN/uqwsL3jDUp8r3E+A==", + "license": "Apache-2.0", + "dependencies": { + "@paper-design/shaders": "0.0.80" + }, + "peerDependencies": { + "@types/react": "^18 || ^19", + "react": "^18 || ^19" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@pierre/diffs": { "version": "1.2.8", "license": "apache-2.0", @@ -22961,6 +22985,21 @@ } } }, + "node_modules/react-use-measure": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz", + "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.13", + "react-dom": ">=16.13" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-zoom-pan-pinch": { "version": "3.7.0", "license": "MIT", @@ -28869,17 +28908,20 @@ "version": "0.1.0", "dependencies": { "@lobehub/icons": "^5.16.0", + "@paper-design/shaders-react": "^0.0.80", "@tailwindcss/typography": "^0.5.20", "@vercel/analytics": "^2.0.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^1.32.0", + "motion": "^12.43.0", "next": "16.3.1", "next-mdx-remote": "^6.0.0", "next-themes": "^0.4.6", "radix-ui": "^1.6.7", "react": "19.2.8", "react-dom": "19.2.8", + "react-use-measure": "^2.1.7", "remark-gfm": "^4.0.1", "shadcn": "^4.18.0", "tailwind-merge": "^3.6.0", diff --git a/web/app/globals.css b/web/app/globals.css index e161ded..07166c6 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -9,6 +9,7 @@ --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --font-pixel: var(--font-geist-pixel); --font-heading: var(--font-sans); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); diff --git a/web/app/layout.tsx b/web/app/layout.tsx index b1338b7..bb0144e 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, Geist_Pixel } from "next/font/google"; import { Providers } from "@/provider/theme-provider"; import { Header } from "@/components/layout/header"; import { Footer } from "@/components/layout/footer"; @@ -60,6 +60,12 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const geistPixel = Geist_Pixel({ + variable: "--font-geist-pixel", + subsets: ["latin"], + weight: "400", +}); + export const metadata: Metadata = { metadataBase: new URL(SITE_URL), title: "Tempest — Run Claude Code, Aider & AI Agents in Parallel", @@ -100,7 +106,7 @@ export default function RootLayout({