57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Palette, Sparkles } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
const palettes = ['#FDE68A', '#F9A8D4', '#A5B4FC', '#6EE7B7', '#FCA5A5'];
|
|
|
|
export default function MockupHome10Moodboard() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 10 - Moodboard"
|
|
subtitle="Palette + prompts to set the vibe"
|
|
backgroundStyle={{
|
|
backgroundImage: 'linear-gradient(180deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.95))',
|
|
}}
|
|
>
|
|
<MockupCard>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Palette size={18} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Moodboard
|
|
</Text>
|
|
</XStack>
|
|
<MockupLabel>Pick a vibe for the next wave of shots.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$2">
|
|
{palettes.map((color) => (
|
|
<YStack
|
|
key={color}
|
|
flex={1}
|
|
height={54}
|
|
borderRadius="$pill"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
))}
|
|
</XStack>
|
|
|
|
<MockupCard>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Sparkles size={16} color="#F43F5E" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Prompt ideas
|
|
</Text>
|
|
</XStack>
|
|
<XStack gap="$2">
|
|
{[1, 2, 3].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={80} />
|
|
))}
|
|
</XStack>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|