create-frootkit 1.2.12 → 1.2.13

package/templates/starter/src/components/Header.tsx

@@ -1,49 +1,26 @@
 export function Header() {
   return (
-    <header class="border-b border-white/[0.08] bg-[#08090a]/80 backdrop-blur-md sticky top-0 z-50">
-      <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
-        <div class="flex items-center gap-3">
-          <a href="/" class="flex items-center gap-2.5 font-semibold text-zinc-100 text-sm tracking-tight group">
-            <div class="w-6 h-6 rounded-md bg-indigo-500/15 border border-indigo-500/30 flex items-center justify-center text-indigo-400 group-hover:border-indigo-400/50 transition-colors shrink-0">
-              <svg style="width: 13px; height: 13px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
-              </svg>
-            </div>
-            <span>Froot<span class="text-indigo-400">Kit</span></span>
-          </a>
-          <span class="px-2 py-0.5 text-[10px] font-mono text-zinc-400 rounded-md bg-white/[0.04] border border-white/[0.06]">
-            v1.3.5
-          </span>
+    <header class="absolute inset-x-0 top-0 z-30">
+      <nav class="mx-auto max-w-6xl px-6 flex items-center justify-between py-5 text-white">
+        <a href="/" class="text-[22px] font-semibold tracking-tight flex items-center gap-2">
+          <span>froot<span class="opacity-90">kit</span></span>
+        </a>
+
+        <div class="hidden items-center gap-8 text-[15px] font-medium md:flex">
+          <a href="#features" class="opacity-90 hover:opacity-100 transition-opacity">Features</a>
+          <a href="#code" class="opacity-90 hover:opacity-100 transition-opacity">Architecture</a>
+          <a href="/api/health" class="opacity-90 hover:opacity-100 transition-opacity font-mono text-xs">/api/health</a>
         </div>
 
-        <nav class="flex items-center gap-5 text-xs font-medium">
+        <div class="flex items-center gap-4 text-[15px] font-medium">
           <a
             href="https://frootjs.org"
-            target="_blank"
-            rel="noreferrer"
-            class="text-zinc-400 hover:text-zinc-200 transition-colors"
-          >
-            Docs
-          </a>
-          <a
-            href="/api/health"
-            class="text-zinc-400 hover:text-zinc-200 font-mono text-[11px] px-2 py-0.5 rounded bg-white/[0.03] border border-white/[0.06] transition-colors"
+            class="rounded-full bg-white px-4 py-1.5 text-[14px] text-[#635bff] font-medium shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)] hover:bg-[#f6f9fc] transition-colors"
           >
-            /api/health
+            Documentation
           </a>
-          <a
-            href="https://github.com/orbitnorth/frootkit"
-            target="_blank"
-            rel="noreferrer"
-            class="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-white/[0.05] border border-white/[0.08] text-zinc-200 hover:text-white hover:bg-white/[0.08] transition-all text-xs"
-          >
-            <svg style="width: 13px; height: 13px;" class="fill-current shrink-0" viewBox="0 0 24 24">
-              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-            </svg>
-            <span>GitHub</span>
-          </a>
-        </nav>
-      </div>
+        </div>
+      </nav>
     </header>
   );
 }

package/templates/starter/src/styles.css

@@ -4,43 +4,118 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-  --color-brand-primary: #6366f1;
-  --color-brand-hover: #4f46e5;
+  --color-brand: #635bff;
+  --color-brand-hover: #5249e6;
+  --color-navy: #0a2540;
+  --color-slate: #425466;
+  --color-surface: #f6f9fc;
+  --color-hairline: #e6ebf1;
+  --color-cyan: #00d4ff;
+  --color-success: #24b47e;
+  --color-error: #cd3d64;
 }
 
 :root {
-  color-scheme: dark;
-  --bg-canvas: #08090a;
-  --bg-surface: #0f1117;
-  --bg-elevated: #151822;
-  --border-subtle: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.16);
-  --text-primary: #f4f4f5;
-  --text-secondary: #9496a1;
-  --text-muted: #5c6370;
-}
-
-html {
-  background-color: var(--bg-canvas);
-  color: var(--text-primary);
-  font-family: var(--font-sans);
-  scroll-behavior: smooth;
+  color-scheme: light;
+  --brand: #635bff;
+  --navy: #0a2540;
+  --slate: #425466;
+  --surface: #f6f9fc;
+  --hairline: #e6ebf1;
+  --cyan: #00d4ff;
+  --success: #24b47e;
+  --error: #cd3d64;
+
+  --shadow-card: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
+  --shadow-pop: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
+}
+
+body {
+  font-size: 15px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #425466;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Strict SVG safety to prevent flex ballooning */
+:focus-visible {
+  outline: 2px solid #635bff;
+  outline-offset: 2px;
+}
+
 svg {
   flex-shrink: 0;
   max-width: 100%;
 }
 
-/* Accessibility: Mandatory Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  padding: 0.625rem 1.25rem;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: pointer;
+}
+
+.btn-p {
+  background-color: #635bff;
+  color: #ffffff;
+  box-shadow: var(--shadow-card);
+}
+.btn-p:hover {
+  background-color: #5249e6;
+}
+
+.btn-w {
+  background-color: #ffffff;
+  color: #635bff;
+  box-shadow: var(--shadow-card);
+}
+.btn-w:hover {
+  background-color: #f6f9fc;
+}
+
+.btn-o {
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  color: #0a2540;
+  box-shadow: var(--shadow-card);
+}
+.btn-o:hover {
+  background-color: #f6f9fc;
+}
+
+.btn-gl {
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  color: #ffffff;
+}
+.btn-gl:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.bd {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.125rem 0.625rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.card {
+  border-radius: 8px;
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  padding: 1.25rem;
+  box-shadow: var(--shadow-card);
+}
+
+.hero {
+  background: linear-gradient(160deg, #635bff 0%, #7a73ff 38%, #00d4ff 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
 }