From 4caf9a5b20b397df70f4ccd5e8cfb89156c43018 Mon Sep 17 00:00:00 2001
From: Steven Enamakel <enamakel@tinyhumans.ai>
Date: Fri, 20 Mar 2026 17:06:10 -0700
Subject: [PATCH] update design

---
 lander/app/components/Footer.tsx              |  4 +-
 lander/app/components/HeroCTA.tsx             | 23 +----
 lander/app/components/Navigation.tsx          |  4 +-
 .../components/RotatingTetrahedronCanvas.tsx  | 68 ++++++++------
 lander/app/downloads/page.tsx                 |  2 +-
 lander/app/feedback/page.tsx                  |  6 +-
 lander/app/globals.css                        | 10 +-
 lander/app/layout.tsx                         |  8 +-
 lander/app/page.tsx                           | 93 ++++++++++++-------
 9 files changed, 124 insertions(+), 94 deletions(-)

diff --git a/lander/app/components/Footer.tsx b/lander/app/components/Footer.tsx
index f9a5a38c6..21b2d0238 100644
--- a/lander/app/components/Footer.tsx
+++ b/lander/app/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
     return (
-        <footer className="border-t border-zinc-800 bg-zinc-950">
-            <div className="mx-auto max-w-7xl px-6 py-6 sm:px-8">
+        <footer className="border-t border-[var(--border-subtle)] bg-[#0c0c0c]">
+            <div className="w-full px-6 py-6 sm:px-8">
                 <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-zinc-400">
                     <span>© {new Date().getFullYear()} OpenHuman</span>
                     <span className="text-zinc-600">•</span>
diff --git a/lander/app/components/HeroCTA.tsx b/lander/app/components/HeroCTA.tsx
index c68869c4c..736fb8799 100644
--- a/lander/app/components/HeroCTA.tsx
+++ b/lander/app/components/HeroCTA.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import Link from 'next/link';
 import DownloadModal from './DownloadModal';
 
 export default function HeroCTA() {
@@ -9,30 +8,14 @@ export default function HeroCTA() {
 
   return (
     <>
-      <div className="mt-10 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center sm:gap-4">
+      <div className="mt-10 flex justify-center">
         <button
           type="button"
           onClick={() => setDownloadModalOpen(true)}
-          className="rounded-lg cursor-pointer bg-white px-6 py-3 text-sm font-semibold text-zinc-950 transition-colors hover:bg-zinc-200"
+          className="rounded-lg bg-[var(--accent)] px-6 py-2.5 text-sm font-semibold text-white shadow-none transition-colors hover:bg-[var(--accent-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]"
         >
-          Download 🔥
+          Download
         </button>
-        <Link
-          href="https://x.com/tinyhumansai"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-lg border border-zinc-800 px-6 py-3 text-sm font-semibold text-white transition-colors hover:border-zinc-700"
-        >
-          Join the Community
-        </Link>
-        <Link
-          href="https://tinyhumans.gitbook.io/openhuman"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-lg border border-zinc-800 px-6 py-3 text-sm font-semibold text-white transition-colors hover:border-zinc-700"
-        >
-          Read the Docs
-        </Link>
       </div>
       <DownloadModal isOpen={downloadModalOpen} onClose={() => setDownloadModalOpen(false)} />
     </>
diff --git a/lander/app/components/Navigation.tsx b/lander/app/components/Navigation.tsx
index cef2a1b50..9097ee319 100644
--- a/lander/app/components/Navigation.tsx
+++ b/lander/app/components/Navigation.tsx
@@ -2,8 +2,8 @@ import Link from 'next/link';
 
 export default function Navigation() {
     return (
-        <nav className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm">
-            <div className="mx-auto max-w-7xl px-6 sm:px-8">
+        <nav className="fixed top-0 left-1/2 z-50 w-full max-w-[1280px] -translate-x-1/2 border-x border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm">
+            <div className="px-6 sm:px-8">
                 <div className="flex h-16 items-center justify-between">
                     <Link href="/" className="text-xl font-semibold text-white">
                         OpenHuman
diff --git a/lander/app/components/RotatingTetrahedronCanvas.tsx b/lander/app/components/RotatingTetrahedronCanvas.tsx
index 65ae30b4c..abdd40409 100644
--- a/lander/app/components/RotatingTetrahedronCanvas.tsx
+++ b/lander/app/components/RotatingTetrahedronCanvas.tsx
@@ -2,6 +2,26 @@
 
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
+import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';
+
+/** Canonical vertices of a truncated tetrahedron (permutations of 0, ±1, ±1). Convex hull = Archimedean solid. */
+function truncatedTetrahedronPoints(scale: number): THREE.Vector3[] {
+  const coords: [number, number, number][] = [
+    [0, 1, 1],
+    [0, 1, -1],
+    [0, -1, 1],
+    [0, -1, -1],
+    [1, 0, 1],
+    [1, 0, -1],
+    [-1, 0, 1],
+    [-1, 0, -1],
+    [1, 1, 0],
+    [1, -1, 0],
+    [-1, 1, 0],
+    [-1, -1, 0],
+  ];
+  return coords.map(([x, y, z]) => new THREE.Vector3(x, y, z).multiplyScalar(scale));
+}
 
 export default function RotatingTetrahedronCanvas() {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -18,45 +38,35 @@ export default function RotatingTetrahedronCanvas() {
     });
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.outputColorSpace = THREE.SRGBColorSpace;
-    renderer.toneMapping = THREE.ACESFilmicToneMapping;
-    renderer.toneMappingExposure = 1.15;
+    renderer.toneMapping = THREE.NoToneMapping;
 
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
-    camera.position.set(0, 0, 4.6);
+    camera.position.set(0, 0.15, 4.8);
 
-    // Subdivided tet + smooth normals ≈ Oblivion-style blunted / softened silhouette (not razor facets).
-    const geometry = new THREE.TetrahedronGeometry(1.35, 2);
-    geometry.computeVertexNormals();
+    const geometry = new ConvexGeometry(truncatedTetrahedronPoints(0.92));
 
-    const fillMaterial = new THREE.MeshPhysicalMaterial({
-      color: '#5b8fd9',
-      emissive: '#0d1f35',
-      emissiveIntensity: 0.45,
-      metalness: 0.42,
-      roughness: 0.18,
-      clearcoat: 0.92,
-      clearcoatRoughness: 0.12,
-      transparent: true,
-      opacity: 0.9,
-      flatShading: false,
+    // Flat, panel-like read: matte off-white / reads as light vs shadow (Oblivion-style blocking).
+    const fillMaterial = new THREE.MeshLambertMaterial({
+      color: '#e4e4e4',
+      emissive: '#080808',
+      emissiveIntensity: 0.06,
     });
 
     const fillMesh = new THREE.Mesh(geometry, fillMaterial);
+    fillMesh.rotation.x = 0.35;
+    fillMesh.rotation.y = -0.45;
     scene.add(fillMesh);
 
-    const ambientLight = new THREE.AmbientLight('#cbd5e1', 0.35);
-    const keyLight = new THREE.PointLight('#7ab4ff', 1.35, 24);
-    keyLight.position.set(2.8, 2.5, 4);
-    const rimLight = new THREE.PointLight('#4a83dd', 0.85, 18);
-    rimLight.position.set(-3.2, -1.2, 3.5);
-    const fillLight = new THREE.DirectionalLight('#e8f0ff', 0.55);
-    fillLight.position.set(-1.5, 2, 6);
+    const ambientLight = new THREE.AmbientLight('#ffffff', 0.08);
+    const sun = new THREE.DirectionalLight('#ffffff', 1.35);
+    sun.position.set(4.5, 6, 5);
+    const bounce = new THREE.DirectionalLight('#8899aa', 0.22);
+    bounce.position.set(-3, -1, -2);
 
     scene.add(ambientLight);
-    scene.add(keyLight);
-    scene.add(rimLight);
-    scene.add(fillLight);
+    scene.add(sun);
+    scene.add(bounce);
 
     let animationFrame = 0;
 
@@ -77,8 +87,8 @@ export default function RotatingTetrahedronCanvas() {
     resize();
 
     const animate = () => {
-      fillMesh.rotation.x += 0.006;
-      fillMesh.rotation.y += 0.009;
+      fillMesh.rotation.y += 0.007;
+      fillMesh.rotation.x += 0.0045;
 
       renderer.render(scene, camera);
       animationFrame = window.requestAnimationFrame(animate);
diff --git a/lander/app/downloads/page.tsx b/lander/app/downloads/page.tsx
index 46ef43dc9..dcaca4ecd 100644
--- a/lander/app/downloads/page.tsx
+++ b/lander/app/downloads/page.tsx
@@ -55,7 +55,7 @@ export default function Downloads() {
     return (
         <div className="min-h-screen bg-zinc-950 text-white">
             <Navigation />
-            <main className="mx-auto max-w-7xl px-6 pt-24 sm:px-8 sm:pt-32 pb-16">
+            <main className="w-full px-6 pt-24 sm:px-8 sm:pt-32 pb-16">
                 <div className="mx-auto max-w-4xl">
                     <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
                         Download for Free
diff --git a/lander/app/feedback/page.tsx b/lander/app/feedback/page.tsx
index 8d8a7b4a7..4a9d55bfd 100644
--- a/lander/app/feedback/page.tsx
+++ b/lander/app/feedback/page.tsx
@@ -468,8 +468,8 @@ export default function FeedbackPage() {
     return (
         <div className="min-h-screen bg-zinc-950 text-white">
             {/* Custom Header - Mobile Responsive */}
-            <header className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm">
-                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <header className="fixed top-0 left-1/2 z-50 w-full max-w-[1280px] -translate-x-1/2 border-x border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm">
+                <div className="px-4 sm:px-6 lg:px-8">
                     <div className="flex h-14 sm:h-16 items-center justify-between">
                         <div className="flex items-center gap-3 sm:gap-8">
                             <button
@@ -514,7 +514,7 @@ export default function FeedbackPage() {
                 </div>
             </header>
 
-            <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 sm:pt-24 pb-8">
+            <main className="w-full px-4 sm:px-6 lg:px-8 pt-20 sm:pt-24 pb-8">
                 <div className="flex gap-4 lg:gap-8">
                     {/* Mobile Sidebar Overlay */}
                     {sidebarOpen && (
diff --git a/lander/app/globals.css b/lander/app/globals.css
index 030ed189b..8ac468ee3 100644
--- a/lander/app/globals.css
+++ b/lander/app/globals.css
@@ -1,8 +1,14 @@
 @import "tailwindcss";
 
 :root {
-  --background: #09090b;
+  --background: #121212;
   --foreground: #fafafa;
+  --surface: #1a1a1a;
+  --surface-raised: #242424;
+  --border-subtle: #2a2a2a;
+  --muted: #a1a1aa;
+  --accent: #4a83dd;
+  --accent-hover: #3d6fc7;
 }
 
 @theme inline {
@@ -15,5 +21,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), system-ui, sans-serif;
 }
diff --git a/lander/app/layout.tsx b/lander/app/layout.tsx
index b07eb332b..10c895d8b 100644
--- a/lander/app/layout.tsx
+++ b/lander/app/layout.tsx
@@ -40,7 +40,7 @@ export default function RootLayout({
         <link rel="manifest" href="/site.webmanifest" />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased flex min-h-screen flex-col`}
+        className={`${geistSans.variable} ${geistMono.variable} bg-[#121212] antialiased text-zinc-100`}
       >
         <Script
           src="https://www.googletagmanager.com/gtag/js?id=G-VS26CY11RK"
@@ -54,10 +54,10 @@ export default function RootLayout({
             gtag('config', 'G-VS26CY11RK');
           `}
         </Script>
-        <div className="flex-grow">
-          {children}
+        <div className="mx-auto flex min-h-[100dvh] w-full max-w-[1280px] flex-col border-x border-[var(--border-subtle)] bg-[#121212]">
+          <div className="flex flex-1 flex-col">{children}</div>
+          <Footer />
         </div>
-        <Footer />
       </body>
     </html>
   );
diff --git a/lander/app/page.tsx b/lander/app/page.tsx
index 51b8ab2ce..4e518718e 100644
--- a/lander/app/page.tsx
+++ b/lander/app/page.tsx
@@ -1,46 +1,77 @@
+import Link from 'next/link';
 import HeroCTA from './components/HeroCTA';
 import RotatingTetrahedronCanvas from './components/RotatingTetrahedronCanvas';
 
+const connectLinks = [
+  { label: 'X', href: 'https://x.com/tinyhumansai' },
+  { label: 'GitHub', href: 'https://github.com/tinyhumansai/openhuman' },
+];
+
 export default function Home() {
   return (
-    <div className="min-h-screen bg-black text-white relative">
-      <main className="mx-auto max-w-7xl px-6 sm:px-8 sm:pt-32 relative z-10">
-        <div className="mx-auto max-w-3xl text-center">
-          <div className="mx-auto mb-6 h-[180px] w-[180px] sm:h-[200px] sm:w-[200px]">
-            <RotatingTetrahedronCanvas />
+    <div className="relative flex min-h-full flex-1 flex-col bg-[#121212] text-white">
+      <main className="relative z-10 w-full">
+        <section className="px-6 pb-12 pt-16 sm:px-10 sm:pb-16 sm:pt-20">
+          <div className="mx-auto max-w-xl text-center">
+            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">OpenHuman</p>
+            <div className="mx-auto mt-8 h-[min(200px,42vw)] w-[min(200px,42vw)] max-h-[220px] max-w-[220px]">
+              <RotatingTetrahedronCanvas />
+            </div>
+            <h1 className="mt-10 text-4xl font-bold tracking-tight text-white sm:text-5xl">Get started</h1>
+            <p className="mt-4 text-base leading-relaxed text-[var(--muted)] sm:text-lg">
+              Your AI superhuman for personal and business life. Private beta — install the app and connect your
+              tools.
+            </p>
+            <HeroCTA />
           </div>
-          <h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
-            OpenHuman
-          </h1>
-          <p className="mt-6 text-lg leading-8 text-zinc-400 sm:text-xl">
-            Your AI superhuman for your personal and business life. In private beta.
-          </p>
-          <HeroCTA />
-        </div>
+        </section>
 
-        <div className="mx-auto mt-24 max-w-5xl">
-          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 text-center">
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
-              <h3 className="text-lg font-semibold text-white">Large Scale Data Analysis</h3>
-              <p className="mt-2 text-sm text-zinc-400">
-                Analyze all your emails, messages, meeting notes and more. Control the chaos.
+        <section className="border-t border-[var(--border-subtle)]">
+          <div className="grid md:grid-cols-2">
+            <div className="border-b border-[var(--border-subtle)] px-6 py-12 sm:px-10 md:border-b-0 md:border-r md:border-[var(--border-subtle)]">
+              <h2 className="text-lg font-semibold tracking-tight text-white">Documentation</h2>
+              <p className="mt-2 max-w-sm text-sm leading-relaxed text-zinc-400">
+                Read the guides, learn how skills work, and explore what OpenHuman can do with your Telegram and
+                integrations.
               </p>
+              <div className="mt-8 flex flex-wrap gap-3">
+                <a
+                  href="https://tinyhumans.gitbook.io/openhuman"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center rounded-full bg-[var(--surface-raised)] px-4 py-2 text-sm font-medium text-zinc-200 ring-1 ring-zinc-700/80 transition-colors hover:bg-zinc-800 hover:text-white"
+                >
+                  Read the docs
+                </a>
+                <Link
+                  href="/downloads"
+                  className="inline-flex items-center justify-center rounded-full bg-[var(--surface-raised)] px-4 py-2 text-sm font-medium text-zinc-200 ring-1 ring-zinc-700/80 transition-colors hover:bg-zinc-800 hover:text-white"
+                >
+                  View downloads
+                </Link>
+              </div>
             </div>
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
-              <h3 className="text-lg font-semibold text-white text-center">Extreme Intelligence</h3>
-              <p className="mt-2 text-sm text-zinc-400">
-                Get insights from your data that you never thought possible.
-              </p>
-            </div>
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
-              <h3 className="text-lg font-semibold text-white text-center">Take Action</h3>
-              <p className="mt-2 text-sm text-zinc-400">
-                Let OpenHuman do the heavy lifting. Automatically create tasks,
-                send messages, get reports, and more.
+            <div className="px-6 py-12 sm:px-10">
+              <h2 className="text-lg font-semibold tracking-tight text-white">Connect with us</h2>
+              <p className="mt-2 max-w-sm text-sm leading-relaxed text-zinc-400">
+                Follow updates, ship feedback, and join the community while we&apos;re in beta.
               </p>
+              <div className="mt-8 flex flex-wrap gap-2">
+                {connectLinks.map(({ label, href }) => (
+                  <a
+                    key={href}
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center justify-center rounded-full bg-[var(--surface-raised)] px-4 py-2 text-sm font-medium text-zinc-200 ring-1 ring-zinc-700/80 transition-colors hover:bg-zinc-800 hover:text-white"
+                  >
+                    {label}
+                  </a>
+                ))}
+              </div>
             </div>
           </div>
-        </div>
+        </section>
       </main>
     </div>
   );