first commit

2026-07-21 14:54:36 +10:00
commit e79c793b9c
134 changed files with 14427 additions and 0 deletions
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import AppAvatar from '../components/AppAvatar.vue'
+import AppHeader from '../components/AppHeader.vue'
+import { useDemoStore } from '../data'
+
+const store = useDemoStore()
+const gradients = [
+  'linear-gradient(155deg, #f4a261, #d64e7d 48%, #5427a8)',
+  'linear-gradient(155deg, #44c6e9, #4378db 48%, #1b245d)',
+  'linear-gradient(155deg, #68d391, #2a9d8f 48%, #173e48)',
+  'linear-gradient(155deg, #b794f4, #805ad5 48%, #322659)',
+]
+</script>
+
+<template>
+  <main class="screen screen--tabs">
+    <AppHeader title="Stories" subtitle="Moments from your circle" large />
+    <section class="story-grid">
+      <article v-for="(person, index) in store.people.value.slice(0, 4)" :key="person.id" class="story-card" :style="{ background: gradients[index] }">
+        <div class="story-card__glow" />
+        <AppAvatar :person="person" size="sm" />
+        <div>
+          <strong>{{ person.name }}</strong>
+          <p>{{ index % 2 ? '2 hours ago' : 'Just now' }}</p>
+        </div>
+        <span class="story-card__mark">{{ ['✦', '◌', '△', '◇'][index] }}</span>
+      </article>
+    </section>
+    <p class="gesture-tip">Swipe horizontally anywhere to move between primary routes.</p>
+  </main>
+</template>