upgrade to tamagui v2 and guest pwa overhaul

2026-02-02 13:01:20 +01:00
parent 2e78f3ab8d
commit 7c6e14ffe2
168 changed files with 47462 additions and 8914 deletions
--- a/resources/js/guest-v2/screens/mockups/Mockup07SwipeDeck.tsx
+++ b/resources/js/guest-v2/screens/mockups/Mockup07SwipeDeck.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Heart, X, Send } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+export default function Mockup07SwipeDeck() {
+  return (
+    <MockupFrame
+      title="Mockup 07 - Swipe Deck"
+      subtitle="Stacked cards for rapid review"
+      backgroundStyle={{
+        backgroundImage: 'radial-gradient(circle at 80% 0%, rgba(190, 24, 93, 0.12), transparent 50%)',
+      }}
+    >
+      <MockupCard padding="$3">
+        <Text fontSize="$4" fontWeight="$7">
+          Review queue
+        </Text>
+        <MockupLabel>Swipe to approve or skip highlights.</MockupLabel>
+      </MockupCard>
+
+      <YStack height={360} position="relative">
+        <MockupCard
+          height={320}
+          position="absolute"
+          left={0}
+          right={0}
+          style={{ transform: 'translateY(24px) rotate(-2deg)' }}
+        >
+          <Text fontSize="$4" fontWeight="$7">
+            Guest capture 3
+          </Text>
+        </MockupCard>
+        <MockupCard
+          height={330}
+          position="absolute"
+          left={0}
+          right={0}
+          style={{ transform: 'translateY(12px) rotate(1deg)' }}
+        >
+          <Text fontSize="$4" fontWeight="$7">
+            Guest capture 2
+          </Text>
+        </MockupCard>
+        <MockupCard height={340} position="absolute" left={0} right={0}>
+          <Text fontSize="$6" fontFamily="$display" fontWeight="$8">
+            Guest capture 1
+          </Text>
+          <MockupLabel>Tap for full view</MockupLabel>
+          <YStack flex={1} borderRadius="$card" backgroundColor="$muted" />
+        </MockupCard>
+      </YStack>
+
+      <XStack gap="$3" justifyContent="center">
+        <YStack
+          width={64}
+          height={64}
+          borderRadius={32}
+          backgroundColor="$surface"
+          borderWidth={1}
+          borderColor="$borderColor"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <X size={20} color="#EF4444" />
+        </YStack>
+        <YStack
+          width={72}
+          height={72}
+          borderRadius={36}
+          backgroundColor="$primary"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Heart size={24} color="white" />
+        </YStack>
+        <YStack
+          width={64}
+          height={64}
+          borderRadius={32}
+          backgroundColor="$surface"
+          borderWidth={1}
+          borderColor="$borderColor"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Send size={20} color="#0F172A" />
+        </YStack>
+      </XStack>
+    </MockupFrame>
+  );
+}