upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { Camera, UploadCloud, Sparkles, Zap } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+export default function Mockup01CaptureOrbit() {
+  return (
+    <MockupFrame
+      title="Mockup 01 - Capture Orbit"
+      subtitle="Full-screen capture hub with orbiting actions"
+      backgroundStyle={{
+        backgroundImage: 'radial-gradient(circle at 50% 10%, rgba(248, 113, 113, 0.18), transparent 55%)',
+      }}
+    >
+      <MockupCard padding="$3">
+        <XStack alignItems="center" justifyContent="space-between">
+          <YStack gap="$1">
+            <Text fontSize="$3" fontWeight="$7">
+              Event energy
+            </Text>
+            <MockupLabel>87 moments today</MockupLabel>
+          </YStack>
+          <XStack alignItems="center" gap="$2">
+            <Zap size={16} color="#F97316" />
+            <Text fontSize="$3" fontWeight="$7">
+              Live
+            </Text>
+          </XStack>
+        </XStack>
+      </MockupCard>
+
+      <YStack alignItems="center" gap="$4">
+        <YStack
+          width={260}
+          height={260}
+          borderRadius={130}
+          backgroundColor="$surface"
+          borderWidth={1}
+          borderColor="$borderColor"
+          alignItems="center"
+          justifyContent="center"
+          gap="$2"
+          style={{ boxShadow: '0 12px 40px rgba(15, 23, 42, 0.08)' }}
+        >
+          <Camera size={32} color="#0F172A" />
+          <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
+            Tap to capture
+          </Text>
+          <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
+            Capture
+          </Button>
+        </YStack>
+
+        <XStack gap="$3">
+          {[
+            { icon: <UploadCloud size={20} color="#0F172A" />, label: 'Upload' },
+            { icon: <Sparkles size={20} color="#0F172A" />, label: 'Prompt' },
+            { icon: <Camera size={20} color="#0F172A" />, label: 'Burst' },
+          ].map((item) => (
+            <YStack
+              key={item.label}
+              width={72}
+              height={72}
+              borderRadius={36}
+              backgroundColor="$surface"
+              borderWidth={1}
+              borderColor="$borderColor"
+              alignItems="center"
+              justifyContent="center"
+              gap="$1"
+            >
+              {item.icon}
+              <Text fontSize="$2" fontWeight="$6">
+                {item.label}
+              </Text>
+            </YStack>
+          ))}
+        </XStack>
+      </YStack>
+
+      <MockupCard>
+        <XStack alignItems="center" justifyContent="space-between">
+          <YStack gap="$1">
+            <Text fontSize="$3" fontWeight="$7">
+              Upload queue
+            </Text>
+            <MockupLabel>3 queued, 1 sending</MockupLabel>
+          </YStack>
+          <Button size="$3" backgroundColor="$surface" borderRadius="$pill" borderWidth={1} borderColor="$borderColor">
+            View
+          </Button>
+        </XStack>
+      </MockupCard>
+    </MockupFrame>
+  );
+}