From 0a63bcab64d969c04534ecc09a2c2ebf800cc716 Mon Sep 17 00:00:00 2001
From: Jens Astrup <jensaiden@gmail.com>
Date: Tue, 15 Sep 2026 17:38:36 -0400
Subject: [PATCH 1/2] Refactor global styles and layout components

- Updated font variables in globals.css to use Instrument Sans and IBM Plex Mono.
- Added new color variables for branding and body text.
- Modified layout.tsx to reflect new font usage and removed unused components.
- Reorganized page.tsx to include new Header, Hero, and ProjectsSection components, while removing the AnimatedProductSection and FixedFooterLinks.
- Introduced new ProjectCard and ProjectsSection components for better project display.
- Removed deprecated components and hooks related to product display.

This update enhances the overall design and structure of the application.
---
 src/app/globals.css                         |  35 +++--
 src/app/layout.tsx                          |  19 ++-
 src/app/page.tsx                            |  76 ++---------
 src/components/animated-product-section.tsx |  15 ---
 src/components/fixed-footer-links.tsx       |  50 -------
 src/components/footer.tsx                   |  56 ++++----
 src/components/header.tsx                   |  57 +++-----
 src/components/hero.tsx                     |  24 ++--
 src/components/product-card.tsx             | 138 --------------------
 src/components/product-grid.tsx             |  37 ------
 src/components/project-card.tsx             |  33 +++++
 src/components/projects-section.tsx         |  23 ++++
 src/components/scroll-indicator.tsx         |  21 ---
 src/config/links.ts                         |   5 +-
 src/config/products.ts                      |  34 ++---
 src/hooks/use-intersection-observer.ts      |  58 --------
 src/types/css.d.ts                          |   4 +
 17 files changed, 179 insertions(+), 506 deletions(-)
 delete mode 100644 src/components/animated-product-section.tsx
 delete mode 100644 src/components/fixed-footer-links.tsx
 delete mode 100644 src/components/product-card.tsx
 delete mode 100644 src/components/product-grid.tsx
 create mode 100644 src/components/project-card.tsx
 create mode 100644 src/components/projects-section.tsx
 delete mode 100644 src/components/scroll-indicator.tsx
 delete mode 100644 src/hooks/use-intersection-observer.ts
 create mode 100644 src/types/css.d.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index e1ca93a..5430d79 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,8 +6,13 @@
 @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-hover: var(--brand-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,10 +50,10 @@
 
 :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);
@@ -56,13 +61,18 @@
   --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;
+  --brand-hover: #6e7df5;
+  --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 +129,13 @@
   body {
     @apply bg-background text-foreground;
   }
+  ::selection {
+    background: var(--brand);
+    color: #ffffff;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9dbdd69..1e1db29 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,21 @@
 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 = {
@@ -22,15 +23,11 @@ export const metadata: Metadata = {
   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
index b051c7c..906bb5e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,9 @@
 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'
@@ -103,20 +101,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 +126,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 +144,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
deleted file mode 100644
index 86c6a3c..0000000
--- a/src/components/animated-product-section.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client'
-
-import { ProductGrid } from '@/components/product-grid'
-import { products } from '@/config/products'
-
-
-export function AnimatedProductSection(): React.ReactNode {
-  return (
-    <section className="relative py-32 overflow-hidden" aria-label="Products">
-      <div className="container mx-auto px-4">
-        <ProductGrid products={products} />
-      </div>
-    </section>
-  )
-}
diff --git a/src/components/fixed-footer-links.tsx b/src/components/fixed-footer-links.tsx
deleted file mode 100644
index b4ab06d..0000000
--- a/src/components/fixed-footer-links.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-
-import { footerLinks } from '@/config/links'
-
-
-export function FixedFooterLinks(): React.ReactNode {
-  const [isVisible, setIsVisible] = useState(true)
-
-  useEffect(() => {
-    const handleScroll = (): void => {
-      // eslint-disable-next-line no-magic-numbers
-      setIsVisible(window.scrollY < 50) // Hide the footer links if user has scrolled more than 50px
-    }
-
-    window.addEventListener('scroll', handleScroll)
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
-  if (!isVisible) return null
-
-  return (
-    <div className="fixed bottom-0 left-0 right-0 z-30 transition-opacity duration-300">
-      <div className="container mx-auto py-4">
-        <div className="flex items-center justify-end gap-6">
-          {footerLinks.map((link) => {
-            const Icon = link.icon
-            const isExternal = link.external || link.href.startsWith('http')
-
-            return (
-              <a
-                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}
-              </a>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 19c1737..c86e1d7 100644
--- 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>
   )
diff --git a/src/components/header.tsx b/src/components/header.tsx
index cdcf85f..1f91a10 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,48 +1,27 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import { CONTACT_HREF } from '@/config/links'
 
 
-const metadata = {
-  title: 'Void Works',
-  description: 'Products for the modern era',
-}
-
+const NAV_LINK_CLASS = 'text-muted-foreground transition-colors hover:text-foreground'
 
 function Header(): React.ReactNode {
   return (
-    <header className="border-b border-gray-900 bg-black sticky top-0 z-50">
-      <div className="container mx-auto px-6 h-16 flex items-center justify-between">
-        <Link href="/" className="flex items-center space-x-3">
-          <div className="w-6 h-6 bg-white rounded flex items-center justify-center">
-            <Image src="/logo.jpg" alt="Void Works" width={24} height={24} />
-          </div>
-          <span className="text-lg font-medium">Void Works</span>
-        </Link>
-        <nav className="md:flex items-center space-x-8">
-          <a
-            href="https://spades.poker"
-            className="text-gray-400 hover:text-white transition-colors text-sm"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="Visit Spades - Online Poker Platform"
-            aria-label="Visit our Spades pointing poker app (opens in new tab)"
-          >
-            Spades
-          </a>
-          <a
-            href="https://apps.apple.com/us/app/gbx/id6749517571"
-            className="text-gray-400 hover:text-white transition-colors text-sm"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="GBx - Dose Responsibly"
-            aria-label="Install GBx for iOS - Dose Responsibly"
-          >
-            GBx
-          </a>
-        </nav>
-      </div>
+    <header className="flex items-center justify-between gap-6 py-7">
+      <a
+        href="#top"
+        className="flex items-center gap-2.5 text-[15px] font-semibold tracking-[-0.01em] text-foreground"
+      >
+        <span
+          aria-hidden="true"
+          className="size-2.5 rounded-full bg-brand shadow-[0_0_14px_rgba(91,108,240,0.7)]"
+        />
+        Void Works
+      </a>
+      <nav className="flex gap-7 font-mono text-xs/normal tracking-[0.06em] uppercase">
+        <a href="#projects" className={NAV_LINK_CLASS}>Projects</a>
+        <a href={CONTACT_HREF} className={NAV_LINK_CLASS}>Contact</a>
+      </nav>
     </header>
   )
 }
 
-export { Header, metadata }
+export { Header }
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 721d92a..a90b4b6 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -1,16 +1,22 @@
-import React from 'react'
+import { CONTACT_HREF } from '@/config/links'
 
 
+const BUTTON_CLASS = 'inline-flex items-center rounded-lg px-5 py-3 text-sm/normal font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand'
+
 function Hero(): React.ReactNode {
   return (
-    <section className="py-32">
-      <div className="container mx-auto px-6">
-        <div className="max-w-3xl mx-auto text-center space-y-6">
-          <h1 className="text-5xl md:text-7xl font-light tracking-tight bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent drop-shadow-sm">
-            Void Works
-          </h1>
-          <p className="text-lg text-gray-400 font-light">Products for the modern era</p>
-        </div>
+    <section id="top" className="flex max-w-[780px] flex-col gap-[26px] pt-[132px] pb-28">
+      <p className="font-mono text-xs/normal tracking-[0.12em] text-brand-soft uppercase">Void Works</p>
+      <h1 className="text-[clamp(38px,6vw,68px)] leading-[1.04] font-semibold tracking-[-0.03em] text-balance">
+        From browser extensions to mobile apps and web applications, we create tools that solve real-world problems.
+      </h1>
+      <div className="flex flex-wrap gap-3 pt-2.5">
+        <a href="#projects" className={`${BUTTON_CLASS} bg-brand text-white hover:bg-brand-hover`}>
+          See what we build
+        </a>
+        <a href={CONTACT_HREF} className={`${BUTTON_CLASS} border border-white/14 text-foreground hover:border-white/38`}>
+          Get in touch
+        </a>
       </div>
     </section>
   )
diff --git a/src/components/product-card.tsx b/src/components/product-card.tsx
deleted file mode 100644
index 9110715..0000000
--- a/src/components/product-card.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { ArrowRight } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import Link from 'next/link'
-
-
-interface ProductCardProps {
-  name: string
-  icon: LucideIcon
-  description: string
-  color: string
-  url: string
-  linkText: string
-  index: number
-  isVisible: boolean
-  reversed?: boolean
-}
-
-// Animation timing constants
-const STAGGER_DELAY = 100
-const ICON_DELAY_OFFSET = 200
-const TITLE_DELAY_OFFSET = 400
-const DESCRIPTION_DELAY_OFFSET = 600
-const BUTTON_DELAY_OFFSET = 800
-
-export function ProductCard({
-  name,
-  icon: Icon,
-  description,
-  color,
-  url,
-  linkText,
-  index,
-  isVisible,
-  reversed = false,
-}: ProductCardProps): React.ReactNode {
-  const baseDelay = index * STAGGER_DELAY
-
-  return (
-    <div
-      className={`relative transition-all duration-1000 ease-out ${
-        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-24'
-      }`}
-      style={{
-        transitionDelay: `${baseDelay}ms`,
-      }}
-    >
-      <div
-        className={`flex flex-col items-center gap-12 md:gap-24 ${
-          reversed ? 'md:flex-row-reverse' : 'md:flex-row'
-        }`}
-      >
-        {/* Icon Side */}
-        <Link href={url} target="_blank">
-          <div className="flex-1 flex items-center justify-center">
-            <div
-              className={`relative transition-all duration-1000 ${
-                isVisible ? 'scale-100 rotate-0' : 'scale-50 rotate-12'
-              }`}
-              style={{
-                transitionDelay: `${baseDelay + ICON_DELAY_OFFSET}ms`,
-              }}
-            >
-              <div
-                className="absolute inset-0 blur-3xl rounded-full"
-                style={{
-                  background: color,
-                  backgroundImage: `linear-gradient(to bottom right, ${color}, ${color})`
-                }}
-              />
-              <div className="relative flex items-center justify-center w-48 h-48 md:w-64 md:h-64 rounded-3xl bg-white/5 backdrop-blur-sm border border-white/10 text-white">
-                <Icon size={64} className="md:hidden" />
-                <Icon size={192} className="hidden md:block" />
-              </div>
-            </div>
-          </div>
-        </Link>
-
-        {/* Content Side */}
-        <div className="flex-1 space-y-6">
-          <div
-            className={`transition-all duration-1000 ${
-              isVisible
-                ? 'opacity-100 translate-x-0'
-                : reversed
-                  ? 'opacity-0 translate-x-12'
-                  : 'opacity-0 -translate-x-12'
-            }`}
-            style={{
-              transitionDelay: `${baseDelay + TITLE_DELAY_OFFSET}ms`,
-            }}
-          >
-            <h3 className="text-5xl md:text-7xl font-bold text-white tracking-tight text-balance">
-              {name}
-            </h3>
-          </div>
-          <div
-            className={`transition-all duration-1000 ${
-              isVisible
-                ? 'opacity-100 translate-x-0'
-                : reversed
-                  ? 'opacity-0 translate-x-12'
-                  : 'opacity-0 -translate-x-12'
-            }`}
-            style={{
-              transitionDelay: `${baseDelay + DESCRIPTION_DELAY_OFFSET}ms`,
-            }}
-          >
-            <p className="text-xl md:text-2xl text-white/70 leading-relaxed text-pretty max-w-64">
-              {description}
-            </p>
-          </div>
-          <div
-            className={`transition-all duration-1000 ${
-              isVisible
-                ? 'opacity-100 translate-x-0'
-                : reversed
-                  ? 'opacity-0 translate-x-12'
-                  : 'opacity-0 -translate-x-12'
-            }`}
-            style={{
-              transitionDelay: `${baseDelay + BUTTON_DELAY_OFFSET}ms`,
-            }}
-          >
-            <Link
-              href={url}
-              target={url.startsWith('http') ? '_blank' : undefined}
-              rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
-              className="inline-flex items-center gap-2 text-white hover:text-white/80 transition-colors group 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"
-            >
-              <span className="text-lg font-medium">{linkText}</span>
-              <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/product-grid.tsx b/src/components/product-grid.tsx
deleted file mode 100644
index 32043f8..0000000
--- a/src/components/product-grid.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { ProductCard } from '@/components/product-card'
-import type { Product } from '@/config/products'
-import { useIntersectionObserver } from '@/hooks/use-intersection-observer'
-
-
-interface ProductGridProps {
-  products: Product[]
-}
-
-export function ProductGrid({ products }: ProductGridProps): React.ReactNode {
-  const { visibleIndices, setRef } = useIntersectionObserver(products.length, {
-    threshold: 0.3,
-    rootMargin: '-50px',
-  })
-
-  return (
-    <div className="space-y-48">
-      {products.map((product, index) => (
-        <div key={product.name} ref={setRef(index)}>
-          <ProductCard
-            name={product.name}
-            icon={product.icon}
-            description={product.description}
-            color={product.color}
-            url={product.url}
-            linkText={product.linkText}
-            index={index}
-            isVisible={visibleIndices.has(index)}
-            reversed={index % 2 !== 0}
-          />
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/src/components/project-card.tsx b/src/components/project-card.tsx
new file mode 100644
index 0000000..5532105
--- /dev/null
+++ b/src/components/project-card.tsx
@@ -0,0 +1,33 @@
+import type { Product } from '@/config/products'
+
+
+interface ProjectCardProps {
+  product: Product
+  index: number
+}
+
+export function ProjectCard({ product, index }: ProjectCardProps): React.ReactNode {
+  const number = String(index + 1).padStart(2, '0')
+
+  return (
+    <article className="flex flex-col gap-4 rounded-[14px] border border-border bg-card p-7 transition-colors hover:border-white/20">
+      <div className="flex items-center justify-between gap-3">
+        <span className="rounded-full border border-white/12 px-2.5 py-1 font-mono text-[11px] tracking-[0.08em] text-muted-foreground uppercase">
+          {product.tag}
+        </span>
+        <span className="font-mono text-[11px] text-muted-foreground">{number}</span>
+      </div>
+      <h3 className="text-[25px] leading-[1.2] font-semibold tracking-[-0.02em]">{product.name}</h3>
+      <p className="flex-1 leading-[1.6] text-pretty text-body-muted">{product.description}</p>
+      <a
+        href={product.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-2 self-start rounded-lg border border-white/14 px-4 py-2.5 text-sm/normal font-semibold transition-colors hover:border-brand hover:text-brand-softer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+      >
+        {product.linkText}
+        <span aria-hidden="true" className="text-brand-soft">→</span>
+      </a>
+    </article>
+  )
+}
diff --git a/src/components/projects-section.tsx b/src/components/projects-section.tsx
new file mode 100644
index 0000000..12ec86b
--- /dev/null
+++ b/src/components/projects-section.tsx
@@ -0,0 +1,23 @@
+import { ProjectCard } from '@/components/project-card'
+import { products } from '@/config/products'
+
+
+export function ProjectsSection(): React.ReactNode {
+  const count = String(products.length).padStart(2, '0')
+
+  return (
+    <section id="projects" className="pb-6">
+      <div className="flex items-baseline justify-between gap-4 border-b border-border pb-6">
+        <h2 className="font-mono text-xs/normal font-medium tracking-[0.12em] text-muted-foreground uppercase">
+          Projects
+        </h2>
+        <span className="font-mono text-xs/normal text-muted-foreground">{count}</span>
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-5 pt-8">
+        {products.map((product, index) => (
+          <ProjectCard key={product.name} product={product} index={index} />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/scroll-indicator.tsx b/src/components/scroll-indicator.tsx
deleted file mode 100644
index 186701b..0000000
--- a/src/components/scroll-indicator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-
-
-export function ScrollIndicator(): React.ReactNode {
-  const handleClick = (): void => {
-    document.getElementById('products')?.scrollIntoView({ behavior: 'smooth' })
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 animate-bounce text-white/80 hover:text-white 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"
-      aria-label="Scroll to products"
-      type="button"
-    >
-      <ChevronDown className="w-8 h-8" />
-    </button>
-  )
-}
diff --git a/src/config/links.ts b/src/config/links.ts
index 0129c78..319a5f3 100644
--- a/src/config/links.ts
+++ b/src/config/links.ts
@@ -1,6 +1,9 @@
-import { Activity, Mail } from 'lucide-react'
+import { Activity } from 'lucide-react'
 
 
+export const CONTACT_EMAIL = 'hello@voidworks.io'
+export const CONTACT_HREF = `mailto:${CONTACT_EMAIL}`
+
 export interface FooterLink {
   label: string
   href: string
diff --git a/src/config/products.ts b/src/config/products.ts
index ef03302..8e39fe1 100644
--- a/src/config/products.ts
+++ b/src/config/products.ts
@@ -1,11 +1,7 @@
-import { ArrowBigUpDash, Check, Chrome, LucideIcon, Smartphone, Vote } from 'lucide-react'
-
-
 export interface Product {
   name: string
-  icon: LucideIcon
+  tag: string
   description: string
-  color: string
   url: string
   linkText: string
 }
@@ -13,43 +9,31 @@ export interface Product {
 export const products: Product[] = [
   {
     name: 'Checkmark',
-    icon: Check,
+    tag: 'Desktop & web',
     description: 'A to-do app built with keyboard power users in mind.',
-    color: 'from-green-600/20 via-green-500/20 to-green-600/20',
     url: 'https://checkmark.day',
-    linkText: 'Learn More',
+    linkText: 'Learn more',
   },
   {
     name: 'Spades',
-    icon: Vote,
+    tag: 'Web',
     description:
     'Improve your team\'s pointing poker sessions with our AI enhanced platform that integrates with Linear.',
-    color: 'from-indigo-600/20 via-blue-500/20 to-purple-500/20',
     url: 'https://spades.poker',
-    linkText: 'Learn More',
+    linkText: 'Visit spades.poker',
   },
   {
     name: 'GBx',
-    icon: Smartphone,
+    tag: 'iOS',
     description: 'A harm reduction mobile application designed to promote safety and informed decision-making.',
-    color: 'from-purple-600/20 via-violet-500/20 to-pink-500/20',
     url: 'https://apps.apple.com/us/app/gbx/id6749517571',
-    linkText: 'Download on the App Store',
+    linkText: 'View on the App Store',
   },
   {
     name: 'Trawl',
-    icon: ArrowBigUpDash,
+    tag: 'Editor extension',
     description: 'A VSCode/Cursor extension that auto-completes package names and versions, and highlights outdated dependencies.',
-    color: 'from-green-600/20 via-lime-500/20 to-emerald-500/20',
     url: 'https://marketplace.visualstudio.com/items?itemName=VoidWorks.trawl',
-    linkText: 'Learn More',
+    linkText: 'Get it on the Marketplace',
   },
-  {
-    name: 'Shortcut Assistant',
-    icon: Chrome,
-    description: 'Enhance your browsing experience with powerful keyboard shortcuts and productivity tools.',
-    color: 'from-blue-600/20 via-blue-500/20 to-purple-600/20',
-    url: 'https://chromewebstore.google.com/detail/shortcut-assistant/kmdlofehocppnlkpokdbiaalcelhedef',
-    linkText: 'Install Extension',
-  }
 ]
diff --git a/src/hooks/use-intersection-observer.ts b/src/hooks/use-intersection-observer.ts
deleted file mode 100644
index 683736e..0000000
--- a/src/hooks/use-intersection-observer.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-
-interface UseIntersectionObserverOptions {
-  threshold?: number
-  rootMargin?: string
-}
-
-interface UseIntersectionObserverReturn {
-  visibleIndices: Set<number>
-  setRef: (index: number) => (element: HTMLDivElement | null) => void
-}
-
-export function useIntersectionObserver(
-  itemCount: number,
-  options: UseIntersectionObserverOptions = {}
-): UseIntersectionObserverReturn {
-  // eslint-disable-next-line no-magic-numbers
-  const { threshold = 0.3, rootMargin = '-50px' } = options
-  const [visibleIndices, setVisibleIndices] = useState<Set<number>>(new Set())
-  const refs = useRef<(HTMLDivElement | null)[]>([])
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const index = refs.current.indexOf(entry.target as HTMLDivElement)
-            if (index !== -1) {
-              setVisibleIndices(prev => new Set(prev).add(index))
-            }
-          }
-        })
-      },
-      {
-        threshold,
-        rootMargin,
-      }
-    )
-
-    // Observe all non-null refs
-    refs.current.forEach((ref) => {
-      if (ref) {
-        observer.observe(ref)
-      }
-    })
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [threshold, rootMargin])
-
-  const setRef = (index: number) => (element: HTMLDivElement | null) => {
-    refs.current[index] = element
-  }
-
-  return { visibleIndices, setRef }
-}
diff --git a/src/types/css.d.ts b/src/types/css.d.ts
new file mode 100644
index 0000000..6e828e6
--- /dev/null
+++ b/src/types/css.d.ts
@@ -0,0 +1,4 @@
+// Next.js only declares `*.module.css`, so global stylesheet imports need their own
+// declaration once `noUncheckedSideEffectImports` is in effect. Global CSS has no
+// exports, so the module body stays empty.
+declare module '*.css' {}

From 96065fb6471eca99bfc3cbf6cf7c6aff47461890 Mon Sep 17 00:00:00 2001
From: Jens Astrup <jensaiden@gmail.com>
Date: Tue, 15 Sep 2026 17:56:58 -0400
Subject: [PATCH 2/2] Address review feedback on landing page redesign

- Let project cards shrink below 280px so narrow viewports don't scroll horizontally
- Revalidate the home page daily so the footer copyright year stays current
- Use a deeper indigo behind white text (hero CTA, text selection) to meet 4.5:1 contrast

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css                 | 9 ++++++---
 src/app/page.tsx                    | 3 +++
 src/components/hero.tsx             | 2 +-
 src/components/projects-section.tsx | 2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5430d79..c80145b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,7 +9,8 @@
   --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-hover: var(--brand-hover);
+  --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);
@@ -69,7 +70,9 @@
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
   --brand: #5b6cf0;
-  --brand-hover: #6e7df5;
+  /* 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;
@@ -130,7 +133,7 @@
     @apply bg-background text-foreground;
   }
   ::selection {
-    background: var(--brand);
+    background: var(--brand-solid);
     color: #ffffff;
   }
   @media (prefers-reduced-motion: no-preference) {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 906bb5e..58bd319 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,9 @@ 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,
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index a90b4b6..ca1b63b 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -11,7 +11,7 @@ function Hero(): React.ReactNode {
         From browser extensions to mobile apps and web applications, we create tools that solve real-world problems.
       </h1>
       <div className="flex flex-wrap gap-3 pt-2.5">
-        <a href="#projects" className={`${BUTTON_CLASS} bg-brand text-white hover:bg-brand-hover`}>
+        <a href="#projects" className={`${BUTTON_CLASS} bg-brand-solid text-white hover:bg-brand-solid-hover`}>
           See what we build
         </a>
         <a href={CONTACT_HREF} className={`${BUTTON_CLASS} border border-white/14 text-foreground hover:border-white/38`}>
diff --git a/src/components/projects-section.tsx b/src/components/projects-section.tsx
index 12ec86b..8aaa383 100644
--- a/src/components/projects-section.tsx
+++ b/src/components/projects-section.tsx
@@ -13,7 +13,7 @@ export function ProjectsSection(): React.ReactNode {
         </h2>
         <span className="font-mono text-xs/normal text-muted-foreground">{count}</span>
       </div>
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-5 pt-8">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(min(280px,100%),1fr))] gap-5 pt-8">
         {products.map((product, index) => (
           <ProjectCard key={product.name} product={product} index={index} />
         ))}