9106 lines
326 KiB
Plaintext
9106 lines
326 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": 2410,
|
|
"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",
|
|
"id": "CompLib",
|
|
"x": 3710,
|
|
"y": 0,
|
|
"name": "aPOS Component Library",
|
|
"width": 1440,
|
|
"fill": "$bg-page",
|
|
"layout": "vertical",
|
|
"gap": 80,
|
|
"padding": [
|
|
80,
|
|
120,
|
|
100,
|
|
120
|
|
],
|
|
"children": [
|
|
{
|
|
"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": "BtnSection",
|
|
"name": "Buttons & Actions Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "BtnSectHeader",
|
|
"name": "buttonSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"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": "text",
|
|
"id": "xqghZ",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Interactive Elements",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "zPj8L",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Primary and secondary button variants for calls-to-action and navigation.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "BadgeSection",
|
|
"name": "Badges & Labels Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "BadgeSectHeader",
|
|
"name": "badgeSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"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": "text",
|
|
"id": "HNlXw",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Status Indicators",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "bPaMT",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Small labels and badges for highlighting features, categories, or status.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "CardSection",
|
|
"name": "Cards Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "CardSectHeader",
|
|
"name": "cardSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"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": "text",
|
|
"id": "5dZC4",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Content Containers",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "HeRP2",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 700,
|
|
"content": "Various card types for displaying features, pricing, industry solutions, and steps.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "NavSection",
|
|
"name": "Navigation Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "NavSectHeader",
|
|
"name": "navSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"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": "text",
|
|
"id": "5HgAI",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Headers & Menus",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "72MpO",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Navigation bars and menu components for desktop and mobile layouts.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "TypoSection",
|
|
"name": "Typography & Branding Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "TypoSectHeader",
|
|
"name": "typoSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"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": "text",
|
|
"id": "RuoWE",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Brand Identity Elements",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "DCNsc",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Logo, section headers, links, and typography styles.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "UtilSection",
|
|
"name": "Utility Components Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "UtilSectHeader",
|
|
"name": "utilSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"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": "text",
|
|
"id": "gtlnT",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Helper Components",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "5OBHB",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Dividers, social icons, check items, and other utility elements.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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": "FooterSection",
|
|
"name": "Footer Components Section",
|
|
"width": "fill_container",
|
|
"layout": "vertical",
|
|
"gap": 32,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "FooterSectHeader",
|
|
"name": "footerSectionHeader",
|
|
"layout": "vertical",
|
|
"gap": 16,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"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": "text",
|
|
"id": "GK1Rq",
|
|
"name": "shTitle",
|
|
"fill": "$text-primary",
|
|
"content": "Footer Elements",
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 42,
|
|
"fontWeight": "normal",
|
|
"letterSpacing": -1
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "lDotf",
|
|
"name": "shDesc",
|
|
"fill": "$text-tertiary",
|
|
"textGrowth": "fixed-width",
|
|
"width": 600,
|
|
"content": "Footer column components for organizing links and information.",
|
|
"lineHeight": 1.6,
|
|
"textAlign": "center",
|
|
"fontFamily": "Roboto",
|
|
"fontSize": 16,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"variables": {
|
|
"bg-elevated": {
|
|
"type": "color",
|
|
"value": "#1A1A1D"
|
|
},
|
|
"bg-interactive": {
|
|
"type": "color",
|
|
"value": "#2A2A2E"
|
|
},
|
|
"bg-page": {
|
|
"type": "color",
|
|
"value": "#0A0A0B"
|
|
},
|
|
"bg-surface": {
|
|
"type": "color",
|
|
"value": "#111113"
|
|
},
|
|
"border-default": {
|
|
"type": "color",
|
|
"value": "#2A2A2E"
|
|
},
|
|
"border-subtle": {
|
|
"type": "color",
|
|
"value": "#1F1F23"
|
|
},
|
|
"green-success": {
|
|
"type": "color",
|
|
"value": "#22C55E"
|
|
},
|
|
"orange-light": {
|
|
"type": "color",
|
|
"value": "#FF8A4C"
|
|
},
|
|
"orange-primary": {
|
|
"type": "color",
|
|
"value": "#FF5C00"
|
|
},
|
|
"text-disabled": {
|
|
"type": "color",
|
|
"value": "#6B6B70"
|
|
},
|
|
"text-muted": {
|
|
"type": "color",
|
|
"value": "#FFFFFFCC"
|
|
},
|
|
"text-primary": {
|
|
"type": "color",
|
|
"value": "#FFFFFF"
|
|
},
|
|
"text-secondary": {
|
|
"type": "color",
|
|
"value": "#ADADB0"
|
|
},
|
|
"text-tertiary": {
|
|
"type": "color",
|
|
"value": "#8B8B90"
|
|
}
|
|
}
|
|
} |