upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Clock, Image as ImageIcon } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+const timeline = [
+  { time: '18:40', title: 'Sparkler exit', caption: '12 new uploads' },
+  { time: '18:22', title: 'First dance', caption: '7 moments added' },
+  { time: '18:10', title: 'Toast round', caption: '5 guest favorites' },
+  { time: '17:55', title: 'Arrival glow', caption: '4 candid shots' },
+];
+
+export default function Mockup04TimelineStream() {
+  return (
+    <MockupFrame
+      title="Mockup 04 - Timeline Stream"
+      subtitle="Chronological feed with time markers"
+      backgroundStyle={{
+        backgroundImage: 'linear-gradient(180deg, rgba(254, 252, 232, 0.9), rgba(255, 255, 255, 0.95))',
+      }}
+    >
+      <MockupCard padding="$3">
+        <XStack alignItems="center" gap="$2">
+          <Clock size={16} color="#0F172A" />
+          <Text fontSize="$4" fontWeight="$7">
+            Live timeline
+          </Text>
+        </XStack>
+        <MockupLabel>Moments grouped by when they happened.</MockupLabel>
+      </MockupCard>
+
+      <YStack gap="$3">
+        {timeline.map((item, index) => (
+          <XStack key={item.time} gap="$3" alignItems="flex-start">
+            <YStack alignItems="center" gap="$2" width={60}>
+              <Text fontSize="$2" fontWeight="$7">
+                {item.time}
+              </Text>
+              <YStack width={2} flex={1} backgroundColor="$borderColor" opacity={index === timeline.length - 1 ? 0 : 1} />
+            </YStack>
+            <MockupCard flex={1} padding="$3">
+              <XStack alignItems="center" gap="$2">
+                <ImageIcon size={16} color="#0F172A" />
+                <Text fontSize="$4" fontWeight="$7">
+                  {item.title}
+                </Text>
+              </XStack>
+              <MockupLabel>{item.caption}</MockupLabel>
+              <XStack gap="$2">
+                {[1, 2, 3].map((tile) => (
+                  <YStack
+                    key={tile}
+                    flex={1}
+                    height={56}
+                    borderRadius="$tile"
+                    backgroundColor="$muted"
+                    borderWidth={1}
+                    borderColor="$borderColor"
+                  />
+                ))}
+              </XStack>
+            </MockupCard>
+          </XStack>
+        ))}
+      </YStack>
+    </MockupFrame>
+  );
+}