From c93fdf319284134da7eb864a08d4a86a548a327d Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Sat, 31 Jan 2026 20:30:31 +0700 Subject: [PATCH] feat: Implement recursive component extraction in the build script, unwrapping structural frames like showcases. --- pencil-design/scripts/build.py | 47 +- pencil-design/src/components/tPOS-ui-kit.pen | 4608 ++++++++---------- 2 files changed, 2127 insertions(+), 2528 deletions(-) diff --git a/pencil-design/scripts/build.py b/pencil-design/scripts/build.py index 9515c285..dfe1a435 100755 --- a/pencil-design/scripts/build.py +++ b/pencil-design/scripts/build.py @@ -306,6 +306,33 @@ class PencilBuilder: print(f"📊 Total frames: {len(monolithic['children'])}") print(f"🎨 Design tokens: {len(variables)}") + def _extract_components_recursive(self, children: List[Dict], gathered: List[Dict]) -> None: + """Recursively find components, unwrapping structural frames""" + for child in children: + # 1. If reusable, ALWAYS keep it (it's explicitly a component) + if child.get('reusable'): + gathered.append(child) + continue + + # 2. Check if it's a structural wrapper (Showcase, Section) + name = child.get('name', '') + is_frame = child.get('type') == 'frame' + is_structural = 'showcase' in name.lower() or 'section' in name.lower() + + if is_frame and is_structural: + # Unwrap and recurse + self._extract_components_recursive(child.get('children', []), gathered) + elif is_frame: + # 3. Valid Candidate (Frame that isn't structural/showcase) + # It might be a group of buttons (e.g. "buttonExamples") or an actual component candidate + # For now, we keep it as a potential component + gathered.append(child) + else: + # 4. Primitives (Text, Rect, etc.) at this level + # If they are loose in a Showcase, we probably ignore them (decorations like Titles) + # If they are inside a Kept Frame, they were preserved in step 3. + pass + def build_library(self, output_path: str = None) -> None: """Build merged component library from Atomic Design files""" print("🔨 Building Component Library") @@ -340,22 +367,14 @@ class PencilBuilder: for pen_file in sorted(dir_path.glob('*.pen')): with open(pen_file, 'r') as f: data = json.load(f) - - # Extract children (components/showcases) - file_children = data.get('children', []) - # If the file contains a "Showcase" frame wrapping everything, - # we ideally want to extract the inner reusable components if we want a clean library. - # BUT, users might want the showcase organization in the library too. - # Let's flatten showcases for the library so components are cleaner? - # Actually, keeping showcases/groups is better for Pencil's sidebar organization. + # Use recursive extraction + file_components = [] + self._extract_components_recursive(data.get('children', []), file_components) - # Update: Ensure all top-level children have unique IDs if possible? - # Pencil IDs are UUIDs mostly, should be fine. - - components.extend(file_children) - total_found += len(file_children) - print(f" ✓ Added contents of {pen_file.name}") + components.extend(file_components) + total_found += len(file_components) + print(f" ✓ Added {len(file_components)} components from {pen_file.name}") # 3. Create Library File library_file = { diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index 30dfabeb..c83b028b 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -12,2201 +12,412 @@ "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": "frame", - "id": "BadgeSection", - "name": "Badges & Labels Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BadgeSectHeader", - "name": "badgeSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "HNlXw", - "name": "shTitle", - "fill": "$text-primary", - "content": "Status Indicators", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "bPaMT", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Small labels and badges for highlighting features, categories, or status.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] + "type": "text", + "id": "NK10q", + "name": "badgeText", + "fill": "$orange-primary", + "content": "BADGES & LABELS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 } ] }, { "type": "frame", - "name": "Button Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], + "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": "BtnSection", - "name": "Buttons & Actions Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, + "id": "Badge1", + "name": "exampleSectionLabel", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], "children": [ { - "type": "frame", - "id": "BtnSectHeader", - "name": "buttonSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "xqghZ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Interactive Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "zPj8L", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Primary and secondary button variants for calls-to-action and navigation.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] + "type": "text", + "id": "4yAKs", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SECTION LABEL", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 } ] - } - ] - }, - { - "type": "frame", - "name": "Typography Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ + }, { "type": "frame", - "id": "TypoSection", - "name": "Typography & Branding Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "TypoSectHeader", - "name": "typoSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "RuoWE", - "name": "shTitle", - "fill": "$text-primary", - "content": "Brand Identity Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "DCNsc", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Logo, section headers, links, and typography styles.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "n6zyD", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "mrU8q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ivisG", - "name": "shTitle", - "fill": "$text-primary", - "content": "Section Header Component", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YFM0A", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "This is a reusable section header with badge, title, and description.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", - "width": "fill_container", - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "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, - "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\u1ed5 bi\u1ebfn nh\u1ea5t", - "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\u00e1ng", - "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\u1ed5 bi\u1ebfn nh\u1ea5t", - "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\u00e1ng", - "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\u1ed5 bi\u1ebfn nh\u1ea5t", - "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\u00e1ng", - "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", - "name": "Footer Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "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": "frame", - "name": "Header Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", - "layout": "vertical", - "gap": 16, + "id": "Badge2", + "name": "exampleHeroBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "gap": 8, + "padding": [ + 8, + 16 + ], "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "j3ksJ", + "name": "heroBadgeDot", + "fill": "$orange-primary", + "width": 8, + "height": 8 + }, + { + "type": "text", + "id": "zzm6Q", + "name": "heroBadgeText", + "fill": "$orange-primary", + "content": "Hero Badge with Dot", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "Badge3", + "name": "exampleChip", + "fill": "$bg-elevated", + "cornerRadius": 6, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "Rb7IM", + "name": "chipText", + "fill": "$text-secondary", + "content": "Chip Label", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "coD4i", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "MOLga", + "name": "badgeText", + "fill": "$orange-primary", + "content": "BUTTONS & ACTIONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "BtnRow", + "name": "buttonExamples", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 20, + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PrimaryBtn1", + "name": "examplePrimaryBtn", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xMjoJ", + "name": "btnPIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "yR7mY", + "name": "btnPText", + "fill": "$text-primary", + "content": "Primary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PrimaryBtn2", + "name": "examplePrimaryBtnIcon", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qkXav", + "name": "btnPIcon", + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "nrUMI", + "name": "btnPText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SecondaryBtn1", + "name": "exampleSecondaryBtn", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qM2TY", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ixoFp", + "name": "btnSText", + "fill": "$text-primary", + "content": "Secondary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SecondaryBtn2", + "name": "exampleSecondaryBtnIcon", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6Hmda", + "name": "btnSIcon", + "width": 16, + "height": 16, + "iconFontName": "play", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "4D31l", + "name": "btnSText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "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": "LibLogo", - "name": "componentLibLogo", + "id": "LogoEx", + "name": "exampleLogo", "gap": 8, "alignItems": "center", "children": [ { "type": "ellipse", - "id": "L1IHb", + "id": "8osja", "name": "logoDot", "fill": "$orange-primary", "width": 10, @@ -2214,7 +425,7 @@ }, { "type": "text", - "id": "oAfvR", + "id": "7V59t", "name": "logoText", "fill": "$text-primary", "content": "aPOS", @@ -2224,56 +435,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, @@ -2284,10 +459,10 @@ "children": [ { "type": "text", - "id": "o5bXI", + "id": "mrU8q", "name": "badgeText", "fill": "$orange-primary", - "content": "UTILITIES", + "content": "CATEGORY", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", @@ -2297,10 +472,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, @@ -2309,12 +484,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", @@ -2325,8 +500,81 @@ }, { "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": "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, @@ -2335,205 +583,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\u1ed5 bi\u1ebfn nh\u1ea5t", + "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\u00e1ng", "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" } ] } @@ -2541,57 +1066,590 @@ }, { "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": "text", - "id": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 + "type": "icon_font", + "id": "1w3HC", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" }, { "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao d\u1ecbch/ng\u00e0y", + "id": "RVZxt", + "name": "btnSText", + "fill": "$text-primary", + "content": "Get Started", "fontFamily": "Roboto", - "fontSize": 13, + "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\u1ed5 bi\u1ebfn nh\u1ea5t", + "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": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 + "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\u00e1ng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] }, { "type": "text", - "id": "gpriC", - "name": "tsStat2", + "id": "i9xHO", + "name": "pcDesc", "fill": "$text-tertiary", - "content": "99.9% uptime", + "content": "For growing business chains", + "lineHeight": 1.5, "fontFamily": "Roboto", - "fontSize": 13, + "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\u1ed5 bi\u1ebfn nh\u1ea5t", + "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\u00e1ng", + "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" } ] @@ -2602,158 +1660,680 @@ }, { "type": "frame", - "name": "Navigation Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, + "id": "vQqcl", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, "padding": [ - 80, - 120 + 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": "NavSection", - "name": "Navigation Section", - "width": "fill_container", + "id": "FootCol1", + "name": "exampleFooterCol1", "layout": "vertical", - "gap": 32, + "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": "NavSectHeader", - "name": "navSectionHeader", - "layout": "vertical", - "gap": 16, + "id": "Check1", + "name": "exampleCheckItem1", + "gap": 10, "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": "VJGh3", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" }, { "type": "text", - "id": "5HgAI", - "name": "shTitle", - "fill": "$text-primary", - "content": "Headers & Menus", - "textAlign": "center", + "id": "VwkNy", + "name": "checkText", + "fill": "$text-secondary", + "content": "Feature check list item", "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "72MpO", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Navigation bars and menu components for desktop and mobile layouts.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, + "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", - "id": "NavExamples", - "name": "navExamples", - "width": "fill_container", - "layout": "vertical", - "gap": 20, + "id": "Check2", + "name": "exampleCheckItem2", + "gap": 10, + "alignItems": "center", "children": [ { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" + "type": "icon_font", + "id": "BrCzS", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" }, { - "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": "text", + "id": "9qmDC", + "name": "checkText", + "fill": "$text-secondary", + "content": "Another check list item", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" } ] + }, + { + "type": "frame", + "id": "Check3", + "name": "exampleCheckItem3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "87yKj", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "JoqXu", + "name": "checkText", + "fill": "$text-secondary", + "content": "Third check list item", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "DividerEx", + "name": "exampleDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "SocialRow", + "name": "socialIconsRow", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "Social1", + "name": "exampleFacebook", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "YXkpa", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "Social2", + "name": "exampleInstagram", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "4UrP1", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "instagram", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "Social3", + "name": "exampleYoutube", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "QG5mc", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "youtube", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + }, + { + "type": "frame", + "id": "Social4", + "name": "exampleLinkedIn", + "width": 36, + "height": 36, + "cornerRadius": 18, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "FNwhd", + "name": "socIcn", + "width": 18, + "height": 18, + "iconFontName": "linkedin", + "iconFontFamily": "lucide", + "fill": "$text-disabled" + } + ] + } + ] + }, + { + "type": "frame", + "id": "TrustEx", + "name": "exampleTrustStat", + "width": "fill_container", + "gap": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iObWZ", + "name": "tsLabel", + "fill": "$text-disabled", + "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p", + "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\u1ecbch/ng\u00e0y", + "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" } ] }