3408 lines
112 KiB
Plaintext
3408 lines
112 KiB
Plaintext
{
|
|
"version": "2.8",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "bi8Au",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "AI Video App",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "C5k5y",
|
|
"name": "topNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "MnEWE",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "AI Video",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "k3CQZ",
|
|
"name": "creditsBadge",
|
|
"height": 32,
|
|
"fill": "#8B5CF620",
|
|
"cornerRadius": 14,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF620",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"gap": 6,
|
|
"padding": [
|
|
6,
|
|
12
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "EWt3i",
|
|
"name": "creditsIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#8B5CF6"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "lqmbX",
|
|
"name": "creditsText",
|
|
"fill": "#8B5CF6",
|
|
"content": "1,280",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "oJ7P2",
|
|
"name": "contentArea",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": [
|
|
0,
|
|
20,
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "bK6o6",
|
|
"name": "tabRow",
|
|
"width": "fill_container",
|
|
"height": 40,
|
|
"gap": 8,
|
|
"padding": [
|
|
4,
|
|
0
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "M6pir",
|
|
"name": "tabAll",
|
|
"height": 32,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 20,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF630",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 4
|
|
},
|
|
"gap": 4,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "dKgTN",
|
|
"name": "tabAllText",
|
|
"fill": "#FFFFFF",
|
|
"content": "All",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "cqBRL",
|
|
"name": "tabTrending",
|
|
"height": 32,
|
|
"fill": "#F4F4F5",
|
|
"cornerRadius": 20,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"gap": 4,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "eLVLh",
|
|
"name": "tabTrendingText",
|
|
"fill": "#71717A",
|
|
"content": "Trending",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Bfa7U",
|
|
"name": "tabNew",
|
|
"height": 32,
|
|
"fill": "#F4F4F5",
|
|
"cornerRadius": 20,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"gap": 4,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "JEsyS",
|
|
"name": "tabNewText",
|
|
"fill": "#71717A",
|
|
"content": "New",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "2AP4w",
|
|
"name": "gridContainer",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Ec101",
|
|
"name": "row1",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "CthJD",
|
|
"name": "card1",
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Q8BZG",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "card1Top",
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1772942470719.png",
|
|
"mode": "fill"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "C8ERr",
|
|
"x": 58.5,
|
|
"y": 100,
|
|
"name": "card1PlayBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FFFFFFE6",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000020",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "GL9ZN",
|
|
"name": "card1PlayIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "XhQqY",
|
|
"x": 103,
|
|
"y": 12,
|
|
"name": "card1Credits",
|
|
"height": 24,
|
|
"fill": "#00000099",
|
|
"cornerRadius": 14,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "nREv6",
|
|
"name": "card1CreditsIcon",
|
|
"width": 12,
|
|
"height": 12,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "hMnf5",
|
|
"name": "card1CreditsText",
|
|
"fill": "#FFFFFF",
|
|
"content": "50",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "8CMbL",
|
|
"x": 12,
|
|
"y": 192,
|
|
"name": "card1Btn",
|
|
"width": 141,
|
|
"height": 44,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "UOYDo",
|
|
"name": "card1BtnText",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Similar",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BRpaI",
|
|
"name": "card2",
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NlQjP",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "card1Top",
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1772942485221.png",
|
|
"mode": "fill"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "u4Uhx",
|
|
"x": 58.5,
|
|
"y": 100,
|
|
"name": "card1PlayBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FFFFFFE6",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000020",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "NVypk",
|
|
"name": "card1PlayIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PMX4R",
|
|
"x": 103,
|
|
"y": 12,
|
|
"name": "card1Credits",
|
|
"height": 24,
|
|
"fill": "#00000099",
|
|
"cornerRadius": 14,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Rr2KZ",
|
|
"name": "card1CreditsIcon",
|
|
"width": 12,
|
|
"height": 12,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SxYvO",
|
|
"name": "card1CreditsText",
|
|
"fill": "#FFFFFF",
|
|
"content": "50",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5Hefn",
|
|
"x": 12,
|
|
"y": 192,
|
|
"name": "card1Btn",
|
|
"width": 141,
|
|
"height": 44,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "VR6T8",
|
|
"name": "card1BtnText",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Similar",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "q7PGB",
|
|
"name": "row2",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "5dW6M",
|
|
"name": "card3",
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "uJwF2",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "card3Top",
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1772942500640.png",
|
|
"mode": "fill"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "6OLca",
|
|
"x": 58.5,
|
|
"y": 100,
|
|
"name": "card3PlayBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FFFFFFE6",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000020",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "0M694",
|
|
"name": "card3PlayIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "eeJZ9",
|
|
"x": 103,
|
|
"y": 12,
|
|
"name": "card3Credits",
|
|
"height": 24,
|
|
"fill": "#00000099",
|
|
"cornerRadius": 14,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "f0no7",
|
|
"name": "card3CreditsIcon",
|
|
"width": 12,
|
|
"height": 12,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "c0zKx",
|
|
"name": "card3CreditsText",
|
|
"fill": "#FFFFFF",
|
|
"content": "80",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "aMSxC",
|
|
"x": 12,
|
|
"y": 192,
|
|
"name": "card3Btn",
|
|
"width": 141,
|
|
"height": 44,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "DEvyH",
|
|
"name": "card3BtnText",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Similar",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ObYn3",
|
|
"name": "card4",
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "FUx1Q",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "card1Top",
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1772942514836.png",
|
|
"mode": "fill"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "zIoMr",
|
|
"x": 58.5,
|
|
"y": 100,
|
|
"name": "card1PlayBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FFFFFFE6",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000020",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "tK64P",
|
|
"name": "card1PlayIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "jFVjQ",
|
|
"x": 103,
|
|
"y": 12,
|
|
"name": "card1Credits",
|
|
"height": 24,
|
|
"fill": "#00000099",
|
|
"cornerRadius": 14,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "fnoUt",
|
|
"name": "card1CreditsIcon",
|
|
"width": 12,
|
|
"height": 12,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "bkPE5",
|
|
"name": "card1CreditsText",
|
|
"fill": "#FFFFFF",
|
|
"content": "120",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "dHeWm",
|
|
"x": 12,
|
|
"y": 192,
|
|
"name": "card1Btn",
|
|
"width": 141,
|
|
"height": 44,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "HWGSC",
|
|
"name": "card1BtnText",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Similar",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "1E5nB",
|
|
"name": "row3",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "vClnh",
|
|
"name": "card5",
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ZCkHy",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "card1Top",
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1772942527064.png",
|
|
"mode": "fill"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "AckkY",
|
|
"x": 58.5,
|
|
"y": 100,
|
|
"name": "card1PlayBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FFFFFFE6",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000020",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "f11MA",
|
|
"name": "card1PlayIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ewFxH",
|
|
"x": 103,
|
|
"y": 12,
|
|
"name": "card1Credits",
|
|
"height": 24,
|
|
"fill": "#00000099",
|
|
"cornerRadius": 14,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "FL7O1",
|
|
"name": "card1CreditsIcon",
|
|
"width": 12,
|
|
"height": 12,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Fz5Rc",
|
|
"name": "card1CreditsText",
|
|
"fill": "#FFFFFF",
|
|
"content": "35",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "aRh2M",
|
|
"x": 12,
|
|
"y": 192,
|
|
"name": "card1Btn",
|
|
"width": 141,
|
|
"height": 44,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "BqonJ",
|
|
"name": "card1BtnText",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Similar",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "9DhBm",
|
|
"name": "card6",
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "WqBrj",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "card1Top",
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1772942542657.png",
|
|
"mode": "fill"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "YgQME",
|
|
"x": 58.5,
|
|
"y": 100,
|
|
"name": "card1PlayBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FFFFFFE6",
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000020",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "6F1rQ",
|
|
"name": "card1PlayIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Xpvb9",
|
|
"x": 103,
|
|
"y": 12,
|
|
"name": "card1Credits",
|
|
"height": 24,
|
|
"fill": "#00000099",
|
|
"cornerRadius": 14,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "oHhXu",
|
|
"name": "card1CreditsIcon",
|
|
"width": 12,
|
|
"height": 12,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "m6O84",
|
|
"name": "card1CreditsText",
|
|
"fill": "#FFFFFF",
|
|
"content": "90",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5qk7r",
|
|
"x": 12,
|
|
"y": 192,
|
|
"name": "card1Btn",
|
|
"width": 141,
|
|
"height": 44,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "bEBV9",
|
|
"name": "card1BtnText",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Similar",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "2SAja",
|
|
"name": "bottomNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000A",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": -4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"padding": 16,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NB1E6",
|
|
"name": "homeTab",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "i1MCD",
|
|
"name": "homeIcon",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "house",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "UZWIi",
|
|
"name": "homeLabel",
|
|
"fill": "#FFFFFF",
|
|
"content": "HOME",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5Bto3",
|
|
"name": "galleryTab",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "nwW1m",
|
|
"name": "galleryIcon",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "images",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "WhC7U",
|
|
"name": "galleryLabel",
|
|
"fill": "#A1A1AA",
|
|
"content": "GALLERY",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nLNXH",
|
|
"name": "profileTab",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "CovDA",
|
|
"name": "profileIcon",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "user",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "pBcjv",
|
|
"name": "profileLabel",
|
|
"fill": "#A1A1AA",
|
|
"content": "PROFILE",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "hpwBg",
|
|
"x": 440,
|
|
"y": 0,
|
|
"name": "Gallery Screen",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "EEASe",
|
|
"name": "topNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "2ZFKo",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "Gallery",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5yFeV",
|
|
"name": "creditsBadge",
|
|
"height": 32,
|
|
"fill": "#8B5CF620",
|
|
"cornerRadius": 14,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF620",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"gap": 6,
|
|
"padding": [
|
|
6,
|
|
12
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Do6yd",
|
|
"name": "creditsIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#8B5CF6"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "4UpGk",
|
|
"name": "creditsText",
|
|
"fill": "#8B5CF6",
|
|
"content": "1,280",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "4iOnO",
|
|
"name": "contentArea",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": [
|
|
0,
|
|
20,
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "g1ePM",
|
|
"name": "gridContainer",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "RDTYP",
|
|
"name": "row1",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tc8IY",
|
|
"name": "card1",
|
|
"metadata": {
|
|
"type": "unsplash",
|
|
"username": "loganvoss",
|
|
"link": "https://unsplash.com/@loganvoss",
|
|
"author": "Logan Voss"
|
|
},
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1763929272543-0df093e4f659?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzI5NDgxODV8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OOmgD",
|
|
"name": "card2",
|
|
"metadata": {
|
|
"type": "unsplash",
|
|
"username": "europeana",
|
|
"link": "https://unsplash.com/@europeana",
|
|
"author": "Europeana"
|
|
},
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1703592819695-ea63799b7315?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzI5NDgxODZ8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "pfDBM",
|
|
"name": "row2",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "rtx0r",
|
|
"name": "card3",
|
|
"metadata": {
|
|
"type": "unsplash",
|
|
"username": "anyachernykh",
|
|
"link": "https://unsplash.com/@anyachernykh",
|
|
"author": "Anya Chernykh"
|
|
},
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1764787435677-1321e12559e3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzI5NDgxODd8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5Frvd",
|
|
"name": "card4",
|
|
"metadata": {
|
|
"type": "unsplash",
|
|
"username": "ubeyonroad",
|
|
"link": "https://unsplash.com/@ubeyonroad",
|
|
"author": "ubeyonroad"
|
|
},
|
|
"clip": true,
|
|
"width": 165,
|
|
"height": 248,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1759264244741-7175af0b7e75?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzI5NDgxODd8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 24,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000D",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"layout": "none"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "VI1Dg",
|
|
"name": "bottomNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000A",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": -4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"padding": 16,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "IqiVT",
|
|
"name": "homeTab",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "fgjTN",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "house",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ykp6l",
|
|
"fill": "#A1A1AA",
|
|
"content": "HOME",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FKfTO",
|
|
"name": "galleryTab",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "0vHHH",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "images",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "wndfA",
|
|
"fill": "#FFFFFF",
|
|
"content": "GALLERY",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "4iQrj",
|
|
"name": "profileTab",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "tsHTE",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "user",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "GikYQ",
|
|
"fill": "#A1A1AA",
|
|
"content": "PROFILE",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KXeow",
|
|
"x": 900,
|
|
"y": 0,
|
|
"name": "Profile Screen",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ZE4Rm",
|
|
"name": "topNav",
|
|
"enabled": false,
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "XAJVJ",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "Profile",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "JkyAf",
|
|
"name": "creditsBadge",
|
|
"height": 32,
|
|
"fill": "#8B5CF620",
|
|
"cornerRadius": 14,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF620",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"gap": 6,
|
|
"padding": [
|
|
6,
|
|
12
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "TEZ9I",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#8B5CF6"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "sbbdw",
|
|
"fill": "#8B5CF6",
|
|
"content": "1,280",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "jCEqg",
|
|
"name": "contentArea",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
0,
|
|
20,
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "UeFHl",
|
|
"name": "profileHeader",
|
|
"width": "fill_container",
|
|
"height": 220,
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "EUNTw",
|
|
"name": "avatar",
|
|
"width": 80,
|
|
"height": 80,
|
|
"fill": "#E4E4E7",
|
|
"cornerRadius": 40,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "#8B5CF640"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "iq2SL",
|
|
"x": 20,
|
|
"y": 20,
|
|
"name": "avatarIcon",
|
|
"width": 40,
|
|
"height": 40,
|
|
"iconFontName": "user",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#71717A"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "8S5MJ",
|
|
"name": "userName",
|
|
"fill": "#18181B",
|
|
"content": "Alex Johnson",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "dR1Sf",
|
|
"name": "uidBadge",
|
|
"fill": "#F4F4F5",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"padding": [
|
|
6,
|
|
12
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "gbir3",
|
|
"fill": "#71717A",
|
|
"content": "UID 84920133",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "hOevr",
|
|
"name": "balanceSection",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mOfwH",
|
|
"name": "balanceLabel",
|
|
"fill": "#71717A",
|
|
"content": "AVAILABLE BALANCE",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "AiFQO",
|
|
"name": "balanceCard",
|
|
"width": "fill_container",
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 16,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "MwNHN",
|
|
"fill": "#8B5CF6",
|
|
"content": "1,280",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 24,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "DuIYs",
|
|
"name": "rechargeBtn",
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"gap": 6,
|
|
"padding": [
|
|
8,
|
|
14
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "VQdI5",
|
|
"fill": "#FFFFFF",
|
|
"content": "Recharge",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "h6zll",
|
|
"name": "menuSection",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "SLZ1a",
|
|
"name": "menuItem1",
|
|
"width": "fill_container",
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
14,
|
|
16
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "7LawH",
|
|
"fill": "#18181B",
|
|
"content": "Credit Store",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "sSk3F",
|
|
"width": 20,
|
|
"height": 20,
|
|
"iconFontName": "chevron-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FygC4",
|
|
"name": "menuItem2",
|
|
"width": "fill_container",
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 12,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
14,
|
|
16
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "coRfB",
|
|
"fill": "#18181B",
|
|
"content": "Settings",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "F0GlP",
|
|
"width": 20,
|
|
"height": 20,
|
|
"iconFontName": "chevron-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Ava7f",
|
|
"name": "bottomNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#0000000A",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": -4
|
|
},
|
|
"blur": 12
|
|
},
|
|
"padding": 16,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "gIvG7",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "XDqa1",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "house",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Z7oTj",
|
|
"fill": "#A1A1AA",
|
|
"content": "HOME",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "7vclf",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#00000000",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "U67U7",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "images",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "udpZp",
|
|
"fill": "#A1A1AA",
|
|
"content": "GALLERY",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "1Ynsh",
|
|
"width": 120,
|
|
"height": 41,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 26,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "qIEXP",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "user",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "w9SVq",
|
|
"fill": "#FFFFFF",
|
|
"content": "PROFILE",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tPjdN",
|
|
"x": 1340,
|
|
"y": 0,
|
|
"name": "Recharge Screen",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "6K6zM",
|
|
"name": "topNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "o6xEI",
|
|
"name": "backBtn",
|
|
"width": 40,
|
|
"height": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "jO9wi",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "arrow-left",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "hyvVe",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "Recharge",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Lt3TV",
|
|
"name": "navSpacer",
|
|
"width": 40,
|
|
"height": 40
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tRdXp",
|
|
"name": "tiersSection",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": [
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "B0vCq",
|
|
"name": "creditsSection",
|
|
"width": "fill_container",
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#8B5CF680"
|
|
},
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "xnizd",
|
|
"name": "creditsLabel",
|
|
"fill": "#FFFFFFCC",
|
|
"content": "Current Credits",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Y0Od9",
|
|
"name": "creditsDisplay",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "ZFHM9",
|
|
"width": 28,
|
|
"height": 28,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mzNty",
|
|
"fill": "#FFFFFF",
|
|
"content": "1,280",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 32,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "0qaAg",
|
|
"name": "tiersLabel",
|
|
"fill": "#18181B",
|
|
"content": "Select Tier",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "DC6NS",
|
|
"name": "tierNormal",
|
|
"width": "fill_container",
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Dx03C",
|
|
"name": "tierContent",
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "YZXkU",
|
|
"fill": "#18181B",
|
|
"content": "100 Credits",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Xvh9R",
|
|
"fill": "#71717A",
|
|
"content": "¥6",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "6Uie0",
|
|
"name": "buyBtn",
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "FmjH7",
|
|
"fill": "#FFFFFF",
|
|
"content": "Buy",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "YRaOG",
|
|
"name": "tierRecommended",
|
|
"width": 350,
|
|
"height": 80,
|
|
"fill": "#00000000",
|
|
"stroke": {
|
|
"thickness": 0,
|
|
"fill": "#00000000"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "osaPn",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "cardContent",
|
|
"width": 350,
|
|
"height": 80,
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "vrUpL",
|
|
"name": "tierContent",
|
|
"layout": "vertical",
|
|
"gap": 6,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "l4SNq",
|
|
"name": "creditsRec",
|
|
"fill": "#18181B",
|
|
"content": "500 Credits",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Rg4EJ",
|
|
"fill": "#71717A",
|
|
"content": "¥25 Save ¥5",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "szJrs",
|
|
"name": "btnWrapper",
|
|
"layout": "vertical",
|
|
"padding": [
|
|
15,
|
|
0,
|
|
0,
|
|
0
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "TOcfz",
|
|
"name": "buyBtn",
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "YB4Yj",
|
|
"fill": "#FFFFFF",
|
|
"content": "Buy",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "s95nA",
|
|
"x": 254,
|
|
"y": 1.7763568394002505e-15,
|
|
"name": "badge",
|
|
"rotation": -3.975693351829396e-16,
|
|
"fill": "#8B5CF620",
|
|
"cornerRadius": [
|
|
0,
|
|
16,
|
|
0,
|
|
16
|
|
],
|
|
"padding": [
|
|
4,
|
|
8
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "nB0Dm",
|
|
"fill": "#8B5CF6",
|
|
"content": "Recommended",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QlNz6",
|
|
"name": "tierPopular",
|
|
"width": 350,
|
|
"height": 80,
|
|
"fill": "#00000000",
|
|
"stroke": {
|
|
"thickness": 0,
|
|
"fill": "#00000000"
|
|
},
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "IE6aU",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "cardContent",
|
|
"width": 350,
|
|
"height": 80,
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "wJBVM",
|
|
"name": "tierContent",
|
|
"layout": "vertical",
|
|
"gap": 6,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "bDAlg",
|
|
"name": "creditsPop",
|
|
"fill": "#18181B",
|
|
"content": "1,000 Credits",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "BxrWP",
|
|
"fill": "#71717A",
|
|
"content": "¥45 Save ¥15",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Pi42v",
|
|
"name": "btnWrapper",
|
|
"layout": "vertical",
|
|
"padding": [
|
|
15,
|
|
0,
|
|
0,
|
|
0
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Yxmfw",
|
|
"name": "buyBtn",
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 12,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "JU1WR",
|
|
"fill": "#FFFFFF",
|
|
"content": "Buy",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "yHXJl",
|
|
"x": 263,
|
|
"y": 0,
|
|
"name": "badge",
|
|
"width": "fit_content(87)",
|
|
"height": "fit_content(21)",
|
|
"fill": "#F59E0B20",
|
|
"cornerRadius": [
|
|
0,
|
|
16,
|
|
0,
|
|
16
|
|
],
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QIebF",
|
|
"x": 8,
|
|
"y": 4,
|
|
"fill": "#F59E0B",
|
|
"content": "Most Popular",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mmLB5",
|
|
"x": 1780,
|
|
"y": 0,
|
|
"name": "Generate Video Screen",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "p4l77",
|
|
"name": "topNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "q4LqH",
|
|
"name": "backBtn",
|
|
"width": 40,
|
|
"height": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "uQJ0N",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "arrow-left",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "2wKUo",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "Generate Video",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "7F4MA",
|
|
"name": "navSpacer",
|
|
"width": 40,
|
|
"height": 40
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BNNL5",
|
|
"name": "contentArea",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ZbYgn",
|
|
"name": "creditsCard",
|
|
"width": "fill_container",
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#8B5CF680"
|
|
},
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "lSWYi",
|
|
"fill": "#FFFFFFCC",
|
|
"content": "Available Credits",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Vx9RC",
|
|
"name": "creditsDisplay",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "UkBge",
|
|
"width": 28,
|
|
"height": 28,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "AFJOp",
|
|
"fill": "#FFFFFF",
|
|
"content": "1,280",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 32,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "vA8QJ",
|
|
"name": "uploadArea",
|
|
"width": "fill_container",
|
|
"height": 280,
|
|
"fill": "#F4F4F5",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "1VkSk",
|
|
"width": 48,
|
|
"height": 48,
|
|
"iconFontName": "image-plus",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A1A1AA"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "flPeY",
|
|
"fill": "#71717A",
|
|
"textGrowth": "fixed-width",
|
|
"width": 280,
|
|
"content": "Please upload an image as the base for generation",
|
|
"textAlign": "center",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "yunXY",
|
|
"name": "generateBtn",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 16,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "94USx",
|
|
"fill": "#FFFFFF",
|
|
"content": "Generate Video",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RGKvY",
|
|
"name": "creditsCost",
|
|
"fill": "#FFFFFF30",
|
|
"cornerRadius": 8,
|
|
"gap": 4,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "GKJhs",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "sparkles",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "XSMlK",
|
|
"fill": "#FFFFFF",
|
|
"content": "50",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "qGs6n",
|
|
"x": 2220,
|
|
"y": 0,
|
|
"name": "Generate Video Progress Screen",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Qi840",
|
|
"name": "topNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "GrcXB",
|
|
"name": "backBtn",
|
|
"width": 40,
|
|
"height": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "xapUf",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "arrow-left",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "jj1wM",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "Generating",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "7yHyL",
|
|
"name": "navSpacer",
|
|
"width": 40,
|
|
"height": 40
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Gyt2o",
|
|
"name": "contentArea",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "rSN3T",
|
|
"name": "videoDisplay",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"height": 360,
|
|
"fill": "#18181B",
|
|
"cornerRadius": 16,
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "RKplP",
|
|
"width": 64,
|
|
"height": 64,
|
|
"iconFontName": "film",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#71717A"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Dx0c0",
|
|
"fill": "#71717A",
|
|
"content": "Video Preview",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YqM56",
|
|
"name": "hintText",
|
|
"fill": "#71717A",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Video generation may take some time. Please wait patiently.",
|
|
"textAlign": "center",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nQMvt",
|
|
"name": "progressSection",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "Eghqc",
|
|
"name": "progressLabel",
|
|
"fill": "#18181B",
|
|
"content": "Generating... 45%",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TYHdm",
|
|
"name": "progressBarBg",
|
|
"width": "fill_container",
|
|
"height": 8,
|
|
"fill": "#E4E4E7",
|
|
"cornerRadius": 4,
|
|
"layout": "none",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "4P4tn",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "progressBarFill",
|
|
"width": 158,
|
|
"height": 8,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 4,
|
|
"layout": "none"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "cFA4T",
|
|
"x": 2660,
|
|
"y": 0,
|
|
"name": "Video Generation Result Screen",
|
|
"clip": true,
|
|
"width": 390,
|
|
"height": 844,
|
|
"fill": "#FAFAFA",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "5L8A2",
|
|
"name": "topNav",
|
|
"width": "fill_container",
|
|
"height": 56,
|
|
"fill": "#FFFFFF",
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 8
|
|
},
|
|
"padding": [
|
|
0,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Rw61A",
|
|
"name": "backBtn",
|
|
"width": 40,
|
|
"height": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "JTbKe",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "arrow-left",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#18181B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "pAUzD",
|
|
"name": "navTitle",
|
|
"fill": "#18181B",
|
|
"content": "Video Ready",
|
|
"fontFamily": "Plus Jakarta Sans",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OKMsh",
|
|
"name": "navSpacer",
|
|
"width": 40,
|
|
"height": 40
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "rDzoV",
|
|
"name": "contentArea",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
24,
|
|
20
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "GTuTn",
|
|
"name": "videoDisplay",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"height": 360,
|
|
"fill": "#18181B",
|
|
"cornerRadius": 16,
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "a3uQs",
|
|
"width": 72,
|
|
"height": 72,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF80"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SuXL2",
|
|
"fill": "#FFFFFF99",
|
|
"content": "Your video is ready",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "jCww0",
|
|
"name": "buttonRow",
|
|
"width": "fill_container",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "En8rQ",
|
|
"name": "downloadBtn",
|
|
"width": "fill_container",
|
|
"height": 52,
|
|
"fill": "#8B5CF6",
|
|
"cornerRadius": 14,
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#8B5CF640",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "qSzz1",
|
|
"width": 20,
|
|
"height": 20,
|
|
"iconFontName": "download",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#FFFFFF"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KDr4j",
|
|
"fill": "#FFFFFF",
|
|
"content": "Download",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FDy9O",
|
|
"name": "shareBtn",
|
|
"width": "fill_container",
|
|
"height": 52,
|
|
"fill": "#FFFFFF",
|
|
"cornerRadius": 14,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#E4E4E7"
|
|
},
|
|
"effect": {
|
|
"type": "shadow",
|
|
"shadowType": "outer",
|
|
"color": "#00000008",
|
|
"offset": {
|
|
"x": 0,
|
|
"y": 2
|
|
},
|
|
"blur": 6
|
|
},
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "eYjnB",
|
|
"width": 20,
|
|
"height": 20,
|
|
"iconFontName": "share-2",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#8B5CF6"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "8hK5k",
|
|
"fill": "#18181B",
|
|
"content": "Share",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
} |