lightsing · lightsing · Feb 25, 2026 · Feb 25, 2026 · Feb 25, 2026 · Feb 25, 2026
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -1,12 +1,18 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>web</title>
+    <title>UTS — Universal Timestamps</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body>
+  <body class="bg-deep-black text-white antialiased">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -11,13 +11,23 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "vue": "^3.5.24",
-    "@uts/sdk": "workspace:*"
+    "@noble/hashes": "^2.0.1",
+    "@uts/sdk": "workspace:*",
+    "@vueuse/core": "^14.2.1",
+    "date-fns": "^4.1.0",
+    "ethers": "^6.16.0",
+    "jszip": "^3.10.1",
+    "lucide-vue-next": "^0.575.0",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.24"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/jszip": "^3.4.1",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vue-tsc": "^3.1.4"

diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
@@ -1,30 +1,7 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import HomeView from './views/HomeView.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <Suspense><HelloWorld msg="Vite + Vue" /></Suspense>
+  <HomeView />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
diff --git a/apps/web/src/assets/Scroll_Logomark.svg b/apps/web/src/assets/Scroll_Logomark.svg
diff --git a/apps/web/src/components/HelloWorld.vue b/apps/web/src/components/HelloWorld.vue
diff --git a/apps/web/src/components/base/BaseButton.vue b/apps/web/src/components/base/BaseButton.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    class="relative inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 font-heading text-sm font-semibold tracking-wide uppercase transition-all duration-200 active:scale-95 disabled:pointer-events-none disabled:opacity-40"
+    :class="{
+      'border border-neon-cyan/40 bg-neon-cyan/10 text-neon-cyan hover:bg-neon-cyan/20 hover:shadow-[0_0_20px_rgba(0,243,255,0.2)]':
+        variant === 'primary' || !variant,
+      'border border-glass-border bg-glass text-white/70 hover:border-white/20 hover:text-white':
+        variant === 'secondary',
+      'border border-invalid/40 bg-invalid/10 text-invalid hover:bg-invalid/20':
+        variant === 'danger',
+    }"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+  >
+    <svg
+      v-if="loading"
+      class="h-4 w-4 animate-spin"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+    <slot />
+  </button>
+</template>
diff --git a/apps/web/src/components/base/GlassCard.vue b/apps/web/src/components/base/GlassCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  glow?: 'cyan' | 'purple' | 'none'
+}>()
+</script>
+
+<template>
+  <div
+    class="glass rounded-xl p-6 transition-all duration-300"
+    :class="{
+      'glow-cyan': glow === 'cyan',
+      'glow-purple': glow === 'purple',
+    }"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/web/src/components/base/StatusBadge.vue b/apps/web/src/components/base/StatusBadge.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  status: 'valid' | 'invalid' | 'pending' | 'partial' | 'unknown'
+  size?: 'sm' | 'md' | 'lg'
+}>()
+
+const labels: Record<string, string> = {
+  valid: 'VERIFIED ON CHAIN',
+  invalid: 'INVALID',
+  pending: 'PENDING',
+  partial: 'PARTIALLY VERIFIED',
+  unknown: 'UNKNOWN',
+}
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center gap-2 rounded-full font-mono font-bold uppercase tracking-widest"
+    :class="[
+      {
+        'bg-valid/10 text-valid border border-valid/30': status === 'valid',
+        'bg-invalid/10 text-invalid border border-invalid/30':
+          status === 'invalid',
+        'bg-pending/10 text-pending border border-pending/30':
+          status === 'pending',
+        'bg-neon-purple/10 text-neon-purple border border-neon-purple/30':
+          status === 'partial',
+        'bg-white/5 text-white/50 border border-white/10': status === 'unknown',
+      },
+      {
+        'px-3 py-1 text-xs': size === 'sm' || !size,
+        'px-5 py-2 text-sm': size === 'md',
+        'px-8 py-3 text-lg': size === 'lg',
+      },
+    ]"
+  >
+    <span
+      class="h-2 w-2 rounded-full"
+      :class="{
+        'bg-valid animate-glow-pulse': status === 'valid',
+        'bg-invalid': status === 'invalid',
+        'bg-pending animate-glow-pulse': status === 'pending',
+        'bg-neon-purple animate-glow-pulse': status === 'partial',
+        'bg-white/30': status === 'unknown',
+      }"
+    />
+    {{ labels[status] }}
+  </span>
+</template>