upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { ArrowRight, Home } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+const mockups = [
+  { id: '1', title: 'Pulse Hero', description: 'Live stats + big capture call-to-action.' },
+  { id: '2', title: 'Story Rings', description: 'Circular quick actions with story chips.' },
+  { id: '3', title: 'Live Stream', description: 'Highlight reel + action strip.' },
+  { id: '4', title: 'Task Sprint', description: 'Prompt ladder + progress meter.' },
+  { id: '5', title: 'Gallery First', description: 'Grid preview + quick filters.' },
+  { id: '6', title: 'Calm Focus', description: 'Minimal home with one primary action.' },
+  { id: '7', title: 'Moment Stack', description: 'Stacked cards for rapid capture.' },
+  { id: '8', title: 'Countdown Stage', description: 'Event timing + live show entry.' },
+  { id: '9', title: 'Share Hub', description: 'Invite + QR + guest sharing tools.' },
+  { id: '10', title: 'Moodboard', description: 'Palette + prompts to set the vibe.' },
+];
+
+export default function MockupsHomeIndexScreen() {
+  const navigate = useNavigate();
+
+  return (
+    <MockupFrame
+      title="Home concepts"
+      subtitle="10 start screen ideas for the new guest PWA"
+    >
+      <MockupCard padding="$3">
+        <XStack alignItems="center" gap="$2">
+          <Home size={18} color="#0F172A" />
+          <Text fontSize="$4" fontWeight="$8">
+            Start screen concepts
+          </Text>
+        </XStack>
+        <MockupLabel>Pick one as the north star for v2.</MockupLabel>
+      </MockupCard>
+
+      <YStack gap="$3">
+        {mockups.map((mockup) => (
+          <MockupCard key={mockup.id} gap="$2">
+            <XStack alignItems="center" justifyContent="space-between">
+              <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
+                {mockup.title}
+              </Text>
+              <Button
+                size="$3"
+                backgroundColor="$primary"
+                borderRadius="$pill"
+                onPress={() => navigate(`/mockups/home/${mockup.id}`)}
+              >
+                <XStack alignItems="center" gap="$2">
+                  <Text fontSize="$3" color="white">
+                    View
+                  </Text>
+                  <ArrowRight size={16} color="white" />
+                </XStack>
+              </Button>
+            </XStack>
+            <MockupLabel>{mockup.description}</MockupLabel>
+          </MockupCard>
+        ))}
+      </YStack>
+    </MockupFrame>
+  );
+}