upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Compass, Image as ImageIcon, Sparkles, UploadCloud } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+export default function Mockup05CompassHub() {
+  return (
+    <MockupFrame
+      title="Mockup 05 - Compass Hub"
+      subtitle="Quadrant navigation around a central action"
+    >
+      <YStack position="relative" height={360} gap="$3">
+        <XStack gap="$3">
+          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
+            <ImageIcon size={20} color="#0F172A" />
+            <Text fontSize="$3" fontWeight="$7">
+              Gallery
+            </Text>
+            <MockupLabel>Browse moments</MockupLabel>
+          </MockupCard>
+          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
+            <UploadCloud size={20} color="#0F172A" />
+            <Text fontSize="$3" fontWeight="$7">
+              Upload
+            </Text>
+            <MockupLabel>Quick add</MockupLabel>
+          </MockupCard>
+        </XStack>
+        <XStack gap="$3">
+          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
+            <Sparkles size={20} color="#0F172A" />
+            <Text fontSize="$3" fontWeight="$7">
+              Tasks
+            </Text>
+            <MockupLabel>Earn points</MockupLabel>
+          </MockupCard>
+          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
+            <Compass size={20} color="#0F172A" />
+            <Text fontSize="$3" fontWeight="$7">
+              Live show
+            </Text>
+            <MockupLabel>See highlights</MockupLabel>
+          </MockupCard>
+        </XStack>
+
+        <YStack
+          position="absolute"
+          top="50%"
+          left="50%"
+          width={110}
+          height={110}
+          borderRadius={55}
+          backgroundColor="$primary"
+          alignItems="center"
+          justifyContent="center"
+          style={{ transform: 'translate(-50%, -50%)' }}
+        >
+          <Text fontSize="$4" fontWeight="$8" color="white">
+            Capture
+          </Text>
+        </YStack>
+      </YStack>
+
+      <MockupCard>
+        <XStack alignItems="center" justifyContent="space-between">
+          <YStack gap="$1">
+            <Text fontSize="$3" fontWeight="$7">
+              Event compass
+            </Text>
+            <MockupLabel>Tap any quadrant to jump.</MockupLabel>
+          </YStack>
+          <Text fontSize="$2" fontWeight="$7">
+            4 zones
+          </Text>
+        </XStack>
+      </MockupCard>
+    </MockupFrame>
+  );
+}