upgrade to tamagui v2 and guest pwa overhaul
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import { YStack, XStack } from '@tamagui/stacks';
|
||||
import { SizableText as Text } from '@tamagui/text';
|
||||
import { Button } from '@tamagui/button';
|
||||
import { Camera, Zap, Users } from 'lucide-react';
|
||||
import MockupFrame from './MockupFrame';
|
||||
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
||||
|
||||
export default function MockupHome01PulseHero() {
|
||||
return (
|
||||
<MockupFrame
|
||||
title="Home 01 - Pulse Hero"
|
||||
subtitle="Live stats + big capture call-to-action"
|
||||
backgroundStyle={{
|
||||
backgroundImage: 'radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.16), transparent 50%)',
|
||||
}}
|
||||
>
|
||||
<MockupCard>
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<YStack gap="$1">
|
||||
<Text fontSize="$3" fontWeight="$7">
|
||||
Sofia + Luca
|
||||
</Text>
|
||||
<MockupLabel>Reception in progress</MockupLabel>
|
||||
</YStack>
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<Zap size={16} color="#F97316" />
|
||||
<Text fontSize="$3" fontWeight="$7">
|
||||
Live
|
||||
</Text>
|
||||
</XStack>
|
||||
</XStack>
|
||||
</MockupCard>
|
||||
|
||||
<YStack
|
||||
padding="$5"
|
||||
borderRadius="$card"
|
||||
backgroundColor="$surface"
|
||||
borderWidth={1}
|
||||
borderColor="$borderColor"
|
||||
alignItems="center"
|
||||
gap="$3"
|
||||
>
|
||||
<Camera size={28} color="#0F172A" />
|
||||
<Text fontSize="$7" fontFamily="$display" fontWeight="$8">
|
||||
Capture the next moment
|
||||
</Text>
|
||||
<MockupLabel>Share it instantly with the room.</MockupLabel>
|
||||
<Button size="$4" backgroundColor="$primary" borderRadius="$pill">
|
||||
Start capture
|
||||
</Button>
|
||||
</YStack>
|
||||
|
||||
<XStack gap="$3">
|
||||
<MockupCard flex={1} alignItems="center">
|
||||
<Text fontSize="$6" fontWeight="$8">
|
||||
128
|
||||
</Text>
|
||||
<MockupLabel>Photos today</MockupLabel>
|
||||
</MockupCard>
|
||||
<MockupCard flex={1} alignItems="center">
|
||||
<Users size={18} color="#0F172A" />
|
||||
<Text fontSize="$4" fontWeight="$7">
|
||||
54 guests
|
||||
</Text>
|
||||
</MockupCard>
|
||||
</XStack>
|
||||
</MockupFrame>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user