feat: style homepage and counter with clean modern design

app/src/app/components/Counter.module.css

@@ -0,0 +1,90 @@
+.counter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  max-width: 320px;
+}
+
+.countDisplay {
+  font-size: 5rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  transition: color 0.2s ease;
+}
+
+.countPositive {
+  color: #16a34a;
+}
+
+.countZero {
+  color: #374151;
+}
+
+.countNegative {
+  color: #dc2626;
+}
+
+.buttons {
+  display: flex;
+  gap: 1rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  font-size: 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.btnIncrement {
+  background-color: #16a34a;
+  color: #fff;
+}
+
+.btnDecrement {
+  background-color: #dc2626;
+  color: #fff;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .btnIncrement:hover {
+    background-color: #15803d;
+    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
+  }
+
+  .btnDecrement:hover {
+    background-color: #b91c1c;
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
+  }
+}
+
+.btn:active {
+  transform: scale(0.94);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+  .counter {
+    background: #1f2937;
+    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
+  }
+
+  .countZero {
+    color: #e5e7eb;
+  }
+}

app/src/app/components/Counter.tsx

@@ -1,15 +1,27 @@
 'use client'
 
 import { useState } from 'react'
+import styles from './Counter.module.css'
 
 export function Counter() {
   const [count, setCount] = useState(0)
 
+  const countClass =
+    count > 0 ? styles.countPositive : count < 0 ? styles.countNegative : styles.countZero
+
   return (
-    <div>
-      <p data-testid="count">{count}</p>
-      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
-      <button onClick={() => setCount((c) => c - 1)}>Decrement</button>
+    <div className={styles.counter}>
+      <p data-testid="count" className={`${styles.countDisplay} ${countClass}`}>
+        {count}
+      </p>
+      <div className={styles.buttons}>
+        <button aria-label="Decrement" className={`${styles.btn} ${styles.btnDecrement}`} onClick={() => setCount((c) => c - 1)}>
+          −
+        </button>
+        <button aria-label="Increment" className={`${styles.btn} ${styles.btnIncrement}`} onClick={() => setCount((c) => c + 1)}>
+          +
+        </button>
+      </div>
     </div>
   )
 }

app/src/app/page.module.css

@@ -1,142 +1,61 @@
-.page {
-  --background: #fafafa;
-  --foreground: #fff;
-
-  --text-primary: #000;
-  --text-secondary: #666;
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-  --button-secondary-border: #ebebeb;
-
+.main {
   display: flex;
-  flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-family: var(--font-geist-sans);
-  background-color: var(--background);
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  max-width: 800px;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  background-color: var(--foreground);
-  padding: 120px 60px;
+  min-height: 100vh;
+  padding: 3rem 1.5rem;
+  max-width: 640px;
+  margin: 0 auto;
+  gap: 2.5rem;
 }
 
 .intro {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  text-align: left;
-  gap: 24px;
+  align-items: center;
+  text-align: center;
+  gap: 0.75rem;
 }
 
 .intro h1 {
-  max-width: 320px;
-  font-size: 40px;
-  font-weight: 600;
-  line-height: 48px;
-  letter-spacing: -2.4px;
-  text-wrap: balance;
-  color: var(--text-primary);
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: #111827;
+  margin: 0;
 }
 
 .intro p {
-  max-width: 440px;
-  font-size: 18px;
-  line-height: 32px;
-  text-wrap: balance;
-  color: var(--text-secondary);
-}
-
-.intro a {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.ctas {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 440px;
-  gap: 16px;
-  font-size: 14px;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #6b7280;
+  margin: 0;
 }
 
-.ctas a {
+.counterWrapper {
   display: flex;
   justify-content: center;
-  align-items: center;
-  height: 40px;
-  padding: 0 16px;
-  border-radius: 128px;
-  border: 1px solid transparent;
-  transition: 0.2s;
-  cursor: pointer;
-  width: fit-content;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--text-primary);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--button-secondary-border);
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
+  width: 100%;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 480px) {
   .main {
-    padding: 48px 24px;
-  }
-
-  .intro {
-    gap: 16px;
+    padding: 2rem 1rem;
+    gap: 2rem;
   }
 
   .intro h1 {
-    font-size: 32px;
-    line-height: 40px;
-    letter-spacing: -1.92px;
+    font-size: 1.5rem;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
+  .intro h1 {
+    color: #f9fafb;
   }
 
-  .page {
-    --background: #000;
-    --foreground: #000;
-
-    --text-primary: #ededed;
-    --text-secondary: #999;
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-    --button-secondary-border: #1a1a1a;
+  .intro p {
+    color: #9ca3af;
   }
 }

app/src/app/page.tsx

@@ -1,11 +1,16 @@
 import { Counter } from './components/Counter'
+import styles from './page.module.css'
 
 export default function Home() {
   return (
-    <main style={{ padding: '2rem', fontFamily: 'monospace' }}>
-      <h1>Harness Engineering Example</h1>
-      <p>A minimal sample app. The focus of this repo is the harness, not the app.</p>
-      <Counter />
+    <main className={styles.main}>
+      <div className={styles.intro}>
+        <h1>Harness Engineering Example</h1>
+        <p>A minimal sample app. The focus of this repo is the harness, not the app.</p>
+      </div>
+      <div className={styles.counterWrapper}>
+        <Counter />
+      </div>
     </main>
   )
 }