Align checklist layout

Author: ComputelessComputer

apps/tui/Cargo.lock

@@ -0,0 +1,11 @@
+{
+  "name": "@aipm/tui",
+  "private": true,
+  "scripts": {
+    "dev": "cargo run --manifest-path Cargo.toml",
+    "build": "cargo build --manifest-path Cargo.toml --release",
+    "check": "cargo check --manifest-path Cargo.toml",
+    "clippy": "cargo clippy --manifest-path Cargo.toml --all-targets -- -D warnings",
+    "test": "cargo test --manifest-path Cargo.toml"
+  }
+}

apps/tui/package.json

@@ -46,11 +46,11 @@ const features = [
     <div class="hero-grid">
       <div class="hero-copy">
         <p class="section-kicker"><span class="kicker-dot"></span>vision</p>
-        <h1 class="hero-title">Run every project with execution-grade AI orchestration, from inbox to roadmap to shipped work with local tasks and real tool execution.</h1>
+        <h1 class="hero-title"><span style="opacity: 0.4;">Claude Code is for coding.</span><br />aipm is for PM-ing.</h1>
         <pre
           class="install-cmd"
           title="Click to copy"
-        ><code><span class="terminal-prompt" aria-hidden="true">$</span><span>brew tap ComputelessComputer/aipm && brew install aipm</span><button class="copy-btn" type="button" onclick="navigator.clipboard.writeText('brew tap ComputelessComputer/aipm && brew install aipm'); const btn = this; btn.classList.add('copied'); clearTimeout(btn.copyTimer); btn.copyTimer = setTimeout(() => btn.classList.remove('copied'), 1200);" aria-label="Copy to clipboard"><span class="copy-icon"><svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='14' x='8' y='8' rx='2' ry='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg></span><span class="check-icon"><CheckIcon size={16} strokeWidth={2.5} /></span></button></code></pre>
+        ><code><span class="terminal-prompt" aria-hidden="true">$</span><span>brew tap ComputelessComputer/aipm && brew install aipm</span><button class="copy-btn" type="button" onclick="navigator.clipboard.writeText('brew tap ComputelessComputer/aipm && brew install aipm'); const btn = this; btn.classList.add('copied'); clearTimeout(btn.copyTimer); btn.copyTimer = setTimeout(() => btn.classList.remove('copied'), 1200);" aria-label="Copy to clipboard"><span class="copy-icon"><svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='14' x='8' y='8' rx='2' ry='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg></span><span class="check-icon"><svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg></span></button></code></pre>
       </div>
     </div>
   </section>
@@ -101,6 +101,59 @@ const features = [
   </section>
 </BaseLayout>
 
+<script is:inline>
+  (() => {
+    const kickers = document.querySelectorAll('.section-kicker');
+
+    if (!kickers.length) {
+      return;
+    }
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const lightDot = (kicker) => {
+      const dot = kicker.querySelector('.kicker-dot');
+
+      if (!dot) {
+        return;
+      }
+
+      if (reducedMotion) {
+        dot.classList.add('is-lit');
+        return;
+      }
+
+      dot.classList.add('blink-in');
+      dot.addEventListener(
+        'animationend',
+        () => {
+          dot.classList.remove('blink-in');
+          dot.classList.add('is-lit');
+        },
+        { once: true }
+      );
+    };
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) {
+            continue;
+          }
+
+          lightDot(entry.target);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.35 }
+    );
+
+    for (const kicker of kickers) {
+      observer.observe(kicker);
+    }
+  })();
+</script>
+
 <style>
   .section-kicker {
     display: inline-flex;
@@ -119,6 +172,55 @@ const features = [
     height: 0.45rem;
     border-radius: 999px;
     background: linear-gradient(135deg, #c07a3e, #d4a574);
+    opacity: 0.28;
+    box-shadow: 0 0 0 rgba(192, 122, 62, 0);
+  }
+
+  .kicker-dot.blink-in {
+    animation: kicker-dot-blink 540ms linear 1 forwards;
+  }
+
+  .kicker-dot.is-lit {
+    opacity: 1;
+    box-shadow: 0 0 0.5rem rgba(192, 122, 62, 0.45);
+  }
+
+  @keyframes kicker-dot-blink {
+    0%,
+    8% {
+      opacity: 0.2;
+      box-shadow: 0 0 0 rgba(192, 122, 62, 0);
+    }
+
+    16%,
+    26% {
+      opacity: 1;
+      box-shadow: 0 0 0.5rem rgba(192, 122, 62, 0.45);
+    }
+
+    34%,
+    44% {
+      opacity: 0.2;
+      box-shadow: 0 0 0 rgba(192, 122, 62, 0);
+    }
+
+    52%,
+    62% {
+      opacity: 1;
+      box-shadow: 0 0 0.5rem rgba(192, 122, 62, 0.45);
+    }
+
+    70%,
+    80% {
+      opacity: 0.2;
+      box-shadow: 0 0 0 rgba(192, 122, 62, 0);
+    }
+
+    88%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0.5rem rgba(192, 122, 62, 0.45);
+    }
   }
 
   .hero {
@@ -166,15 +268,10 @@ const features = [
     text-align: left;
     border-radius: 10px;
     border: 1px solid #e5dbc8;
-    background: #f3ede4;
+    background: #ffffff;
     padding: 0.9rem 1rem;
-    transition: border-color var(--transition-fast), background-color var(--transition-fast);
   }
 
-  .install-cmd:hover {
-    border-color: #d4c4a8;
-    background: #fffdfb;
-  }
 
   .install-cmd code {
     display: flex;
@@ -275,7 +372,6 @@ const features = [
   .demo h2,
   .features h2 {
     margin-bottom: 1.2rem;
-    max-width: 16ch;
   }
 
   .video-container {
@@ -344,4 +440,15 @@ const features = [
     }
 
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kicker-dot {
+      opacity: 1;
+      box-shadow: 0 0 0.5rem rgba(192, 122, 62, 0.45);
+    }
+
+    .kicker-dot.blink-in {
+      animation: none;
+    }
+  }
 </style>