From a739a8e407c8ae3edf4bc032387ff707a5b79477 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Sun, 1 Feb 2026 23:54:20 +0700 Subject: [PATCH] feat: set ConfirmDialogHeader width to fill container and refactor badge showcase structure. --- pencil-design/src/components/tPOS-ui-kit.pen | 1 + pencil-design/src/organisms/pos-layout.pen | 1 + pencil-design/tPOS.pen | 6452 +++++++++++------- 3 files changed, 3992 insertions(+), 2462 deletions(-) diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index bcc0b181..1d8507a6 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -4090,6 +4090,7 @@ "type": "frame", "id": "ConfirmDialogHeader", "name": "header", + "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", diff --git a/pencil-design/src/organisms/pos-layout.pen b/pencil-design/src/organisms/pos-layout.pen index 41e7c708..c3c7920f 100644 --- a/pencil-design/src/organisms/pos-layout.pen +++ b/pencil-design/src/organisms/pos-layout.pen @@ -364,6 +364,7 @@ "type": "frame", "id": "ConfirmDialogHeader", "name": "header", + "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", diff --git a/pencil-design/tPOS.pen b/pencil-design/tPOS.pen index 35dd7fa7..72f57694 100644 --- a/pencil-design/tPOS.pen +++ b/pencil-design/tPOS.pen @@ -6385,471 +6385,351 @@ "children": [ { "type": "frame", - "name": "Badge Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, + "id": "sokxt", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, "padding": [ - 80, - 120 + 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": "BadgeSection", - "name": "Badges & Labels Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, + "id": "Badge1", + "name": "exampleSectionLabel", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], "children": [ { - "type": "frame", - "id": "BadgeSectHeader", - "name": "badgeSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "HNlXw", - "name": "shTitle", - "fill": "$text-primary", - "content": "Status Indicators", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "bPaMT", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Small labels and badges for highlighting features, categories, or status.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] + "type": "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": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "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 }, - "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", - "name": "Button Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "BtnSection", - "name": "Buttons & Actions Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "BtnSectHeader", - "name": "buttonSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "xqghZ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Interactive Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "zPj8L", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Primary and secondary button variants for calls-to-action and navigation.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] + "type": "icon_font", + "id": "xMjoJ", + "name": "btnPIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" }, { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "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 }, - "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" - } - ] - } - ] + { + "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" } ] } @@ -6857,1415 +6737,193 @@ }, { "type": "frame", - "name": "Typography Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, + "id": "NumpadBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, "padding": [ - 80, - 120 + 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": "TypoSection", - "name": "Typography & Branding Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, + "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": "frame", - "id": "TypoSectHeader", - "name": "typoSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "RuoWE", - "name": "shTitle", - "fill": "$text-primary", - "content": "Brand Identity Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "DCNsc", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Logo, section headers, links, and typography styles.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, + "type": "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": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" + "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 }, - "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", - "name": "Card Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "CardSection", - "name": "Cards Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "frame", - "id": "CardSectHeader", - "name": "cardSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5dZC4", - "name": "shTitle", - "fill": "$text-primary", - "content": "Content Containers", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "HeRP2", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Various card types for displaying features, pricing, industry solutions, and steps.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CardGrid", - "name": "cardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "uLtIh", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "i9xHO", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "We76w", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "teqD3", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] + "type": "icon_font", + "id": "NumKeyEnterIcon", + "name": "keyIcon", + "width": 24, + "height": 24, + "iconFontName": "corner-down-left", + "iconFontFamily": "lucide", + "fill": "$text-primary" } ] } @@ -8273,313 +6931,275 @@ }, { "type": "frame", - "name": "Footer Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, + "id": "QtyBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, "padding": [ - 80, - 120 + 6, + 14 ], "children": [ { - "type": "frame", - "id": "FooterSection", - "name": "Footer Components Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "FooterSectHeader", - "name": "footerSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "vQqcl", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NH6gQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FOOTER COMPONENTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "GK1Rq", - "name": "shTitle", - "fill": "$text-primary", - "content": "Footer Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lDotf", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Footer column components for organizing links and information.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FooterColRow", - "name": "footerColumnExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "jcBoY", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Products", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NX2A9", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qkmXd", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty Program", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MqnX1", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "U5fbU", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Inventory", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "nUIva", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Restaurant & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "VMn3X", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TYRQA", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Y1hlD", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol3", - "name": "exampleFooterCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ynsnj", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CxgY7", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Help Center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PNNws", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTHFx", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Privacy Policy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "F0e0G", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Terms of Use", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] + "type": "text", + "id": "QtyBadgeText", + "name": "badgeText", + "fill": "$orange-primary", + "content": "QUANTITY CONTROLS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 } ] }, { "type": "frame", - "name": "Header Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], + "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": "LibHeader", - "name": "Library Header", - "width": "fill_container", - "layout": "vertical", - "gap": 16, + "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": "LibLogo", - "name": "componentLibLogo", + "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": "L1IHb", + "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, @@ -8587,7 +7207,7 @@ }, { "type": "text", - "id": "oAfvR", + "id": "7V59t", "name": "logoText", "fill": "$text-primary", "content": "aPOS", @@ -8597,56 +7217,20 @@ "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": "UtilSection", - "name": "Utility Components Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ + }, { "type": "frame", - "id": "UtilSectHeader", - "name": "utilSectionHeader", + "id": "SectHeader", + "name": "exampleSectionHeader", "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ { "type": "frame", - "id": "fBoMm", + "id": "n6zyD", "name": "shBadge", "fill": "#FF5C0018", "cornerRadius": 100, @@ -8657,10 +7241,10 @@ "children": [ { "type": "text", - "id": "o5bXI", + "id": "mrU8q", "name": "badgeText", "fill": "$orange-primary", - "content": "UTILITIES", + "content": "CATEGORY", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", @@ -8670,10 +7254,10 @@ }, { "type": "text", - "id": "gtlnT", + "id": "ivisG", "name": "shTitle", "fill": "$text-primary", - "content": "Helper Components", + "content": "Section Header Component", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, @@ -8682,12 +7266,12 @@ }, { "type": "text", - "id": "5OBHB", + "id": "YFM0A", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, - "content": "Dividers, social icons, check items, and other utility elements.", + "content": "This is a reusable section header with badge, title, and description.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", @@ -8698,8 +7282,751 @@ }, { "type": "frame", - "id": "UtilRow", - "name": "utilExamples", + "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": "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, @@ -8708,205 +8035,482 @@ "fill": "$border-subtle" }, "layout": "vertical", - "gap": 32, - "padding": 40, + "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": "CheckRow", - "name": "checkListRow", + "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": "Check1", - "name": "exampleCheckItem1", - "gap": 10, - "alignItems": "center", + "id": "5UeZM", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", "children": [ { - "type": "icon_font", - "id": "VJGh3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" + "type": "text", + "id": "8fM2n", + "name": "pcPrice", + "fill": "$text-primary", + "content": "Free", + "fontFamily": "Roboto", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 }, { "type": "text", - "id": "VwkNy", - "name": "checkText", - "fill": "$text-secondary", - "content": "Feature check list item", + "id": "GfS02", + "name": "pcPer", + "enabled": false, + "fill": "$text-tertiary", + "content": "/tháng", "fontFamily": "Roboto", - "fontSize": 13, + "fontSize": 14, "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": "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": "DividerEx", - "name": "exampleDivider", + "id": "u5uVY", + "name": "pcDivider", "fill": "$border-subtle", "width": "fill_container", "height": 1 }, { "type": "frame", - "id": "SocialRow", - "name": "socialIconsRow", - "gap": 16, + "id": "MXmSA", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, "children": [ { "type": "frame", - "id": "Social1", - "name": "exampleFacebook", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", + "id": "YbXof", + "name": "pcF1", + "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", - "id": "YXkpa", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", + "id": "mzamm", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", "iconFontFamily": "lucide", - "fill": "$text-disabled" + "fill": "$green-success" + }, + { + "type": "text", + "id": "3r8fL", + "name": "checkText", + "fill": "$text-secondary", + "content": "1 store", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] }, { "type": "frame", - "id": "Social2", - "name": "exampleInstagram", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", + "id": "Nj2yA", + "name": "pcF2", + "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", - "id": "4UrP1", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", + "id": "NVTzn", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", "iconFontFamily": "lucide", - "fill": "$text-disabled" + "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": "Social3", - "name": "exampleYoutube", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", + "id": "GqUzO", + "name": "pcF3", + "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", - "id": "QG5mc", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", + "id": "yZlVe", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social4", - "name": "exampleLinkedIn", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ + "fill": "$green-success" + }, { - "type": "icon_font", - "id": "FNwhd", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" + "type": "text", + "id": "Ut5uS", + "name": "checkText", + "fill": "$text-secondary", + "content": "Basic reports", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] } @@ -8914,55 +8518,1881 @@ }, { "type": "frame", - "id": "TrustEx", - "name": "exampleTrustStat", + "id": "0Fnac", + "name": "pcBtn", "width": "fill_container", - "gap": 40, + "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": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "Được tin dùng bởi 2,000+ doanh nghiệp", + "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": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 + "type": "icon_font", + "id": "BrCzS", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" }, { "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao dịch/ngày", + "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": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 + "type": "icon_font", + "id": "PayCardIcon", + "width": 32, + "height": 32, + "iconFontName": "credit-card", + "iconFontFamily": "lucide", + "fill": "$text-secondary" }, { "type": "text", - "id": "gpriC", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", + "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" @@ -8975,160 +10405,258 @@ }, { "type": "frame", - "name": "Navigation Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, + "id": "DialogBadge", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, "padding": [ - 80, - 120 + 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": "NavSection", - "name": "Navigation Section", - "width": "fill_container", + "id": "ConfirmDialog", + "name": "Organism/Dialog/Confirm", + "reusable": true, + "width": 400, + "fill": "$bg-elevated", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, "layout": "vertical", - "gap": 32, + "gap": 24, + "padding": 28, "children": [ { "type": "frame", - "id": "NavSectHeader", - "name": "navSectionHeader", + "id": "ConfirmDialogHeader", + "name": "header", + "width": "fill_container", "layout": "vertical", - "gap": 16, + "gap": 8, "alignItems": "center", "children": [ { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] + "type": "icon_font", + "id": "ConfirmDialogIcon", + "width": 48, + "height": 48, + "iconFontName": "circle-alert", + "iconFontFamily": "lucide", + "fill": "$orange-primary" }, { "type": "text", - "id": "5HgAI", - "name": "shTitle", + "id": "ConfirmDialogTitle", + "name": "title", "fill": "$text-primary", - "content": "Headers & Menus", - "textAlign": "center", + "content": "Xác nhận thanh toán", "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 + "fontSize": 20, + "fontWeight": "600", + "textAlign": "center" }, { "type": "text", - "id": "72MpO", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Navigation bars and menu components for desktop and mobile layouts.", - "lineHeight": 1.6, - "textAlign": "center", + "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": 16, - "fontWeight": "normal" + "fontSize": 14, + "fontWeight": "normal", + "textAlign": "center", + "lineHeight": 1.5 } ] }, { "type": "frame", - "id": "NavExamples", - "name": "navExamples", + "id": "ConfirmDialogActions", + "name": "actions", "width": "fill_container", - "layout": "vertical", - "gap": 20, + "gap": 12, "children": [ { "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", + "id": "ConfirmDialogCancel", + "name": "cancelBtn", "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", + "height": 48, + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", "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": "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": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" + "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" + } + ] } ] }