upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Camera, Grid2x2, Zap, UploadCloud } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
+
+export default function Mockup06SplitCapture() {
+  return (
+    <MockupFrame
+      title="Mockup 06 - Split Capture"
+      subtitle="Camera preview plus quick tools and queue"
+      backgroundStyle={{
+        backgroundImage: 'linear-gradient(180deg, rgba(240, 249, 255, 0.95), rgba(255, 255, 255, 0.95))',
+      }}
+    >
+      <YStack gap="$3">
+        <YStack
+          height={260}
+          borderRadius="$card"
+          backgroundColor="$muted"
+          borderWidth={1}
+          borderColor="$borderColor"
+          alignItems="center"
+          justifyContent="center"
+          gap="$2"
+        >
+          <Camera size={32} color="#0F172A" />
+          <Text fontSize="$4" fontWeight="$7">
+            Live preview
+          </Text>
+          <MockupLabel>Tap anywhere to focus.</MockupLabel>
+        </YStack>
+
+        <XStack gap="$3">
+          {[
+            { icon: <Grid2x2 size={18} color="#0F172A" />, label: 'Grid' },
+            { icon: <Zap size={18} color="#F97316" />, label: 'Flash' },
+            { icon: <UploadCloud size={18} color="#0F172A" />, label: 'Upload' },
+          ].map((tool) => (
+            <MockupCard key={tool.label} flex={1} padding="$3" alignItems="center">
+              {tool.icon}
+              <Text fontSize="$3" fontWeight="$7">
+                {tool.label}
+              </Text>
+            </MockupCard>
+          ))}
+        </XStack>
+      </YStack>
+
+      <MockupCard>
+        <XStack alignItems="center" justifyContent="space-between">
+          <Text fontSize="$4" fontWeight="$7">
+            Upload queue
+          </Text>
+          <MockupLabel>2 waiting</MockupLabel>
+        </XStack>
+        <XStack gap="$2">
+          {[1, 2, 3].map((tile) => (
+            <MockupTile key={tile} flex={1} height={72} />
+          ))}
+        </XStack>
+      </MockupCard>
+    </MockupFrame>
+  );
+}