VoidWorksIO · JensAstrup · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -6,8 +6,14 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-instrument-sans), system-ui, sans-serif;
+  --font-mono: var(--font-ibm-plex-mono), ui-monospace, monospace;
+  --color-brand: var(--brand);
+  --color-brand-solid: var(--brand-solid);
+  --color-brand-solid-hover: var(--brand-solid-hover);
+  --color-brand-soft: var(--brand-soft);
+  --color-brand-softer: var(--brand-softer);
+  --color-body-muted: var(--body-muted);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -45,24 +51,31 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.15 0 0);
-  --card-foreground: oklch(1 0 0);
+  --background: #08080a;
+  --foreground: #f4f4f6;
+  --card: #101013;
+  --card-foreground: #f4f4f6;
   --popover: oklch(0.15 0 0);
   --popover-foreground: oklch(1 0 0);
   --primary: oklch(0.929 0.013 255.508);
   --primary-foreground: oklch(0 0 0);
   --secondary: oklch(0.279 0.041 260.031);
   --secondary-foreground: oklch(1 0 0);
   --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
+  --muted-foreground: #9a9aa2;
   --accent: oklch(0.279 0.041 260.031);
   --accent-foreground: oklch(1 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
+  --border: rgb(255 255 255 / 8%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
+  --brand: #5b6cf0;
+  /* Deeper indigo for white-text surfaces: meets 4.5:1 contrast (base ~5.3:1, hover ~4.7:1) */
+  --brand-solid: #4c5ce6;
+  --brand-solid-hover: #5566eb;
+  --brand-soft: #8e9bff;
+  --brand-softer: #b4bdff;
+  --body-muted: #a8a8b0;
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -119,4 +132,13 @@
   body {
     @apply bg-background text-foreground;
   }
+  ::selection {
+    background: var(--brand-solid);
+    color: #ffffff;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,36 +1,33 @@
 import { Analytics } from '@vercel/analytics/next'
 import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
+import { IBM_Plex_Mono, Instrument_Sans } from 'next/font/google'
 
 import { Widget as ProductlaneWidget } from '@/components/productlane/widget'
 
 import './globals.css'
 
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
+const instrumentSans = Instrument_Sans({
+  variable: '--font-instrument-sans',
   subsets: ['latin'],
 })
 
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
+const ibmPlexMono = IBM_Plex_Mono({
+  variable: '--font-ibm-plex-mono',
   subsets: ['latin'],
+  weight: ['400', '500'],
 })
 
 export const metadata: Metadata = {
   title: 'Void Works',
   description: 'Developer tools for the modern era',
 }
 
-function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>): React.ReactNode {
+function RootLayout({children}: Readonly<{children: React.ReactNode}>): React.ReactNode {
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${instrumentSans.variable} ${ibmPlexMono.variable} font-sans antialiased`}
       >
         {children}
         <ProductlaneWidget />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,18 @@
 import type { Metadata } from 'next'
-import Image from 'next/image'
 
-import { AnimatedProductSection } from '@/components/animated-product-section'
-import { FixedFooterLinks } from '@/components/fixed-footer-links'
 import { Footer } from '@/components/footer'
-import { ScrollIndicator } from '@/components/scroll-indicator'
-import { Button } from '@/components/ui/button'
+import { Header } from '@/components/header'
+import { Hero } from '@/components/hero'
+import { ProjectsSection } from '@/components/projects-section'
 
 
 const APP_NAME = 'Void Works'
 const APP_DESCRIPTION = 'Creating innovative solutions across platforms and technologies'
 const DEFAULT_URL = 'https://voidworks.io'
 
+// Regenerate daily so the footer's copyright year stays current.
+export const revalidate = 86400
+
 export const metadata: Metadata = {
   title: APP_NAME,
   description: APP_DESCRIPTION,
@@ -103,20 +104,6 @@ export default function Home(): React.ReactNode {
   }
 
   const productSchemas = [
-    {
-      '@context': 'https://schema.org',
-      '@type': 'SoftwareApplication',
-      'name': 'Shortcut Assistant',
-      'applicationCategory': 'BrowserApplication',
-      'operatingSystem': 'Chrome',
-      'description': 'Enhance your browsing experience with powerful keyboard shortcuts and productivity tools.',
-      'url': 'https://chromewebstore.google.com/detail/shortcut-assistant/kmdlofehocppnlkpokdbiaalcelhedef',
-      'offers': {
-        '@type': 'Offer',
-        'price': '0',
-        'priceCurrency': 'USD',
-      },
-    },
     {
       '@context': 'https://schema.org',
       '@type': 'MobileApplication',
@@ -142,7 +129,7 @@ export default function Home(): React.ReactNode {
   ]
 
   return (
-    <main className="min-h-screen bg-black">
+    <div className="min-h-screen text-base">
       {/* Structured Data */}
       <script
         type="application/ld+json"
@@ -160,48 +147,14 @@ export default function Home(): React.ReactNode {
         />
       ))}
 
-      {/* Hero Section with Background */}
-      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
-        <div className="absolute inset-0 z-0">
-          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black z-10" />
-          <Image
-            src="/images/hero-background.jpg"
-            alt="Abstract technology background with modern design elements"
-            className="w-full h-full object-cover"
-            width={1920}
-            height={1080}
-            priority
-          />
-        </div>
-
-        <div className="container mx-auto px-4 py-24 relative z-20">
-          <div className="max-w-5xl space-y-8">
-            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white leading-[1.1] text-balance">
-              Solutions that matter, designed thoughtfully.
-            </h1>
-            <p className="text-lg md:text-xl text-white/80 max-w-2xl leading-relaxed">
-              Building innovative solutions across platforms and technologies. From browser extensions to mobile apps and web
-              applications, we create tools that solve real-world problems.
-            </p>
-            <div className="flex gap-4 pt-4">
-              <Button asChild size="lg" className="bg-white text-black hover:bg-white/90">
-                <a href="mailto:hello@voidworks.io">Get in touch</a>
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        {/* Scroll Indicator */}
-        <ScrollIndicator />
-      </section>
-
-      {/* Products Section */}
-      <section id="products" className="container mx-auto px-4 py-24 relative z-10">
-        <AnimatedProductSection />
-      </section>
-
-      <Footer />
-      <FixedFooterLinks />
-    </main>
+      <div className="mx-auto max-w-[1080px] px-8">
+        <Header />
+        <main>
+          <Hero />
+          <ProjectsSection />
+        </main>
+        <Footer />
+      </div>
+    </div>
   )
 }
diff --git a/src/components/animated-product-section.tsx b/src/components/animated-product-section.tsx
diff --git a/src/components/fixed-footer-links.tsx b/src/components/fixed-footer-links.tsx
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -5,38 +5,32 @@ import { footerLinks } from '@/config/links'
 
 export function Footer(): React.ReactNode {
   return (
-    <footer className="border-t border-white/10 mt-24">
-      <div className="container mx-auto px-4 py-12">
-        <div className="max-w-6xl mx-auto">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-            <div className="text-sm text-white">
-              ©
-              {' '}
-              {new Date().getFullYear()}
-              {' '}
-Void Works. All rights reserved.
-            </div>
-            <div className="flex items-center gap-6">
-              {footerLinks.map((link) => {
-                const Icon = link.icon
-                const isExternal = link.external || link.href.startsWith('http')
+    <footer className="mt-28 flex flex-wrap items-center justify-between gap-6 border-t border-border pt-6 pb-10 font-mono text-xs/normal text-muted-foreground">
+      <span>
+        ©
+        {' '}
+        {new Date().getFullYear()}
+        {' '}
+        Void Works
+      </span>
+      <div className="flex items-center gap-6">
+        {footerLinks.map((link) => {
+          const Icon = link.icon
+          const isExternal = link.external || link.href.startsWith('http')
 
-                return (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    target={isExternal ? '_blank' : undefined}
-                    rel={isExternal ? 'noopener noreferrer' : undefined}
-                    className="flex items-center gap-2 text-sm text-white hover:text-white/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-md px-2 py-1"
-                  >
-                    {Icon && <Icon className="w-4 h-4" />}
-                    {link.label}
-                  </Link>
-                )
-              })}
-            </div>
-          </div>
-        </div>
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              target={isExternal ? '_blank' : undefined}
+              rel={isExternal ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center gap-2 rounded-sm transition-colors hover:text-brand-soft focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+            >
+              {Icon && <Icon aria-hidden="true" className="size-3.5" />}
+              {link.label}
+            </Link>
+          )
+        })}
       </div>
     </footer>
   )