feat: impl nonworking /status route

app/components/StatusHeader.vue

@@ -0,0 +1,90 @@
+<template>
+  <header class="status-header">
+    <div class="status-banner operational">
+      <span class="status-icon">✓</span>
+      All Systems Operational
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.status-header {
+  background-color: #0d1117;
+  border-bottom: 1px solid #30363d;
+  padding-bottom: 24px;
+}
+
+.header-illustration {
+  height: 220px;
+  background: linear-gradient(180deg, #070a0e 0%, #0d1117 100%);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.factory-backdrop {
+  width: 100%;
+  max-width: 900px;
+  height: 100%;
+  position: relative;
+  opacity: 0.6;
+}
+
+.pipeline {
+  position: absolute;
+  top: 60%;
+  left: 5%;
+  right: 5%;
+  height: 8px;
+  background: #21262d;
+  border-radius: 4px;
+}
+
+.engineer {
+  position: absolute;
+  font-size: 2.5rem;
+}
+
+.dynamic-float-1 { top: 30%; left: 15%; animation: float 4s ease-in-out infinite; }
+.dynamic-float-2 { top: 45%; left: 50%; animation: float 5s ease-in-out infinite 1s; }
+.dynamic-float-3 { top: 25%; left: 80%; animation: float 6s ease-in-out infinite 0.5s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.status-banner {
+  max-width: 900px;
+  margin: -25px auto 0 auto;
+  position: relative;
+  z-index: 10;
+  padding: 16px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 1.15rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+
+.status-banner.operational {
+  background-color: #238636;
+  color: #ffffff;
+  border: 1px solid #2ea44f;
+}
+
+.status-icon {
+  background: rgba(255, 255, 255, 0.2);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+}
+</style>