upgrade to tamagui v2 and guest pwa overhaul

resources/js/guest-v2/screens/mockups/MockupHome02StoryRings.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Camera, Sparkles, Image as ImageIcon, Users } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+const rings = [
+  { label: 'Capture', icon: <Camera size={18} color="#0F172A" /> },
+  { label: 'Prompts', icon: <Sparkles size={18} color="#0F172A" /> },
+  { label: 'Gallery', icon: <ImageIcon size={18} color="#0F172A" /> },
+  { label: 'Guests', icon: <Users size={18} color="#0F172A" /> },
+];
+
+export default function MockupHome02StoryRings() {
+  return (
+    <MockupFrame
+      title="Home 02 - Story Rings"
+      subtitle="Circular quick actions with story chips"
+      backgroundStyle={{
+        backgroundImage: 'radial-gradient(circle at 80% 0%, rgba(244, 63, 94, 0.14), transparent 55%)',
+      }}
+    >
+      <MockupCard>
+        <Text fontSize="$5" fontFamily="$display" fontWeight="$8">
+          Morning glow
+        </Text>
+        <MockupLabel>Tap a ring to jump in.</MockupLabel>
+      </MockupCard>
+
+      <XStack justifyContent="space-between">
+        {rings.map((ring) => (
+          <YStack key={ring.label} alignItems="center" gap="$2">
+            <YStack
+              width={72}
+              height={72}
+              borderRadius={36}
+              backgroundColor="$surface"
+              borderWidth={2}
+              borderColor="$primary"
+              alignItems="center"
+              justifyContent="center"
+            >
+              {ring.icon}
+            </YStack>
+            <Text fontSize="$2" fontWeight="$6">
+              {ring.label}
+            </Text>
+          </YStack>
+        ))}
+      </XStack>
+
+      <YStack gap="$3">
+        <MockupCard>
+          <Text fontSize="$4" fontWeight="$7">
+            Story highlights
+          </Text>
+          <XStack gap="$2">
+            {[1, 2, 3].map((chip) => (
+              <YStack
+                key={chip}
+                flex={1}
+                height={90}
+                borderRadius="$tile"
+                backgroundColor="$muted"
+                borderWidth={1}
+                borderColor="$borderColor"
+              />
+            ))}
+          </XStack>
+        </MockupCard>
+      </YStack>
+    </MockupFrame>
+  );
+}