Merge pull request #261 from SheetMetalConnect/claude/improve-table-localization-01PVacmhjid6J2jKMRzHywXE

Update website with beta status, BSL license, and MES Accelerator

Author: SheetMetalConnect

website/src/components/Hero.astro

@@ -12,128 +12,109 @@
 
   <!-- Content -->
   <div class="relative z-10 max-w-6xl mx-auto text-center">
-    <!-- Floating badges -->
+    <!-- Status badges -->
     <div
       class="floating-badges flex flex-wrap items-center justify-center gap-3 mb-8"
     >
       <span
-        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-xs font-mono text-zinc-400"
+        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/30 text-xs font-medium text-amber-400"
+        data-i18n="hero.badge.beta"
       >
-        <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
-        Open Source
+        <span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span>
+        Beta · v0.1 Coming 2026
       </span>
       <span
         class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-xs font-mono text-zinc-400"
+        data-i18n="hero.badge.license"
       >
-        BSL 1.1
+        BSL 1.1 License
       </span>
       <span
         class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-xs font-mono text-zinc-400"
+        data-i18n="hero.badge.selfHostable"
       >
         Self-Hostable
       </span>
     </div>
 
     <!-- Gradient text -->
-    <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold mb-6">
-      <span class="gradient-text">Manufacturing Made Modern</span>
+    <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6">
+      <span class="gradient-text" data-i18n="hero.title">MES for Job Shops</span>
     </h1>
 
     <!-- Tagline -->
-    <p class="text-xl sm:text-2xl lg:text-3xl font-medium text-foreground mb-4">
+    <p class="text-xl sm:text-2xl font-medium text-foreground mb-4" data-i18n="hero.tagline">
       Open Source Manufacturing Execution System
     </p>
 
+    <!-- Target audience -->
+    <p class="text-base text-blue-400 font-medium mb-4" data-i18n="hero.audience">
+      For custom manufacturing · High-mix low-volume · Sheet metal & machining
+    </p>
+
     <!-- Subtext -->
-    <p class="text-lg sm:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+    <p class="text-base sm:text-lg text-muted-foreground mb-8 max-w-2xl mx-auto" data-i18n="hero.description">
       Real-time production tracking, QRM capacity management, and operator terminals.
-      Built from hands-on experience with SMB metal shops.
-      A starting point for your unique shop.
+      Built from hands-on experience with SMB metal shops. Free to use, modify, and self-host.
     </p>
 
     <!-- CTA Buttons -->
     <div
-      class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-12"
+      class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-6"
     >
       <a
-        href="#get-started"
+        href="#waitlist"
         class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-accent hover:bg-blue-600 text-white font-medium transition-all duration-200 hover:shadow-lg hover:shadow-accent/20 group"
       >
-        <svg
-          class="w-4 h-4 text-white"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
         </svg>
-        Get Started
+        <span data-i18n="hero.cta.waitlist">Join Waitlist</span>
       </a>
       <a
         href="https://github.com/SheetMetalConnect/eryxon-flow"
         target="_blank"
         rel="noopener noreferrer"
         class="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5 text-foreground font-medium transition-all duration-200 group"
       >
-        <svg
-          class="w-4 h-4"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-          ></path>
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
         </svg>
-        View on GitHub
+        <span data-i18n="hero.cta.viewGithub">View on GitHub</span>
       </a>
     </div>
 
-    <!-- Feature highlights -->
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
-      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm hover:bg-zinc-900/50 transition-colors">
-        <div class="text-3xl font-bold text-white mb-1">54+</div>
-        <div class="text-sm text-zinc-500 font-medium">UI Components</div>
+    <!-- License note -->
+    <p class="text-xs text-zinc-500 mb-10" data-i18n="hero.licenseNote">
+      Free to use & modify. Cannot be resold as a competing product. <a href="#license" class="text-blue-400 hover:underline">Learn about BSL 1.1</a>
+    </p>
+
+    <!-- Key stats -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto mb-8">
+      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm">
+        <div class="text-2xl font-bold text-white mb-1" data-i18n="hero.stats.jobShops">Job Shops</div>
+        <div class="text-xs text-zinc-500" data-i18n="hero.stats.jobShopsDesc">Target audience</div>
       </div>
-      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm hover:bg-zinc-900/50 transition-colors">
-        <div class="text-3xl font-bold text-white mb-1">23</div>
-        <div class="text-sm text-zinc-500 font-medium">Edge Functions</div>
+      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm">
+        <div class="text-2xl font-bold text-white mb-1" data-i18n="hero.stats.hmvl">HMLV</div>
+        <div class="text-xs text-zinc-500" data-i18n="hero.stats.hmvlDesc">High-mix low-volume</div>
       </div>
-      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm hover:bg-zinc-900/50 transition-colors">
-        <div class="text-3xl font-bold text-white mb-1">3</div>
-        <div class="text-sm text-zinc-500 font-medium">Languages</div>
+      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm">
+        <div class="text-2xl font-bold text-white mb-1" data-i18n="hero.stats.qrm">QRM</div>
+        <div class="text-xs text-zinc-500" data-i18n="hero.stats.qrmDesc">Capacity planning</div>
       </div>
-      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm hover:bg-zinc-900/50 transition-colors">
-        <div class="text-3xl font-bold text-white mb-1">REST</div>
-        <div class="text-sm text-zinc-500 font-medium">API Ready</div>
+      <div class="p-4 rounded-xl bg-zinc-900/30 border border-white/5 backdrop-blur-sm">
+        <div class="text-2xl font-bold text-white mb-1" data-i18n="hero.stats.api">REST API</div>
+        <div class="text-xs text-zinc-500" data-i18n="hero.stats.apiDesc">ERP integration</div>
       </div>
     </div>
 
-    <!-- Tech stack badges -->
-    <div
-      class="flex flex-wrap items-center justify-center gap-3 mt-8 mb-8 opacity-75 hover:opacity-100 transition-opacity duration-300"
-    >
-      <span class="px-3 py-1 rounded-full bg-card/50 backdrop-blur-sm border border-border/50 text-xs text-muted-foreground">
-        React 18
-      </span>
-      <span class="px-3 py-1 rounded-full bg-card/50 backdrop-blur-sm border border-border/50 text-xs text-muted-foreground">
-        TypeScript
-      </span>
-      <span class="px-3 py-1 rounded-full bg-card/50 backdrop-blur-sm border border-border/50 text-xs text-muted-foreground">
-        Supabase
-      </span>
-      <span class="px-3 py-1 rounded-full bg-card/50 backdrop-blur-sm border border-border/50 text-xs text-muted-foreground">
-        Tailwind CSS
-      </span>
-      <span class="px-3 py-1 rounded-full bg-card/50 backdrop-blur-sm border border-border/50 text-xs text-muted-foreground">
-        Three.js
-      </span>
-      <span class="px-3 py-1 rounded-full bg-card/50 backdrop-blur-sm border border-border/50 text-xs text-muted-foreground">
-        Docker
-      </span>
+    <!-- Contributions welcome -->
+    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-sm text-emerald-400">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+      </svg>
+      <span data-i18n="hero.contributions">Contributions welcome · PRs, issues, and feedback</span>
     </div>
   </div>
 </section>
@@ -172,7 +153,7 @@
     }
 
     h1 {
-      font-size: 3rem !important;
+      font-size: 2.5rem !important;
       line-height: 1.1;
       margin-bottom: 1.5rem;
     }

website/src/components/MesAccelerator.astro

@@ -0,0 +1,144 @@
+---
+---
+
+<section id="accelerator" class="relative py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-background to-zinc-900/50">
+  <div class="max-w-5xl mx-auto">
+    <!-- Section header -->
+    <div class="text-center mb-12 fade-in-on-scroll">
+      <span class="inline-block px-4 py-1.5 rounded-full bg-emerald-500/10 text-emerald-400 text-sm font-medium mb-6 border border-emerald-500/20" data-i18n="accelerator.badge">
+        Professional Services
+      </span>
+      <h2 class="text-3xl sm:text-4xl font-bold gradient-text mb-4" data-i18n="accelerator.title">
+        The MES Accelerator
+      </h2>
+      <p class="text-lg text-zinc-400 max-w-2xl mx-auto" data-i18n="accelerator.subtitle">
+        3-Month Program · Custom MES guidance for real-time operations
+      </p>
+    </div>
+
+    <!-- Main offering card -->
+    <div class="fade-in-on-scroll">
+      <div class="bg-zinc-900/60 rounded-2xl border border-white/10 overflow-hidden">
+        <!-- Header -->
+        <div class="bg-gradient-to-r from-emerald-500/10 to-blue-500/10 p-6 border-b border-white/5">
+          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <h3 class="text-xl font-semibold text-white mb-1" data-i18n="accelerator.program.title">Your External MES Architect</h3>
+              <p class="text-zinc-400 text-sm" data-i18n="accelerator.program.tagline">Faster results. Lasting knowledge. No vendor lock-in.</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <img src="https://avatars.githubusercontent.com/u/123456789" alt="Luke van Enkhuizen" class="w-10 h-10 rounded-full bg-zinc-700" onerror="this.style.display='none'"/>
+              <div>
+                <p class="text-sm font-medium text-white">Luke van Enkhuizen</p>
+                <p class="text-xs text-zinc-500">Sheet Metal Connect</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="p-6 md:p-8">
+          <div class="grid md:grid-cols-2 gap-8">
+            <!-- What you get -->
+            <div>
+              <h4 class="text-sm font-semibold text-zinc-300 uppercase tracking-wider mb-4" data-i18n="accelerator.whatYouGet.title">What You Get</h4>
+              <ul class="space-y-3">
+                <li class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                  <span class="text-zinc-300 text-sm" data-i18n="accelerator.whatYouGet.item1">Custom implementation roadmap for your shop</span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                  <span class="text-zinc-300 text-sm" data-i18n="accelerator.whatYouGet.item2">Proven templates and workflow designs</span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                  <span class="text-zinc-300 text-sm" data-i18n="accelerator.whatYouGet.item3">Weekly guidance calls & async support</span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                  <span class="text-zinc-300 text-sm" data-i18n="accelerator.whatYouGet.item4">ERP integration architecture review</span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                  <span class="text-zinc-300 text-sm" data-i18n="accelerator.whatYouGet.item5">Code reviews & customization guidance</span>
+                </li>
+                <li class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-emerald-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+                  <span class="text-zinc-300 text-sm" data-i18n="accelerator.whatYouGet.item6">Knowledge transfer to your internal team</span>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Why this approach -->
+            <div>
+              <h4 class="text-sm font-semibold text-zinc-300 uppercase tracking-wider mb-4" data-i18n="accelerator.whyThis.title">Why This Approach</h4>
+              <div class="space-y-4">
+                <div class="p-4 rounded-lg bg-zinc-800/50 border border-white/5">
+                  <p class="text-sm text-zinc-400" data-i18n="accelerator.whyThis.point1">
+                    <span class="text-white font-medium">Build internal capability.</span> Your team learns the system, not just uses it. When the program ends, you're self-sufficient.
+                  </p>
+                </div>
+                <div class="p-4 rounded-lg bg-zinc-800/50 border border-white/5">
+                  <p class="text-sm text-zinc-400" data-i18n="accelerator.whyThis.point2">
+                    <span class="text-white font-medium">No recurring fees.</span> Fixed 3-month engagement. You own the result completely.
+                  </p>
+                </div>
+                <div class="p-4 rounded-lg bg-zinc-800/50 border border-white/5">
+                  <p class="text-sm text-zinc-400" data-i18n="accelerator.whyThis.point3">
+                    <span class="text-white font-medium">Real shop floor experience.</span> Designed by someone who's worked in metal fabrication, not just software.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- CTA -->
+          <div class="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-sm text-zinc-500" data-i18n="accelerator.cta.note">
+              Limited availability · Currently accepting inquiries for Q2 2026
+            </p>
+            <a
+              href="mailto:[email protected]?subject=MES%20Accelerator%20Inquiry"
+              class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-medium text-sm transition-all"
+            >
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+              </svg>
+              <span data-i18n="accelerator.cta.button">Inquire About Availability</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Additional note -->
+    <div class="mt-8 text-center fade-in-on-scroll">
+      <p class="text-sm text-zinc-500" data-i18n="accelerator.note">
+        Not ready for a full program? Start with the <a href="#get-started" class="text-blue-400 hover:underline">free self-hosted version</a> and reach out when you need guidance.
+      </p>
+    </div>
+  </div>
+</section>
+
+<style>
+  .gradient-text {
+    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .fade-in-on-scroll {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.6s ease-out forwards;
+  }
+
+  @keyframes fadeInUp {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>