upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { CheckCircle2, Circle, ListChecks } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
+
+const tasks = [
+  { id: 1, label: 'Capture the first toast', done: true },
+  { id: 2, label: 'Find the loudest laugh', done: false },
+  { id: 3, label: 'Snap a detail shot', done: false },
+  { id: 4, label: 'Find the dance duo', done: true },
+];
+
+export default function Mockup09ChecklistFlow() {
+  return (
+    <MockupFrame
+      title="Mockup 09 - Checklist Flow"
+      subtitle="Tasks checklist paired with gallery progress"
+      backgroundStyle={{
+        backgroundImage: 'linear-gradient(180deg, rgba(244, 244, 255, 0.8), rgba(255, 255, 255, 0.9))',
+      }}
+    >
+      <MockupCard>
+        <XStack alignItems="center" gap="$2">
+          <ListChecks size={18} color="#0F172A" />
+          <Text fontSize="$4" fontWeight="$7">
+            Today’s checklist
+          </Text>
+        </XStack>
+        <MockupLabel>Complete tasks to unlock more prompts.</MockupLabel>
+      </MockupCard>
+
+      <MockupCard>
+        <YStack gap="$2">
+          {tasks.map((task) => (
+            <XStack key={task.id} alignItems="center" gap="$2">
+              {task.done ? (
+                <CheckCircle2 size={18} color="#22C55E" />
+              ) : (
+                <Circle size={18} color="#94A3B8" />
+              )}
+              <Text fontSize="$3" fontWeight="$6">
+                {task.label}
+              </Text>
+            </XStack>
+          ))}
+        </YStack>
+      </MockupCard>
+
+      <MockupCard>
+        <Text fontSize="$3" fontWeight="$7">
+          Progress gallery
+        </Text>
+        <XStack gap="$2">
+          {[1, 2, 3, 4].map((tile) => (
+            <MockupTile key={tile} flex={1} height={70} />
+          ))}
+        </XStack>
+      </MockupCard>
+    </MockupFrame>
+  );
+}