@meddleware/landing 0.0.1

package/.github/workflows/publish.yml

@@ -0,0 +1,280 @@
+name: Publish
+
+on:
+  push:
+    tags:
+      - "v*"
+
+env:
+  IMAGE: landing
+
+jobs:
+  # ── App: Docker image → quay.io + Docker Hub ────────────────────────────────
+  # Split into per-arch native builds + merge so each platform compiles on its
+  # own native runner. The arm64 Vite build runs on ubuntu-24.04-arm rather than
+  # QEMU emulation, eliminating the ~3-5× slowdown for npm install + tsc + vite.
+  #
+  # No VITE_* build args — the landing page has no wallet, no chain SDK, and no
+  # operator-configurable runtime values.
+
+  build-docker-amd64-public:
+    name: Docker amd64 (quay.io + Docker Hub)
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v7.0.1
+      - uses: docker/setup-buildx-action@v4.3.0
+
+      - name: Log in to quay.io
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: quay.io
+          username: ${{ secrets.QUAY_USERNAME }}
+          password: ${{ secrets.QUAY_TOKEN }}
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push (linux/amd64)
+        uses: docker/build-push-action@v7.3.0
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: |
+            quay.io/${{ vars.QUAY_NAMESPACE }}/${{ env.IMAGE }}:${{ github.sha }}-amd64
+            docker.io/${{ vars.DOCKERHUB_NAMESPACE }}/${{ env.IMAGE }}:${{ github.sha }}-amd64
+          cache-from: type=gha,scope=amd64-public
+          cache-to: type=gha,scope=amd64-public,mode=max
+
+  build-docker-arm64-public:
+    name: Docker arm64 (quay.io + Docker Hub)
+    runs-on: ubuntu-24.04-arm
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v7.0.1
+      - uses: docker/setup-buildx-action@v4.3.0
+
+      - name: Log in to quay.io
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: quay.io
+          username: ${{ secrets.QUAY_USERNAME }}
+          password: ${{ secrets.QUAY_TOKEN }}
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push (linux/arm64)
+        uses: docker/build-push-action@v7.3.0
+        with:
+          context: .
+          platforms: linux/arm64
+          push: true
+          tags: |
+            quay.io/${{ vars.QUAY_NAMESPACE }}/${{ env.IMAGE }}:${{ github.sha }}-arm64
+            docker.io/${{ vars.DOCKERHUB_NAMESPACE }}/${{ env.IMAGE }}:${{ github.sha }}-arm64
+          cache-from: type=gha,scope=arm64-public
+          cache-to: type=gha,scope=arm64-public,mode=max
+
+  merge-docker-public:
+    name: Merge + sign (quay.io + Docker Hub)
+    needs: [build-docker-amd64-public, build-docker-arm64-public]
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+      attestations: write
+    steps:
+      - uses: docker/setup-buildx-action@v4.3.0
+
+      - name: Log in to quay.io
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: quay.io
+          username: ${{ secrets.QUAY_USERNAME }}
+          password: ${{ secrets.QUAY_TOKEN }}
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Compute final tags and labels
+        id: meta
+        uses: docker/metadata-action@v6.2.0
+        with:
+          images: |
+            quay.io/${{ vars.QUAY_NAMESPACE }}/${{ env.IMAGE }}
+            docker.io/${{ vars.DOCKERHUB_NAMESPACE }}/${{ env.IMAGE }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+          flavor: |
+            latest=auto
+
+      - name: Merge multi-arch manifests
+        id: merge
+        env:
+          QUAY_NS: ${{ vars.QUAY_NAMESPACE }}
+          DOCKERHUB_NS: ${{ vars.DOCKERHUB_NAMESPACE }}
+          SHA: ${{ github.sha }}
+        run: |
+          QUAY_SRC="quay.io/${QUAY_NS}/${IMAGE}:${SHA}"
+          HUB_SRC="docker.io/${DOCKERHUB_NS}/${IMAGE}:${SHA}"
+
+          QUAY_FLAGS=""
+          HUB_FLAGS=""
+          while IFS= read -r tag; do
+            if [[ "$tag" == quay.io/* ]]; then
+              QUAY_FLAGS="$QUAY_FLAGS --tag $tag"
+            elif [[ "$tag" == docker.io/* ]]; then
+              HUB_FLAGS="$HUB_FLAGS --tag $tag"
+            fi
+          done <<< "${{ steps.meta.outputs.tags }}"
+
+          docker buildx imagetools create $QUAY_FLAGS "${QUAY_SRC}-amd64" "${QUAY_SRC}-arm64"
+          docker buildx imagetools create $HUB_FLAGS   "${HUB_SRC}-amd64"  "${HUB_SRC}-arm64"
+
+          PRIMARY=$(echo "${{ steps.meta.outputs.tags }}" | grep 'quay.io' | grep -v 'latest' | head -1)
+          DIGEST=$(docker buildx imagetools inspect "${PRIMARY}" --format '{{.Manifest.Digest}}')
+          echo "digest=${DIGEST}" >> "$GITHUB_OUTPUT"
+
+      - uses: sigstore/cosign-installer@v4.1.2
+
+      - name: Sign images (keyless)
+        env:
+          DIGEST: ${{ steps.merge.outputs.digest }}
+          QUAY_NS: ${{ vars.QUAY_NAMESPACE }}
+          DOCKERHUB_NS: ${{ vars.DOCKERHUB_NAMESPACE }}
+        run: |
+          cosign sign --yes "quay.io/${QUAY_NS}/${IMAGE}@${DIGEST}"
+          cosign sign --yes "docker.io/${DOCKERHUB_NS}/${IMAGE}@${DIGEST}"
+
+      - name: Attest build provenance (quay.io)
+        uses: actions/attest-build-provenance@v4.2.2
+        continue-on-error: true
+        with:
+          subject-name: quay.io/${{ vars.QUAY_NAMESPACE }}/${{ env.IMAGE }}
+          subject-digest: ${{ steps.merge.outputs.digest }}
+          push-to-registry: true
+
+      - name: Attest build provenance (Docker Hub)
+        uses: actions/attest-build-provenance@v4.2.2
+        continue-on-error: true
+        with:
+          subject-name: docker.io/${{ vars.DOCKERHUB_NAMESPACE }}/${{ env.IMAGE }}
+          subject-digest: ${{ steps.merge.outputs.digest }}
+          push-to-registry: true
+
+      - name: Summary
+        run: echo "Published & signed @ ${{ steps.merge.outputs.digest }}" >> "$GITHUB_STEP_SUMMARY"
+
+  # ── Self-hosted registry (best-effort) ─────────────────────────────────────
+
+  build-docker-amd64-private:
+    name: Docker amd64 (self-hosted registry)
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v7.0.1
+      - uses: docker/setup-buildx-action@v4.3.0
+
+      - name: Log in to self-hosted registry
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: ${{ vars.PRIVATE_REGISTRY }}
+          username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
+          password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
+
+      - name: Build and push (linux/amd64)
+        uses: docker/build-push-action@v7.3.0
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: ${{ vars.PRIVATE_REGISTRY }}/${{ vars.PRIVATE_NAMESPACE }}/${{ env.IMAGE }}:${{ github.sha }}-amd64
+          cache-from: type=gha,scope=amd64-private
+          cache-to: type=gha,scope=amd64-private,mode=max
+
+  build-docker-arm64-private:
+    name: Docker arm64 (self-hosted registry)
+    runs-on: ubuntu-24.04-arm
+    continue-on-error: true
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v7.0.1
+      - uses: docker/setup-buildx-action@v4.3.0
+
+      - name: Log in to self-hosted registry
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: ${{ vars.PRIVATE_REGISTRY }}
+          username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
+          password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
+
+      - name: Build and push (linux/arm64)
+        uses: docker/build-push-action@v7.3.0
+        with:
+          context: .
+          platforms: linux/arm64
+          push: true
+          tags: ${{ vars.PRIVATE_REGISTRY }}/${{ vars.PRIVATE_NAMESPACE }}/${{ env.IMAGE }}:${{ github.sha }}-arm64
+          cache-from: type=gha,scope=arm64-private
+          cache-to: type=gha,scope=arm64-private,mode=max
+
+  merge-docker-private:
+    name: Merge (self-hosted registry)
+    needs: [build-docker-amd64-private, build-docker-arm64-private]
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    permissions:
+      contents: read
+    steps:
+      - uses: docker/setup-buildx-action@v4.3.0
+
+      - name: Log in to self-hosted registry
+        uses: docker/login-action@v4.6.0
+        with:
+          registry: ${{ vars.PRIVATE_REGISTRY }}
+          username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
+          password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
+
+      - name: Compute tags
+        id: meta
+        uses: docker/metadata-action@v6.2.0
+        with:
+          images: ${{ vars.PRIVATE_REGISTRY }}/${{ vars.PRIVATE_NAMESPACE }}/${{ env.IMAGE }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+          flavor: |
+            latest=auto
+
+      - name: Merge multi-arch manifests
+        env:
+          SHA: ${{ github.sha }}
+          REG: ${{ vars.PRIVATE_REGISTRY }}
+          NS: ${{ vars.PRIVATE_NAMESPACE }}
+        run: |
+          SRC="${REG}/${NS}/${IMAGE}:${SHA}"
+          FLAGS=""
+          while IFS= read -r tag; do
+            FLAGS="$FLAGS --tag $tag"
+          done <<< "${{ steps.meta.outputs.tags }}"
+          docker buildx imagetools create $FLAGS "${SRC}-amd64" "${SRC}-arm64"

package/CLAUDE.md

@@ -0,0 +1,69 @@
+# CLAUDE.md — @meddleware/landing
+
+## What this app is
+
+A Vue 3 + Vite SPA serving as the corporate landing page at `meddleware.co.uk`. It presents
+Meddleware's tool suite to first-time visitors and links them to the chain-agnostic dashboard
+(`dash.meddleware.co.uk`) and standalone tool subdomains.
+
+The landing page has **no wallet, no blockchain SDK, no accounting logic** — it is a pure
+marketing/navigation page. Keep it that way.
+
+## Architecture
+
+```
+src/
+  App.vue             AppHeader (transparent) + RouterView + AppFooter (dark)
+  views/
+    HomeView.vue      Composes HeroSection + FeaturesGrid + CtaSection
+  components/
+    HeroSection.vue   Full-viewport hero with gradient, headline, CTAs
+    FeaturesGrid.vue  Responsive grid of ToolCard entries — one per live tool
+    ToolCard.vue      Emoji icon + title + description + optional link
+    CtaSection.vue    Secondary CTA strip with dashboard and docs links
+  styles/
+    main.css          Layout resets; imports after design-tokens + ui base.css
+  env.d.ts            Vite client types + *.vue shim
+```
+
+## Styling rules
+
+All colours and spacing come from `@meddleware/design-tokens` role tokens (`--bg`, `--surface`,
+`--text`, `--muted`, `--accent`, `--border`, `--focus-ring`, `--space-*`, `--font-size-*`,
+`--tracking-*`). Never hardcode hex/rem values — see `@meddleware/ui` CLAUDE.md for the full
+theming contract.
+
+The hero gradient uses `color-mix(in srgb, var(--accent) 12%, transparent)` to produce a
+subtle radial wash without referencing any colour-named ramps.
+
+## Adding a new tool card
+
+Add an entry to the `tools` array in `src/components/FeaturesGrid.vue`:
+
+```ts
+{
+  icon: '⚙',
+  title: 'New Tool',
+  description: 'One or two sentences.',
+  href: 'https://new-tool.meddleware.co.uk',
+}
+```
+
+## Deployment
+
+Served by `static-server` in k8s namespace `apps`, service name `landing`, port 80.
+Ingress: `meddleware.co.uk` → `post-bootstrap/landing/base/ingress.yaml`.
+Cloudflare Tunnel: `meddleware.co.uk` → `https://nginx-ingress-controller.nginx-ingress.svc:443`
+(No TLS Verify; HTTP Host Header `meddleware.co.uk`).
+
+Legal files (`public/legal/`) must be copied from `repos/ui/public/legal/` before deploying
+so the `CopyrightLine` component's symbol links resolve correctly.
+
+## Build
+
+```bash
+npm install
+npm run type-check  # vue-tsc
+npm run build       # type-check + vite build → dist/
+npm run dev         # local dev server at http://localhost:5173
+```

package/Dockerfile

@@ -0,0 +1,32 @@
+# ── build stage ───────────────────────────────────────────────────────────────
+# Standalone build — the Docker context is this repo root. All @meddleware/*
+# dependencies resolve from the npm registry, so they must be published before
+# this image is built.
+#
+#   docker build -t landing:<tag> .
+#
+# No VITE_* build args are required — the landing page has no wallet, no chain
+# SDK, and no operator-configurable runtime values.
+
+FROM node:24-slim AS build
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# ── runtime stage ─────────────────────────────────────────────────────────────
+# static-server is a minimal Go binary image — no shell, no package manager.
+# See https://github.com/meddleware-org/static-server for configuration details.
+
+FROM quay.io/meddleware-org/static-server:0.1.1
+
+COPY --from=build /app/dist /app/public
+
+ENV SERVE_DIR=/app/public \
+    SPA_FALLBACK=true \
+    CACHE_IMMUTABLE_PREFIX=/assets/
+
+EXPOSE 8080

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Meddleware — protocol-agnostic infrastructure, developer tools, and on-chain primitives. Currently live on Sui." />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Meddleware — Tooling for the decentralised web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@meddleware/landing",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@meddleware/design-tokens": "0.1.5",
+    "@meddleware/ui": "0.1.21",
+    "vue": "^3.5.43",
+    "vue-router": "^5.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "~24.12.2",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "typescript": "^6.0.0",
+    "vite": "^8.3.0",
+    "vue-tsc": "~3.3.11"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  }
+}

package/public/CNAME

@@ -0,0 +1 @@
+meddleware.co.uk

package/public/_headers

@@ -0,0 +1,7 @@
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' https:
+  Strict-Transport-Security: max-age=31536000; includeSubDomains

package/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="8" fill="#2d1b1e"/>
+  <path d="M16 6 L26 12 L26 20 L16 26 L6 20 L6 12 Z" fill="#c0392b" opacity="0.9"/>
+  <path d="M16 10 L22 13.5 L22 20.5 L16 24 L10 20.5 L10 13.5 Z" fill="#2d1b1e"/>
+  <path d="M16 14 L19 15.75 L19 19.25 L16 21 L13 19.25 L13 15.75 Z" fill="#c0392b" opacity="0.7"/>
+</svg>

package/public/legal/copyleft.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Copyleft Notice</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      body {
+        margin: 0;
+        padding: 2rem;
+        line-height: 1.6;
+        max-width: 48rem;
+      }
+      h1 {
+        margin-top: 0;
+        font-size: 1.5rem;
+      }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Copyleft Notice</h1>
+    <p>
+      This page is reserved for works distributed under a copyleft-style
+      permission structure.
+    </p>
+    <p>
+      Copyleft generally means that derivatives and redistributions must
+      preserve the same or compatible licensing terms, depending on the specific
+      licence in force.
+    </p>
+    <p>
+      The exact legal meaning depends on the licence or notice that accompanies
+      the relevant work.
+    </p>
+  </body>
+</html>

package/public/legal/copyright.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Copyright Notice</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      body {
+        margin: 0;
+        padding: 2rem;
+        line-height: 1.6;
+        max-width: 48rem;
+      }
+      h1 {
+        margin-top: 0;
+        font-size: 1.5rem;
+      }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Copyright Notice</h1>
+    <p>
+      Unless otherwise stated, the content and code in this application are
+      protected by copyright.
+    </p>
+    <p>
+      Copyright in the relevant work is retained by the applicable rights holder
+      and used under the permissions, licences, or agreements associated with
+      that work.
+    </p>
+    <p>
+      For the full application footer, see the main interface. This page exists
+      as a static legal reference.
+    </p>
+  </body>
+</html>

package/src/App.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { AppHeader, AppFooter, CopyrightLine, useColorMode } from '@meddleware/ui'
+
+const { mode } = useColorMode('dark')
+</script>
+
+<template>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
+
+  <AppHeader variant="transparent" :sticky="true">
+    <template #brand>
+      <a href="/" class="brand-link" aria-label="Meddleware home">
+        <span class="brand-mark" aria-hidden="true">◆</span>
+        <span>Meddleware</span>
+      </a>
+    </template>
+    <template #actions>
+      <nav class="header-nav" aria-label="Site">
+        <a href="https://dash.meddleware.co.uk" class="header-nav__link">Dashboard</a>
+        <a href="https://docs.meddleware.co.uk" class="header-nav__link" target="_blank" rel="noopener noreferrer">Docs</a>
+      </nav>
+    </template>
+  </AppHeader>
+
+  <main id="main-content">
+    <RouterView />
+  </main>
+
+  <AppFooter variant="dark">
+    <template #start>
+      <CopyrightLine symbolVariant="kopimi" organisation-name="Meddleware" rightsStatement="jam" />
+    </template>
+    <template #end>
+      <a href="https://dash.meddleware.co.uk" class="footer-link">Dashboard</a>
+      <a href="https://docs.meddleware.co.uk" class="footer-link" target="_blank" rel="noopener noreferrer">Documentation</a>
+      <a href="https://dev.meddleware.co.uk" class="footer-link" target="_blank" rel="noopener noreferrer">Developer docs</a>
+    </template>
+  </AppFooter>
+</template>
+
+<style scoped>
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  padding: var(--space-2xs) var(--space-xs);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-size: var(--font-size-sm);
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  color: inherit;
+  text-decoration: none;
+  font-weight: 650;
+  letter-spacing: var(--tracking-wide);
+}
+
+.brand-mark {
+  color: var(--accent);
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.header-nav__link {
+  color: inherit;
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  opacity: 0.8;
+  transition: opacity var(--transition-base, 150ms ease);
+}
+
+.header-nav__link:hover {
+  opacity: 1;
+}
+
+.footer-link {
+  color: inherit;
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  opacity: 0.65;
+  transition: opacity var(--transition-base, 150ms ease);
+}
+
+.footer-link:hover {
+  opacity: 1;
+}
+</style>

package/src/components/CtaSection.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// Static CTA strip — no reactive state.
+</script>
+
+<template>
+  <section class="cta" aria-labelledby="cta-heading">
+    <div class="cta__inner">
+      <h2 id="cta-heading" class="cta__title">Ready to build on-chain?</h2>
+      <p class="cta__body">
+        All tools are live on Sui testnet and mainnet. Connect a wallet and get started.
+      </p>
+      <div class="cta__actions">
+        <a href="https://dash.meddleware.co.uk" class="cta__btn cta__btn--primary">
+          Open Dashboard
+        </a>
+        <a href="https://docs.meddleware.co.uk" class="cta__btn cta__btn--secondary"
+           target="_blank" rel="noopener noreferrer">
+          Read the docs ↗
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cta {
+  padding: var(--space-xl) var(--space-sm);
+  background: var(--bg);
+  text-align: center;
+}
+
+.cta__inner {
+  max-width: 36rem;
+  margin-inline: auto;
+}
+
+.cta__title {
+  margin: 0 0 var(--space-xs);
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  line-height: var(--leading-tight, 1.2);
+  color: var(--text);
+}
+
+.cta__body {
+  margin: 0 0 var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--muted);
+  line-height: var(--leading-relaxed, 1.6);
+}
+
+.cta__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+}
+
+.cta__btn {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-2xs) var(--space-sm);
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity var(--transition-base, 150ms ease), transform var(--transition-base, 150ms ease);
+}
+
+.cta__btn:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+}
+
+.cta__btn--primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.cta__btn--secondary {
+  background: color-mix(in srgb, var(--text) 10%, transparent);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+</style>

package/src/components/FeaturesGrid.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import ToolCard from './ToolCard.vue'
+
+const tools = [
+  {
+    icon: '🗄',
+    title: 'Walrus Storage',
+    description:
+      'Decentralised, tamper-proof blob storage on Sui. Upload, manage, and extend the lifetime of blobs — no backend required.',
+    href: 'https://sui-walrus.meddleware.co.uk',
+  },
+  {
+    icon: '🔒',
+    title: 'Sealed Storage',
+    description:
+      'End-to-end encrypted blobs with Sui-based access control. Only holders of the matching on-chain NFT can decrypt.',
+    href: 'https://sui-seal.meddleware.co.uk',
+  },
+  {
+    icon: '🔐',
+    title: 'Access Gate',
+    description:
+      'NFT-based access control for any HTTP service. Gate uploads, APIs, and content behind a soulbound Sui NFT.',
+    href: 'https://sui-access-gate.meddleware.co.uk',
+  },
+  {
+    icon: '🪙',
+    title: 'Token Deployer',
+    description:
+      'Deploy your own Sui coin fully client-side in under a minute. Your wallet signs, your keys — no intermediaries.',
+    href: 'https://sui-token-deployer.meddleware.co.uk',
+  },
+  {
+    icon: '🏛',
+    title: 'DAO Console',
+    description:
+      'Govern your vault on-chain. Propose, vote, and execute DAO actions through a clean browser interface.',
+    href: 'https://sui-dao.meddleware.co.uk',
+  },
+] as const
+</script>
+
+<template>
+  <section class="features" aria-labelledby="features-heading">
+    <div class="features__inner">
+      <header class="features__header">
+        <h2 id="features-heading" class="features__title">What's in the dashboard</h2>
+        <p class="features__subtitle">
+          Five on-chain tools — all accessible via a single wallet connection at
+          <a href="https://dash.meddleware.co.uk">dash.meddleware.co.uk</a>,
+          or as standalone micro-apps on their own subdomains.
+        </p>
+      </header>
+      <ul class="features__grid" role="list">
+        <li v-for="tool in tools" :key="tool.title">
+          <ToolCard v-bind="tool" />
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.features {
+  padding: var(--space-xl) var(--space-sm);
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.features__inner {
+  max-width: 56rem;
+  margin-inline: auto;
+}
+
+.features__header {
+  text-align: center;
+  margin-bottom: var(--space-lg);
+}
+
+.features__title {
+  margin: 0 0 var(--space-xs);
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  line-height: var(--leading-tight, 1.2);
+  color: var(--text);
+}
+
+.features__subtitle {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--muted);
+  line-height: var(--leading-relaxed, 1.6);
+}
+
+.features__grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: var(--space-xs);
+}
+</style>

package/src/components/HeroSection.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// No reactive state — static hero section.
+</script>
+
+<template>
+  <section class="hero" aria-labelledby="hero-headline">
+    <div class="hero__content">
+      <p class="hero__eyebrow" aria-hidden="true">◆ On-chain tooling</p>
+      <h1 id="hero-headline" class="hero__headline">
+        Tooling for the<br />decentralised web
+      </h1>
+      <p class="hero__subheading">
+        Protocol-agnostic infrastructure, developer tools, and on-chain primitives.
+        <br class="hero__br" />
+        Currently live on Sui.
+      </p>
+      <div class="hero__actions">
+        <a href="https://dash.meddleware.co.uk" class="hero__cta hero__cta--primary">
+          Open Dashboard
+        </a>
+        <a href="https://docs.meddleware.co.uk" class="hero__cta hero__cta--secondary"
+           target="_blank" rel="noopener noreferrer">
+          Documentation ↗
+        </a>
+      </div>
+    </div>
+    <div class="hero__glyph" aria-hidden="true">◆</div>
+  </section>
+</template>
+
+<style scoped>
+.hero {
+  position: relative;
+  min-height: calc(100dvh - var(--mw-header-height, 56px));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xl) var(--space-sm);
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%),
+    var(--bg);
+}
+
+.hero__content {
+  position: relative;
+  z-index: 1;
+  max-width: 44rem;
+  text-align: center;
+}
+
+.hero__eyebrow {
+  margin: 0 0 var(--space-xs);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--accent);
+  opacity: 0.85;
+}
+
+.hero__headline {
+  margin: 0 0 var(--space-sm);
+  font-size: clamp(var(--font-size-2xl), 7vw, var(--font-size-3xl));
+  font-weight: 700;
+  line-height: var(--leading-tight, 1.2);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+}
+
+.hero__subheading {
+  margin: 0 0 var(--space-md);
+  font-size: var(--font-size-md);
+  line-height: var(--leading-relaxed, 1.6);
+  color: var(--muted);
+}
+
+.hero__br {
+  display: none;
+}
+
+@media (min-width: 600px) {
+  .hero__br {
+    display: inline;
+  }
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+}
+
+.hero__cta {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-2xs) var(--space-sm);
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity var(--transition-base, 150ms ease), transform var(--transition-base, 150ms ease);
+}
+
+.hero__cta:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+}
+
+.hero__cta--primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.hero__cta--secondary {
+  background: color-mix(in srgb, var(--text) 10%, transparent);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+/* Large decorative glyph — hidden on small screens to avoid clutter. */
+.hero__glyph {
+  position: absolute;
+  right: -0.15em;
+  bottom: -0.2em;
+  font-size: 40vw;
+  font-weight: 700;
+  color: var(--accent);
+  opacity: 0.03;
+  pointer-events: none;
+  user-select: none;
+  line-height: 1;
+}
+
+@media (max-width: 480px) {
+  .hero__glyph {
+    display: none;
+  }
+}
+</style>

package/src/components/ToolCard.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/**
+ * ToolCard — one feature / tool card in the FeaturesGrid.
+ *
+ * Renders as a `<UiCard>`-styled article with an emoji icon, title, description,
+ * and an optional link. The link is applied to the whole card surface when provided.
+ */
+defineProps<{
+  /** Emoji or single character used as the visual icon. Rendered `aria-hidden`. */
+  icon: string
+  /** Tool name — rendered as the card heading. */
+  title: string
+  /** One or two sentences describing the tool. */
+  description: string
+  /** Optional link URL. When set, the card title becomes an anchor. */
+  href?: string
+}>()
+</script>
+
+<template>
+  <article class="tool-card">
+    <div class="tool-card__icon" aria-hidden="true">{{ icon }}</div>
+    <div class="tool-card__body">
+      <h3 class="tool-card__title">
+        <a v-if="href" :href="href" class="tool-card__link" target="_blank" rel="noopener noreferrer">
+          {{ title }} <span aria-hidden="true">↗</span>
+        </a>
+        <template v-else>{{ title }}</template>
+      </h3>
+      <p class="tool-card__description">{{ description }}</p>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.tool-card {
+  display: flex;
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  transition: border-color var(--transition-base, 150ms ease);
+}
+
+.tool-card:has(.tool-card__link:hover) {
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
+}
+
+.tool-card__icon {
+  flex-shrink: 0;
+  font-size: var(--font-size-lg);
+  line-height: 1;
+  padding-top: 0.1em;
+}
+
+.tool-card__body {
+  min-width: 0;
+}
+
+.tool-card__title {
+  margin: 0 0 var(--space-3xs);
+  font-size: var(--font-size-sm);
+  font-weight: 650;
+  color: var(--text);
+}
+
+.tool-card__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.tool-card__link:hover {
+  color: var(--accent);
+}
+
+.tool-card__link:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.tool-card__description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--leading-relaxed, 1.6);
+  color: var(--muted);
+}
+</style>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package/src/main.ts

@@ -0,0 +1,15 @@
+import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/ui/base.css'
+import './styles/main.css'
+
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+import HomeView from './views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', component: HomeView }],
+})
+
+createApp(App).use(router).mount('#app')

package/src/styles/main.css

@@ -0,0 +1,31 @@
+/* Landing-page layout resets and base styles. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--mw-font-sans, system-ui, sans-serif);
+  line-height: var(--leading-normal, 1.5);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--accent);
+  text-underline-offset: 0.2em;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}

package/src/views/HomeView.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import HeroSection from '../components/HeroSection.vue'
+import FeaturesGrid from '../components/FeaturesGrid.vue'
+import CtaSection from '../components/CtaSection.vue'
+</script>
+
+<template>
+  <HeroSection />
+  <FeaturesGrid />
+  <CtaSection />
+</template>

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  base: '/',
+  plugins: [vue()],
+  build: {
+    target: 'esnext',
+  },
+})