auramaxx 1.0.0-alpha.4

package/src/app/globals.css

@@ -0,0 +1,572 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Adaptive grid pattern — uses theme border color so it works in light + dark */
+.bg-grid-adaptive {
+  background-image:
+    linear-gradient(to right, var(--color-border, #e5e5e5) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--color-border, #e5e5e5) 1px, transparent 1px);
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
+/* ============================================================================
+   CSS CUSTOM PROPERTIES - THEME SYSTEM
+   ============================================================================ */
+
+:root {
+  /* Theme mode indicator */
+  --theme-mode: light;
+
+  /* Accent (primary brand) */
+  --color-accent: #ccff00;
+  --color-accent-foreground: #0a0a0a;
+
+  /* Semantic colors */
+  --color-warning: #ff4d00;
+  --color-warning-foreground: #ffffff;
+  --color-danger: #ef4444;
+  --color-danger-foreground: #ffffff;
+  --color-success: #00c853;
+  --color-success-foreground: #ffffff;
+  --color-info: #0047ff;
+  --color-info-foreground: #ffffff;
+
+  /* Backgrounds */
+  --color-background: #f5f5f5;
+  --color-background-alt: #e8e8e6;
+  --color-surface: #ffffff;
+  --color-surface-alt: #fafafa;
+
+  /* Text */
+  --color-text: #0a0a0a;
+  --color-text-muted: #6b7280;
+  --color-text-faint: #9ca3af;
+
+  /* Borders */
+  --color-border: #d4d4d8;
+  --color-border-muted: #e5e5e5;
+  --color-border-focus: #0a0a0a;
+
+  /* Scrollbar */
+  --color-scrollbar-track: #f5f5f5;
+  --color-scrollbar-thumb: #d4d4d8;
+  --color-scrollbar-thumb-hover: #0a0a0a;
+
+  /* App palette - Blue */
+  --app-blue-band: #0047ff;
+  --app-blue-accent: rgba(0, 71, 255, 0.3);
+  --app-blue-bg: rgba(0, 71, 255, 0.05);
+  --app-blue-text: #0047ff;
+
+  /* App palette - Orange */
+  --app-orange-band: #ff4d00;
+  --app-orange-accent: rgba(255, 77, 0, 0.3);
+  --app-orange-bg: rgba(255, 77, 0, 0.05);
+  --app-orange-text: #ff4d00;
+
+  /* App palette - Lime */
+  --app-lime-band: #84cc16;
+  --app-lime-accent: rgba(132, 204, 22, 0.3);
+  --app-lime-bg: rgba(132, 204, 22, 0.05);
+  --app-lime-text: #65a30d;
+
+  /* App palette - Purple */
+  --app-purple-band: #7c3aed;
+  --app-purple-accent: rgba(124, 58, 237, 0.3);
+  --app-purple-bg: rgba(124, 58, 237, 0.05);
+  --app-purple-text: #7c3aed;
+
+  /* App palette - Gray */
+  --app-gray-band: #6b7280;
+  --app-gray-accent: rgba(107, 114, 128, 0.3);
+  --app-gray-bg: rgba(107, 114, 128, 0.05);
+  --app-gray-text: #6b7280;
+
+  /* App palette - Teal */
+  --app-teal-band: #14b8a6;
+  --app-teal-accent: rgba(20, 184, 166, 0.3);
+  --app-teal-bg: rgba(20, 184, 166, 0.05);
+  --app-teal-text: #14b8a6;
+
+  /* App palette - Rose */
+  --app-rose-band: #f43f5e;
+  --app-rose-accent: rgba(244, 63, 94, 0.3);
+  --app-rose-bg: rgba(244, 63, 94, 0.05);
+  --app-rose-text: #f43f5e;
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] {
+  --theme-mode: dark;
+
+  /* Backgrounds */
+  --color-background: #0a0a0a;
+  --color-background-alt: #141414;
+  --color-surface: #1a1a1a;
+  --color-surface-alt: #242424;
+
+  /* Text */
+  --color-text: #ffffff;
+  --color-text-muted: #a1a1aa;
+  --color-text-faint: #71717a;
+
+  /* Borders */
+  --color-border: #27272a;
+  --color-border-muted: #3f3f46;
+  --color-border-focus: #ccff00;
+
+  /* Scrollbar */
+  --color-scrollbar-track: #0a0a0a;
+  --color-scrollbar-thumb: #3f3f46;
+  --color-scrollbar-thumb-hover: #ccff00;
+
+  /* App palette - Blue (adjusted for dark) */
+  --app-blue-accent: rgba(0, 71, 255, 0.4);
+  --app-blue-bg: rgba(0, 71, 255, 0.1);
+  --app-blue-text: #5c8aff;
+
+  /* App palette - Orange */
+  --app-orange-accent: rgba(255, 77, 0, 0.4);
+  --app-orange-bg: rgba(255, 77, 0, 0.1);
+  --app-orange-text: #ff7a40;
+
+  /* App palette - Lime */
+  --app-lime-accent: rgba(132, 204, 22, 0.4);
+  --app-lime-bg: rgba(132, 204, 22, 0.1);
+  --app-lime-text: #a3e635;
+
+  /* App palette - Purple */
+  --app-purple-accent: rgba(124, 58, 237, 0.4);
+  --app-purple-bg: rgba(124, 58, 237, 0.1);
+  --app-purple-text: #a78bfa;
+
+  /* App palette - Gray */
+  --app-gray-accent: rgba(107, 114, 128, 0.4);
+  --app-gray-bg: rgba(107, 114, 128, 0.1);
+  --app-gray-text: #9ca3af;
+
+  /* App palette - Teal */
+  --app-teal-accent: rgba(20, 184, 166, 0.4);
+  --app-teal-bg: rgba(20, 184, 166, 0.1);
+  --app-teal-text: #2dd4bf;
+
+  /* App palette - Rose */
+  --app-rose-accent: rgba(244, 63, 94, 0.4);
+  --app-rose-bg: rgba(244, 63, 94, 0.1);
+  --app-rose-text: #fb7185;
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background-color: var(--color-background, #f5f5f5);
+  color: var(--color-text, #0a0a0a);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================================================
+   SCROLLBAR STYLES
+   ============================================================================ */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-scrollbar-track, #f5f5f5);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-scrollbar-thumb, #d4d4d8);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-scrollbar-thumb-hover, #0a0a0a);
+}
+
+/* ============================================================================
+   FORM STYLES
+   ============================================================================ */
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* ============================================================================
+   ANIMATIONS
+   ============================================================================ */
+
+@keyframes scan-vertical {
+  0% { top: 0; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { top: 100%; opacity: 0; }
+}
+
+.animate-scan {
+  animation: scan-vertical 2s ease-in-out infinite;
+}
+
+/* ============================================================================
+   MECHA CLIP-PATH CLASSES
+   ============================================================================ */
+
+.clip-mech-header {
+  clip-path: polygon(
+    20px 0,
+    calc(100% - 20px) 0,
+    100% 20px,
+    100% 100%,
+    0 100%,
+    0 20px
+  );
+}
+
+.clip-mech-footer {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 20px),
+    calc(100% - 20px) 100%,
+    20px 100%,
+    0 calc(100% - 20px)
+  );
+}
+
+.clip-mech-modal {
+  clip-path: polygon(
+    20px 0,
+    calc(100% - 20px) 0,
+    100% 20px,
+    100% calc(100% - 20px),
+    calc(100% - 20px) 100%,
+    20px 100%,
+    0 calc(100% - 20px),
+    0 20px
+  );
+}
+
+.clip-mech-panel {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 30px),
+    calc(100% - 30px) 100%,
+    0 100%
+  );
+}
+
+.border-mech {
+  filter:
+    drop-shadow(1px 0 0 #d4d4d8)
+    drop-shadow(-1px 0 0 #d4d4d8)
+    drop-shadow(0 1px 0 #d4d4d8)
+    drop-shadow(0 -1px 0 #d4d4d8);
+}
+
+.text-vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.bg-hazard-stripes {
+  background-image: repeating-linear-gradient(
+    135deg,
+    transparent,
+    transparent 10px,
+    rgba(204, 255, 0, 0.06) 10px,
+    rgba(204, 255, 0, 0.06) 20px
+  );
+}
+
+/* ============================================================================
+   SCROLL REVEAL ANIMATION
+   ============================================================================ */
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* ============================================================================
+   FLOATING DEVICE SILHOUETTES
+   ============================================================================ */
+
+@keyframes float-left {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(2deg); }
+}
+
+@keyframes float-right {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-25px) rotate(-2deg); }
+}
+
+/* ============================================================================
+   MARKETING / DOCS SURFACES
+   ============================================================================ */
+
+.marketing-grid {
+  background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
+  background-size: 46px 46px;
+  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9), transparent 85%);
+}
+
+.marketing-section-card {
+  border: 1px solid rgba(0, 0, 0, 0.22);
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(4px);
+  padding: 1.1rem;
+}
+
+.docs-top-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.1rem;
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  padding: 0 0.75rem;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  font-weight: 700;
+  font-family: "JetBrains Mono", Menlo, monospace;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.docs-top-link:hover {
+  background: #0a0a0a;
+  color: #fff;
+}
+
+.tyvek-texture {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.35;
+  mix-blend-mode: multiply;
+  filter: url(#tyvekFilter);
+  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
+}
+
+.thermal-bond {
+  position: fixed;
+  inset: 12px;
+  z-index: 9997;
+  pointer-events: none;
+  border: 1px solid rgba(0, 0, 0, 0.11);
+  outline: 12px solid rgba(255, 255, 255, 0.75);
+  box-shadow:
+    inset 0 0 16px rgba(0, 0, 0, 0.06),
+    0 0 0 2px rgba(0, 0, 0, 0.04);
+}
+
+.thermal-seal-texture {
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 24px;
+  opacity: 0.28;
+  background-image: radial-gradient(circle, #b6b6b6 1px, transparent 1px);
+  background-size: 4px 4px;
+}
+
+.marketing-scan {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.marketing-scan::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
+  animation: marketing-scan 3s linear infinite;
+}
+
+@keyframes marketing-scan {
+  from {
+    transform: translateY(-20px);
+  }
+
+  to {
+    transform: translateY(120%);
+  }
+}
+
+/* ============================================================================
+   PROSE-MONO — Rendered markdown in docs
+   ============================================================================ */
+
+.prose-mono {
+  font-size: 12px;
+  line-height: 1.8;
+  color: var(--color-text, rgba(0, 0, 0, 0.8));
+}
+
+.prose-mono h1,
+.prose-mono h2,
+.prose-mono h3,
+.prose-mono h4 {
+  font-family: 'Inter', system-ui, sans-serif;
+  font-weight: 700;
+  color: var(--color-text, #0a0a0a);
+  letter-spacing: -0.01em;
+  margin-top: 1.8em;
+  margin-bottom: 0.6em;
+}
+
+.prose-mono h1 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; }
+.prose-mono h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); padding-bottom: 0.4em; }
+.prose-mono h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
+.prose-mono h4 { font-size: 11px; }
+
+.prose-mono p { margin: 0.8em 0; }
+
+.prose-mono a {
+  color: var(--color-info, #0047ff);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.prose-mono code {
+  font-family: "JetBrains Mono", Menlo, monospace;
+  font-size: 0.9em;
+  background: var(--color-surface-alt, rgba(0, 0, 0, 0.06));
+  padding: 0.15em 0.35em;
+  border: 1px solid var(--color-border-muted, rgba(0, 0, 0, 0.08));
+}
+
+.prose-mono pre {
+  background: #1a1a1a;
+  color: #e5e5e5;
+  padding: 1em;
+  overflow-x: auto;
+  font-size: 11px;
+  line-height: 1.6;
+  margin: 1em 0;
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
+}
+
+[data-theme="dark"] .prose-mono pre {
+  background: #000000;
+}
+
+.prose-mono pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+.prose-mono ul,
+.prose-mono ol {
+  padding-left: 1.4em;
+  margin: 0.6em 0;
+}
+
+.prose-mono li { margin: 0.25em 0; }
+.prose-mono li::marker { color: var(--color-text-faint, rgba(0, 0, 0, 0.3)); }
+
+.prose-mono table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+  margin: 1em 0;
+}
+
+.prose-mono th {
+  text-align: left;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 9px;
+  color: var(--color-text-muted, rgba(0, 0, 0, 0.5));
+  padding: 0.5em 0.75em;
+  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
+}
+
+.prose-mono td {
+  padding: 0.4em 0.75em;
+  border-bottom: 1px solid var(--color-border-muted, rgba(0, 0, 0, 0.06));
+}
+
+.prose-mono blockquote {
+  border-left: 2px solid var(--color-border, rgba(0, 0, 0, 0.2));
+  padding-left: 1em;
+  color: var(--color-text-muted, rgba(0, 0, 0, 0.6));
+  margin: 1em 0;
+}
+
+.prose-mono hr {
+  border: none;
+  border-top: 1px solid var(--color-border-muted, rgba(0, 0, 0, 0.1));
+  margin: 2em 0;
+}
+
+.prose-mono img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media (min-width: 768px) {
+  .marketing-section-card {
+    padding: 1.5rem;
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .tyvek-texture {
+    opacity: 0.16;
+    mix-blend-mode: normal;
+  }
+
+  .thermal-bond {
+    outline-width: 6px;
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.04);
+  }
+
+  .clip-mech-header,
+  .clip-mech-footer,
+  .clip-mech-modal,
+  .clip-mech-panel {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    will-change: auto;
+  }
+
+  .animate-fade-in-up {
+    -webkit-transform: translateZ(0);
+  }
+}

package/src/app/health/page.tsx

@@ -0,0 +1,5 @@
+import { CredentialHealthDashboard } from '@/components/health/CredentialHealthDashboard';
+
+export default function HealthPage() {
+  return <CredentialHealthDashboard />;
+}

package/src/app/hello/page.tsx

@@ -0,0 +1,15 @@
+import { DeviceMorphExperience } from '@/components/marketing/DeviceMorphExperience';
+import { AuraWalletSpecOverlay } from '@/components/marketing/AuraWalletSpecOverlay';
+
+export default function LandingPage() {
+  return (
+    <div className="relative w-full min-h-[500vh] overflow-x-hidden bg-tyvek-dim font-sans">
+      <DeviceMorphExperience />
+      <AuraWalletSpecOverlay />
+      <div className="tyvek-texture" />
+      <div className="thermal-bond">
+        <div className="thermal-seal-texture" />
+      </div>
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import { Providers } from './providers';
+
+export const metadata: Metadata = {
+  title: 'AuraWallet',
+  description: 'Secure local wallets for AI agents',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        {/* SVG Filters for Tyvek Effect */}
+        <svg className="absolute w-0 h-0 pointer-events-none" style={{ position: 'absolute', width: 0, height: 0 }}>
+          <filter id="tyvekFilter">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
+            <feColorMatrix type="saturate" values="0" />
+            <feComponentTransfer>
+              <feFuncR type="linear" slope="0.3" />
+              <feFuncG type="linear" slope="0.3" />
+              <feFuncB type="linear" slope="0.3" />
+            </feComponentTransfer>
+          </filter>
+        </svg>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}