upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { XStack, YStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { ArrowLeft } from 'lucide-react';
+
+type MockupFrameProps = {
+  title: string;
+  subtitle?: string;
+  hideHeader?: boolean;
+  backgroundStyle?: React.CSSProperties;
+  children: React.ReactNode;
+};
+
+export default function MockupFrame({
+  title,
+  subtitle,
+  hideHeader,
+  backgroundStyle,
+  children,
+}: MockupFrameProps) {
+  const navigate = useNavigate();
+
+  return (
+    <YStack
+      minHeight="100vh"
+      backgroundColor="$background"
+      padding="$4"
+      gap="$4"
+      style={backgroundStyle}
+    >
+      {!hideHeader && (
+        <XStack alignItems="center" justifyContent="space-between" gap="$3">
+          <Button
+            size="$3"
+            backgroundColor="$surface"
+            borderRadius="$pill"
+            borderWidth={1}
+            borderColor="$borderColor"
+            onPress={() => navigate('/mockups')}
+          >
+            <XStack alignItems="center" gap="$2">
+              <ArrowLeft size={16} color="#0F172A" />
+              <Text fontSize="$3" fontWeight="$7">
+                Back
+              </Text>
+            </XStack>
+          </Button>
+          <YStack alignItems="flex-end" gap="$1">
+            <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text fontSize="$2" color="$color" opacity={0.6}>
+                {subtitle}
+              </Text>
+            ) : null}
+          </YStack>
+        </XStack>
+      )}
+      {children}
+    </YStack>
+  );
+}