mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-30 23:14:37 +00:00
update design
This commit is contained in:
Steven Enamakel
@@ -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>
|
||||
|
||||
@@ -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)} />
|
||||
</>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
+62
-31
@@ -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'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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user