12275 lines
417 KiB
Plaintext
12275 lines
417 KiB
Plaintext
{
|
|
"version": "2.6",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "IxtYA",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "aPOS Landing Page",
|
|
"width": 1440,
|
|
"fill": "$bg-page",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "8qjLq",
|
|
"name": "newHeader",
|
|
"width": 1440,
|
|
"height": "fit_content(84)",
|
|
"padding": [
|
|
20,
|
|
120
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tpMHr",
|
|
"name": "Hero Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 40,
|
|
"padding": [
|
|
100,
|
|
120,
|
|
80,
|
|
120
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "IFtQL",
|
|
"name": "newHeroBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "G1DqV",
|
|
"name": "heroBadgeDot",
|
|
"fill": "$orange-primary",
|
|
"width": 8,
|
|
"height": 8
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "dpRNf",
|
|
"name": "heroBadgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "Hệ thống POS & Loyalty hàng đầu Việt Nam",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "z6SsC",
|
|
"name": "headline",
|
|
"fill": "$text-primary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 900,
|
|
"content": "Quản lý bán hàng thông minh.\nTích điểm khách hàng tự động.",
|
|
"lineHeight": 1.15,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 56,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "50RjU",
|
|
"name": "subline",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 750,
|
|
"content": "aPOS là giải pháp POS toàn diện cho ngành F&B, Bar, Karaoke và Coffee — giúp bạn bán hàng nhanh hơn, quản lý thông minh hơn và giữ chân khách hàng bằng hệ thống tích điểm thành viên.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Ktf5k",
|
|
"name": "ctaRow",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "AqJ6X",
|
|
"name": "newPrimaryCta",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
32
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "ocR1c",
|
|
"name": "btnPIcon",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "fEtjW",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Dys8A",
|
|
"name": "newSecondaryCta",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
32
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "CuXSB",
|
|
"name": "btnSIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "JptXG",
|
|
"name": "btnSText",
|
|
"fill": "$text-secondary",
|
|
"content": "Xem demo",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "CX0yT",
|
|
"name": "Product Mockup",
|
|
"clip": true,
|
|
"width": 1000,
|
|
"height": 560,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1769859502510.png",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "FfW2s",
|
|
"name": "mockupLabel",
|
|
"fill": "$text-disabled",
|
|
"content": "POS Dashboard Preview",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "yEE9s",
|
|
"name": "newTrustStats",
|
|
"width": "fill_container",
|
|
"gap": 40,
|
|
"padding": [
|
|
20,
|
|
0,
|
|
0,
|
|
0
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QdxMK",
|
|
"name": "tsLabel",
|
|
"fill": "$text-disabled",
|
|
"content": "Được tin dùng bởi 2,000+ doanh nghiệp",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "77g7e",
|
|
"name": "tsDivider1",
|
|
"fill": "$border-default",
|
|
"width": 1,
|
|
"height": 20
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "jOexp",
|
|
"name": "tsStat1",
|
|
"fill": "$text-tertiary",
|
|
"content": "50,000+ giao dịch/ngày",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "yVcTj",
|
|
"name": "tsDivider2",
|
|
"fill": "$border-default",
|
|
"width": 1,
|
|
"height": 20
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "2btDz",
|
|
"name": "tsStat2",
|
|
"fill": "$text-tertiary",
|
|
"content": "99.9% uptime",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "lZbGT",
|
|
"name": "Features Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 60,
|
|
"padding": [
|
|
100,
|
|
120
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ztFwh",
|
|
"name": "newFeatHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "hz6Jy",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "zWi76",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "TÍNH NĂNG",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "AMYB9",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Mọi thứ bạn cần để vận hành doanh nghiệp",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "xl0pr",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Từ quản lý đơn hàng đến tích điểm khách hàng, aPOS cung cấp giải pháp toàn diện cho doanh nghiệp của bạn.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "jsaba",
|
|
"name": "Feature Grid",
|
|
"width": "fill_container",
|
|
"gap": 20,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "DA2ma",
|
|
"name": "newFC1",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ttzoK",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "IsPEk",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "monitor-smartphone",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "V6MaB",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "POS Đa nền tảng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "xzGQH",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Hoạt động trên mọi thiết bị: tablet, điện thoại và máy tính. Đồng bộ dữ liệu realtime.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nnfv4",
|
|
"name": "newFC2",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Vhe45",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#22C55E18",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "2R7jV",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "award",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "MiZas",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Tích điểm thành viên",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "uVGg0",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Hệ thống loyalty tự động: tích điểm, đổi quà, phân hạng thành viên theo chi tiêu.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "lRmHb",
|
|
"name": "newFC3",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "JLUHC",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#3B82F618",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "WX408",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "chart-bar",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#3B82F6"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "pFBcT",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Báo cáo doanh thu",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Y1FkX",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Dashboard trực quan với biểu đồ realtime. Theo dõi doanh thu, sản phẩm bán chạy và xu hướng.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "pcbaX",
|
|
"name": "Feature Grid Row 2",
|
|
"width": "fill_container",
|
|
"gap": 20,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "J2O62",
|
|
"name": "newFC4",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "wgTRi",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#A855F718",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "IjVLP",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "users",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A855F7"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "FxXdh",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Quản lý nhân viên",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "vVQ8D",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Phân quyền theo vai trò, theo dõi ca làm việc, tính lương và đánh giá hiệu suất.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "GXocB",
|
|
"name": "newFC5",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "HJ8wD",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#F59E0B18",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mdbjq",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "package",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#F59E0B"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "NVthg",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Quản lý kho hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "8Yrnc",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Theo dõi tồn kho, cảnh báo hết hàng, nhập xuất kho tự động khi có đơn hàng.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "A2gcA",
|
|
"name": "newFC6",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Yd3x5",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#EC489918",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Y8w0u",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "qr-code",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#EC4899"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ajm5S",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Thanh toán đa kênh",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "6tgCh",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Hỗ trợ tiền mặt, thẻ, QR code, ví điện tử. Tích hợp mọi cổng thanh toán phổ biến.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "1ZzyA",
|
|
"name": "Industry Solutions",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 60,
|
|
"padding": [
|
|
100,
|
|
120
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "eU7we",
|
|
"name": "newIndHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "p6J5O",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "vRiH8",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "NGÀNH NGHỀ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "x6xl8",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Giải pháp cho mọi ngành kinh doanh",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "W18Kq",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "aPOS được thiết kế riêng cho từng ngành, với quy trình vận hành và tính năng phù hợp nhất.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "rPxFV",
|
|
"name": "Industry Grid",
|
|
"width": "fill_container",
|
|
"gap": 20,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "oOZI0",
|
|
"name": "newInd1",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "J2ulP",
|
|
"name": "indImg",
|
|
"width": "fill_container",
|
|
"height": 200,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1591552694788-3b74d181b46f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMDl8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
}
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "8t0Kl",
|
|
"name": "indContent",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"padding": 24,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "5yC7a",
|
|
"name": "indTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Nhà hàng & F&B",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Mi9F0",
|
|
"name": "indDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Quản lý bàn, order tại chỗ & mang đi, chia bill, quản lý bếp realtime.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Q0Hz2",
|
|
"name": "indTags",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Xw9pj",
|
|
"name": "indTag1",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "E47BO",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Quản lý bàn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ilssA",
|
|
"name": "indTag2",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "Iby7p",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Kitchen Display",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BBpEN",
|
|
"name": "newInd2",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "xJiSx",
|
|
"name": "indImg",
|
|
"width": "fill_container",
|
|
"height": 200,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1610931002340-fe06e753976e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMTJ8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
}
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "r6MIK",
|
|
"name": "indContent",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"padding": 24,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "kOgh7",
|
|
"name": "indTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Bar & Lounge",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tY4IM",
|
|
"name": "indDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Tab quản lý khách, happy hour tự động, quản lý công thức pha chế.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "eRO4k",
|
|
"name": "indTags",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "x7J4F",
|
|
"name": "indTag1",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "dg43M",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Tab Manager",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "rAv1H",
|
|
"name": "indTag2",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "jxO6Q",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Happy Hour",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "4N0SP",
|
|
"name": "newInd3",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "nx1DJ",
|
|
"name": "indImg",
|
|
"width": "fill_container",
|
|
"height": 200,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1760598742492-7ad941e658e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMTh8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
}
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "fDUMx",
|
|
"name": "indContent",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"padding": 24,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "S7Bu3",
|
|
"name": "indTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Karaoke",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "C8Mdp",
|
|
"name": "indDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Quản lý phòng, tính giờ tự động, gọi đồ uống từ phòng, khuyến mãi theo khung giờ.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "81mgY",
|
|
"name": "indTags",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "fqHyv",
|
|
"name": "indTag1",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ifaEv",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Quản lý phòng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "AWtwp",
|
|
"name": "indTag2",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "kbEcj",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Tính giờ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "XwCiu",
|
|
"name": "newInd4",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "VdwON",
|
|
"name": "indImg",
|
|
"width": "fill_container",
|
|
"height": 200,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "https://images.unsplash.com/photo-1688683035298-2eff07d8c323?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMjF8&ixlib=rb-4.1.0&q=80&w=1080",
|
|
"mode": "fill"
|
|
}
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "l4KPm",
|
|
"name": "indContent",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"padding": 24,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "E9IUZ",
|
|
"name": "indTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Coffee Shop",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RbSR7",
|
|
"name": "indDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Order nhanh, quản lý menu đa dạng, in barcode, kết nối máy pha trực tiếp.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "r1z2N",
|
|
"name": "indTags",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "LxRKS",
|
|
"name": "indTag1",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "rVd6g",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Quick Order",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "z55bo",
|
|
"name": "indTag2",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "Xf7lP",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Loyalty",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "EPpvo",
|
|
"name": "How It Works",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 60,
|
|
"padding": [
|
|
100,
|
|
120
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "YuShH",
|
|
"name": "newHiwHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "eNKJn",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "vWIWI",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BẮT ĐẦU DỄ DÀNG",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QsxWM",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "3 bước để đưa doanh nghiệp lên aPOS",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "67Eip",
|
|
"name": "shDesc",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Section description goes here with more details about this section.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "kHnqX",
|
|
"name": "stepsRow",
|
|
"width": "fill_container",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "6lrDg",
|
|
"name": "newStep1",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 20,
|
|
"padding": 32,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "4O5Qo",
|
|
"name": "stepNum",
|
|
"width": 56,
|
|
"height": 56,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 28,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "moJQR",
|
|
"name": "stepNumText",
|
|
"fill": "$text-primary",
|
|
"content": "1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "i31Ol",
|
|
"name": "stepTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Đăng ký tài khoản",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "bqaWg",
|
|
"name": "stepDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Tạo tài khoản miễn phí chỉ trong 2 phút. Không cần thẻ tín dụng.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "yXLbg",
|
|
"name": "newStep2",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 20,
|
|
"padding": 32,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "QZaPn",
|
|
"name": "stepNum",
|
|
"width": 56,
|
|
"height": 56,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 28,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "5S6qq",
|
|
"name": "stepNumText",
|
|
"fill": "$text-primary",
|
|
"content": "2",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "b4Geq",
|
|
"name": "stepTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Cài đặt cửa hàng",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "9Kz1R",
|
|
"name": "stepDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Thêm menu, nhân viên và cấu hình hệ thống loyalty theo nhu cầu.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "dT4H5",
|
|
"name": "newStep3",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 20,
|
|
"padding": 32,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Kzh11",
|
|
"name": "stepNum",
|
|
"width": 56,
|
|
"height": 56,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 28,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "LjEwo",
|
|
"name": "stepNumText",
|
|
"fill": "$text-primary",
|
|
"content": "3",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ZMaSf",
|
|
"name": "stepTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu bán hàng",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "JsYU2",
|
|
"name": "stepDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Bắt đầu nhận đơn, tích điểm khách hàng và theo dõi doanh thu ngay lập tức.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PUXqC",
|
|
"name": "Pricing Section",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 60,
|
|
"padding": [
|
|
100,
|
|
120
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ApJyq",
|
|
"name": "newPrcHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "EqJK7",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ywqo2",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BẢNG GIÁ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "fmNVg",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Gói dịch vụ phù hợp mọi quy mô",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "FsJSQ",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 500,
|
|
"content": "Bắt đầu miễn phí, nâng cấp khi doanh nghiệp phát triển. Không phí ẩn.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5kJ39",
|
|
"name": "Pricing Grid",
|
|
"width": "fill_container",
|
|
"gap": 24,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tgARM",
|
|
"name": "newStarter",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "kkMfs",
|
|
"name": "pcBadge",
|
|
"enabled": false,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "z4JfD",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "2hC8D",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "AIl3d",
|
|
"name": "pcName",
|
|
"fill": "$text-secondary",
|
|
"content": "Starter",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "J0Hmh",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "STsMe",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "Miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SBD8B",
|
|
"name": "pcPer",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "bnncL",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Dành cho cửa hàng nhỏ mới bắt đầu",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "jaNAs",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KDm7t",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "gZW53",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "f6f2F",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "EmvXg",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "1 cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nxrPn",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "PT7fu",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "zKkeP",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "100 giao dịch/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "JCBnm",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "2wSt6",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TKfKt",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Báo cáo cơ bản",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "W44Ge",
|
|
"name": "pcBtn",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "pA83d",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "yDCY3",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ZcmxL",
|
|
"name": "newPro",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$orange-primary"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "VuEoj",
|
|
"name": "pcBadge",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "pSIOd",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Bq7HU",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "z9xYo",
|
|
"name": "pcName",
|
|
"fill": "$orange-primary",
|
|
"content": "Professional",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BDGwY",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "SAUa0",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "499K",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YnOnQ",
|
|
"name": "pcPer",
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mGOke",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Dành cho chuỗi cửa hàng đang phát triển",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "VirYB",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "kruAJ",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "HxBKP",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "iDfHq",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "2O1SN",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "5 cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tTAOL",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "LHLCW",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "MYADR",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Giao dịch không giới hạn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "pepsl",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "qsAwN",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "wSuyK",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Báo cáo nâng cao & xuất Excel",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FxkD9",
|
|
"name": "newProBtn",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "ry6qH",
|
|
"name": "btnPIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Y3oA2",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Dùng thử 14 ngày",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "xzGPb",
|
|
"name": "newEnt",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "lJRxo",
|
|
"name": "pcBadge",
|
|
"enabled": false,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "U5spD",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "rQkVA",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "orOne",
|
|
"name": "pcName",
|
|
"fill": "$text-secondary",
|
|
"content": "Enterprise",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "S6enu",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "zMXYz",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "Liên hệ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "87ILE",
|
|
"name": "pcPer",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "gvyl2",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Dành cho chuỗi lớn và doanh nghiệp đa chi nhánh",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "eG9vj",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "kLIGa",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ifsTy",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "m8IWV",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "lH5lK",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Không giới hạn cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NGRVt",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Q1EeF",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YmInO",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "API tích hợp & white-label",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "gXHga",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "uSsyg",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "WrHKB",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Dedicated account manager",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "2VLLn",
|
|
"name": "pcBtn",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "4S2MD",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "y95SA",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Liên hệ tư vấn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KMcSO",
|
|
"name": "Final CTA",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 180,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C0015",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#0A0A0B",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": [
|
|
100,
|
|
120
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "pZ0dD",
|
|
"name": "ctaTitle",
|
|
"fill": "$text-primary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 700,
|
|
"content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?",
|
|
"lineHeight": 1.2,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 48,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "2f9hS",
|
|
"name": "ctaSub",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 550,
|
|
"content": "Hơn 2,000 doanh nghiệp đã tin tưởng aPOS. Tham gia ngay hôm nay — hoàn toàn miễn phí.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NLwzN",
|
|
"name": "ctaBtnRow",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "SEbxe",
|
|
"name": "newCtaBtn1",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 12,
|
|
"gap": 8,
|
|
"padding": [
|
|
18,
|
|
40
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "2c1V5",
|
|
"name": "btnPIcon",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "dwOU4",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "UmV8x",
|
|
"name": "newCtaBtn2",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
18,
|
|
40
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "5ZrRT",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "6Uub3",
|
|
"name": "btnSText",
|
|
"fill": "$text-secondary",
|
|
"content": "Đặt lịch demo",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "IUzS0",
|
|
"name": "ctaTrust",
|
|
"fill": "$text-disabled",
|
|
"content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ZJjfQ",
|
|
"name": "Footer",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 40,
|
|
"padding": [
|
|
60,
|
|
120
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "RWIqm",
|
|
"name": "footTop",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "PbyTa",
|
|
"name": "footBrand",
|
|
"width": 320,
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "6Dm97",
|
|
"name": "newFootLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "Vz7PV",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "5Rfgw",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "hbZGS",
|
|
"name": "footTagline",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 300,
|
|
"content": "Hệ thống POS và tích điểm thành viên hàng đầu cho ngành F&B, Bar, Karaoke và Coffee tại Việt Nam.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "iY8ru",
|
|
"name": "newFootCol1",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "p5LpH",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Sản phẩm",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "VfYlH",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "POS System",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "iKBS3",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Loyalty & Membership",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "HQbaO",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Báo cáo & Analytics",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ztrVL",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Quản lý kho",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TO01Z",
|
|
"name": "newFootCol2",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ouZqX",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Ngành nghề",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "VWP8z",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "Nhà hàng & F&B",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YMCcn",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Bar & Lounge",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "w5Eww",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Karaoke",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "8NsnV",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Coffee Shop",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SU4XZ",
|
|
"name": "newFootCol3",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "IJDFD",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Hỗ trợ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "XU1Cu",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "Trung tâm trợ giúp",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "s6Nyu",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Liên hệ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "R9Smd",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Chính sách bảo mật",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "IxH0i",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Điều khoản sử dụng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "n8eJ5",
|
|
"name": "newFootDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OXqMx",
|
|
"name": "footBottom",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ujwE3",
|
|
"name": "footCopy",
|
|
"fill": "$text-disabled",
|
|
"content": "© 2026 aPOS. All rights reserved.",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "zRuDe",
|
|
"name": "footSocials",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "IvThd",
|
|
"name": "newSoc1",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "loHwh",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "facebook",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "24g7T",
|
|
"name": "newSoc2",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "oDnuk",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "instagram",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TCdzl",
|
|
"name": "newSoc3",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Ls6CG",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "youtube",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "u9sTP",
|
|
"name": "newSoc4",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "OYJjl",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "linkedin",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "MobPg",
|
|
"x": 1910,
|
|
"y": 0,
|
|
"name": "aPOS Mobile Page",
|
|
"width": 390,
|
|
"fill": "$bg-page",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mNav1",
|
|
"name": "mobileHeader",
|
|
"width": 390,
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NsgO1",
|
|
"name": "mNavLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "eWA05",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "WHoit",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "4TnP7",
|
|
"name": "hamburgerIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "menu",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mHero",
|
|
"name": "Mobile Hero Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
60,
|
|
24,
|
|
40,
|
|
24
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mBadge1",
|
|
"name": "mHeroBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "Z3jN0",
|
|
"name": "heroBadgeDot",
|
|
"fill": "$orange-primary",
|
|
"width": 8,
|
|
"height": 8
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "6PLFF",
|
|
"name": "heroBadgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "POS & Loyalty #1 Việt Nam",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mHead1",
|
|
"name": "mHeadline",
|
|
"fill": "$text-primary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Quản lý bán hàng\nthông minh.",
|
|
"lineHeight": 1.15,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 32,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -0.5
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mSub1",
|
|
"name": "mSubline",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "aPOS là giải pháp POS toàn diện cho F&B, Bar, Karaoke và Coffee — bán hàng nhanh, quản lý thông minh.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mCtas",
|
|
"name": "mCtaStack",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mCta1",
|
|
"name": "mPrimaryCta",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "I0W7T",
|
|
"name": "btnPIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "nCPiZ",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mCta2",
|
|
"name": "mSecondaryCta",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "RIlLJ",
|
|
"name": "btnSIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "o0gUh",
|
|
"name": "btnSText",
|
|
"fill": "$text-secondary",
|
|
"content": "Xem demo",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mMock",
|
|
"name": "mProductMockup",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"height": 200,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1769859502510.png",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mFeat",
|
|
"name": "Mobile Features Section",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
48,
|
|
24
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mFeatH",
|
|
"name": "mFeatHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "GdSXX",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "tZhQQ",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "TÍNH NĂNG",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 10,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "yRqrX",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Mọi thứ bạn cần",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 28,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "K0Bug",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Từ quản lý đơn hàng đến tích điểm khách hàng.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mFGrid",
|
|
"name": "mFeatureStack",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mFC1",
|
|
"name": "mFeatureCard1",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "VJ1VO",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "sscPx",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "monitor-smartphone",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QhgVN",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "POS Đa nền tảng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "6QJrG",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Hoạt động trên mọi thiết bị. Đồng bộ realtime.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mFC2",
|
|
"name": "mFeatureCard2",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OoQbN",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#22C55E18",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "hamiI",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "award",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "kzMgW",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Tích điểm thành viên",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "24rWi",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Loyalty tự động: tích điểm, đổi quà, phân hạng.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mFC3",
|
|
"name": "mFeatureCard3",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "vrO4H",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#3B82F618",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "1u2mH",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "chart-bar",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#3B82F6"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "X50Q2",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Báo cáo doanh thu",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "6UVmW",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Dashboard realtime, theo dõi sản phẩm bán chạy.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mPrc",
|
|
"name": "Mobile Pricing Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
48,
|
|
24
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mPrcH",
|
|
"name": "mPrcHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "0Y3Dv",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ZshkQ",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BẢNG GIÁ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 10,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "P3itJ",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Gói phù hợp mọi quy mô",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 28,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ZdFWI",
|
|
"name": "shDesc",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Section description goes here with more details about this section.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mPrcStack",
|
|
"name": "mPricingStack",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mPrc1",
|
|
"name": "mProPlan",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$orange-primary"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "o8knd",
|
|
"name": "pcBadge",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "Xow2x",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "AO70W",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "3IOQL",
|
|
"name": "pcName",
|
|
"fill": "$orange-primary",
|
|
"content": "Professional",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "4iwqa",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "Ej9Qy",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "499K",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "pWlWk",
|
|
"name": "pcPer",
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "pFoWe",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Cho chuỗi đang phát triển",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "1K3b5",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "P6JkD",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "HEWri",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "scGHI",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "sN1RU",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "5 cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "DEO1W",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "tC0eE",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "7zKf9",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Giao dịch không giới hạn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Ux752",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Ujmo8",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ZEdgf",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Báo cáo nâng cao",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QYYET",
|
|
"name": "mProCta",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Bz4ky",
|
|
"name": "btnPIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "dTZKl",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Dùng thử 14 ngày",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mPrc2",
|
|
"name": "mStarterPlan",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "9mCvs",
|
|
"name": "pcBadge",
|
|
"enabled": false,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "HHpa9",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "q7Yf1",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "cyHXI",
|
|
"name": "pcName",
|
|
"fill": "$text-secondary",
|
|
"content": "Starter",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "sSnLb",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "XP12E",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "Miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "qL0oG",
|
|
"name": "pcPer",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "qlTKz",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Cho cửa hàng nhỏ mới bắt đầu",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "7Uk8L",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mEY76",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "0AwwL",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Ao9nl",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "X4DFp",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "1 cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "JEfAL",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "zdFLa",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "MI3ss",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "100 giao dịch/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "9ih9l",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "MsmeF",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "jjvqC",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Báo cáo cơ bản",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "MpGzn",
|
|
"name": "pcBtn",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "MCCrg",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "EhiuS",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mCta",
|
|
"name": "Mobile CTA Section",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 180,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C0015",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#0A0A0B",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 20,
|
|
"padding": [
|
|
48,
|
|
24
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mCtaT",
|
|
"name": "mCtaTitle",
|
|
"fill": "$text-primary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Sẵn sàng nâng cấp\ndoanh nghiệp?",
|
|
"lineHeight": 1.2,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 28,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -0.5
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mCtaBtn",
|
|
"name": "mCtaPrimary",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 12,
|
|
"gap": 8,
|
|
"padding": [
|
|
18,
|
|
32
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "V9mJP",
|
|
"name": "btnPIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "LJPiD",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mCtaTrust",
|
|
"name": "mCtaTrustText",
|
|
"fill": "$text-disabled",
|
|
"content": "Không cần thẻ · Thiết lập 2 phút",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mFoot",
|
|
"name": "Mobile Footer",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
40,
|
|
24
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mFootLogo",
|
|
"name": "mFooterLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "6cb08",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Jb2YP",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mFootTag",
|
|
"name": "mFooterTagline",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mSocRow",
|
|
"name": "mSocialRow",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mS1",
|
|
"name": "mSoc1",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Ha00P",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "facebook",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mS2",
|
|
"name": "mSoc2",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "tgwMC",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "instagram",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mS3",
|
|
"name": "mSoc3",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "FA77I",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "youtube",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "mFootDiv",
|
|
"name": "mFooterDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mCopy",
|
|
"name": "mCopyright",
|
|
"fill": "$text-disabled",
|
|
"content": "© 2026 aPOS. All rights reserved.",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TabPg",
|
|
"x": 2770,
|
|
"y": 0,
|
|
"name": "aPOS Tablet Page",
|
|
"width": 768,
|
|
"fill": "$bg-page",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tNav",
|
|
"name": "Tablet NavBar",
|
|
"width": "fill_container",
|
|
"padding": [
|
|
16,
|
|
40
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tLogo",
|
|
"name": "tNavLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "CH0we",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "55EeP",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 22,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tNavLinks",
|
|
"name": "tNavLinksRow",
|
|
"gap": 24,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "tL1",
|
|
"name": "tNavL1",
|
|
"fill": "$text-secondary",
|
|
"content": "Tính năng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tL2",
|
|
"name": "tNavL2",
|
|
"fill": "$text-secondary",
|
|
"content": "Bảng giá",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tL3",
|
|
"name": "tNavL3",
|
|
"fill": "$text-secondary",
|
|
"content": "Liên hệ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tNavCta",
|
|
"name": "tNavTrialBtn",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "MdCZ7",
|
|
"name": "btnPIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "UHBDe",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Dùng thử",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tHero",
|
|
"name": "Tablet Hero Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": [
|
|
80,
|
|
48,
|
|
60,
|
|
48
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tBadge",
|
|
"name": "tHeroBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "NEFdT",
|
|
"name": "heroBadgeDot",
|
|
"fill": "$orange-primary",
|
|
"width": 8,
|
|
"height": 8
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "x5aXx",
|
|
"name": "heroBadgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "Hệ thống POS & Loyalty hàng đầu Việt Nam",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tHead",
|
|
"name": "tHeadline",
|
|
"fill": "$text-primary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 650,
|
|
"content": "Quản lý bán hàng thông minh.\nTích điểm khách hàng tự động.",
|
|
"lineHeight": 1.15,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 40,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -0.5
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tSub",
|
|
"name": "tSubline",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 550,
|
|
"content": "aPOS là giải pháp POS toàn diện cho ngành F&B, Bar, Karaoke và Coffee — giúp bạn bán hàng nhanh hơn và giữ chân khách hàng.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tCtas",
|
|
"name": "tCtaRow",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tCta1",
|
|
"name": "tPrimaryCta",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
32
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "DUSpV",
|
|
"name": "btnPIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "84psj",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tCta2",
|
|
"name": "tSecondaryCta",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
32
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "7xn7F",
|
|
"name": "btnSIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "lDTmo",
|
|
"name": "btnSText",
|
|
"fill": "$text-secondary",
|
|
"content": "Xem demo",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tMock",
|
|
"name": "tProductMockup",
|
|
"clip": true,
|
|
"width": 650,
|
|
"height": 365,
|
|
"fill": {
|
|
"type": "image",
|
|
"enabled": true,
|
|
"url": "./images/generated-1769859502510.png",
|
|
"mode": "fill"
|
|
},
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFeat",
|
|
"name": "Tablet Features Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 40,
|
|
"padding": [
|
|
60,
|
|
48
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFeatH",
|
|
"name": "tFeatHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "T79s5",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RPSM5",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "TÍNH NĂNG",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "0kwb9",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Mọi thứ bạn cần để vận hành",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 32,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "dr5Bu",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 500,
|
|
"content": "Từ quản lý đơn hàng đến tích điểm khách hàng, aPOS cung cấp giải pháp toàn diện.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFGrid",
|
|
"name": "tFeatureGrid",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFC1",
|
|
"name": "tFeatureCard1",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "CKliQ",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "qwNCa",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "monitor-smartphone",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "WzWhl",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "POS Đa nền tảng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "hH4Ij",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Hoạt động trên mọi thiết bị. Đồng bộ realtime.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFC2",
|
|
"name": "tFeatureCard2",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "KLhq7",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#22C55E18",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "uheZw",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "award",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "rToEP",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Tích điểm thành viên",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Q9LlX",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Loyalty tự động: tích điểm, đổi quà, phân hạng.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFGrid2",
|
|
"name": "tFeatureGrid2",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFC3",
|
|
"name": "tFeatureCard3",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "6IGig",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#3B82F618",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "JRpGR",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "chart-bar",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#3B82F6"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QXd9H",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Báo cáo doanh thu",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KCorA",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Dashboard realtime. Theo dõi sản phẩm bán chạy.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFC4",
|
|
"name": "tFeatureCard4",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrBY6",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#A855F718",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "wwx7N",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "users",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#A855F7"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "EDunI",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Quản lý nhân viên",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "H5L0U",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Phân quyền, theo dõi ca làm, tính lương.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tPrc",
|
|
"name": "Tablet Pricing Section",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 40,
|
|
"padding": [
|
|
60,
|
|
48
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tPrcH",
|
|
"name": "tPrcHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "5A9ot",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "u0Adu",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BẢNG GIÁ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "qAvL2",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Gói dịch vụ phù hợp",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 32,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "oAkDh",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 400,
|
|
"content": "Bắt đầu miễn phí, nâng cấp khi phát triển.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tPrcGrid",
|
|
"name": "tPricingGrid",
|
|
"width": "fill_container",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tPrc1",
|
|
"name": "tStarterPlan",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "eJBIC",
|
|
"name": "pcBadge",
|
|
"enabled": false,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "8KP47",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "r4XQV",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "6FvlL",
|
|
"name": "pcName",
|
|
"fill": "$text-secondary",
|
|
"content": "Starter",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BA67c",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "G2fB2",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "Miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "vMefg",
|
|
"name": "pcPer",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "t3jSo",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Cho cửa hàng nhỏ",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "uU5EQ",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "l16NG",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "EN6Ut",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "VlKXx",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YIaJg",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "1 cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "CMC5G",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "OMeW3",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "EG7K3",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "100 giao dịch/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PiwxZ",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "t2bi7",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "sgJ0T",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Báo cáo cơ bản",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "wc9r2",
|
|
"name": "pcBtn",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "I93SS",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KbD8j",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tPrc2",
|
|
"name": "tProPlan",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$orange-primary"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tPRqe",
|
|
"name": "pcBadge",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QT07v",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BpPrf",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "0aX3K",
|
|
"name": "pcName",
|
|
"fill": "$orange-primary",
|
|
"content": "Professional",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Yn0xA",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ZM7dC",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "499K",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "qSsdQ",
|
|
"name": "pcPer",
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "aKzal",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "Cho chuỗi phát triển",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "ZpCjl",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "kgCR9",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "6bqLl",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "vMQnD",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SVxvC",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "5 cửa hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "AY7Uh",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "WXfvG",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "0zD8m",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Giao dịch không giới hạn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "4egsm",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "Hd4C4",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "NHplH",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Báo cáo nâng cao",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Gg92n",
|
|
"name": "tProCta",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "E8Q4M",
|
|
"name": "btnPIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "cG89F",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Dùng thử 14 ngày",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tCta",
|
|
"name": "Tablet CTA Section",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 180,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C0015",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#0A0A0B",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": [
|
|
60,
|
|
48
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "tCtaT",
|
|
"name": "tCtaTitle",
|
|
"fill": "$text-primary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 500,
|
|
"content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?",
|
|
"lineHeight": 1.2,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -0.5
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tCtaBtns",
|
|
"name": "tCtaButtons",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tCtaB1",
|
|
"name": "tCtaPrimary",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 12,
|
|
"gap": 8,
|
|
"padding": [
|
|
18,
|
|
40
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "8hMtq",
|
|
"name": "btnPIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "cAq9F",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Bắt đầu miễn phí",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tCtaB2",
|
|
"name": "tCtaSecondary",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
18,
|
|
40
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "q3Jhu",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "cLISI",
|
|
"name": "btnSText",
|
|
"fill": "$text-secondary",
|
|
"content": "Đặt lịch demo",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tCtaTrust",
|
|
"name": "tCtaTrustText",
|
|
"fill": "$text-disabled",
|
|
"content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFoot",
|
|
"name": "Tablet Footer",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": 48,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFootTop",
|
|
"name": "tFooterTop",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFootBrand",
|
|
"name": "tFooterBrand",
|
|
"width": 280,
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFLogo",
|
|
"name": "tFootLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "2voAL",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "6WxMZ",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 22,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tFTag",
|
|
"name": "tFootTagline",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 260,
|
|
"content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFootCols",
|
|
"name": "tFooterColumns",
|
|
"gap": 48,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tFCol1",
|
|
"name": "tFootCol1",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "vQ3jr",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Sản phẩm",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "vsK21",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "POS System",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YG2ju",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Loyalty",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "dg59B",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Báo cáo",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "eMbMV",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Quản lý kho",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFCol2",
|
|
"name": "tFootCol2",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "AwD8s",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Hỗ trợ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "sTwJb",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "Trợ giúp",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "EOJmD",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Liên hệ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "XpRcP",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Bảo mật",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "qybaE",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Điều khoản",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "tFootDiv",
|
|
"name": "tFooterDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tFootBot",
|
|
"name": "tFooterBottom",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "tCopy",
|
|
"name": "tCopyright",
|
|
"fill": "$text-disabled",
|
|
"content": "© 2026 aPOS. All rights reserved.",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tSocRow",
|
|
"name": "tSocialRow",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "tS1",
|
|
"name": "tSoc1",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "jTxLT",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "facebook",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tS2",
|
|
"name": "tSoc2",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "gxXJf",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "instagram",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tS3",
|
|
"name": "tSoc3",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "FtADR",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "youtube",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "tS4",
|
|
"name": "tSoc4",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "kXQIC",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "linkedin",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"name": "aPOS Component Library",
|
|
"width": 1440,
|
|
"fill": "$bg-page",
|
|
"layout": "vertical",
|
|
"gap": 40,
|
|
"padding": 40,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "sokxt",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK10q",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BADGES & LABELS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BadgeRow",
|
|
"name": "badgeExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"gap": 20,
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Badge1",
|
|
"name": "exampleSectionLabel",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "4yAKs",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "SECTION LABEL",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Badge2",
|
|
"name": "exampleHeroBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "j3ksJ",
|
|
"name": "heroBadgeDot",
|
|
"fill": "$orange-primary",
|
|
"width": 8,
|
|
"height": 8
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "zzm6Q",
|
|
"name": "heroBadgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "Hero Badge with Dot",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Badge3",
|
|
"name": "exampleChip",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "Rb7IM",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Chip Label",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "coD4i",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "MOLga",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BUTTONS & ACTIONS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BtnRow",
|
|
"name": "buttonExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"gap": 20,
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "PrimaryBtn1",
|
|
"name": "examplePrimaryBtn",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "xMjoJ",
|
|
"name": "btnPIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "yR7mY",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Primary Button",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PrimaryBtn2",
|
|
"name": "examplePrimaryBtnIcon",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "qkXav",
|
|
"name": "btnPIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "nrUMI",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "With Icon",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SecondaryBtn1",
|
|
"name": "exampleSecondaryBtn",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "qM2TY",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ixoFp",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Secondary Button",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SecondaryBtn2",
|
|
"name": "exampleSecondaryBtnIcon",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "6Hmda",
|
|
"name": "btnSIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "play",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "4D31l",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "With Icon",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NumpadBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "NUMPAD KEYS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadExamples",
|
|
"name": "numpadKeyExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"gap": 16,
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NumKey1",
|
|
"name": "Atom/NumpadKey/Standard",
|
|
"reusable": true,
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NumKey1Text",
|
|
"name": "keyLabel",
|
|
"fill": "$text-primary",
|
|
"content": "1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumKey2",
|
|
"name": "exampleNumpadKey2",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NumKey2Text",
|
|
"name": "keyLabel",
|
|
"fill": "$text-primary",
|
|
"content": "2",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumKey3",
|
|
"name": "exampleNumpadKey3",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NumKey3Text",
|
|
"name": "keyLabel",
|
|
"fill": "$text-primary",
|
|
"content": "3",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumKeyClear",
|
|
"name": "Atom/NumpadKey/Action/Clear",
|
|
"reusable": true,
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "#EF444418",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#EF4444"
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NumKeyClearText",
|
|
"name": "keyLabel",
|
|
"fill": "#EF4444",
|
|
"content": "C",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumKeyEnter",
|
|
"name": "Atom/NumpadKey/Action/Enter",
|
|
"reusable": true,
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "NumKeyEnterIcon",
|
|
"name": "keyIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "corner-down-left",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QtyBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QtyBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "QUANTITY CONTROLS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QtyExamples",
|
|
"name": "quantityControlExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"gap": 32,
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "QtyToggle1",
|
|
"name": "Atom/QuantityToggle",
|
|
"reusable": true,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 0,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "QtyMinus",
|
|
"name": "minusBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "QtyMinusIcon",
|
|
"name": "icon",
|
|
"width": 20,
|
|
"height": 20,
|
|
"iconFontName": "minus",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QtyValue",
|
|
"name": "valueDisplay",
|
|
"width": 56,
|
|
"height": 48,
|
|
"fill": "$bg-surface",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QtyValueText",
|
|
"name": "value",
|
|
"fill": "$text-primary",
|
|
"content": "1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QtyPlus",
|
|
"name": "plusBtn",
|
|
"width": 48,
|
|
"height": 48,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "QtyPlusIcon",
|
|
"name": "icon",
|
|
"width": 20,
|
|
"height": 20,
|
|
"iconFontName": "plus",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "StatusGroup",
|
|
"name": "statusIndicatorExamples",
|
|
"gap": 24,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "StatusOnline",
|
|
"name": "Atom/StatusIndicator/Online",
|
|
"reusable": true,
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "StatusOnlineDot",
|
|
"name": "dot",
|
|
"width": 10,
|
|
"height": 10,
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "StatusOnlineText",
|
|
"name": "label",
|
|
"fill": "$text-secondary",
|
|
"content": "Online",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "StatusOffline",
|
|
"name": "Atom/StatusIndicator/Offline",
|
|
"reusable": true,
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "StatusOfflineDot",
|
|
"name": "dot",
|
|
"width": 10,
|
|
"height": 10,
|
|
"fill": "#EF4444"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "StatusOfflineText",
|
|
"name": "label",
|
|
"fill": "$text-secondary",
|
|
"content": "Offline",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "StatusBusy",
|
|
"name": "Atom/StatusIndicator/Busy",
|
|
"reusable": true,
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "StatusBusyDot",
|
|
"name": "dot",
|
|
"width": 10,
|
|
"height": 10,
|
|
"fill": "#F59E0B"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "StatusBusyText",
|
|
"name": "label",
|
|
"fill": "$text-secondary",
|
|
"content": "Busy",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Cfoh0",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "JsBB8",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "TYPOGRAPHY & BRANDING",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TypoRow",
|
|
"name": "typoExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": 40,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "LogoRow",
|
|
"name": "logoRow",
|
|
"width": "fill_container",
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "LogoEx",
|
|
"name": "exampleLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "8osja",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "7V59t",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 22,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SectHeader",
|
|
"name": "exampleSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "n6zyD",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mrU8q",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "CATEGORY",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ivisG",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Section Header Component",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "YFM0A",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "This is a reusable section header with badge, title, and description.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NavLinkRow",
|
|
"name": "navLinkRow",
|
|
"width": "fill_container",
|
|
"gap": 24,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NavLink1",
|
|
"name": "exampleNavLink1",
|
|
"fill": "$text-secondary",
|
|
"content": "Features",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "NavLink2",
|
|
"name": "exampleNavLink2",
|
|
"fill": "$text-secondary",
|
|
"content": "Pricing",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "NavLink3",
|
|
"name": "exampleNavLink3",
|
|
"fill": "$text-secondary",
|
|
"content": "Contact",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_switch_container",
|
|
"name": "Molecule/ModeSwitch/Container",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"height": 48,
|
|
"layout": "horizontal",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"gap": 4,
|
|
"padding": 4,
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": "$radius-lg",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_restaurant",
|
|
"name": "Mode/Restaurant/Active",
|
|
"layout": "horizontal",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"fill": "$vertical-restaurant",
|
|
"cornerRadius": "$radius-md",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "🍽️",
|
|
"fontSize": 16
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Nhà hàng",
|
|
"fontSize": "$text-sm",
|
|
"fontWeight": "$font-medium",
|
|
"fill": "#FFFFFF"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_bar",
|
|
"name": "Mode/Bar/Inactive",
|
|
"layout": "horizontal",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"fill": "transparent",
|
|
"cornerRadius": "$radius-md",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "🍸",
|
|
"fontSize": 16
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Bar",
|
|
"fontSize": "$text-sm",
|
|
"fontWeight": "$font-medium",
|
|
"fill": "$text-secondary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_karaoke",
|
|
"name": "Mode/Karaoke/Inactive",
|
|
"layout": "horizontal",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"fill": "transparent",
|
|
"cornerRadius": "$radius-md",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "🎤",
|
|
"fontSize": 16
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Karaoke",
|
|
"fontSize": "$text-sm",
|
|
"fontWeight": "$font-medium",
|
|
"fill": "$text-secondary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_spa",
|
|
"name": "Mode/Spa/Inactive",
|
|
"layout": "horizontal",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"gap": 8,
|
|
"padding": [
|
|
8,
|
|
16
|
|
],
|
|
"fill": "transparent",
|
|
"cornerRadius": "$radius-md",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "💆",
|
|
"fontSize": 16
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Spa",
|
|
"fontSize": "$text-sm",
|
|
"fontWeight": "$font-medium",
|
|
"fill": "$text-secondary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_indicator_001",
|
|
"name": "Atom/ModeIndicator/Restaurant",
|
|
"reusable": true,
|
|
"width": 32,
|
|
"height": 32,
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"fill": "$vertical-restaurant",
|
|
"cornerRadius": "$radius-full",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "🍽️",
|
|
"fontSize": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_indicator_002",
|
|
"name": "Atom/ModeIndicator/Bar",
|
|
"reusable": true,
|
|
"width": 32,
|
|
"height": 32,
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"fill": "$vertical-bar",
|
|
"cornerRadius": "$radius-full",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "🍸",
|
|
"fontSize": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_indicator_003",
|
|
"name": "Atom/ModeIndicator/Karaoke",
|
|
"reusable": true,
|
|
"width": 32,
|
|
"height": 32,
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"fill": "$vertical-karaoke",
|
|
"cornerRadius": "$radius-full",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "🎤",
|
|
"fontSize": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mode_indicator_004",
|
|
"name": "Atom/ModeIndicator/Spa",
|
|
"reusable": true,
|
|
"width": 32,
|
|
"height": 32,
|
|
"layout": "vertical",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"fill": "$vertical-spa",
|
|
"cornerRadius": "$radius-full",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "💆",
|
|
"fontSize": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItemBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItemBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "ORDER ITEMS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItemExamples",
|
|
"name": "orderItemExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 0,
|
|
"padding": 0,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem1",
|
|
"name": "Molecule/OrderItem/Standard",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle",
|
|
"sides": [
|
|
"bottom"
|
|
]
|
|
},
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem1Left",
|
|
"name": "leftContent",
|
|
"gap": 12,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem1Qty",
|
|
"name": "qtyBadge",
|
|
"width": 32,
|
|
"height": 32,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem1QtyText",
|
|
"name": "qty",
|
|
"fill": "$text-primary",
|
|
"content": "2",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem1Info",
|
|
"name": "itemInfo",
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem1Name",
|
|
"name": "itemName",
|
|
"fill": "$text-primary",
|
|
"content": "Cà Phê Sữa Đá",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem1Note",
|
|
"name": "itemNote",
|
|
"fill": "$text-tertiary",
|
|
"content": "Ít đường, thêm đá",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem1Price",
|
|
"name": "itemPrice",
|
|
"fill": "$text-primary",
|
|
"content": "58,000₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem2",
|
|
"name": "Molecule/OrderItem/WithModifiers",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle",
|
|
"sides": [
|
|
"bottom"
|
|
]
|
|
},
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem2Main",
|
|
"name": "mainRow",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem2Left",
|
|
"name": "leftContent",
|
|
"gap": 12,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem2Qty",
|
|
"name": "qtyBadge",
|
|
"width": 32,
|
|
"height": 32,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem2QtyText",
|
|
"name": "qty",
|
|
"fill": "$text-primary",
|
|
"content": "1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem2Name",
|
|
"name": "itemName",
|
|
"fill": "$text-primary",
|
|
"content": "Bánh Mì Thịt Nguội",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem2Price",
|
|
"name": "itemPrice",
|
|
"fill": "$text-primary",
|
|
"content": "45,000₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "OrderItem2Mods",
|
|
"name": "modifierList",
|
|
"padding": [
|
|
0,
|
|
0,
|
|
0,
|
|
44
|
|
],
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem2Mod1",
|
|
"name": "modifier1",
|
|
"fill": "$text-tertiary",
|
|
"content": "+ Phô mai (+10,000₫)",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "OrderItem2Mod2",
|
|
"name": "modifier2",
|
|
"fill": "$text-tertiary",
|
|
"content": "+ Trứng ốp la (+8,000₫)",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BillRowBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "BillRowBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "BILL SUMMARY",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BillRowExamples",
|
|
"name": "billRowExamples",
|
|
"width": 400,
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 0,
|
|
"padding": 24,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "BillSubtotal",
|
|
"name": "Molecule/BillRow/Subtotal",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"padding": [
|
|
8,
|
|
0
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "BillSubtotalLabel",
|
|
"name": "label",
|
|
"fill": "$text-secondary",
|
|
"content": "Tạm tính",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "BillSubtotalValue",
|
|
"name": "value",
|
|
"fill": "$text-secondary",
|
|
"content": "103,000₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BillDiscount",
|
|
"name": "Molecule/BillRow/Discount",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"padding": [
|
|
8,
|
|
0
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "BillDiscountLabel",
|
|
"name": "label",
|
|
"fill": "$green-success",
|
|
"content": "Giảm giá (10%)",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "BillDiscountValue",
|
|
"name": "value",
|
|
"fill": "$green-success",
|
|
"content": "-10,300₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BillTax",
|
|
"name": "Molecule/BillRow/Tax",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"padding": [
|
|
8,
|
|
0
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "BillTaxLabel",
|
|
"name": "label",
|
|
"fill": "$text-tertiary",
|
|
"content": "VAT (8%)",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "BillTaxValue",
|
|
"name": "value",
|
|
"fill": "$text-tertiary",
|
|
"content": "7,416₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BillDivider",
|
|
"name": "divider",
|
|
"width": "fill_container",
|
|
"height": 1,
|
|
"fill": "$border-subtle",
|
|
"margin": [
|
|
12,
|
|
0
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "BillTotal",
|
|
"name": "Molecule/BillRow/Total",
|
|
"reusable": true,
|
|
"width": "fill_container",
|
|
"padding": [
|
|
12,
|
|
0
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "BillTotalLabel",
|
|
"name": "label",
|
|
"fill": "$text-primary",
|
|
"content": "Tổng cộng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "BillTotalValue",
|
|
"name": "value",
|
|
"fill": "$orange-primary",
|
|
"content": "100,116₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 22,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCardBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCardBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "PRODUCT CARDS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCardExamples",
|
|
"name": "productCardExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"gap": 16,
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard1",
|
|
"name": "Molecule/ProductCard/POS",
|
|
"reusable": true,
|
|
"width": 140,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"clip": true,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard1Img",
|
|
"name": "productImage",
|
|
"width": "fill_container",
|
|
"height": 100,
|
|
"fill": "#3B82F618"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard1Content",
|
|
"name": "content",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"padding": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard1Name",
|
|
"name": "productName",
|
|
"fill": "$text-primary",
|
|
"content": "Cà Phê Sữa",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard1Price",
|
|
"name": "productPrice",
|
|
"fill": "$orange-primary",
|
|
"content": "29,000₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard2",
|
|
"name": "Molecule/ProductCard/POS/Selected",
|
|
"reusable": true,
|
|
"width": 140,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$orange-primary"
|
|
},
|
|
"layout": "vertical",
|
|
"clip": true,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard2Img",
|
|
"name": "productImage",
|
|
"width": "fill_container",
|
|
"height": 100,
|
|
"fill": "#22C55E18"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard2Content",
|
|
"name": "content",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"padding": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard2Name",
|
|
"name": "productName",
|
|
"fill": "$text-primary",
|
|
"content": "Trà Đào",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard2Price",
|
|
"name": "productPrice",
|
|
"fill": "$orange-primary",
|
|
"content": "35,000₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard3",
|
|
"name": "Molecule/ProductCard/POS/OutOfStock",
|
|
"reusable": true,
|
|
"width": 140,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"clip": true,
|
|
"opacity": 0.5,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard3Img",
|
|
"name": "productImage",
|
|
"width": "fill_container",
|
|
"height": 100,
|
|
"fill": "#6B6B7018",
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard3OOS",
|
|
"name": "oosLabel",
|
|
"fill": "$text-disabled",
|
|
"content": "Hết hàng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ProductCard3Content",
|
|
"name": "content",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"padding": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard3Name",
|
|
"name": "productName",
|
|
"fill": "$text-disabled",
|
|
"content": "Sinh Tố Bơ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ProductCard3Price",
|
|
"name": "productPrice",
|
|
"fill": "$text-disabled",
|
|
"content": "45,000₫",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "WocUJ",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "jV70R",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "CARDS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "CardGrid",
|
|
"name": "cardExamples",
|
|
"width": "fill_container",
|
|
"gap": 20,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "FeatCard1",
|
|
"name": "exampleFeatureCard",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "HpzSJ",
|
|
"name": "fcIconBg",
|
|
"width": 48,
|
|
"height": 48,
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "suLNf",
|
|
"name": "fcIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "monitor-smartphone",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "UJFMb",
|
|
"name": "fcTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Feature Card",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "tDzj5",
|
|
"name": "fcDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "This is a feature card component used to showcase key features and capabilities.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "IndCard1",
|
|
"name": "exampleIndustryCard",
|
|
"clip": true,
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "FLdiF",
|
|
"name": "indImg",
|
|
"width": "fill_container",
|
|
"height": 200,
|
|
"fill": "#3B82F618"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "8ZFVY",
|
|
"name": "indContent",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"padding": 24,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "8gWd8",
|
|
"name": "indTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Industry Card",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "1piNF",
|
|
"name": "indDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Industry-specific card with image, title, description and tags.",
|
|
"lineHeight": 1.6,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "h0FX2",
|
|
"name": "indTags",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "DSgMw",
|
|
"name": "indTag1",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "rVbro",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Feature 1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "uoFFu",
|
|
"name": "indTag2",
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 6,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "JI7l0",
|
|
"name": "chipText",
|
|
"fill": "$text-secondary",
|
|
"content": "Feature 2",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "StepCard1",
|
|
"name": "exampleStepCard",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 20,
|
|
"padding": 32,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ZReaA",
|
|
"name": "stepNum",
|
|
"width": 56,
|
|
"height": 56,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 28,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "m5Mjz",
|
|
"name": "stepNumText",
|
|
"fill": "$text-primary",
|
|
"content": "1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "2XBUX",
|
|
"name": "stepTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Step Card",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "c553G",
|
|
"name": "stepDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Step-by-step instruction card with numbered badge.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PricingCardRow",
|
|
"name": "pricingCardExamples",
|
|
"width": "fill_container",
|
|
"gap": 20,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "PriceCard1",
|
|
"name": "examplePricingBasic",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "teMVu",
|
|
"name": "pcBadge",
|
|
"enabled": false,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "azC2t",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "isTGs",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ZFjfl",
|
|
"name": "pcName",
|
|
"fill": "$text-secondary",
|
|
"content": "Starter",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "5UeZM",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "8fM2n",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "Free",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "GfS02",
|
|
"name": "pcPer",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "uLtIh",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "For small businesses getting started",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "u5uVY",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "MXmSA",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "YbXof",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mzamm",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "3r8fL",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "1 store",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Nj2yA",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "NVTzn",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "5LtsD",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "100 transactions/month",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "GqUzO",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "yZlVe",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Ut5uS",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Basic reports",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "0Fnac",
|
|
"name": "pcBtn",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "1w3HC",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RVZxt",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Get Started",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PriceCard2",
|
|
"name": "examplePricingPro",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$orange-primary"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "2qVjH",
|
|
"name": "pcBadge",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "PthNf",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "yT240",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "G4OEv",
|
|
"name": "pcName",
|
|
"fill": "$orange-primary",
|
|
"content": "Professional",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "IQojv",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "R1uJY",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "499K",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "lbKkc",
|
|
"name": "pcPer",
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "i9xHO",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "For growing business chains",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "GaBI4",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KiK1Y",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "s5RvM",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "7e7A1",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Lmf0e",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "5 stores",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "pc2H0",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "JsYjG",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "UUmpR",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Unlimited transactions",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "jqWaK",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "6LR43",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ULIlu",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Advanced analytics",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "3xz7n",
|
|
"name": "proPricingBtn",
|
|
"width": "fill_container",
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "6y0tm",
|
|
"name": "btnPIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "96nc7",
|
|
"name": "btnPText",
|
|
"fill": "$text-primary",
|
|
"content": "Try 14 days free",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PriceCard3",
|
|
"name": "examplePricingEnterprise",
|
|
"width": "fill_container",
|
|
"fill": "$bg-page",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "We76w",
|
|
"name": "pcBadge",
|
|
"enabled": false,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
4,
|
|
10
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ttbZY",
|
|
"name": "pcBadgeText",
|
|
"fill": "$text-primary",
|
|
"content": "Phổ biến nhất",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "0aQSi",
|
|
"name": "pcTop",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "aSefC",
|
|
"name": "pcName",
|
|
"fill": "$text-secondary",
|
|
"content": "Enterprise",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QJm3P",
|
|
"name": "pcPriceRow",
|
|
"gap": 4,
|
|
"alignItems": "end",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "PNKkF",
|
|
"name": "pcPrice",
|
|
"fill": "$text-primary",
|
|
"content": "Custom",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 36,
|
|
"fontWeight": "500",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "VHRx4",
|
|
"name": "pcPer",
|
|
"enabled": false,
|
|
"fill": "$text-tertiary",
|
|
"content": "/tháng",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "teqD3",
|
|
"name": "pcDesc",
|
|
"fill": "$text-tertiary",
|
|
"content": "For large enterprise chains",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "vbKaC",
|
|
"name": "pcDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "dBIlb",
|
|
"name": "pcFeats",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 14,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "EXa0J",
|
|
"name": "pcF1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "U0aiJ",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "F221P",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Unlimited stores",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "DHLmw",
|
|
"name": "pcF2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "En6Un",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ytc60",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "API integration",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "zWEio",
|
|
"name": "pcF3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "P4YlO",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "seCtG",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Dedicated account manager",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "8129K",
|
|
"name": "pcBtn",
|
|
"width": "fill_container",
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"gap": 8,
|
|
"padding": [
|
|
14,
|
|
24
|
|
],
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "kqsyZ",
|
|
"name": "btnSIcon",
|
|
"enabled": false,
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "arrow-right",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "koJzc",
|
|
"name": "btnSText",
|
|
"fill": "$text-primary",
|
|
"content": "Contact Sales",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "vQqcl",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NH6gQ",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "FOOTER COMPONENTS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FooterColRow",
|
|
"name": "footerColumnExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"gap": 48,
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "FootCol1",
|
|
"name": "exampleFooterCol1",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "jcBoY",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Products",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "NX2A9",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "POS System",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "qkmXd",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Loyalty Program",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "MqnX1",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Analytics",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "U5fbU",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Inventory",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FootCol2",
|
|
"name": "exampleFooterCol2",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "3f7yU",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Industries",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "nUIva",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "Restaurant & F&B",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "VMn3X",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Bar & Lounge",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TYRQA",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Karaoke",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "Y1hlD",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Coffee Shop",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "FootCol3",
|
|
"name": "exampleFooterCol3",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ynsnj",
|
|
"name": "footColTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Support",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "CxgY7",
|
|
"name": "footColL1",
|
|
"fill": "$text-tertiary",
|
|
"content": "Help Center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "PNNws",
|
|
"name": "footColL2",
|
|
"fill": "$text-tertiary",
|
|
"content": "Contact",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KTHFx",
|
|
"name": "footColL3",
|
|
"fill": "$text-tertiary",
|
|
"content": "Privacy Policy",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "F0e0G",
|
|
"name": "footColL4",
|
|
"fill": "$text-tertiary",
|
|
"content": "Terms of Use",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "LibHeader",
|
|
"name": "Library Header",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "LibLogo",
|
|
"name": "componentLibLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "L1IHb",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "oAfvR",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 22,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "LibTitle",
|
|
"name": "libTitle",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS Component Library",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 48,
|
|
"fontWeight": "600",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "LibDesc",
|
|
"name": "libDescription",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 700,
|
|
"content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "fBoMm",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "o5bXI",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "UTILITIES",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "UtilRow",
|
|
"name": "utilExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": 40,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "CheckRow",
|
|
"name": "checkListRow",
|
|
"layout": "vertical",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Check1",
|
|
"name": "exampleCheckItem1",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "VJGh3",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "VwkNy",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Feature check list item",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Check2",
|
|
"name": "exampleCheckItem2",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "BrCzS",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "9qmDC",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Another check list item",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Check3",
|
|
"name": "exampleCheckItem3",
|
|
"gap": 10,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "87yKj",
|
|
"name": "checkIcon",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "check",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "JoqXu",
|
|
"name": "checkText",
|
|
"fill": "$text-secondary",
|
|
"content": "Third check list item",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "DividerEx",
|
|
"name": "exampleDivider",
|
|
"fill": "$border-subtle",
|
|
"width": "fill_container",
|
|
"height": 1
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SocialRow",
|
|
"name": "socialIconsRow",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "Social1",
|
|
"name": "exampleFacebook",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "YXkpa",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "facebook",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Social2",
|
|
"name": "exampleInstagram",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "4UrP1",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "instagram",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Social3",
|
|
"name": "exampleYoutube",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "QG5mc",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "youtube",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "Social4",
|
|
"name": "exampleLinkedIn",
|
|
"width": 36,
|
|
"height": 36,
|
|
"cornerRadius": 18,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "FNwhd",
|
|
"name": "socIcn",
|
|
"width": 18,
|
|
"height": 18,
|
|
"iconFontName": "linkedin",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-disabled"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TrustEx",
|
|
"name": "exampleTrustStat",
|
|
"width": "fill_container",
|
|
"gap": 40,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "iObWZ",
|
|
"name": "tsLabel",
|
|
"fill": "$text-disabled",
|
|
"content": "Được tin dùng bởi 2,000+ doanh nghiệp",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "M0mkC",
|
|
"name": "tsDivider1",
|
|
"fill": "$border-default",
|
|
"width": 1,
|
|
"height": 20
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "wZxFi",
|
|
"name": "tsStat1",
|
|
"fill": "$text-tertiary",
|
|
"content": "50,000+ giao dịch/ngày",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "rectangle",
|
|
"id": "9ZsNt",
|
|
"name": "tsDivider2",
|
|
"fill": "$border-default",
|
|
"width": 1,
|
|
"height": 20
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "gpriC",
|
|
"name": "tsStat2",
|
|
"fill": "$text-tertiary",
|
|
"content": "99.9% uptime",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "jNieW",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "jVugF",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "NAVIGATION",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NavExamples",
|
|
"name": "navExamples",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 20,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "DesktopNav",
|
|
"name": "exampleDesktopNav",
|
|
"width": "fill_container",
|
|
"height": "fit_content(84)",
|
|
"padding": [
|
|
20,
|
|
120
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "MobileNav",
|
|
"name": "exampleMobileNav",
|
|
"width": "fill_container",
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "EYcUX",
|
|
"name": "mNavLogo",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "c7KAp",
|
|
"name": "logoDot",
|
|
"fill": "$orange-primary",
|
|
"width": 10,
|
|
"height": 10
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "9deBe",
|
|
"name": "logoText",
|
|
"fill": "$text-primary",
|
|
"content": "aPOS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600",
|
|
"letterSpacing": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "yEnDr",
|
|
"name": "hamburgerIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "menu",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadFullBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NumpadFullBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "POS NUMPAD",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadFullExamples",
|
|
"name": "numpadFullExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadFull",
|
|
"name": "Organism/Numpad/Full",
|
|
"reusable": true,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"padding": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadRow1",
|
|
"name": "row1",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NK7",
|
|
"name": "key7",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK7T",
|
|
"fill": "$text-primary",
|
|
"content": "7",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NK8",
|
|
"name": "key8",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK8T",
|
|
"fill": "$text-primary",
|
|
"content": "8",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NK9",
|
|
"name": "key9",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK9T",
|
|
"fill": "$text-primary",
|
|
"content": "9",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NKC",
|
|
"name": "keyClear",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "#EF444418",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NKCT",
|
|
"fill": "#EF4444",
|
|
"content": "C",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadRow2",
|
|
"name": "row2",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NK4",
|
|
"name": "key4",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK4T",
|
|
"fill": "$text-primary",
|
|
"content": "4",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NK5",
|
|
"name": "key5",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK5T",
|
|
"fill": "$text-primary",
|
|
"content": "5",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NK6",
|
|
"name": "key6",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK6T",
|
|
"fill": "$text-primary",
|
|
"content": "6",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NKBack",
|
|
"name": "keyBackspace",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "NKBackI",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "delete",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadRow3",
|
|
"name": "row3",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NK1",
|
|
"name": "key1",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK1T",
|
|
"fill": "$text-primary",
|
|
"content": "1",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NK2",
|
|
"name": "key2",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK2T",
|
|
"fill": "$text-primary",
|
|
"content": "2",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NK3",
|
|
"name": "key3",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK3T",
|
|
"fill": "$text-primary",
|
|
"content": "3",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NKEnter",
|
|
"name": "keyEnter",
|
|
"width": 64,
|
|
"height": 136,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "NKEnterI",
|
|
"width": 28,
|
|
"height": 28,
|
|
"iconFontName": "corner-down-left",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-primary"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NumpadRow4",
|
|
"name": "row4",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NK0",
|
|
"name": "key0",
|
|
"width": 136,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NK0T",
|
|
"fill": "$text-primary",
|
|
"content": "0",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "NKDot",
|
|
"name": "keyDot",
|
|
"width": 64,
|
|
"height": 64,
|
|
"fill": "$bg-interactive",
|
|
"cornerRadius": 12,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "NKDotT",
|
|
"fill": "$text-primary",
|
|
"content": ".",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PaymentMethodsBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "PaymentMethodsBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "PAYMENT METHODS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PaymentMethodsExamples",
|
|
"name": "paymentMethodsExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"padding": 40,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "PaymentGrid",
|
|
"name": "Organism/PaymentMethods",
|
|
"reusable": true,
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "PayCash",
|
|
"name": "cashMethod",
|
|
"width": 120,
|
|
"height": 100,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$orange-primary"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "PayCashIcon",
|
|
"width": 32,
|
|
"height": 32,
|
|
"iconFontName": "banknote",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "PayCashText",
|
|
"fill": "$text-primary",
|
|
"content": "Tiền mặt",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PayCard",
|
|
"name": "cardMethod",
|
|
"width": 120,
|
|
"height": 100,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "PayCardIcon",
|
|
"width": 32,
|
|
"height": 32,
|
|
"iconFontName": "credit-card",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "PayCardText",
|
|
"fill": "$text-primary",
|
|
"content": "Thẻ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PayQR",
|
|
"name": "qrMethod",
|
|
"width": 120,
|
|
"height": 100,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "PayQRIcon",
|
|
"width": 32,
|
|
"height": 32,
|
|
"iconFontName": "qr-code",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "PayQRText",
|
|
"fill": "$text-primary",
|
|
"content": "QR Code",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "PayWallet",
|
|
"name": "walletMethod",
|
|
"width": 120,
|
|
"height": 100,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "PayWalletIcon",
|
|
"width": 32,
|
|
"height": 32,
|
|
"iconFontName": "wallet",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$text-secondary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "PayWalletText",
|
|
"fill": "$text-primary",
|
|
"content": "Ví điện tử",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "DialogBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "DialogBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "DIALOGS & TOASTS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "DialogExamples",
|
|
"name": "dialogExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": 40,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ConfirmDialog",
|
|
"name": "Organism/Dialog/Confirm",
|
|
"reusable": true,
|
|
"width": 400,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 20,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 24,
|
|
"padding": 28,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ConfirmDialogHeader",
|
|
"name": "header",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "ConfirmDialogIcon",
|
|
"width": 48,
|
|
"height": 48,
|
|
"iconFontName": "circle-alert",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$orange-primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ConfirmDialogTitle",
|
|
"name": "title",
|
|
"fill": "$text-primary",
|
|
"content": "Xác nhận thanh toán",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "600",
|
|
"textAlign": "center"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ConfirmDialogMessage",
|
|
"name": "message",
|
|
"fill": "$text-secondary",
|
|
"content": "Thanh toán đơn hàng 100,116₫ bằng Tiền mặt?",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal",
|
|
"textAlign": "center",
|
|
"lineHeight": 1.5
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ConfirmDialogActions",
|
|
"name": "actions",
|
|
"width": "fill_container",
|
|
"gap": 12,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ConfirmDialogCancel",
|
|
"name": "cancelBtn",
|
|
"width": "fill_container",
|
|
"height": 48,
|
|
"cornerRadius": 10,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ConfirmDialogCancelText",
|
|
"fill": "$text-secondary",
|
|
"content": "Hủy",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ConfirmDialogConfirm",
|
|
"name": "confirmBtn",
|
|
"width": "fill_container",
|
|
"height": 48,
|
|
"fill": {
|
|
"type": "gradient",
|
|
"gradientType": "linear",
|
|
"enabled": true,
|
|
"rotation": 135,
|
|
"size": {
|
|
"height": 1
|
|
},
|
|
"colors": [
|
|
{
|
|
"color": "#FF5C00",
|
|
"position": 0
|
|
},
|
|
{
|
|
"color": "#FF8A4C",
|
|
"position": 1
|
|
}
|
|
]
|
|
},
|
|
"cornerRadius": 10,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ConfirmDialogConfirmText",
|
|
"fill": "$text-primary",
|
|
"content": "Xác nhận",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ToastSuccess",
|
|
"name": "Organism/Toast/Success",
|
|
"reusable": true,
|
|
"width": 400,
|
|
"fill": "#22C55E18",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$green-success"
|
|
},
|
|
"gap": 12,
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "ToastSuccessIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "check-circle",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$green-success"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ToastSuccessText",
|
|
"name": "message",
|
|
"fill": "$green-success",
|
|
"content": "Thanh toán thành công!",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ToastError",
|
|
"name": "Organism/Toast/Error",
|
|
"reusable": true,
|
|
"width": 400,
|
|
"fill": "#EF444418",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "#EF4444"
|
|
},
|
|
"gap": 12,
|
|
"padding": [
|
|
16,
|
|
20
|
|
],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "ToastErrorIcon",
|
|
"width": 24,
|
|
"height": 24,
|
|
"iconFontName": "x-circle",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "#EF4444"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ToastErrorText",
|
|
"name": "message",
|
|
"fill": "#EF4444",
|
|
"content": "Giao dịch thất bại. Vui lòng thử lại.",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 15,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ApptBadge",
|
|
"name": "shBadge",
|
|
"fill": "#14B8A618",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ApptBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$spa-primary",
|
|
"content": "💆 APPOINTMENT",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ApptExamples",
|
|
"name": "apptExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"padding": 40,
|
|
"gap": 24,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "SlotAvailable",
|
|
"name": "Organism/Appointment/Available",
|
|
"reusable": true,
|
|
"width": 140,
|
|
"height": 80,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default",
|
|
"dashPattern": [
|
|
4,
|
|
4
|
|
]
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "SlotAvailTime",
|
|
"name": "slotTime",
|
|
"fill": "$text-primary",
|
|
"content": "09:00",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SlotAvailLabel",
|
|
"fill": "$green-success",
|
|
"content": "Có slot",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SlotBooked",
|
|
"name": "Organism/Appointment/Booked",
|
|
"reusable": true,
|
|
"width": 140,
|
|
"height": 80,
|
|
"fill": "$spa-primary",
|
|
"cornerRadius": 12,
|
|
"layout": "vertical",
|
|
"padding": 12,
|
|
"gap": 4,
|
|
"alignItems": "flex_start",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "SlotBookTime",
|
|
"name": "timeRange",
|
|
"fill": "$text-muted",
|
|
"content": "10:00 - 11:30",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SlotBookCust",
|
|
"name": "customerName",
|
|
"fill": "$text-primary",
|
|
"content": "Chị Lan",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SlotBookSvc",
|
|
"name": "serviceName",
|
|
"fill": "$text-muted",
|
|
"content": "Facial 90 phút",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SlotInProgress",
|
|
"name": "Organism/Appointment/InProgress",
|
|
"reusable": true,
|
|
"width": 140,
|
|
"height": 80,
|
|
"fill": "$spa-dark",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$green-success"
|
|
},
|
|
"layout": "vertical",
|
|
"padding": 12,
|
|
"gap": 4,
|
|
"alignItems": "flex_start",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "SlotProgTop",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "SlotProgStatus",
|
|
"fill": "$green-success",
|
|
"content": "ĐANG LÀM",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 10,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SlotProgRemain",
|
|
"fill": "$text-muted",
|
|
"content": "45p còn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 10,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SlotProgCust",
|
|
"name": "customerName",
|
|
"fill": "$text-primary",
|
|
"content": "Chị Hương",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "SlotProgStaff",
|
|
"name": "therapist",
|
|
"fill": "$text-muted",
|
|
"content": "NV: Ngọc",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RmGridBadge",
|
|
"name": "shBadge",
|
|
"fill": "#EC489918",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RmGridBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$karaoke-primary",
|
|
"content": "🎤 ROOM GRID",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RoomGridExamples",
|
|
"name": "roomGridExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"padding": 40,
|
|
"gap": 24,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "RoomAvailable",
|
|
"name": "Organism/Room/Available",
|
|
"reusable": true,
|
|
"width": 160,
|
|
"height": 120,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RmAvailIcon",
|
|
"content": "🎤",
|
|
"fontSize": 24
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RmAvailName",
|
|
"name": "roomName",
|
|
"fill": "$text-primary",
|
|
"content": "Phòng VIP 01",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RmAvailCap",
|
|
"name": "capacity",
|
|
"fill": "$text-secondary",
|
|
"content": "8-12 người",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RoomOccupied",
|
|
"name": "Organism/Room/Occupied",
|
|
"reusable": true,
|
|
"width": 160,
|
|
"height": 120,
|
|
"fill": "$karaoke-primary",
|
|
"cornerRadius": 16,
|
|
"layout": "vertical",
|
|
"justifyContent": "space_between",
|
|
"padding": 12,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "RmOccTop",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RmOccName",
|
|
"name": "roomName",
|
|
"fill": "$text-primary",
|
|
"content": "VIP 02",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RmOccTimer",
|
|
"name": "sessionTimer",
|
|
"fill": "$text-primary",
|
|
"content": "01:45:22",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RmOccMid",
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RmOccAmount",
|
|
"name": "totalAmount",
|
|
"fill": "$text-primary",
|
|
"content": "1,250,000đ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RmOccRate",
|
|
"name": "hourlyRate",
|
|
"fill": "$text-muted",
|
|
"content": "Giờ: 150K/h",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RmOccActions",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "RmOccAddBtn",
|
|
"width": 60,
|
|
"height": 28,
|
|
"fill": "#FFFFFF33",
|
|
"cornerRadius": 6,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RmOccAddTxt",
|
|
"fill": "$text-primary",
|
|
"content": "+ Thêm",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RmOccEndBtn",
|
|
"width": 60,
|
|
"height": 28,
|
|
"fill": "#FFFFFF33",
|
|
"cornerRadius": 6,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RmOccEndTxt",
|
|
"fill": "$text-primary",
|
|
"content": "Kết thúc",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "SvcDispBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "SvcDispBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "SERVICE DISPLAYS",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KitchenDispExamples",
|
|
"name": "kitchenDisplayExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"padding": 40,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "KitchenTicket",
|
|
"name": "Organism/Display/KitchenTicket",
|
|
"reusable": true,
|
|
"width": 280,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "KTHeader",
|
|
"name": "ticketHeader",
|
|
"width": "fill_container",
|
|
"fill": "$orange-primary",
|
|
"padding": 12,
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "KTOrderNum",
|
|
"name": "orderNumber",
|
|
"fill": "$text-primary",
|
|
"content": "#0042",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KTTableInfo",
|
|
"name": "tableInfo",
|
|
"fill": "$text-muted",
|
|
"content": "Bàn 07",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KTElapsed",
|
|
"name": "elapsedTime",
|
|
"fill": "$text-primary",
|
|
"content": "5:32",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KTItems",
|
|
"name": "ticketItems",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"padding": 12,
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "KTItem1",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "KTItem1Name",
|
|
"fill": "$text-primary",
|
|
"content": "2x Phở bò tái",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KTItem1Note",
|
|
"fill": "$status-warning",
|
|
"content": "Ít hành",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KTItem2",
|
|
"width": "fill_container",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "KTItem2Name",
|
|
"fill": "$text-primary",
|
|
"content": "1x Bún chả",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KTItem3",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "KTItem3Name",
|
|
"fill": "$text-secondary",
|
|
"content": "1x Nước cam",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "KTItem3Station",
|
|
"fill": "$text-tertiary",
|
|
"content": "Bar",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "KTActions",
|
|
"name": "ticketActions",
|
|
"padding": 12,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "KTDoneBtn",
|
|
"width": 100,
|
|
"height": 36,
|
|
"fill": "$green-success",
|
|
"cornerRadius": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "KTDoneTxt",
|
|
"fill": "$text-primary",
|
|
"content": "✓ Xong",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QueueDispRow",
|
|
"gap": 24,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "QueueNumber",
|
|
"name": "Organism/Display/QueueNumber",
|
|
"reusable": true,
|
|
"width": 200,
|
|
"height": 160,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 20,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QNLabel",
|
|
"fill": "$text-secondary",
|
|
"content": "Số thứ tự",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QNNumber",
|
|
"name": "queueNumber",
|
|
"fill": "$spa-primary",
|
|
"content": "A-042",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 48,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QNService",
|
|
"name": "serviceType",
|
|
"fill": "$text-primary",
|
|
"content": "Facial",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "QueueCalling",
|
|
"name": "Organism/Display/QueueCalling",
|
|
"reusable": true,
|
|
"width": 300,
|
|
"height": 120,
|
|
"fill": "$green-success",
|
|
"cornerRadius": 20,
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "QCLabel",
|
|
"fill": "$text-primary",
|
|
"content": "🔔 MỜI KHÁCH",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QCNumber",
|
|
"name": "callingNumber",
|
|
"fill": "$text-primary",
|
|
"content": "A-038",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 56,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "QCStation",
|
|
"name": "station",
|
|
"fill": "$text-muted",
|
|
"content": "Phòng 3 - Ngọc",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RoomDisplay",
|
|
"name": "Organism/Display/RoomStatus",
|
|
"reusable": true,
|
|
"width": 400,
|
|
"height": 300,
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 20,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"justifyContent": "space_between",
|
|
"padding": 24,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RDName",
|
|
"name": "roomName",
|
|
"fill": "$text-primary",
|
|
"content": "PHÒNG VIP 01",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "700"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RDTimerBox",
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RDTimerLabel",
|
|
"fill": "$text-secondary",
|
|
"content": "THỜI GIAN",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RDTimer",
|
|
"name": "sessionTimer",
|
|
"fill": "$karaoke-primary",
|
|
"content": "02:15:42",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 64,
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RDStats",
|
|
"gap": 24,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "RDTotalBox",
|
|
"layout": "vertical",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RDTotalLabel",
|
|
"fill": "$text-secondary",
|
|
"content": "Tổng tiền",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RDTotalVal",
|
|
"name": "totalAmount",
|
|
"fill": "$text-primary",
|
|
"content": "1,850,000đ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 24,
|
|
"fontWeight": "600"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "RDPendingBox",
|
|
"layout": "vertical",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "RDPendingLabel",
|
|
"fill": "$text-secondary",
|
|
"content": "Order mới",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "RDPendingVal",
|
|
"name": "pendingItems",
|
|
"fill": "$status-warning",
|
|
"content": "3 món",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TblMapBadge",
|
|
"name": "shBadge",
|
|
"fill": "#FF5C0018",
|
|
"cornerRadius": 100,
|
|
"padding": [
|
|
6,
|
|
14
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "TblMapBadgeText",
|
|
"name": "badgeText",
|
|
"fill": "$orange-primary",
|
|
"content": "🍽️ TABLE MAP",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 11,
|
|
"fontWeight": "500",
|
|
"letterSpacing": 2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TableMapExamples",
|
|
"name": "tableMapExamples",
|
|
"width": "fill_container",
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"padding": 40,
|
|
"gap": 24,
|
|
"justifyContent": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "TableAvailable",
|
|
"name": "Organism/Table/Available",
|
|
"reusable": true,
|
|
"width": 100,
|
|
"height": 100,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$border-default"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "TblAvailNum",
|
|
"name": "tableNumber",
|
|
"fill": "$text-primary",
|
|
"content": "T01",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TblAvailSeats",
|
|
"name": "seatCount",
|
|
"fill": "$text-secondary",
|
|
"content": "4 ghế",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TableOccupied",
|
|
"name": "Organism/Table/Occupied",
|
|
"reusable": true,
|
|
"width": 100,
|
|
"height": 100,
|
|
"fill": "$orange-primary",
|
|
"cornerRadius": 12,
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "TblOccNum",
|
|
"name": "tableNumber",
|
|
"fill": "$text-primary",
|
|
"content": "T02",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TblOccAmount",
|
|
"name": "orderAmount",
|
|
"fill": "$text-muted",
|
|
"content": "450K",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TblOccTime",
|
|
"name": "elapsedTime",
|
|
"fill": "#FFFFFF99",
|
|
"content": "45 phút",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TableReserved",
|
|
"name": "Organism/Table/Reserved",
|
|
"reusable": true,
|
|
"width": 100,
|
|
"height": 100,
|
|
"fill": "#F59E0B18",
|
|
"cornerRadius": 12,
|
|
"stroke": {
|
|
"thickness": 2,
|
|
"fill": "$status-warning"
|
|
},
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"justifyContent": "center",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "TblResNum",
|
|
"name": "tableNumber",
|
|
"fill": "$status-warning",
|
|
"content": "T03",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 18,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TblResTime",
|
|
"name": "reserveTime",
|
|
"fill": "$text-secondary",
|
|
"content": "19:00",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 14,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "TblResName",
|
|
"name": "guestName",
|
|
"fill": "$text-tertiary",
|
|
"content": "Anh Minh",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TableMapContainer",
|
|
"name": "Organism/TableMap/Container",
|
|
"reusable": true,
|
|
"width": 600,
|
|
"height": 400,
|
|
"fill": "$bg-surface",
|
|
"cornerRadius": 16,
|
|
"stroke": {
|
|
"thickness": 1,
|
|
"fill": "$border-subtle"
|
|
},
|
|
"layout": "vertical",
|
|
"padding": 20,
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "TblMapContHeader",
|
|
"name": "header",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "TblMapContTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Sơ đồ bàn",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 20,
|
|
"fontWeight": "600"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "TblMapLegend",
|
|
"name": "legend",
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "LegAvail",
|
|
"gap": 6,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "LegAvailDot",
|
|
"width": 12,
|
|
"height": 12,
|
|
"fill": "$bg-elevated",
|
|
"cornerRadius": 2
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "LegAvailTxt",
|
|
"fill": "$text-secondary",
|
|
"content": "Trống",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "LegOcc",
|
|
"gap": 6,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "LegOccDot",
|
|
"width": 12,
|
|
"height": 12,
|
|
"fill": "$orange-primary",
|
|
"cornerRadius": 2
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "LegOccTxt",
|
|
"fill": "$text-secondary",
|
|
"content": "Đang phục vụ",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "LegRes",
|
|
"gap": 6,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "LegResDot",
|
|
"width": 12,
|
|
"height": 12,
|
|
"fill": "$status-warning",
|
|
"cornerRadius": 2
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "LegResTxt",
|
|
"fill": "$text-secondary",
|
|
"content": "Đã đặt",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"x": 4008,
|
|
"y": 0
|
|
}
|
|
],
|
|
"variables": {
|
|
"bg-page": {
|
|
"type": "color",
|
|
"value": "#0A0A0B"
|
|
},
|
|
"bg-surface": {
|
|
"type": "color",
|
|
"value": "#111113"
|
|
},
|
|
"bg-elevated": {
|
|
"type": "color",
|
|
"value": "#1A1A1D"
|
|
},
|
|
"bg-interactive": {
|
|
"type": "color",
|
|
"value": "#2A2A2E"
|
|
},
|
|
"bg-hover": {
|
|
"type": "color",
|
|
"value": "#3A3A3E"
|
|
},
|
|
"bg-active": {
|
|
"type": "color",
|
|
"value": "#4A4A4E"
|
|
},
|
|
"text-primary": {
|
|
"type": "color",
|
|
"value": "#FFFFFF"
|
|
},
|
|
"text-secondary": {
|
|
"type": "color",
|
|
"value": "#ADADB0"
|
|
},
|
|
"text-tertiary": {
|
|
"type": "color",
|
|
"value": "#8B8B90"
|
|
},
|
|
"text-muted": {
|
|
"type": "color",
|
|
"value": "#6B6B70"
|
|
},
|
|
"text-disabled": {
|
|
"type": "color",
|
|
"value": "#4B4B50"
|
|
},
|
|
"text-inverse": {
|
|
"type": "color",
|
|
"value": "#0A0A0B"
|
|
},
|
|
"border-default": {
|
|
"type": "color",
|
|
"value": "#2A2A2E"
|
|
},
|
|
"border-subtle": {
|
|
"type": "color",
|
|
"value": "#1F1F23"
|
|
},
|
|
"border-strong": {
|
|
"type": "color",
|
|
"value": "#4A4A4E"
|
|
},
|
|
"border-focus": {
|
|
"type": "color",
|
|
"value": "#FF5C00"
|
|
},
|
|
"accent-primary": {
|
|
"type": "color",
|
|
"value": "#FF5C00"
|
|
},
|
|
"accent-primary-hover": {
|
|
"type": "color",
|
|
"value": "#FF7A33"
|
|
},
|
|
"accent-primary-active": {
|
|
"type": "color",
|
|
"value": "#E55200"
|
|
},
|
|
"orange-primary": {
|
|
"type": "color",
|
|
"value": "#FF5C00"
|
|
},
|
|
"orange-light": {
|
|
"type": "color",
|
|
"value": "#FF8A4C"
|
|
},
|
|
"status-success": {
|
|
"type": "color",
|
|
"value": "#22C55E"
|
|
},
|
|
"status-success-bg": {
|
|
"type": "color",
|
|
"value": "#22C55E1A"
|
|
},
|
|
"status-warning": {
|
|
"type": "color",
|
|
"value": "#F59E0B"
|
|
},
|
|
"status-warning-bg": {
|
|
"type": "color",
|
|
"value": "#F59E0B1A"
|
|
},
|
|
"status-error": {
|
|
"type": "color",
|
|
"value": "#EF4444"
|
|
},
|
|
"status-error-bg": {
|
|
"type": "color",
|
|
"value": "#EF44441A"
|
|
},
|
|
"status-info": {
|
|
"type": "color",
|
|
"value": "#3B82F6"
|
|
},
|
|
"status-info-bg": {
|
|
"type": "color",
|
|
"value": "#3B82F61A"
|
|
},
|
|
"green-success": {
|
|
"type": "color",
|
|
"value": "#22C55E"
|
|
},
|
|
"vertical-restaurant": {
|
|
"type": "color",
|
|
"value": "#FF5C00"
|
|
},
|
|
"vertical-bar": {
|
|
"type": "color",
|
|
"value": "#8B5CF6"
|
|
},
|
|
"vertical-karaoke": {
|
|
"type": "color",
|
|
"value": "#EC4899"
|
|
},
|
|
"vertical-spa": {
|
|
"type": "color",
|
|
"value": "#14B8A6"
|
|
},
|
|
"vertical-retail": {
|
|
"type": "color",
|
|
"value": "#3B82F6"
|
|
},
|
|
"space-1": {
|
|
"type": "number",
|
|
"value": 4
|
|
},
|
|
"space-2": {
|
|
"type": "number",
|
|
"value": 8
|
|
},
|
|
"space-3": {
|
|
"type": "number",
|
|
"value": 12
|
|
},
|
|
"space-4": {
|
|
"type": "number",
|
|
"value": 16
|
|
},
|
|
"space-5": {
|
|
"type": "number",
|
|
"value": 20
|
|
},
|
|
"space-6": {
|
|
"type": "number",
|
|
"value": 24
|
|
},
|
|
"space-8": {
|
|
"type": "number",
|
|
"value": 32
|
|
},
|
|
"space-10": {
|
|
"type": "number",
|
|
"value": 40
|
|
},
|
|
"space-12": {
|
|
"type": "number",
|
|
"value": 48
|
|
},
|
|
"radius-sm": {
|
|
"type": "number",
|
|
"value": 4
|
|
},
|
|
"radius-md": {
|
|
"type": "number",
|
|
"value": 8
|
|
},
|
|
"radius-lg": {
|
|
"type": "number",
|
|
"value": 12
|
|
},
|
|
"radius-xl": {
|
|
"type": "number",
|
|
"value": 16
|
|
},
|
|
"radius-full": {
|
|
"type": "number",
|
|
"value": 9999
|
|
},
|
|
"text-xs": {
|
|
"type": "number",
|
|
"value": 12
|
|
},
|
|
"text-sm": {
|
|
"type": "number",
|
|
"value": 14
|
|
},
|
|
"text-base": {
|
|
"type": "number",
|
|
"value": 16
|
|
},
|
|
"text-lg": {
|
|
"type": "number",
|
|
"value": 18
|
|
},
|
|
"text-xl": {
|
|
"type": "number",
|
|
"value": 20
|
|
},
|
|
"text-2xl": {
|
|
"type": "number",
|
|
"value": 24
|
|
},
|
|
"text-3xl": {
|
|
"type": "number",
|
|
"value": 30
|
|
},
|
|
"text-4xl": {
|
|
"type": "number",
|
|
"value": 36
|
|
},
|
|
"font-normal": {
|
|
"type": "string",
|
|
"value": "400"
|
|
},
|
|
"font-medium": {
|
|
"type": "string",
|
|
"value": "500"
|
|
},
|
|
"font-semibold": {
|
|
"type": "string",
|
|
"value": "600"
|
|
},
|
|
"font-bold": {
|
|
"type": "string",
|
|
"value": "700"
|
|
},
|
|
"shadow-sm": {
|
|
"type": "string",
|
|
"value": "0 1px 2px rgba(0,0,0,0.3)"
|
|
},
|
|
"shadow-md": {
|
|
"type": "string",
|
|
"value": "0 4px 6px rgba(0,0,0,0.4)"
|
|
},
|
|
"shadow-lg": {
|
|
"type": "string",
|
|
"value": "0 10px 15px rgba(0,0,0,0.5)"
|
|
},
|
|
"shadow-xl": {
|
|
"type": "string",
|
|
"value": "0 20px 25px rgba(0,0,0,0.6)"
|
|
}
|
|
}
|
|
} |