upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Play, Star, Share2 } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
+
+export default function Mockup10SpotlightReel() {
+  return (
+    <MockupFrame
+      title="Mockup 10 - Spotlight Reel"
+      subtitle="Live highlight reel with action strip"
+      backgroundStyle={{
+        backgroundImage: 'radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.2), transparent 55%)',
+      }}
+    >
+      <MockupCard>
+        <XStack alignItems="center" justifyContent="space-between">
+          <YStack gap="$1">
+            <Text fontSize="$4" fontWeight="$7">
+              Spotlight reel
+            </Text>
+            <MockupLabel>Live highlights curated by guests.</MockupLabel>
+          </YStack>
+          <Play size={18} color="#0F172A" />
+        </XStack>
+      </MockupCard>
+
+      <XStack gap="$2">
+        {[1, 2, 3, 4, 5].map((tile) => (
+          <MockupTile key={tile} flex={1} height={70} />
+        ))}
+      </XStack>
+
+      <MockupCard>
+        <Text fontSize="$6" fontFamily="$display" fontWeight="$8">
+          Now showing
+        </Text>
+        <YStack height={200} borderRadius="$card" backgroundColor="$muted" />
+        <XStack alignItems="center" justifyContent="space-between">
+          <XStack alignItems="center" gap="$2">
+            <Star size={16} color="#F59E0B" />
+            <Text fontSize="$3" fontWeight="$7">
+              4.8 rating
+            </Text>
+          </XStack>
+          <Share2 size={16} color="#0F172A" />
+        </XStack>
+      </MockupCard>
+
+      <XStack gap="$2">
+        {['Like', 'Save', 'Share'].map((action) => (
+          <MockupCard key={action} flex={1} padding="$3" alignItems="center">
+            <Text fontSize="$3" fontWeight="$7">
+              {action}
+            </Text>
+          </MockupCard>
+        ))}
+      </XStack>
+    </MockupFrame>
+  );
+}