damoahdominic · damoahdominic · Feb 18, 2026 · Feb 18, 2026
diff --git a/apps/web/public/file.svg b/apps/web/public/file.svg
diff --git a/apps/web/public/globe.svg b/apps/web/public/globe.svg
diff --git a/apps/web/public/next.svg b/apps/web/public/next.svg
diff --git a/apps/web/public/vercel.svg b/apps/web/public/vercel.svg
diff --git a/apps/web/public/videos/hero.mp4 b/apps/web/public/videos/hero.mp4
diff --git a/apps/web/public/videos/hero_mobile.mp4 b/apps/web/public/videos/hero_mobile.mp4
diff --git a/apps/web/public/window.svg b/apps/web/public/window.svg
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -9,9 +9,11 @@
   --border: #262626;
   --text: #FAFAFA;
   --text-muted: #A3A3A3;
+  --font-sans: var(--font-space), ui-sans-serif, system-ui, sans-serif;
 }
 
 body {
   background: var(--bg);
   color: var(--text);
+  font-family: var(--font-sans);
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Space_Grotesk } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-space" });
 
 export const metadata: Metadata = {
   title: "OpenClaw Code — AI-Powered Code Editor",
@@ -22,7 +22,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={`${inter.variable} font-sans antialiased`}>
+      <body className={`${spaceGrotesk.variable} font-sans antialiased`}>
         {children}
       </body>
     </html>

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -85,7 +85,27 @@ export default function Home() {
 
       {/* Hero */}
       <main className="flex-1">
-        <section className="flex flex-col items-center text-center px-6 pt-20 pb-16 max-w-4xl mx-auto">
+        <section className="relative flex flex-col items-center text-center px-6 pt-20 pb-16 max-w-4xl mx-auto overflow-hidden">
+          {/* Background video */}
+          <video
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover opacity-20 -z-10 hidden sm:block"
+          >
+            <source src="/videos/hero.mp4" type="video/mp4" />
+          </video>
+          <video
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover opacity-20 -z-10 sm:hidden"
+          >
+            <source src="/videos/hero_mobile.mp4" type="video/mp4" />
+          </video>
+          <div className="absolute inset-0 bg-gradient-to-b from-[var(--bg)]/60 via-transparent to-[var(--bg)] -z-10" />
           <Image
             src="/icon.png"
             alt="OpenClaw Code"