66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Camera, ArrowUpRight } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function MockupHome07MomentStack() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 07 - Moment Stack"
|
|
subtitle="Stacked cards for rapid capture"
|
|
backgroundStyle={{
|
|
backgroundImage: 'radial-gradient(circle at 70% 0%, rgba(14, 165, 233, 0.15), transparent 50%)',
|
|
}}
|
|
>
|
|
<MockupCard>
|
|
<Text fontSize="$5" fontFamily="$display" fontWeight="$8">
|
|
Moment stack
|
|
</Text>
|
|
<MockupLabel>Start at the top and keep capturing.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<YStack height={320} position="relative">
|
|
<MockupCard
|
|
height={220}
|
|
position="absolute"
|
|
left={0}
|
|
right={0}
|
|
style={{ transform: 'translateY(28px) rotate(-2deg)' }}
|
|
>
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Prompt: hands in the air
|
|
</Text>
|
|
</MockupCard>
|
|
<MockupCard
|
|
height={230}
|
|
position="absolute"
|
|
left={0}
|
|
right={0}
|
|
style={{ transform: 'translateY(14px) rotate(1deg)' }}
|
|
>
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Prompt: candid laugh
|
|
</Text>
|
|
</MockupCard>
|
|
<MockupCard height={240} position="absolute" left={0} right={0}>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$5" fontWeight="$8">
|
|
Prompt: dance floor
|
|
</Text>
|
|
<ArrowUpRight size={18} color="#0F172A" />
|
|
</XStack>
|
|
<MockupLabel>Tap to start this capture.</MockupLabel>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Camera size={18} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Open camera
|
|
</Text>
|
|
</XStack>
|
|
</MockupCard>
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|