upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Filter, Image as ImageIcon } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupChip, MockupLabel, MockupTile } from './MockupPrimitives';
+
+export default function Mockup02GalleryMosaic() {
+  return (
+    <MockupFrame
+      title="Mockup 02 - Gallery Mosaic"
+      subtitle="Image-first grid with fast filters"
+      backgroundStyle={{
+        backgroundImage: 'linear-gradient(160deg, rgba(248, 250, 252, 0.9), rgba(255, 245, 240, 0.9))',
+      }}
+    >
+      <MockupCard padding="$3">
+        <XStack alignItems="center" justifyContent="space-between">
+          <XStack alignItems="center" gap="$2">
+            <ImageIcon size={18} color="#0F172A" />
+            <Text fontSize="$4" fontWeight="$8">
+              Gallery
+            </Text>
+          </XStack>
+          <Filter size={18} color="#0F172A" />
+        </XStack>
+        <XStack gap="$2" flexWrap="wrap">
+          {['All', 'Friends', 'Dancefloor', 'Candid'].map((chip) => (
+            <MockupChip key={chip}>
+              <Text fontSize="$2" fontWeight="$6">
+                {chip}
+              </Text>
+            </MockupChip>
+          ))}
+        </XStack>
+      </MockupCard>
+
+      <XStack gap="$3">
+        <YStack flex={1} gap="$3">
+          <MockupTile height={160}>
+            <MockupLabel>Hero moment</MockupLabel>
+          </MockupTile>
+          <XStack gap="$3">
+            <MockupTile flex={1} height={90} />
+            <MockupTile flex={1} height={90} />
+          </XStack>
+          <MockupTile height={120} />
+        </YStack>
+        <YStack flex={1} gap="$3">
+          <XStack gap="$3">
+            <MockupTile flex={1} height={110} />
+            <MockupTile flex={1} height={110} />
+          </XStack>
+          <MockupTile height={180}>
+            <MockupLabel>Live spotlight</MockupLabel>
+          </MockupTile>
+          <MockupTile height={90} />
+        </YStack>
+      </XStack>
+
+      <MockupCard>
+        <XStack alignItems="center" justifyContent="space-between">
+          <YStack gap="$1">
+            <Text fontSize="$3" fontWeight="$7">
+              Newest uploads
+            </Text>
+            <MockupLabel>Refreshes every 10s</MockupLabel>
+          </YStack>
+          <Text fontSize="$2" fontWeight="$7">
+            22 new
+          </Text>
+        </XStack>
+      </MockupCard>
+    </MockupFrame>
+  );
+}