57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { Camera, CheckCircle2 } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function MockupHome06CalmFocus() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 06 - Calm Focus"
|
|
subtitle="Minimal home with one primary action"
|
|
backgroundStyle={{
|
|
backgroundImage: 'linear-gradient(180deg, rgba(236, 254, 255, 0.9), rgba(255, 255, 255, 0.95))',
|
|
}}
|
|
>
|
|
<YStack
|
|
padding="$5"
|
|
borderRadius="$card"
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
gap="$3"
|
|
>
|
|
<Text fontSize="$6" fontFamily="$display" fontWeight="$8">
|
|
Capture something quiet
|
|
</Text>
|
|
<MockupLabel>One great photo beats five ok ones.</MockupLabel>
|
|
<Button size="$4" backgroundColor="$primary" borderRadius="$pill">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Camera size={18} color="white" />
|
|
<Text fontSize="$3" color="white">
|
|
Open camera
|
|
</Text>
|
|
</XStack>
|
|
</Button>
|
|
</YStack>
|
|
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Uploads today
|
|
</Text>
|
|
<XStack alignItems="center" gap="$2">
|
|
<CheckCircle2 size={16} color="#22C55E" />
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
12 approved
|
|
</Text>
|
|
</XStack>
|
|
</XStack>
|
|
<MockupLabel>Everything is synced and safe.</MockupLabel>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|