FastPriceStandard

A responsive header with your logo (left), links (center) and a CTA (right). Links and CTA are hidden on mobile and accessible with a burger menu. Add your own logo in the /app folder. Make sure to match the file name in

component (currently icon.png)

Preview

Setup

Add this component under the home->layout level.

  • name: the component name
  • config
    • title: the main title
    • description : the description
    • list: Displays different price modules
      • title: Price displayed in the title
      • currency: Currency display
      • price: Price display
      • unit: Unit display
      • description: Price description information
      • button: Button event
      • privilege: Privilege list display
app.config.ts
export default defineAppConfig({    app: {        home: {            layout: [                {                    name: 'FastPriceStandard',                    config: {                        title: "Simple Affordable Pricing",                        description: "Simple fixed pricing. 30 days money-back guarante",                        list : [                            {                                title: "SMALL",                                currency: "$",                                price: "10",                                pay_item: "",                                unit: "per month",                                description: "Basic features for up to 100 users.",                                button : {                                    name: "Free to use",                                    action: {                                    type: "url",                                    url: "/app/dashboard"                                    }                                },                                privilege: [                                    {content: "Complete documentation", "check": true},                                    {content: "Working materials in Figma", "check": true},                                    {content: "100GB cloud storage", "check": true}                                ]                            },                            {                                title: "MEDIUM",                                currency: "$",                                price: "99",                                pay_item: "price1",                                unit: "/year",                                active: true,                                hightlight: "Popular",                                description: "Basic features for up to 100 users.",                                button : {                                    name: "Get Started",                                    action: {                                    type: "default"                                    },                                    bg_color: "red"                                },                                privilege: [                                    {content: "Complete documentation", "check": true},                                    {content: "Working materials in Figma", "check": true},                                    {content: "100GB cloud storage", "check": true}                                ]                            },                            {                                title: "LARGE",                                currency: "$",                                price: "799",                                unit: "per month",                                description: "Basic features for up to 100 users.",                                button : {                                    name: "Get Started",                                    action_url: "/dashboard",                                    bg_color: "red"                                },                                privilege: [                                    {content: "Complete documentation", "check": false},                                    {content: "Working materials in Figma", "check": true},                                    {content: "100GB cloud storage", "check": true}                                ]                            }                        ]                    }                }            ]        }    }})
Table of Contents

© Copyright 2024 fast2build