{ "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": "yws6A", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "SJ8uY", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "Ngk0s", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "Su7Qu", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "6pO9Y", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "JKlyx", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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": "PetsHero AI", "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", "metadata": { "type": "unsplash", "username": "marcuslcramer", "link": "https://unsplash.com/@marcuslcramer", "author": "Marcus Cramer" }, "width": 165, "height": 248, "fill": { "type": "image", "enabled": true, "url": "https://images.unsplash.com/photo-1513350660342-816d92510adf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzMxNTYyMTR8&ixlib=rb-4.1.0&q=80&w=1080", "mode": "fill" }, "layout": "none", "children": [ { "type": "frame", "id": "C8ERr", "x": 58.5, "y": 100, "name": "card1PlayBtn", "enabled": false, "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": 26, "y": 208, "name": "card1Btn", "width": 114, "height": 24, "fill": "#8b5cf6cc", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#8B5CF6" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF640", "offset": { "x": 0, "y": 2 }, "blur": 6 }, "padding": [ 0, 10 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "UOYDo", "name": "card1BtnText", "fill": "#FFFFFF", "content": "Generate Similar", "fontFamily": "Inter", "fontSize": 12, "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-1773156213563.png", "mode": "fill" }, "layout": "none", "children": [ { "type": "frame", "id": "u4Uhx", "x": 58.5, "y": 100, "name": "card1PlayBtn", "enabled": false, "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": 26, "y": 208, "name": "card1Btn", "width": 114, "height": 24, "fill": "#8B5CF6CC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#8B5CF6" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF640", "offset": { "x": 0, "y": 2 }, "blur": 6 }, "padding": [ 0, 10 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "VR6T8", "name": "card1BtnText", "fill": "#FFFFFF", "content": "Generate Similar", "fontFamily": "Inter", "fontSize": 12, "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-1773156252029.png", "mode": "fill" }, "layout": "none", "children": [ { "type": "frame", "id": "6OLca", "x": 58.5, "y": 100, "name": "card3PlayBtn", "enabled": false, "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": 26, "y": 208, "name": "card3Btn", "width": 114, "height": 24, "fill": "#8B5CF6CC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#8B5CF6" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF640", "offset": { "x": 0, "y": 2 }, "blur": 6 }, "padding": [ 0, 10 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "DEvyH", "name": "card3BtnText", "fill": "#FFFFFF", "content": "Generate Similar", "fontFamily": "Inter", "fontSize": 12, "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-1773156289353.png", "mode": "fill" }, "layout": "none", "children": [ { "type": "frame", "id": "zIoMr", "x": 58.5, "y": 100, "name": "card1PlayBtn", "enabled": false, "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": 26, "y": 208, "name": "card1Btn", "width": 114, "height": 24, "fill": "#8B5CF6CC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#8B5CF6" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF640", "offset": { "x": 0, "y": 2 }, "blur": 6 }, "padding": [ 0, 10 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "HWGSC", "name": "card1BtnText", "fill": "#FFFFFF", "content": "Generate Similar", "fontFamily": "Inter", "fontSize": 12, "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-1773156316903.png", "mode": "fill" }, "layout": "none", "children": [ { "type": "frame", "id": "AckkY", "x": 58.5, "y": 100, "name": "card1PlayBtn", "enabled": false, "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": 26, "y": 208, "name": "card1Btn", "width": 114, "height": 24, "fill": "#8B5CF6CC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#8B5CF6" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF640", "offset": { "x": 0, "y": 2 }, "blur": 6 }, "padding": [ 0, 10 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "BqonJ", "name": "card1BtnText", "fill": "#FFFFFF", "content": "Generate Similar", "fontFamily": "Inter", "fontSize": 12, "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-1773156352910.png", "mode": "fill" }, "layout": "none", "children": [ { "type": "frame", "id": "YgQME", "x": 58.5, "y": 100, "name": "card1PlayBtn", "enabled": false, "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": 26, "y": 208, "name": "card1Btn", "width": 114, "height": 24, "fill": "#8B5CF6CC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#8B5CF6" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF640", "offset": { "x": 0, "y": 2 }, "blur": 6 }, "padding": [ 0, 10 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "bEBV9", "name": "card1BtnText", "fill": "#FFFFFF", "content": "Generate Similar", "fontFamily": "Inter", "fontSize": 12, "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": "wKciK", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "KbFbB", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "APK18", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "53xNJ", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "ZKW2K", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "xRujH", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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": "./images/generated-1773156157712.png", "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": "./images/generated-1773156363524.png", "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": "./images/generated-1773156393690.png", "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": "./images/generated-1773134913667.png", "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": "x197g", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "4ZHFM", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "gFIN3", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "9WtWW", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "JMLAT", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "y57t2", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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": "Privacy Policy", "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": "aYtDK", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "kf65I", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "gj2Nh", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "lkKTQ", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "G2bpv", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "MyA3t", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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": "frame", "id": "iVYPz", "name": "priceLine", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "BO2Is", "fill": "#71717A", "content": "$5.99", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "sgYV2", "fill": "#A1A1AA", "content": "$6.99", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "1bb2Y", "fill": "#8B5CF6", "content": "+10 pts", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "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": "200 Credits", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "IAiZI", "name": "priceLine", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "oFR6Q", "fill": "#71717A", "content": "$9.99", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "bZrc4", "fill": "#A1A1AA", "content": "$12.99", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "2oQd4", "fill": "#8B5CF6", "content": "+25 pts", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "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": "500 Credits", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "gSnzm", "name": "priceLine", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "g3vvN", "fill": "#71717A", "content": "$19.99", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "9DcxP", "fill": "#A1A1AA", "content": "$24.99", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "SCF0u", "fill": "#8B5CF6", "content": "+80 pts", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "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": "y8Ovd", "name": "tier4", "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": "w7wPC", "name": "tierContent", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "iTpew", "fill": "#18181B", "content": "1,200 Credits", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "QcmBX", "name": "priceLine", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "QbQa2", "fill": "#71717A", "content": "$49.99", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "bvZ8D", "fill": "#A1A1AA", "content": "$59.99", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "xKMOi", "fill": "#8B5CF6", "content": "+200 pts", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "5te2w", "name": "buyBtn", "fill": "#8B5CF6", "cornerRadius": 12, "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "rMBMk", "fill": "#FFFFFF", "content": "Buy", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "W4LDn", "name": "tier5", "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": "qsLVP", "name": "tierContent", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "K3gu7", "fill": "#18181B", "content": "3,000 Credits", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "frame", "id": "xMHYZ", "name": "priceLine", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "wLYzH", "fill": "#71717A", "content": "$99.99", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "ch71f", "fill": "#A1A1AA", "content": "$119.99", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" }, { "type": "text", "id": "H6lDP", "fill": "#8B5CF6", "content": "+500 pts", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "VSmrD", "name": "buyBtn", "fill": "#8B5CF6", "cornerRadius": 12, "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "9IGJL", "fill": "#FFFFFF", "content": "Buy", "fontFamily": "Inter", "fontSize": 14, "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": "KYAvP", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "426Fs", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "hrgVk", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "v7DgT", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "GnkiF", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "QGqXE", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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", "context": "Content area: creditsCard + videoPreviewArea scrollable; resolutionRow + generateBtn fixed at bottom.", "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": "videoPreviewArea", "context": "Video preview: video URL from card. Auto-load and play. Width: fill container; height: adapt by video aspect ratio. Fit: contain (no crop). Loading animation until ready.", "width": "fill_container", "height": 280, "fill": { "type": "image", "enabled": true, "url": "./images/pet-hero-1.png", "mode": "fill" }, "cornerRadius": 16, "stroke": { "thickness": 1, "fill": "#E4E4E7" }, "layout": "none" }, { "type": "frame", "id": "oYwsm", "name": "resolutionRow", "context": "Resolution options: 480p/720p. Fixed at screen bottom. When switching, update Generate Video credits (RGKvY).", "width": "fill_container", "height": 44, "gap": 12, "alignItems": "center", "children": [ { "type": "text", "id": "u1Glf", "name": "label", "fill": "#18181B", "content": "Resolution", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "frame", "id": "i1SM9", "name": "optWrap", "height": 36, "gap": 8, "children": [ { "type": "frame", "id": "ZPZ2X", "name": "opt480P", "height": 36, "fill": "#F4F4F5", "cornerRadius": 18, "stroke": { "thickness": 1, "fill": "#E4E4E7" }, "padding": [ 8, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "I7ZlT", "name": "t480", "fill": "#71717A", "content": "480P", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "frame", "id": "xVYjt", "name": "opt720P", "height": 36, "fill": "#8B5CF6", "cornerRadius": 18, "effect": { "type": "shadow", "shadowType": "outer", "color": "#8B5CF630", "offset": { "x": 0, "y": 2 }, "blur": 4 }, "padding": [ 8, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "UmmhZ", "name": "t720", "fill": "#FFFFFF", "content": "720P", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] } ] }, { "type": "frame", "id": "yunXY", "name": "generateBtn", "context": "Generate Video button. Fixed at screen bottom. Click flow: image picker -> API. See docs/generate_video.md.", "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", "context": "Credits cost for current resolution. Updates when resolution (oYwsm) changes.", "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": "nQYw9", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "rjKeI", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "w1MGX", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "4R3sR", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "itl77", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "PZzWw", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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", "context": "Video area: display uploaded image with crop (fill/cover). Matches progress screen.", "clip": true, "width": "fill_container", "height": 360, "fill": { "type": "image", "enabled": true, "url": "./images/generated-1773156472555.png", "mode": "fill" }, "cornerRadius": 16, "layout": "vertical", "justifyContent": "center", "alignItems": "center" }, { "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", "context": "Progress label: 1=队列中 2=处理中 3=完成 4=超时 5=错误 6=中止. Updated from /v1/image/progress every 1s.", "fill": "#18181B", "content": "Generating...", "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": "aKXv9", "name": "statusBar", "width": "fill_container", "height": 40, "fill": "#FFFFFF", "padding": [ 0, 12, 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "yDO8H", "fill": "#18181B", "content": "9:41", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "frame", "id": "n04mT", "gap": 6, "alignItems": "center", "children": [ { "type": "icon_font", "id": "c5iam", "width": 21, "height": 15, "iconFontName": "signal", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "OB2sk", "width": 21, "height": 15, "iconFontName": "wifi", "iconFontFamily": "lucide", "fill": "#18181B" }, { "type": "icon_font", "id": "nylDb", "width": 30, "height": 15, "iconFontName": "battery-medium", "iconFontFamily": "lucide", "fill": "#18181B" } ] } ] }, { "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": "RGAdu", "name": "reportBtn", "width": 40, "height": 40, "justifyContent": "center", "alignItems": "center" } ] }, { "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": { "type": "image", "enabled": true, "url": "./images/generated-1773156511265.png", "mode": "fill" }, "cornerRadius": 16, "layout": "vertical", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "Ne80z", "name": "topRow", "width": "fill_container", "height": 40, "padding": [ 16, 20, 0, 0 ], "justifyContent": "end", "alignItems": "center", "children": [ { "type": "frame", "id": "h2IK3", "name": "reportBtn", "width": 44, "height": 44, "fill": "#00000099", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "GtWHh", "width": 24, "height": 24, "iconFontName": "triangle-alert", "iconFontFamily": "lucide", "fill": "#FFFFFF" } ] } ] }, { "type": "frame", "id": "wD2sT", "name": "centerGroup", "width": "fill_container", "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "a3uQs", "enabled": false, "width": 72, "height": 72, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#FFFFFF80" }, { "type": "text", "id": "SuXL2", "fill": "#FFFFFF99", "content": "your work is ready", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "nNSbD", "name": "watermarkRow", "width": "fill_container", "padding": [ 0, 20, 20, 0 ], "justifyContent": "end", "children": [ { "type": "text", "id": "BqSHo", "fill": "#FFFFFF99", "content": "PetsHero AI", "fontFamily": "Inter", "fontSize": 12, "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" } ] } ] } ] } ] } ] }