From 010841f763fdb9997d81f2c73f93c4a7e1b42d68 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Tue, 3 Feb 2026 03:14:05 +0700 Subject: [PATCH] chore: Remove tPOS multivertical design file. --- pencil-design/tPOS-multivertical.pen | 11143 ------------------------- 1 file changed, 11143 deletions(-) delete mode 100644 pencil-design/tPOS-multivertical.pen diff --git a/pencil-design/tPOS-multivertical.pen b/pencil-design/tPOS-multivertical.pen deleted file mode 100644 index 64c14007..00000000 --- a/pencil-design/tPOS-multivertical.pen +++ /dev/null @@ -1,11143 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "IxtYA", - "x": 0, - "y": 0, - "name": "aPOS Landing Page", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "8qjLq", - "name": "newHeader", - "width": 1440, - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "tpMHr", - "name": "Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 40, - "padding": [ - 100, - 120, - 80, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IFtQL", - "name": "newHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "G1DqV", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "dpRNf", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hệ thống POS & Loyalty hàng đầu Việt Nam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "z6SsC", - "name": "headline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 900, - "content": "Quản lý bán hàng thông minh.\nTích điểm khách hàng tự động.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 56, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "50RjU", - "name": "subline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 750, - "content": "aPOS là giải pháp POS toàn diện cho ngành F&B, Bar, Karaoke và Coffee — giúp bạn bán hàng nhanh hơn, quản lý thông minh hơn và giữ chân khách hàng bằng hệ thống tích điểm thành viên.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Ktf5k", - "name": "ctaRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AqJ6X", - "name": "newPrimaryCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ocR1c", - "name": "btnPIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "fEtjW", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Dys8A", - "name": "newSecondaryCta", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CuXSB", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "JptXG", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CX0yT", - "name": "Product Mockup", - "clip": true, - "width": 1000, - "height": 560, - "fill": { - "type": "image", - "enabled": true, - "url": "./images/generated-1769859502510.png", - "mode": "fill" - }, - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FfW2s", - "name": "mockupLabel", - "fill": "$text-disabled", - "content": "POS Dashboard Preview", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "yEE9s", - "name": "newTrustStats", - "width": "fill_container", - "gap": 40, - "padding": [ - 20, - 0, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QdxMK", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "Được tin dùng bởi 2,000+ doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "77g7e", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "jOexp", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao dịch/ngày", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "yVcTj", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "2btDz", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "lZbGT", - "name": "Features Section", - "width": "fill_container", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ztFwh", - "name": "newFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "hz6Jy", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "zWi76", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "AMYB9", - "name": "shTitle", - "fill": "$text-primary", - "content": "Mọi thứ bạn cần để vận hành doanh nghiệp", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "xl0pr", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Từ quản lý đơn hàng đến tích điểm khách hàng, aPOS cung cấp giải pháp toàn diện cho doanh nghiệp của bạn.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jsaba", - "name": "Feature Grid", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DA2ma", - "name": "newFC1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ttzoK", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IsPEk", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "V6MaB", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "xzGQH", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hoạt động trên mọi thiết bị: tablet, điện thoại và máy tính. Đồng bộ dữ liệu realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "nnfv4", - "name": "newFC2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "Vhe45", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2R7jV", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "MiZas", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "uVGg0", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hệ thống loyalty tự động: tích điểm, đổi quà, phân hạng thành viên theo chi tiêu.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "lRmHb", - "name": "newFC3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "JLUHC", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WX408", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "pFBcT", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Y1FkX", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard trực quan với biểu đồ realtime. Theo dõi doanh thu, sản phẩm bán chạy và xu hướng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "pcbaX", - "name": "Feature Grid Row 2", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "J2O62", - "name": "newFC4", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "wgTRi", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#A855F718", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IjVLP", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#A855F7" - } - ] - }, - { - "type": "text", - "id": "FxXdh", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý nhân viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "vVQ8D", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Phân quyền theo vai trò, theo dõi ca làm việc, tính lương và đánh giá hiệu suất.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GXocB", - "name": "newFC5", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HJ8wD", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#F59E0B18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mdbjq", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "text", - "id": "NVthg", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý kho hàng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "8Yrnc", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Theo dõi tồn kho, cảnh báo hết hàng, nhập xuất kho tự động khi có đơn hàng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "A2gcA", - "name": "newFC6", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "Yd3x5", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#EC489918", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Y8w0u", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "#EC4899" - } - ] - }, - { - "type": "text", - "id": "ajm5S", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Thanh toán đa kênh", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6tgCh", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hỗ trợ tiền mặt, thẻ, QR code, ví điện tử. Tích hợp mọi cổng thanh toán phổ biến.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "1ZzyA", - "name": "Industry Solutions", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "eU7we", - "name": "newIndHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "p6J5O", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "vRiH8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NGÀNH NGHỀ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "x6xl8", - "name": "shTitle", - "fill": "$text-primary", - "content": "Giải pháp cho mọi ngành kinh doanh", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "W18Kq", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "aPOS được thiết kế riêng cho từng ngành, với quy trình vận hành và tính năng phù hợp nhất.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "rPxFV", - "name": "Industry Grid", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "oOZI0", - "name": "newInd1", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "J2ulP", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1591552694788-3b74d181b46f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMDl8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "8t0Kl", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "5yC7a", - "name": "indTitle", - "fill": "$text-primary", - "content": "Nhà hàng & F&B", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Mi9F0", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý bàn, order tại chỗ & mang đi, chia bill, quản lý bếp realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Q0Hz2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Xw9pj", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "E47BO", - "name": "chipText", - "fill": "$text-secondary", - "content": "Quản lý bàn", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ilssA", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Iby7p", - "name": "chipText", - "fill": "$text-secondary", - "content": "Kitchen Display", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BBpEN", - "name": "newInd2", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "xJiSx", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1610931002340-fe06e753976e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMTJ8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "r6MIK", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "kOgh7", - "name": "indTitle", - "fill": "$text-primary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tY4IM", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tab quản lý khách, happy hour tự động, quản lý công thức pha chế.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "eRO4k", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "x7J4F", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "dg43M", - "name": "chipText", - "fill": "$text-secondary", - "content": "Tab Manager", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "rAv1H", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "jxO6Q", - "name": "chipText", - "fill": "$text-secondary", - "content": "Happy Hour", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "4N0SP", - "name": "newInd3", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "nx1DJ", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1760598742492-7ad941e658e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMTh8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "fDUMx", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "S7Bu3", - "name": "indTitle", - "fill": "$text-primary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "C8Mdp", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý phòng, tính giờ tự động, gọi đồ uống từ phòng, khuyến mãi theo khung giờ.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "81mgY", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "fqHyv", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ifaEv", - "name": "chipText", - "fill": "$text-secondary", - "content": "Quản lý phòng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AWtwp", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "kbEcj", - "name": "chipText", - "fill": "$text-secondary", - "content": "Tính giờ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "XwCiu", - "name": "newInd4", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "VdwON", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1688683035298-2eff07d8c323?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMjF8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "l4KPm", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "E9IUZ", - "name": "indTitle", - "fill": "$text-primary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RbSR7", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Order nhanh, quản lý menu đa dạng, in barcode, kết nối máy pha trực tiếp.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "r1z2N", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "LxRKS", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVd6g", - "name": "chipText", - "fill": "$text-secondary", - "content": "Quick Order", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "z55bo", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Xf7lP", - "name": "chipText", - "fill": "$text-secondary", - "content": "Loyalty", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "EPpvo", - "name": "How It Works", - "width": "fill_container", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "YuShH", - "name": "newHiwHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "eNKJn", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "vWIWI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẮT ĐẦU DỄ DÀNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "QsxWM", - "name": "shTitle", - "fill": "$text-primary", - "content": "3 bước để đưa doanh nghiệp lên aPOS", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "67Eip", - "name": "shDesc", - "enabled": false, - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Section description goes here with more details about this section.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "kHnqX", - "name": "stepsRow", - "width": "fill_container", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "6lrDg", - "name": "newStep1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "4O5Qo", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "moJQR", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "i31Ol", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Đăng ký tài khoản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "bqaWg", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tạo tài khoản miễn phí chỉ trong 2 phút. Không cần thẻ tín dụng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "yXLbg", - "name": "newStep2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QZaPn", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "5S6qq", - "name": "stepNumText", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "b4Geq", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Cài đặt cửa hàng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "9Kz1R", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Thêm menu, nhân viên và cấu hình hệ thống loyalty theo nhu cầu.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "dT4H5", - "name": "newStep3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Kzh11", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LjEwo", - "name": "stepNumText", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "ZMaSf", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Bắt đầu bán hàng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "JsYU2", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Bắt đầu nhận đơn, tích điểm khách hàng và theo dõi doanh thu ngay lập tức.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PUXqC", - "name": "Pricing Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ApJyq", - "name": "newPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EqJK7", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ywqo2", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "fmNVg", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói dịch vụ phù hợp mọi quy mô", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "FsJSQ", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Bắt đầu miễn phí, nâng cấp khi doanh nghiệp phát triển. Không phí ẩn.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "5kJ39", - "name": "Pricing Grid", - "width": "fill_container", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "tgARM", - "name": "newStarter", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "kkMfs", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "z4JfD", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "2hC8D", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "AIl3d", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "J0Hmh", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "STsMe", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Miễn phí", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "SBD8B", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "bnncL", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Dành cho cửa hàng nhỏ mới bắt đầu", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "jaNAs", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KDm7t", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "gZW53", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "f6f2F", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "EmvXg", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "nxrPn", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PT7fu", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "zKkeP", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 giao dịch/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "JCBnm", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2wSt6", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "TKfKt", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "W44Ge", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "pA83d", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "yDCY3", - "name": "btnSText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ZcmxL", - "name": "newPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "VuEoj", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "pSIOd", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Bq7HU", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "z9xYo", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "BDGwY", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "SAUa0", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YnOnQ", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "mGOke", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Dành cho chuỗi cửa hàng đang phát triển", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "VirYB", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kruAJ", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "HxBKP", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "iDfHq", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "2O1SN", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tTAOL", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LHLCW", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "MYADR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Giao dịch không giới hạn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pepsl", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qsAwN", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "wSuyK", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo nâng cao & xuất Excel", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FxkD9", - "name": "newProBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ry6qH", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "Y3oA2", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "xzGPb", - "name": "newEnt", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "lJRxo", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "U5spD", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "rQkVA", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "orOne", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "S6enu", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "zMXYz", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "87ILE", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "gvyl2", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Dành cho chuỗi lớn và doanh nghiệp đa chi nhánh", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "eG9vj", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kLIGa", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "ifsTy", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "m8IWV", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "lH5lK", - "name": "checkText", - "fill": "$text-secondary", - "content": "Không giới hạn cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NGRVt", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Q1EeF", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "YmInO", - "name": "checkText", - "fill": "$text-secondary", - "content": "API tích hợp & white-label", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "gXHga", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "uSsyg", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "WrHKB", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "2VLLn", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4S2MD", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "y95SA", - "name": "btnSText", - "fill": "$text-primary", - "content": "Liên hệ tư vấn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KMcSO", - "name": "Final CTA", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 32, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "pZ0dD", - "name": "ctaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "2f9hS", - "name": "ctaSub", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 550, - "content": "Hơn 2,000 doanh nghiệp đã tin tưởng aPOS. Tham gia ngay hôm nay — hoàn toàn miễn phí.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "NLwzN", - "name": "ctaBtnRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SEbxe", - "name": "newCtaBtn1", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2c1V5", - "name": "btnPIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "dwOU4", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "UmV8x", - "name": "newCtaBtn2", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "5ZrRT", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "6Uub3", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Đặt lịch demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "text", - "id": "IUzS0", - "name": "ctaTrust", - "fill": "$text-disabled", - "content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ZJjfQ", - "name": "Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 120 - ], - "children": [ - { - "type": "frame", - "id": "RWIqm", - "name": "footTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PbyTa", - "name": "footBrand", - "width": 320, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "6Dm97", - "name": "newFootLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "Vz7PV", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "5Rfgw", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "hbZGS", - "name": "footTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho ngành F&B, Bar, Karaoke và Coffee tại Việt Nam.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "iY8ru", - "name": "newFootCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "p5LpH", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "VfYlH", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "iKBS3", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty & Membership", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "HQbaO", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Báo cáo & Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ztrVL", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Quản lý kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TO01Z", - "name": "newFootCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ouZqX", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Ngành nghề", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "VWP8z", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Nhà hàng & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "YMCcn", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "w5Eww", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "8NsnV", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SU4XZ", - "name": "newFootCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "IJDFD", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Hỗ trợ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "XU1Cu", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Trung tâm trợ giúp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "s6Nyu", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "R9Smd", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Chính sách bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "IxH0i", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Điều khoản sử dụng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n8eJ5", - "name": "newFootDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "OXqMx", - "name": "footBottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ujwE3", - "name": "footCopy", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "zRuDe", - "name": "footSocials", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IvThd", - "name": "newSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "loHwh", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "24g7T", - "name": "newSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "oDnuk", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "TCdzl", - "name": "newSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ls6CG", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "u9sTP", - "name": "newSoc4", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OYJjl", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MobPg", - "x": 1910, - "y": 0, - "name": "aPOS Mobile Page", - "width": 390, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "mNav1", - "name": "mobileHeader", - "width": 390, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NsgO1", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "eWA05", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "WHoit", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "4TnP7", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "mHero", - "name": "Mobile Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 60, - 24, - 40, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mBadge1", - "name": "mHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "Z3jN0", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "6PLFF", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "POS & Loyalty #1 Việt Nam", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "mHead1", - "name": "mHeadline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý bán hàng\nthông minh.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "text", - "id": "mSub1", - "name": "mSubline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "aPOS là giải pháp POS toàn diện cho F&B, Bar, Karaoke và Coffee — bán hàng nhanh, quản lý thông minh.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "mCtas", - "name": "mCtaStack", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "mCta1", - "name": "mPrimaryCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "I0W7T", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nCPiZ", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "mCta2", - "name": "mSecondaryCta", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RIlLJ", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "o0gUh", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mMock", - "name": "mProductMockup", - "clip": true, - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "./images/generated-1769859502510.png", - "mode": "fill" - }, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - } - } - ] - }, - { - "type": "frame", - "id": "mFeat", - "name": "Mobile Features Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 24, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mFeatH", - "name": "mFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "GdSXX", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "tZhQQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "yRqrX", - "name": "shTitle", - "fill": "$text-primary", - "content": "Mọi thứ bạn cần", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "K0Bug", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Từ quản lý đơn hàng đến tích điểm khách hàng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFGrid", - "name": "mFeatureStack", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "mFC1", - "name": "mFeatureCard1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "VJ1VO", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "sscPx", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "QhgVN", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6QJrG", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hoạt động trên mọi thiết bị. Đồng bộ realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFC2", - "name": "mFeatureCard2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "OoQbN", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "hamiI", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "kzMgW", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "24rWi", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Loyalty tự động: tích điểm, đổi quà, phân hạng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFC3", - "name": "mFeatureCard3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "vrO4H", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1u2mH", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "X50Q2", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6UVmW", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard realtime, theo dõi sản phẩm bán chạy.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "mPrc", - "name": "Mobile Pricing Section", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mPrcH", - "name": "mPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "0Y3Dv", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ZshkQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "P3itJ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói phù hợp mọi quy mô", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "ZdFWI", - "name": "shDesc", - "enabled": false, - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Section description goes here with more details about this section.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mPrcStack", - "name": "mPricingStack", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "mPrc1", - "name": "mProPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "o8knd", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Xow2x", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "AO70W", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "3IOQL", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "4iwqa", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "Ej9Qy", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "pWlWk", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "pFoWe", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho chuỗi đang phát triển", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "1K3b5", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "P6JkD", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "HEWri", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "scGHI", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "sN1RU", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DEO1W", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "tC0eE", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "7zKf9", - "name": "checkText", - "fill": "$text-secondary", - "content": "Giao dịch không giới hạn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Ux752", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ujmo8", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ZEdgf", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo nâng cao", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QYYET", - "name": "mProCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Bz4ky", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "dTZKl", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mPrc2", - "name": "mStarterPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "9mCvs", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "HHpa9", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "q7Yf1", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "cyHXI", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "sSnLb", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "XP12E", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Miễn phí", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "qL0oG", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "qlTKz", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho cửa hàng nhỏ mới bắt đầu", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "7Uk8L", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "mEY76", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "0AwwL", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ao9nl", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "X4DFp", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "JEfAL", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "zdFLa", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "MI3ss", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 giao dịch/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "9ih9l", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MsmeF", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "jjvqC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MpGzn", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MCCrg", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EhiuS", - "name": "btnSText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "mCta", - "name": "Mobile CTA Section", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 20, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "mCtaT", - "name": "mCtaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "frame", - "id": "mCtaBtn", - "name": "mCtaPrimary", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "V9mJP", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "LJPiD", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "mCtaTrust", - "name": "mCtaTrustText", - "fill": "$text-disabled", - "content": "Không cần thẻ · Thiết lập 2 phút", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFoot", - "name": "Mobile Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 24, - "padding": [ - 40, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mFootLogo", - "name": "mFooterLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "6cb08", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "Jb2YP", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "mFootTag", - "name": "mFooterTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "mSocRow", - "name": "mSocialRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mS1", - "name": "mSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ha00P", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "mS2", - "name": "mSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "tgwMC", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "mS3", - "name": "mSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FA77I", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "mFootDiv", - "name": "mFooterDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "text", - "id": "mCopy", - "name": "mCopyright", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TabPg", - "x": 2770, - "y": 0, - "name": "aPOS Tablet Page", - "width": 768, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "tNav", - "name": "Tablet NavBar", - "width": "fill_container", - "padding": [ - 16, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tLogo", - "name": "tNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "CH0we", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "55EeP", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "frame", - "id": "tNavLinks", - "name": "tNavLinksRow", - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tL1", - "name": "tNavL1", - "fill": "$text-secondary", - "content": "Tính năng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tL2", - "name": "tNavL2", - "fill": "$text-secondary", - "content": "Bảng giá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tL3", - "name": "tNavL3", - "fill": "$text-secondary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tNavCta", - "name": "tNavTrialBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MdCZ7", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "UHBDe", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tHero", - "name": "Tablet Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "padding": [ - 80, - 48, - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tBadge", - "name": "tHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "NEFdT", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "x5aXx", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hệ thống POS & Loyalty hàng đầu Việt Nam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "tHead", - "name": "tHeadline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 650, - "content": "Quản lý bán hàng thông minh.\nTích điểm khách hàng tự động.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 40, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "text", - "id": "tSub", - "name": "tSubline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 550, - "content": "aPOS là giải pháp POS toàn diện cho ngành F&B, Bar, Karaoke và Coffee — giúp bạn bán hàng nhanh hơn và giữ chân khách hàng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "tCtas", - "name": "tCtaRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tCta1", - "name": "tPrimaryCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DUSpV", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "84psj", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "tCta2", - "name": "tSecondaryCta", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7xn7F", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "lDTmo", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tMock", - "name": "tProductMockup", - "clip": true, - "width": 650, - "height": 365, - "fill": { - "type": "image", - "enabled": true, - "url": "./images/generated-1769859502510.png", - "mode": "fill" - }, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - } - } - ] - }, - { - "type": "frame", - "id": "tFeat", - "name": "Tablet Features Section", - "width": "fill_container", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tFeatH", - "name": "tFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "T79s5", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "RPSM5", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "0kwb9", - "name": "shTitle", - "fill": "$text-primary", - "content": "Mọi thứ bạn cần để vận hành", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "dr5Bu", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Từ quản lý đơn hàng đến tích điểm khách hàng, aPOS cung cấp giải pháp toàn diện.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFGrid", - "name": "tFeatureGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tFC1", - "name": "tFeatureCard1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "CKliQ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qwNCa", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "WzWhl", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "hH4Ij", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hoạt động trên mọi thiết bị. Đồng bộ realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFC2", - "name": "tFeatureCard2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "KLhq7", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "uheZw", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "rToEP", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Q9LlX", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Loyalty tự động: tích điểm, đổi quà, phân hạng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tFGrid2", - "name": "tFeatureGrid2", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tFC3", - "name": "tFeatureCard3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "6IGig", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JRpGR", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "QXd9H", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KCorA", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard realtime. Theo dõi sản phẩm bán chạy.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFC4", - "name": "tFeatureCard4", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "OrBY6", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#A855F718", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "wwx7N", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#A855F7" - } - ] - }, - { - "type": "text", - "id": "EDunI", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý nhân viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "H5L0U", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Phân quyền, theo dõi ca làm, tính lương.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "tPrc", - "name": "Tablet Pricing Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tPrcH", - "name": "tPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "5A9ot", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "u0Adu", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "qAvL2", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói dịch vụ phù hợp", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "oAkDh", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 400, - "content": "Bắt đầu miễn phí, nâng cấp khi phát triển.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tPrcGrid", - "name": "tPricingGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tPrc1", - "name": "tStarterPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "eJBIC", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "8KP47", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "r4XQV", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "6FvlL", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "BA67c", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "G2fB2", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Miễn phí", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "vMefg", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "t3jSo", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho cửa hàng nhỏ", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "uU5EQ", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "l16NG", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EN6Ut", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VlKXx", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "YIaJg", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CMC5G", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OMeW3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "EG7K3", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 giao dịch/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "PiwxZ", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "t2bi7", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "sgJ0T", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "wc9r2", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "I93SS", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "KbD8j", - "name": "btnSText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tPrc2", - "name": "tProPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "tPRqe", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "QT07v", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "BpPrf", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "0aX3K", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "Yn0xA", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "ZM7dC", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "qSsdQ", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "aKzal", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho chuỗi phát triển", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "ZpCjl", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kgCR9", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "6bqLl", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "vMQnD", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "SVxvC", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "AY7Uh", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WXfvG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "0zD8m", - "name": "checkText", - "fill": "$text-secondary", - "content": "Giao dịch không giới hạn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "4egsm", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Hd4C4", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "NHplH", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo nâng cao", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Gg92n", - "name": "tProCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "E8Q4M", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "cG89F", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "tCta", - "name": "Tablet CTA Section", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 24, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tCtaT", - "name": "tCtaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "frame", - "id": "tCtaBtns", - "name": "tCtaButtons", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tCtaB1", - "name": "tCtaPrimary", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "8hMtq", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "cAq9F", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "tCtaB2", - "name": "tCtaSecondary", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "q3Jhu", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "cLISI", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Đặt lịch demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "text", - "id": "tCtaTrust", - "name": "tCtaTrustText", - "fill": "$text-disabled", - "content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFoot", - "name": "Tablet Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "id": "tFootTop", - "name": "tFooterTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "tFootBrand", - "name": "tFooterBrand", - "width": 280, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "tFLogo", - "name": "tFootLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "2voAL", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "6WxMZ", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "tFTag", - "name": "tFootTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 260, - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFootCols", - "name": "tFooterColumns", - "gap": 48, - "children": [ - { - "type": "frame", - "id": "tFCol1", - "name": "tFootCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "vQ3jr", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "vsK21", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "YG2ju", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "dg59B", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Báo cáo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "eMbMV", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Quản lý kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFCol2", - "name": "tFootCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "AwD8s", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Hỗ trợ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "sTwJb", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Trợ giúp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "EOJmD", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "XpRcP", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qybaE", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Điều khoản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "tFootDiv", - "name": "tFooterDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "tFootBot", - "name": "tFooterBottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tCopy", - "name": "tCopyright", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "tSocRow", - "name": "tSocialRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tS1", - "name": "tSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "jTxLT", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS2", - "name": "tSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "gxXJf", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS3", - "name": "tSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FtADR", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS4", - "name": "tSoc4", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kXQIC", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "aPOS Component Library", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 40, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NumpadBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NUMPAD KEYS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NumpadExamples", - "name": "numpadKeyExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 16, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NumKey1", - "name": "Atom/NumpadKey/Standard", - "reusable": true, - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey1Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey2", - "name": "exampleNumpadKey2", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey2Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey3", - "name": "exampleNumpadKey3", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey3Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKeyClear", - "name": "Atom/NumpadKey/Action/Clear", - "reusable": true, - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF4444" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKeyClearText", - "name": "keyLabel", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NumKeyEnter", - "name": "Atom/NumpadKey/Action/Enter", - "reusable": true, - "width": 64, - "height": 64, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NumKeyEnterIcon", - "name": "keyIcon", - "width": 24, - "height": 24, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QtyBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "QtyBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "QUANTITY CONTROLS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "QtyExamples", - "name": "quantityControlExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 32, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyToggle1", - "name": "Atom/QuantityToggle", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyMinus", - "name": "minusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyMinusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "minus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QtyValue", - "name": "valueDisplay", - "width": 56, - "height": 48, - "fill": "$bg-surface", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QtyValueText", - "name": "value", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "QtyPlus", - "name": "plusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyPlusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "StatusGroup", - "name": "statusIndicatorExamples", - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "StatusOnline", - "name": "Atom/StatusIndicator/Online", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOnlineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "$green-success" - }, - { - "type": "text", - "id": "StatusOnlineText", - "name": "label", - "fill": "$text-secondary", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusOffline", - "name": "Atom/StatusIndicator/Offline", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOfflineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#EF4444" - }, - { - "type": "text", - "id": "StatusOfflineText", - "name": "label", - "fill": "$text-secondary", - "content": "Offline", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusBusy", - "name": "Atom/StatusIndicator/Busy", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusBusyDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#F59E0B" - }, - { - "type": "text", - "id": "StatusBusyText", - "name": "label", - "fill": "$text-secondary", - "content": "Busy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "n6zyD", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "mrU8q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ivisG", - "name": "shTitle", - "fill": "$text-primary", - "content": "Section Header Component", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YFM0A", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "This is a reusable section header with badge, title, and description.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", - "width": "fill_container", - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mode_switch_container", - "name": "Molecule/ModeSwitch/Container", - "reusable": true, - "width": "fill_container", - "height": 48, - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "padding": 4, - "fill": "$bg-surface", - "cornerRadius": "$radius-lg", - "children": [ - { - "type": "frame", - "id": "mode_restaurant", - "name": "Mode/Restaurant/Active", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "$vertical-restaurant", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "🍽️", - "fontSize": 16 - }, - { - "type": "text", - "content": "Nhà hàng", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "mode_bar", - "name": "Mode/Bar/Inactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "transparent", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "🍸", - "fontSize": 16 - }, - { - "type": "text", - "content": "Bar", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "mode_karaoke", - "name": "Mode/Karaoke/Inactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "transparent", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "🎤", - "fontSize": 16 - }, - { - "type": "text", - "content": "Karaoke", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "mode_spa", - "name": "Mode/Spa/Inactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "transparent", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "💆", - "fontSize": 16 - }, - { - "type": "text", - "content": "Spa", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_001", - "name": "Atom/ModeIndicator/Restaurant", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-restaurant", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "🍽️", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_002", - "name": "Atom/ModeIndicator/Bar", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-bar", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "🍸", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_003", - "name": "Atom/ModeIndicator/Karaoke", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-karaoke", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "🎤", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_004", - "name": "Atom/ModeIndicator/Spa", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-spa", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "💆", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "OrderItemBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "OrderItemBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ORDER ITEMS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "OrderItemExamples", - "name": "orderItemExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 0, - "padding": 0, - "children": [ - { - "type": "frame", - "id": "OrderItem1", - "name": "Molecule/OrderItem/Standard", - "reusable": true, - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem1QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem1Name", - "name": "itemName", - "fill": "$text-primary", - "content": "Cà Phê Sữa Đá", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderItem1Note", - "name": "itemNote", - "fill": "$text-tertiary", - "content": "Ít đường, thêm đá", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "text", - "id": "OrderItem1Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "58,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2", - "name": "Molecule/OrderItem/WithModifiers", - "reusable": true, - "width": "fill_container", - "layout": "vertical", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OrderItem2Main", - "name": "mainRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem2QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Name", - "name": "itemName", - "fill": "$text-primary", - "content": "Bánh Mì Thịt Nguội", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "45,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2Mods", - "name": "modifierList", - "padding": [ - 0, - 0, - 0, - 44 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem2Mod1", - "name": "modifier1", - "fill": "$text-tertiary", - "content": "+ Phô mai (+10,000₫)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderItem2Mod2", - "name": "modifier2", - "fill": "$text-tertiary", - "content": "+ Trứng ốp la (+8,000₫)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BillRowBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "BillRowBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BILL SUMMARY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BillRowExamples", - "name": "billRowExamples", - "width": 400, - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 0, - "padding": 24, - "children": [ - { - "type": "frame", - "id": "BillSubtotal", - "name": "Molecule/BillRow/Subtotal", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillSubtotalLabel", - "name": "label", - "fill": "$text-secondary", - "content": "Tạm tính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillSubtotalValue", - "name": "value", - "fill": "$text-secondary", - "content": "103,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDiscount", - "name": "Molecule/BillRow/Discount", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillDiscountLabel", - "name": "label", - "fill": "$green-success", - "content": "Giảm giá (10%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillDiscountValue", - "name": "value", - "fill": "$green-success", - "content": "-10,300₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillTax", - "name": "Molecule/BillRow/Tax", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTaxLabel", - "name": "label", - "fill": "$text-tertiary", - "content": "VAT (8%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillTaxValue", - "name": "value", - "fill": "$text-tertiary", - "content": "7,416₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "margin": [ - 12, - 0 - ] - }, - { - "type": "frame", - "id": "BillTotal", - "name": "Molecule/BillRow/Total", - "reusable": true, - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTotalLabel", - "name": "label", - "fill": "$text-primary", - "content": "Tổng cộng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "BillTotalValue", - "name": "value", - "fill": "$orange-primary", - "content": "100,116₫", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCardBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ProductCardBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PRODUCT CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ProductCardExamples", - "name": "productCardExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 16, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "ProductCard1", - "name": "Molecule/ProductCard/POS", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard1Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "ProductCard1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard1Name", - "name": "productName", - "fill": "$text-primary", - "content": "Cà Phê Sữa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard1Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "29,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard2", - "name": "Molecule/ProductCard/POS/Selected", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard2Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#22C55E18" - }, - { - "type": "frame", - "id": "ProductCard2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard2Name", - "name": "productName", - "fill": "$text-primary", - "content": "Trà Đào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard2Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "35,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard3", - "name": "Molecule/ProductCard/POS/OutOfStock", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "ProductCard3Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#6B6B7018", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ProductCard3OOS", - "name": "oosLabel", - "fill": "$text-disabled", - "content": "Hết hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ProductCard3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard3Name", - "name": "productName", - "fill": "$text-disabled", - "content": "Sinh Tố Bơ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard3Price", - "name": "productPrice", - "fill": "$text-disabled", - "content": "45,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "CardGrid", - "name": "cardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "uLtIh", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "i9xHO", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "We76w", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "teqD3", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "vQqcl", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NH6gQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FOOTER COMPONENTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "FooterColRow", - "name": "footerColumnExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "jcBoY", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Products", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NX2A9", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qkmXd", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty Program", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MqnX1", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "U5fbU", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Inventory", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "nUIva", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Restaurant & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "VMn3X", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TYRQA", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Y1hlD", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol3", - "name": "exampleFooterCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ynsnj", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CxgY7", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Help Center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PNNws", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTHFx", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Privacy Policy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "F0e0G", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Terms of Use", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "LibTitle", - "name": "libTitle", - "fill": "$text-primary", - "content": "aPOS Component Library", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "600", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "LibDesc", - "name": "libDescription", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "fBoMm", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "o5bXI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "UTILITIES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "UtilRow", - "name": "utilExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CheckRow", - "name": "checkListRow", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "Check1", - "name": "exampleCheckItem1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VJGh3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "VwkNy", - "name": "checkText", - "fill": "$text-secondary", - "content": "Feature check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check2", - "name": "exampleCheckItem2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BrCzS", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "9qmDC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Another check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check3", - "name": "exampleCheckItem3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "87yKj", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "JoqXu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Third check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "DividerEx", - "name": "exampleDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "SocialRow", - "name": "socialIconsRow", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "Social1", - "name": "exampleFacebook", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "YXkpa", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social2", - "name": "exampleInstagram", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4UrP1", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social3", - "name": "exampleYoutube", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QG5mc", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social4", - "name": "exampleLinkedIn", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FNwhd", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TrustEx", - "name": "exampleTrustStat", - "width": "fill_container", - "gap": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "Được tin dùng bởi 2,000+ doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao dịch/ngày", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "gpriC", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NavExamples", - "name": "navExamples", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadFullBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NumpadFullBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "POS NUMPAD", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NumpadFullExamples", - "name": "numpadFullExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NumpadFull", - "name": "Organism/Numpad/Full", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "NumpadRow1", - "name": "row1", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK7", - "name": "key7", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK7T", - "fill": "$text-primary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK8", - "name": "key8", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK8T", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK9", - "name": "key9", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK9T", - "fill": "$text-primary", - "content": "9", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKC", - "name": "keyClear", - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NKCT", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow2", - "name": "row2", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK4", - "name": "key4", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK4T", - "fill": "$text-primary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK5", - "name": "key5", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK5T", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK6", - "name": "key6", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK6T", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKBack", - "name": "keyBackspace", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NKBackI", - "width": 24, - "height": 24, - "iconFontName": "delete", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow3", - "name": "row3", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK1", - "name": "key1", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK1T", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK2", - "name": "key2", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK2T", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK3", - "name": "key3", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK3T", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKEnter", - "name": "keyEnter", - "width": 64, - "height": 136, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NKEnterI", - "width": 28, - "height": 28, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow4", - "name": "row4", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK0", - "name": "key0", - "width": 136, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK0T", - "fill": "$text-primary", - "content": "0", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKDot", - "name": "keyDot", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NKDotT", - "fill": "$text-primary", - "content": ".", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "PaymentMethodsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PAYMENT METHODS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsExamples", - "name": "paymentMethodsExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "PaymentGrid", - "name": "Organism/PaymentMethods", - "reusable": true, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "PayCash", - "name": "cashMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCashIcon", - "width": 32, - "height": 32, - "iconFontName": "banknote", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "PayCashText", - "fill": "$text-primary", - "content": "Tiền mặt", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayCard", - "name": "cardMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCardIcon", - "width": 32, - "height": 32, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayCardText", - "fill": "$text-primary", - "content": "Thẻ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayQR", - "name": "qrMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayQRIcon", - "width": 32, - "height": 32, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayQRText", - "fill": "$text-primary", - "content": "QR Code", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayWallet", - "name": "walletMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayWalletIcon", - "width": 32, - "height": 32, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayWalletText", - "fill": "$text-primary", - "content": "Ví điện tử", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DialogBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "DialogBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "DIALOGS & TOASTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "DialogExamples", - "name": "dialogExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ConfirmDialog", - "name": "Organism/Dialog/Confirm", - "reusable": true, - "width": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 24, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogHeader", - "name": "header", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ConfirmDialogIcon", - "width": 48, - "height": 48, - "iconFontName": "circle-alert", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ConfirmDialogTitle", - "name": "title", - "fill": "$text-primary", - "content": "Xác nhận thanh toán", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600", - "textAlign": "center" - }, - { - "type": "text", - "id": "ConfirmDialogMessage", - "name": "message", - "fill": "$text-secondary", - "content": "Thanh toán đơn hàng 100,116₫ bằng Tiền mặt?", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal", - "textAlign": "center", - "lineHeight": 1.5 - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialogActions", - "name": "actions", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogCancel", - "name": "cancelBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConfirmDialogCancelText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialogConfirm", - "name": "confirmBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConfirmDialogConfirmText", - "fill": "$text-primary", - "content": "Xác nhận", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ToastSuccess", - "name": "Organism/Toast/Success", - "reusable": true, - "width": 400, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$green-success" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ToastSuccessIcon", - "width": 24, - "height": 24, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ToastSuccessText", - "name": "message", - "fill": "$green-success", - "content": "Thanh toán thành công!", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ToastError", - "name": "Organism/Toast/Error", - "reusable": true, - "width": 400, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF4444" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ToastErrorIcon", - "width": 24, - "height": 24, - "iconFontName": "x-circle", - "iconFontFamily": "lucide", - "fill": "#EF4444" - }, - { - "type": "text", - "id": "ToastErrorText", - "name": "message", - "fill": "#EF4444", - "content": "Giao dịch thất bại. Vui lòng thử lại.", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - } - ], - "x": 4008, - "y": 0 - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-hover": { - "type": "color", - "value": "#3A3A3E" - }, - "bg-active": { - "type": "color", - "value": "#4A4A4E" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - }, - "text-muted": { - "type": "color", - "value": "#6B6B70" - }, - "text-disabled": { - "type": "color", - "value": "#4B4B50" - }, - "text-inverse": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "border-strong": { - "type": "color", - "value": "#4A4A4E" - }, - "border-focus": { - "type": "color", - "value": "#FF5C00" - }, - "accent-primary": { - "type": "color", - "value": "#FF5C00" - }, - "accent-primary-hover": { - "type": "color", - "value": "#FF7A33" - }, - "accent-primary-active": { - "type": "color", - "value": "#E55200" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "status-success": { - "type": "color", - "value": "#22C55E" - }, - "status-success-bg": { - "type": "color", - "value": "#22C55E1A" - }, - "status-warning": { - "type": "color", - "value": "#F59E0B" - }, - "status-warning-bg": { - "type": "color", - "value": "#F59E0B1A" - }, - "status-error": { - "type": "color", - "value": "#EF4444" - }, - "status-error-bg": { - "type": "color", - "value": "#EF44441A" - }, - "status-info": { - "type": "color", - "value": "#3B82F6" - }, - "status-info-bg": { - "type": "color", - "value": "#3B82F61A" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "vertical-restaurant": { - "type": "color", - "value": "#FF5C00" - }, - "vertical-bar": { - "type": "color", - "value": "#8B5CF6" - }, - "vertical-karaoke": { - "type": "color", - "value": "#EC4899" - }, - "vertical-spa": { - "type": "color", - "value": "#14B8A6" - }, - "vertical-retail": { - "type": "color", - "value": "#3B82F6" - }, - "space-1": { - "type": "number", - "value": 4 - }, - "space-2": { - "type": "number", - "value": 8 - }, - "space-3": { - "type": "number", - "value": 12 - }, - "space-4": { - "type": "number", - "value": 16 - }, - "space-5": { - "type": "number", - "value": 20 - }, - "space-6": { - "type": "number", - "value": 24 - }, - "space-8": { - "type": "number", - "value": 32 - }, - "space-10": { - "type": "number", - "value": 40 - }, - "space-12": { - "type": "number", - "value": 48 - }, - "radius-sm": { - "type": "number", - "value": 4 - }, - "radius-md": { - "type": "number", - "value": 8 - }, - "radius-lg": { - "type": "number", - "value": 12 - }, - "radius-xl": { - "type": "number", - "value": 16 - }, - "radius-full": { - "type": "number", - "value": 9999 - }, - "text-xs": { - "type": "number", - "value": 12 - }, - "text-sm": { - "type": "number", - "value": 14 - }, - "text-base": { - "type": "number", - "value": 16 - }, - "text-lg": { - "type": "number", - "value": 18 - }, - "text-xl": { - "type": "number", - "value": 20 - }, - "text-2xl": { - "type": "number", - "value": 24 - }, - "text-3xl": { - "type": "number", - "value": 30 - }, - "text-4xl": { - "type": "number", - "value": 36 - }, - "font-normal": { - "type": "number", - "value": 400 - }, - "font-medium": { - "type": "number", - "value": 500 - }, - "font-semibold": { - "type": "number", - "value": 600 - }, - "font-bold": { - "type": "number", - "value": 700 - }, - "shadow-sm": { - "type": "string", - "value": "0 1px 2px rgba(0,0,0,0.3)" - }, - "shadow-md": { - "type": "string", - "value": "0 4px 6px rgba(0,0,0,0.4)" - }, - "shadow-lg": { - "type": "string", - "value": "0 10px 15px rgba(0,0,0,0.5)" - }, - "shadow-xl": { - "type": "string", - "value": "0 20px 25px rgba(0,0,0,0.6)" - } - } -} \ No newline at end of file