upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { Sparkles, Trophy, Play } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+export default function Mockup03PromptQuest() {
+  return (
+    <MockupFrame
+      title="Mockup 03 - Prompt Quest"
+      subtitle="Prompt hero with progress and task ladder"
+    >
+      <MockupCard>
+        <XStack alignItems="center" gap="$2">
+          <Sparkles size={18} color="#F43F5E" />
+          <Text fontSize="$3" fontWeight="$7">
+            Prompt of the hour
+          </Text>
+        </XStack>
+        <Text fontSize="$7" fontFamily="$display" fontWeight="$8">
+          Capture the boldest dance move
+        </Text>
+        <MockupLabel>Earn 120 points for completing this prompt.</MockupLabel>
+        <YStack gap="$2">
+          <XStack alignItems="center" justifyContent="space-between">
+            <Text fontSize="$2" fontWeight="$7">
+              Quest progress
+            </Text>
+            <Text fontSize="$2" fontWeight="$7">
+              65%
+            </Text>
+          </XStack>
+          <YStack backgroundColor="$muted" borderRadius="$pill" height={10} overflow="hidden">
+            <YStack backgroundColor="$primary" width="65%" height={10} />
+          </YStack>
+        </YStack>
+        <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
+          Start capture
+        </Button>
+      </MockupCard>
+
+      <YStack gap="$3">
+        {[1, 2, 3].map((item) => (
+          <MockupCard key={item} padding="$3">
+            <XStack alignItems="center" justifyContent="space-between">
+              <YStack gap="$1">
+                <Text fontSize="$4" fontWeight="$7">
+                  Task {item}
+                </Text>
+                <MockupLabel>Quick challenge to spark the moment.</MockupLabel>
+              </YStack>
+              <XStack alignItems="center" gap="$2">
+                <Trophy size={16} color="#F59E0B" />
+                <Text fontSize="$2" fontWeight="$7">
+                  +50
+                </Text>
+              </XStack>
+            </XStack>
+            <Button size="$3" backgroundColor="$surface" borderRadius="$pill" borderWidth={1} borderColor="$borderColor">
+              <XStack alignItems="center" gap="$2">
+                <Play size={14} color="#0F172A" />
+                <Text fontSize="$2" fontWeight="$7">
+                  Play task
+                </Text>
+              </XStack>
+            </Button>
+          </MockupCard>
+        ))}
+      </YStack>
+    </MockupFrame>
+  );
+}