From 468d93a8b3d95fdb8753c54c39e3f9f32290c7df Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Sat, 31 Jan 2026 20:28:28 +0700 Subject: [PATCH] feat: Add component library build functionality to support atomic design workflow and update related documentation. --- .agent/skills/pencil-design/SKILL.md | 1 + .../pencil-design/references/ATOMIC_DESIGN.md | 122 +- .../pencil-design/references/BUILD_SYSTEM.md | 33 +- pencil-design/USAGE_GUIDE.md | 17 +- pencil-design/scripts/build.py | 119 +- pencil-design/src/components/tPOS-ui-kit.pen | 4476 ++++++++-------- pencil-design/tPOS.pen | 4480 +++++++++-------- 7 files changed, 4739 insertions(+), 4509 deletions(-) diff --git a/.agent/skills/pencil-design/SKILL.md b/.agent/skills/pencil-design/SKILL.md index 269ed69a..84fdc8c2 100644 --- a/.agent/skills/pencil-design/SKILL.md +++ b/.agent/skills/pencil-design/SKILL.md @@ -308,6 +308,7 @@ open tPOS.pen | Command | Purpose | |---------|---------| +| `python3 scripts/build.py --library` | Build Component Lib | | `python3 scripts/build.py -m` | Monolithic build | | `python3 scripts/build.py` | Standard build | | `python3 scripts/build.py -m --output name.pen` | Custom output | diff --git a/.agent/skills/pencil-design/references/ATOMIC_DESIGN.md b/.agent/skills/pencil-design/references/ATOMIC_DESIGN.md index 49accd3a..e6e0767f 100644 --- a/.agent/skills/pencil-design/references/ATOMIC_DESIGN.md +++ b/.agent/skills/pencil-design/references/ATOMIC_DESIGN.md @@ -299,110 +299,22 @@ mkdir -p src/foundations src/atoms src/molecules src/organisms src/pages ### Step 3: Extract to Atomic Files -```python -import json -import os +The `pencil-design` skill now includes an automated extraction tool. -# Read monolithic UI Kit -with open('tPOS-ui-kit.pen', 'r') as f: - data = json.load(f) - -variables = data['variables'] -main_page = data['children'][0] # Component Library page -sections = main_page['children'] # All sections - -# 1. Extract design tokens -tokens_file = { - 'version': '2.6', - 'children': [{ - 'type': 'frame', - 'name': 'Design Tokens Reference', - 'layout': 'vertical', - 'gap': 20, - 'children': [ - { - 'type': 'text', - 'name': 'Title', - 'content': 'Design System Tokens', - 'fontSize': 32, - 'fill': '$text-primary' - } - ] - }], - 'variables': variables -} - -with open('src/foundations/design-tokens.pen', 'w') as f: - json.dump(tokens_file, f, indent=2) - -# 2. Categorize components by atomic level -atomic_mapping = { - 'atoms': { - 'patterns': ['button', 'badge', 'input', 'icon', 'typography', 'chip'], - 'components': [] - }, - 'molecules': { - 'patterns': ['formfield', 'searchbar', 'cardheader'], - 'components': [] - }, - 'organisms': { - 'patterns': ['card', 'navigation', 'header', 'footer', 'form'], - 'components': [] - } -} - -# Categorize each section -for section in sections: - section_name = section.get('name', '').lower() - - # Determine atomic level - matched = False - for level, config in atomic_mapping.items(): - for pattern in config['patterns']: - if pattern in section_name: - config['components'].append(section) - matched = True - break - if matched: - break - -# 3. Generate atomic files -for level, config in atomic_mapping.items(): - if not config['components']: - continue - - # Group by component type - grouped = {} - for component in config['components']: - name = component.get('name', '') - # Extract type (e.g., "Buttons & Actions Section" -> "buttons") - comp_type = name.lower().split()[0].replace('&', '').strip() - - if comp_type not in grouped: - grouped[comp_type] = [] - grouped[comp_type].append(component) - - # Create file for each type - for comp_type, components in grouped.items(): - output_file = { - 'version': '2.6', - 'children': components, - 'variables': variables - } - - filepath = f'src/{level}/{comp_type}.pen' - with open(filepath, 'w') as f: - json.dump(output_file, f, indent=2) - - print(f'✅ Created {filepath} with {len(components)} sections') - -print(f'\n🎉 Atomic Design structure created!') -print(f'📁 Foundations: src/foundations/design-tokens.pen') -print(f'⚛️ Atoms: {len(atomic_mapping["atoms"]["components"])} files') -print(f'🧬 Molecules: {len(atomic_mapping["molecules"]["components"])} files') -print(f'🦠 Organisms: {len(atomic_mapping["organisms"]["components"])} files') +```bash +# Run the extraction script +python3 scripts/extract-atomic.py ``` +This script will: +1. Read `src/components/tPOS-ui-kit.pen` (or configured library) +2. Extract design tokens to `src/foundations/design-tokens.pen` +3. Categorize components into `src/atoms`, `src/molecules`, `src/organisms` +4. Generate showcase wrappers for each file + +**Customization**: +Edit `scripts/extract-atomic.py` to adjust categorization logic (regex patterns) if your component names differ. + ### Step 4: Create Showcase Files ```python @@ -528,11 +440,11 @@ src/ ## Workflow 1. **Update Foundation**: Edit `design-tokens.pen` for colors/typography changes -2. **Sync Tokens**: Copy `variables` object to all modified component files -3. **Build Components**: Edit atomic files with proper naming (Atom/Button/Primary/Default) +2. **Build Components**: Edit atomic files with proper naming (Atom/Button/Primary/Default) +3. **Update Library**: Run `python3 scripts/build.py --library` to compile atoms 4. **Compose Up**: Molecules use atoms, organisms use molecules -5. **Test in Pages**: Reference components in page files -6. **Build**: Run `python3 scripts/build.py -m` for monolithic output +5. **Test in Pages**: Reference components in page files (from compiled library) +6. **Build Monolith**: Run `python3 scripts/build.py -m` for production output ## Component Naming diff --git a/.agent/skills/pencil-design/references/BUILD_SYSTEM.md b/.agent/skills/pencil-design/references/BUILD_SYSTEM.md index 5f839079..6e6dfeb3 100644 --- a/.agent/skills/pencil-design/references/BUILD_SYSTEM.md +++ b/.agent/skills/pencil-design/references/BUILD_SYSTEM.md @@ -86,6 +86,21 @@ python3 scripts/build.py -m --output myDesign.pen } ``` +### Component Library Build (Atomic Design) + +Merges distributed atomic components into a single library file. + +**Command:** +```bash +python3 scripts/build.py --library +python3 scripts/build.py -l +``` + +**Output:** +- **File**: `src/components/ui-kit.pen` (or configured path) +- **Contains**: All atoms, molecules, organisms merged into one file +- **Use case**: Generating the library to use during page design + ### Standard Build Builds individual pages with component injection. @@ -262,7 +277,23 @@ jq '[.children[0].children[] | select(.reusable == true)] | length' tPOS.pen ## Workflows -### Development Cycle +### Atomic Design Workflow (Recommended) + +```markdown +1. Layout & Components: + - Update atoms/molecules in `src/atoms/` etc. + - Run `python3 scripts/build.py --library` to update component library + +2. Page Design: + - Open `src/pages/desktop-home.pen` + - Use components from the generated `src/components/ui-kit.pen` + +3. Production Build: + - Run `python3 scripts/build.py -m` + - Output `tPOS.pen` contains everything +``` + +### Legacy/Mockup Workflow ```markdown 1. Design in modular files: diff --git a/pencil-design/USAGE_GUIDE.md b/pencil-design/USAGE_GUIDE.md index 6f207dc4..c6455c15 100644 --- a/pencil-design/USAGE_GUIDE.md +++ b/pencil-design/USAGE_GUIDE.md @@ -226,7 +226,18 @@ Edit `pencil.config.json`: ### Workflow - 1. **Edit Components**: Open individual files in `src/atoms/...`, `src/molecules/...`, etc. - 2. **Build**: Run `python3 scripts/build.py -m`. The build system automatically scans these directories. - 3. **Migrate**: Use `python3 scripts/extract-atomic.py` to convert legacy libraries. + 1. **Edit Atomic Components**: Update files in `src/atoms/...`, `src/molecules/...`, etc. + 2. **Build Library**: Run `python3 scripts/build.py --library`. This compiles all atomic components into `src/components/tPOS-ui-kit.pen`. + 3. **Design Pages**: Open your page files (e.g., `src/pages/desktop.pen`) in Pencil. They reference components from `tPOS-ui-kit.pen`. + 4. **Build Monolith**: Run `python3 scripts/build.py --monolithic`. This merges pages and the library into the final `tPOS.pen` for sharing/verification. + + ### Build Commands + + ```bash + # Step 2: Build Component Library + python3 scripts/build.py --library + + # Step 4: Build Monolithic File + python3 scripts/build.py --monolithic + ``` ``` diff --git a/pencil-design/scripts/build.py b/pencil-design/scripts/build.py index 764bcc24..9515c285 100755 --- a/pencil-design/scripts/build.py +++ b/pencil-design/scripts/build.py @@ -306,6 +306,94 @@ class PencilBuilder: print(f"📊 Total frames: {len(monolithic['children'])}") print(f"🎨 Design tokens: {len(variables)}") + def build_library(self, output_path: str = None) -> None: + """Build merged component library from Atomic Design files""" + print("🔨 Building Component Library") + print("=" * 50) + + components = [] + variables = {} + + # 1. Load Variables from Foundations + src_dir = self.project_root / self.config['sourceDir'] + tokens_path = src_dir / 'foundations/design-tokens.pen' + + if tokens_path.exists(): + with open(tokens_path, 'r') as f: + data = json.load(f) + variables = data.get('variables', {}) + print(f"✓ Loaded design tokens from {tokens_path.name}") + else: + print(f"⚠️ Design tokens not found at {tokens_path}") + + # 2. Collect Components from Atomic Dirs + atomic_dirs = ['atoms', 'molecules', 'organisms'] + + total_found = 0 + for atom_dir in atomic_dirs: + dir_path = src_dir / atom_dir + if not dir_path.exists(): + continue + + print(f"Scanning {atom_dir}...") + # Sorting ensures deterministic order + 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. + + # 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}") + + # 3. Create Library File + library_file = { + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "aPOS Component Library", # Main page name + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 40, + "padding": 40, + "children": components + } + ], + "variables": variables + } + + # Determine output path + if output_path: + out_file = self.project_root / output_path + else: + out_file = self.project_root / self.config['componentLibrary'] + + # Ensure directory exists + out_file.parent.mkdir(parents=True, exist_ok=True) + + with open(out_file, 'w', encoding='utf-8') as f: + json.dump(library_file, f, indent=2) + + print() + print("=" * 50) + print(f"✅ Library build complete!") + print(f"📄 Output: {out_file.absolute()}") + print(f"🧩 Components: {total_found}") + print(f"🎨 Tokens: {len(variables)}") + def build_all(self) -> None: """Build all pages""" print("🔨 Pencil Design Build System") @@ -361,15 +449,11 @@ def main(): formatter_class=argparse.RawDescriptionHelpFormatter, epilog=""" Examples: - # Build individual pages with component linking - python build.py + # 1. Build Component Library (from Atomic Source) + python build.py --library - # Build monolithic file (merge all pages) + # 2. Build Monolithic File (Pages + Library) python build.py --monolithic - python build.py --mode monolithic - - # Build monolithic with custom output name - python build.py --monolithic --output myDesign.pen """ ) @@ -379,17 +463,22 @@ Examples: help='Build monolithic file (merge all pages and component library)' ) + parser.add_argument( + '--library', '--lib', '-l', + action='store_true', + help='Build component library file from Atomic Design sources' + ) + parser.add_argument( '--mode', - choices=['standard', 'monolithic'], + choices=['standard', 'monolithic', 'library'], default='standard', - help='Build mode: standard (separate pages) or monolithic (merged file)' + help='Build mode' ) parser.add_argument( '--output', '-o', - default='tPOS.pen', - help='Output filename for monolithic build (default: tPOS.pen)' + help='Output filename' ) args = parser.parse_args() @@ -397,8 +486,12 @@ Examples: builder = PencilBuilder() # Determine build mode - if args.monolithic or args.mode == 'monolithic': - builder.build_monolithic(output_filename=args.output) + if args.library or args.mode == 'library': + builder.build_library(output_path=args.output) + elif args.monolithic or args.mode == 'monolithic': + # Default output for monolithic is tPOS.pen, but allow override + output = args.output if args.output else "tPOS.pen" + builder.build_monolithic(output_filename=output) else: builder.build_all() diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index d6349f82..30dfabeb 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -3,1970 +3,44 @@ "children": [ { "type": "frame", - "id": "CompLib", - "x": 0, - "y": 0, "name": "aPOS Component Library", "width": 1440, "fill": "$bg-page", "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120, - 100, - 120 - ], + "gap": 40, + "padding": 40, "children": [ { "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", + "name": "Badge Showcase", + "width": 1440, + "fill": "$bg-page", "layout": "vertical", - "gap": 16, - "alignItems": "center", + "gap": 80, + "padding": [ + 80, + 120 + ], "children": [ { "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "LibTitle", - "name": "libTitle", - "fill": "$text-primary", - "content": "aPOS Component Library", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "600", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "LibDesc", - "name": "libDescription", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BtnSection", - "name": "Buttons & Actions Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BtnSectHeader", - "name": "buttonSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "xqghZ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Interactive Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "zPj8L", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Primary and secondary button variants for calls-to-action and navigation.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", + "id": "BadgeSection", + "name": "Badges & Labels Section", "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BadgeSection", - "name": "Badges & Labels Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BadgeSectHeader", - "name": "badgeSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "HNlXw", - "name": "shTitle", - "fill": "$text-primary", - "content": "Status Indicators", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "bPaMT", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Small labels and badges for highlighting features, categories, or status.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CardSection", - "name": "Cards Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "CardSectHeader", - "name": "cardSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5dZC4", - "name": "shTitle", - "fill": "$text-primary", - "content": "Content Containers", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "HeRP2", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Various card types for displaying features, pricing, industry solutions, and steps.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CardGrid", - "name": "cardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\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", - "id": "NavSection", - "name": "Navigation Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NavSectHeader", - "name": "navSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5HgAI", - "name": "shTitle", - "fill": "$text-primary", - "content": "Headers & Menus", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "72MpO", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Navigation bars and menu components for desktop and mobile layouts.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavExamples", - "name": "navExamples", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TypoSection", - "name": "Typography & Branding Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "TypoSectHeader", - "name": "typoSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "RuoWE", - "name": "shTitle", - "fill": "$text-primary", - "content": "Brand Identity Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "DCNsc", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Logo, section headers, links, and typography styles.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, "layout": "vertical", "gap": 32, - "padding": 40, "children": [ { "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", + "id": "BadgeSectHeader", + "name": "badgeSectionHeader", "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ { "type": "frame", - "id": "n6zyD", + "id": "sokxt", "name": "shBadge", "fill": "#FF5C0018", "cornerRadius": 100, @@ -1977,10 +51,10 @@ "children": [ { "type": "text", - "id": "mrU8q", + "id": "NK10q", "name": "badgeText", "fill": "$orange-primary", - "content": "CATEGORY", + "content": "BADGES & LABELS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", @@ -1990,10 +64,10 @@ }, { "type": "text", - "id": "ivisG", + "id": "HNlXw", "name": "shTitle", "fill": "$text-primary", - "content": "Section Header Component", + "content": "Status Indicators", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, @@ -2002,12 +76,12 @@ }, { "type": "text", - "id": "YFM0A", + "id": "bPaMT", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, - "content": "This is a reusable section header with badge, title, and description.", + "content": "Small labels and badges for highlighting features, categories, or status.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", @@ -2018,43 +92,2164 @@ }, { "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", + "id": "BadgeRow", + "name": "badgeExamples", "width": "fill_container", - "gap": 24, + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 20, + "padding": 40, "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" + "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, + "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": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", + "id": "xqghZ", + "name": "shTitle", + "fill": "$text-primary", + "content": "Interactive Elements", + "textAlign": "center", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 }, { "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", + "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": 14, + "fontSize": 16, "fontWeight": "normal" } ] + }, + { + "type": "frame", + "id": "BtnRow", + "name": "buttonExamples", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 20, + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PrimaryBtn1", + "name": "examplePrimaryBtn", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xMjoJ", + "name": "btnPIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "yR7mY", + "name": "btnPText", + "fill": "$text-primary", + "content": "Primary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PrimaryBtn2", + "name": "examplePrimaryBtnIcon", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qkXav", + "name": "btnPIcon", + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "nrUMI", + "name": "btnPText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SecondaryBtn1", + "name": "exampleSecondaryBtn", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qM2TY", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ixoFp", + "name": "btnSText", + "fill": "$text-primary", + "content": "Secondary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SecondaryBtn2", + "name": "exampleSecondaryBtnIcon", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6Hmda", + "name": "btnSIcon", + "width": 16, + "height": 16, + "iconFontName": "play", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "4D31l", + "name": "btnSText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "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, + "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" } ] } @@ -2407,261 +2602,156 @@ }, { "type": "frame", - "id": "FooterSection", - "name": "Footer Components Section", - "width": "fill_container", + "name": "Navigation Showcase", + "width": 1440, + "fill": "$bg-page", "layout": "vertical", - "gap": 32, + "gap": 80, + "padding": [ + 80, + 120 + ], "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", + "id": "NavSection", + "name": "Navigation Section", "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", + "layout": "vertical", + "gap": 32, "children": [ { "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", + "id": "NavSectHeader", + "name": "navSectionHeader", "layout": "vertical", "gap": 16, + "alignItems": "center", "children": [ + { + "type": "frame", + "id": "jNieW", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "jVugF", + "name": "badgeText", + "fill": "$orange-primary", + "content": "NAVIGATION", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, { "type": "text", - "id": "jcBoY", - "name": "footColTitle", + "id": "5HgAI", + "name": "shTitle", "fill": "$text-primary", - "content": "Products", + "content": "Headers & Menus", + "textAlign": "center", "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 }, { "type": "text", - "id": "NX2A9", - "name": "footColL1", + "id": "72MpO", + "name": "shDesc", "fill": "$text-tertiary", - "content": "POS System", + "textGrowth": "fixed-width", + "width": 600, + "content": "Navigation bars and menu components for desktop and mobile layouts.", + "lineHeight": 1.6, + "textAlign": "center", "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, + "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", + "id": "NavExamples", + "name": "navExamples", + "width": "fill_container", "layout": "vertical", - "gap": 16, + "gap": 20, "children": [ { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" + "type": "frame", + "id": "DesktopNav", + "name": "exampleDesktopNav", + "width": "fill_container", + "height": "fit_content(84)", + "padding": [ + 20, + 120 + ], + "justifyContent": "space_between", + "alignItems": "center" }, { - "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": "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" + } + ] } ] } diff --git a/pencil-design/tPOS.pen b/pencil-design/tPOS.pen index 66985912..35dd7fa7 100644 --- a/pencil-design/tPOS.pen +++ b/pencil-design/tPOS.pen @@ -6376,1970 +6376,44 @@ }, { "type": "frame", - "id": "CompLib", - "x": 4008, - "y": 0, "name": "aPOS Component Library", "width": 1440, "fill": "$bg-page", "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120, - 100, - 120 - ], + "gap": 40, + "padding": 40, "children": [ { "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", + "name": "Badge Showcase", + "width": 1440, + "fill": "$bg-page", "layout": "vertical", - "gap": 16, - "alignItems": "center", + "gap": 80, + "padding": [ + 80, + 120 + ], "children": [ { "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "LibTitle", - "name": "libTitle", - "fill": "$text-primary", - "content": "aPOS Component Library", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "600", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "LibDesc", - "name": "libDescription", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BtnSection", - "name": "Buttons & Actions Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BtnSectHeader", - "name": "buttonSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "xqghZ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Interactive Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "zPj8L", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Primary and secondary button variants for calls-to-action and navigation.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", + "id": "BadgeSection", + "name": "Badges & Labels Section", "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BadgeSection", - "name": "Badges & Labels Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BadgeSectHeader", - "name": "badgeSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "HNlXw", - "name": "shTitle", - "fill": "$text-primary", - "content": "Status Indicators", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "bPaMT", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Small labels and badges for highlighting features, categories, or status.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CardSection", - "name": "Cards Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "CardSectHeader", - "name": "cardSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5dZC4", - "name": "shTitle", - "fill": "$text-primary", - "content": "Content Containers", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "HeRP2", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Various card types for displaying features, pricing, industry solutions, and steps.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CardGrid", - "name": "cardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "uLtIh", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "i9xHO", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "We76w", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "teqD3", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NavSection", - "name": "Navigation Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NavSectHeader", - "name": "navSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5HgAI", - "name": "shTitle", - "fill": "$text-primary", - "content": "Headers & Menus", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "72MpO", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Navigation bars and menu components for desktop and mobile layouts.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavExamples", - "name": "navExamples", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TypoSection", - "name": "Typography & Branding Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "TypoSectHeader", - "name": "typoSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "RuoWE", - "name": "shTitle", - "fill": "$text-primary", - "content": "Brand Identity Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "DCNsc", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Logo, section headers, links, and typography styles.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, "layout": "vertical", "gap": 32, - "padding": 40, "children": [ { "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", + "id": "BadgeSectHeader", + "name": "badgeSectionHeader", "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ { "type": "frame", - "id": "n6zyD", + "id": "sokxt", "name": "shBadge", "fill": "#FF5C0018", "cornerRadius": 100, @@ -8350,10 +6424,10 @@ "children": [ { "type": "text", - "id": "mrU8q", + "id": "NK10q", "name": "badgeText", "fill": "$orange-primary", - "content": "CATEGORY", + "content": "BADGES & LABELS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", @@ -8363,10 +6437,10 @@ }, { "type": "text", - "id": "ivisG", + "id": "HNlXw", "name": "shTitle", "fill": "$text-primary", - "content": "Section Header Component", + "content": "Status Indicators", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, @@ -8375,12 +6449,12 @@ }, { "type": "text", - "id": "YFM0A", + "id": "bPaMT", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, - "content": "This is a reusable section header with badge, title, and description.", + "content": "Small labels and badges for highlighting features, categories, or status.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", @@ -8391,43 +6465,2164 @@ }, { "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", + "id": "BadgeRow", + "name": "badgeExamples", "width": "fill_container", - "gap": 24, + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 20, + "padding": 40, "justifyContent": "center", + "alignItems": "center", "children": [ { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" + "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, + "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": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", + "id": "xqghZ", + "name": "shTitle", + "fill": "$text-primary", + "content": "Interactive Elements", + "textAlign": "center", "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 }, { "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", + "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": 14, + "fontSize": 16, "fontWeight": "normal" } ] + }, + { + "type": "frame", + "id": "BtnRow", + "name": "buttonExamples", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 20, + "padding": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PrimaryBtn1", + "name": "examplePrimaryBtn", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xMjoJ", + "name": "btnPIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "yR7mY", + "name": "btnPText", + "fill": "$text-primary", + "content": "Primary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "PrimaryBtn2", + "name": "examplePrimaryBtnIcon", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qkXav", + "name": "btnPIcon", + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "nrUMI", + "name": "btnPText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "SecondaryBtn1", + "name": "exampleSecondaryBtn", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "qM2TY", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "ixoFp", + "name": "btnSText", + "fill": "$text-primary", + "content": "Secondary Button", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SecondaryBtn2", + "name": "exampleSecondaryBtnIcon", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6Hmda", + "name": "btnSIcon", + "width": 16, + "height": 16, + "iconFontName": "play", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "4D31l", + "name": "btnSText", + "fill": "$text-primary", + "content": "With Icon", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "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ổ biến nhất", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "isTGs", + "name": "pcTop", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "ZFjfl", + "name": "pcName", + "fill": "$text-secondary", + "content": "Starter", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "5UeZM", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", + "children": [ + { + "type": "text", + "id": "8fM2n", + "name": "pcPrice", + "fill": "$text-primary", + "content": "Free", + "fontFamily": "Roboto", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 + }, + { + "type": "text", + "id": "GfS02", + "name": "pcPer", + "enabled": false, + "fill": "$text-tertiary", + "content": "/tháng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "uLtIh", + "name": "pcDesc", + "fill": "$text-tertiary", + "content": "For small businesses getting started", + "lineHeight": 1.5, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "u5uVY", + "name": "pcDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "MXmSA", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "YbXof", + "name": "pcF1", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "mzamm", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "3r8fL", + "name": "checkText", + "fill": "$text-secondary", + "content": "1 store", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Nj2yA", + "name": "pcF2", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "NVTzn", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "5LtsD", + "name": "checkText", + "fill": "$text-secondary", + "content": "100 transactions/month", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "GqUzO", + "name": "pcF3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "yZlVe", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "Ut5uS", + "name": "checkText", + "fill": "$text-secondary", + "content": "Basic reports", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "0Fnac", + "name": "pcBtn", + "width": "fill_container", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "1w3HC", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "RVZxt", + "name": "btnSText", + "fill": "$text-primary", + "content": "Get Started", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PriceCard2", + "name": "examplePricingPro", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 16, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "layout": "vertical", + "gap": 24, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "2qVjH", + "name": "pcBadge", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "PthNf", + "name": "pcBadgeText", + "fill": "$text-primary", + "content": "Phổ biến nhất", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "yT240", + "name": "pcTop", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "G4OEv", + "name": "pcName", + "fill": "$orange-primary", + "content": "Professional", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "IQojv", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", + "children": [ + { + "type": "text", + "id": "R1uJY", + "name": "pcPrice", + "fill": "$text-primary", + "content": "499K", + "fontFamily": "Roboto", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 + }, + { + "type": "text", + "id": "lbKkc", + "name": "pcPer", + "fill": "$text-tertiary", + "content": "/tháng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "i9xHO", + "name": "pcDesc", + "fill": "$text-tertiary", + "content": "For growing business chains", + "lineHeight": 1.5, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "GaBI4", + "name": "pcDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "KiK1Y", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "s5RvM", + "name": "pcF1", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "7e7A1", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "Lmf0e", + "name": "checkText", + "fill": "$text-secondary", + "content": "5 stores", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "pc2H0", + "name": "pcF2", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "JsYjG", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "UUmpR", + "name": "checkText", + "fill": "$text-secondary", + "content": "Unlimited transactions", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "jqWaK", + "name": "pcF3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6LR43", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "ULIlu", + "name": "checkText", + "fill": "$text-secondary", + "content": "Advanced analytics", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "3xz7n", + "name": "proPricingBtn", + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "6y0tm", + "name": "btnPIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "96nc7", + "name": "btnPText", + "fill": "$text-primary", + "content": "Try 14 days free", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "PriceCard3", + "name": "examplePricingEnterprise", + "width": "fill_container", + "fill": "$bg-page", + "cornerRadius": 16, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 24, + "padding": 32, + "children": [ + { + "type": "frame", + "id": "We76w", + "name": "pcBadge", + "enabled": false, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 100, + "padding": [ + 4, + 10 + ], + "children": [ + { + "type": "text", + "id": "ttbZY", + "name": "pcBadgeText", + "fill": "$text-primary", + "content": "Phổ biến nhất", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "0aQSi", + "name": "pcTop", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "text", + "id": "aSefC", + "name": "pcName", + "fill": "$text-secondary", + "content": "Enterprise", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600", + "letterSpacing": 1 + }, + { + "type": "frame", + "id": "QJm3P", + "name": "pcPriceRow", + "gap": 4, + "alignItems": "end", + "children": [ + { + "type": "text", + "id": "PNKkF", + "name": "pcPrice", + "fill": "$text-primary", + "content": "Custom", + "fontFamily": "Roboto", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": -1 + }, + { + "type": "text", + "id": "VHRx4", + "name": "pcPer", + "enabled": false, + "fill": "$text-tertiary", + "content": "/tháng", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "teqD3", + "name": "pcDesc", + "fill": "$text-tertiary", + "content": "For large enterprise chains", + "lineHeight": 1.5, + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "rectangle", + "id": "vbKaC", + "name": "pcDivider", + "fill": "$border-subtle", + "width": "fill_container", + "height": 1 + }, + { + "type": "frame", + "id": "dBIlb", + "name": "pcFeats", + "width": "fill_container", + "layout": "vertical", + "gap": 14, + "children": [ + { + "type": "frame", + "id": "EXa0J", + "name": "pcF1", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "U0aiJ", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "F221P", + "name": "checkText", + "fill": "$text-secondary", + "content": "Unlimited stores", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "DHLmw", + "name": "pcF2", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "En6Un", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "ytc60", + "name": "checkText", + "fill": "$text-secondary", + "content": "API integration", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "zWEio", + "name": "pcF3", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "P4YlO", + "name": "checkIcon", + "width": 16, + "height": 16, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$green-success" + }, + { + "type": "text", + "id": "seCtG", + "name": "checkText", + "fill": "$text-secondary", + "content": "Dedicated account manager", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "8129K", + "name": "pcBtn", + "width": "fill_container", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 14, + 24 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "kqsyZ", + "name": "btnSIcon", + "enabled": false, + "width": 16, + "height": 16, + "iconFontName": "arrow-right", + "iconFontFamily": "lucide", + "fill": "$text-secondary" + }, + { + "type": "text", + "id": "koJzc", + "name": "btnSText", + "fill": "$text-primary", + "content": "Contact Sales", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "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, + "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" } ] } @@ -8780,261 +8975,156 @@ }, { "type": "frame", - "id": "FooterSection", - "name": "Footer Components Section", - "width": "fill_container", + "name": "Navigation Showcase", + "width": 1440, + "fill": "$bg-page", "layout": "vertical", - "gap": 32, + "gap": 80, + "padding": [ + 80, + 120 + ], "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", + "id": "NavSection", + "name": "Navigation Section", "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", + "layout": "vertical", + "gap": 32, "children": [ { "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", + "id": "NavSectHeader", + "name": "navSectionHeader", "layout": "vertical", "gap": 16, + "alignItems": "center", "children": [ + { + "type": "frame", + "id": "jNieW", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "id": "jVugF", + "name": "badgeText", + "fill": "$orange-primary", + "content": "NAVIGATION", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, { "type": "text", - "id": "jcBoY", - "name": "footColTitle", + "id": "5HgAI", + "name": "shTitle", "fill": "$text-primary", - "content": "Products", + "content": "Headers & Menus", + "textAlign": "center", "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 }, { "type": "text", - "id": "NX2A9", - "name": "footColL1", + "id": "72MpO", + "name": "shDesc", "fill": "$text-tertiary", - "content": "POS System", + "textGrowth": "fixed-width", + "width": 600, + "content": "Navigation bars and menu components for desktop and mobile layouts.", + "lineHeight": 1.6, + "textAlign": "center", "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, + "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", + "id": "NavExamples", + "name": "navExamples", + "width": "fill_container", "layout": "vertical", - "gap": 16, + "gap": 20, "children": [ { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" + "type": "frame", + "id": "DesktopNav", + "name": "exampleDesktopNav", + "width": "fill_container", + "height": "fit_content(84)", + "padding": [ + 20, + 120 + ], + "justifyContent": "space_between", + "alignItems": "center" }, { - "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": "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" + } + ] } ] } @@ -9042,7 +9132,9 @@ } ] } - ] + ], + "x": 4008, + "y": 0 } ], "variables": {