Skip to content

Instantly share code, notes, and snippets.

@transcendr

transcendr/project.json

Created November 28, 2019 23:22
Show Gist options
  • Save transcendr/ea5b26bc3b0b48c75c3a40e27512f553 to your computer and use it in GitHub Desktop.
Save transcendr/ea5b26bc3b0b48c75c3a40e27512f553 to your computer and use it in GitHub Desktop.
Download ZIP
DivJoy
Raw
project.json
{
"data": [{
"type": "instance",
"subtype": "app-instance",
"componentId": "app",
"id": 4010090,
"isVisible": true,
"children": []
}],
"components": [{
"id": "app",
"type": "component",
"subtype": "app-component",
"globalStyle": "// COLORS\n$primary: #00d1b2;\n$info: #209CEE;\n$success: #23D160;\n$warning: #FFDD57;\n$danger: #FF3860;\n$light: #F5F5F5;\n$dark: #363636;\n\n// TEXT\n$text: #4A4A4A;\n$link: #3273DC;\n$body-family: BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n$title-family: false;\n$button-family: false;\n\n// BREAKPOINTS\n$gap: 32px;\n$tablet: 769px;\n$desktop: 960px + (2*$gap);\n$widescreen: 1152px + (2*$gap);\n$fullhd: 1344px + (2*$gap);\n$widescreen-enabled: true;\n$fullhd-enabled: false;\n\n// LAYOUT\n$section-padding: 3.5rem 1.5rem;\n$section-padding-small: 1rem 1.5rem;\n$section-padding-medium: 6rem 1.5rem;\n$section-padding-large: 9rem 1.5rem;\n\n// SEE DOCS FOR MORE: \n// https://bit.ly/30UvE5O\n\n// IMPORT BULMA\n@import \"~bulma/bulma.sass\";",
"children": [{
"type": "instance",
"componentId": 9542426,
"id": 9078820,
"isVisible": true,
"attributes": "{\n\ttextContext: \"hi\",\n}",
"children": [{
"type": "instance",
"componentId": 4279952,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: props.textContext,\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"You're in good company\",\n subtitle: \"\"\n}",
"id": 7198701,
"isVisible": true,
"children": [],
"libraryName": "Clients Section"
}],
"libraryName": "empty component"
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 5368693,
"id": 6961335,
"isVisible": true,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 1513260,
"id": 5876810,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 3773675,
"id": 8317181,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 327204,
"id": 2126949,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 9988735,
"id": 2201384,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 8532180,
"id": 6844142,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 9447965,
"id": 9711986,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 4045617,
"id": 5820999,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 4305746,
"id": 5610030,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 5642556,
"id": 6664312,
"isVisible": false,
"children": []
}, {
"type": "instance",
"subtype": "page-instance",
"componentId": 83283,
"id": 3098743,
"isVisible": false,
"children": []
}, {
"type": "instance",
"componentId": 203216,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"light\",\n // normal, medium, large\n size: \"normal\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n\t// Text content\n copyright: '© 2019 Company',\n // Logo image URL\n logo: 'https://uploads.divjoy.com/logo.svg'\n}",
"id": 9281365,
"isVisible": false,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Section",
"id": 1079246,
"children": [{
"type": "element",
"tagName": "section",
"classNames": ["hero", "section", "is-block", "is-relative"],
"classNameExpressions": [{
"js": "color",
"classNames": ["is-{color}"]
}, {
"js": "size",
"classNames": ["is-{size}"]
}],
"children": [{
"type": "if",
"js": "backgroundImage",
"children": [{
"type": "instance",
"componentId": 1986700,
"attributes": "{\n\timage: backgroundImage,\n opacity: backgroundImageOpacity\n}",
"id": 6976618,
"isVisible": true,
"children": []
}],
"id": 4689902,
"isVisible": true
}, {
"type": "children",
"id": 6313629,
"isVisible": true
}],
"attributes": "{\n\t...otherProps\n}",
"style": "// Add light border if two white\n// sections next to each other.\n.is-white + &.is-white {\n border-top: 1px solid #F0F0F0;\n}",
"id": 7573224,
"isVisible": true,
"image": "",
"name": ""
}],
"code": "\tconst {\n color, \n size, \n backgroundImage,\n backgroundImageOpacity,\n children,\n // Passed to section element\n ...otherProps \n } = props;\n",
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"name": "Hero Section",
"id": 7454246,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-vcentered", "is-desktop"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-5-desktop", "has-text-centered-touch"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n // value from 1-6\n size: 1\n}",
"id": 2326079,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 8669042,
"attributes": "{\n\tparentColor: props.color,\n // small, normal, medium, large\n size: \"medium\",\n onClick: props.buttonOnClick\n}",
"children": [{
"type": "text",
"text": "{props.buttonText}",
"id": 3887774,
"isVisible": true
}],
"id": 9572835,
"isVisible": true
}],
"id": 6733235,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["column", "is-1"],
"name": "Spacer",
"id": 8571842,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": [],
"style": "",
"children": []
}, {
"type": "element",
"tagName": "div",
"classNames": ["column"],
"children": [{
"type": "element",
"tagName": "figure",
"classNames": ["image"],
"children": [{
"type": "element",
"tagName": "img",
"attributes": "{\n src: props.image,\n alt: \"Illustration\"\n}",
"id": 9314021,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": "",
"children": []
}],
"style": "margin: 0 auto;\nmax-width: 570px;",
"id": 6832296,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 6527102,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3243841,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 580002,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 8181092,
"isVisible": true
}],
"tags": ["Popular", "Hero"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Section Button",
"id": 8669042,
"children": [{
"type": "element",
"tagName": "button",
"classNames": ["button"],
"children": [{
"type": "children",
"id": 776571,
"isVisible": true
}],
"attributes": "{\n ...otherProps\n}",
"classNameExpressions": [{
"js": "['primary', 'info', 'success', 'warning', 'danger', 'black', 'dark'].includes(parentColor)",
"classNames": ["is-{parentColor}", "is-inverted"]
}, {
"js": " ['white', 'light'].includes(parentColor) || !parentColor",
"classNames": ["is-primary"]
}, {
"js": "size",
"classNames": ["is-{size}"]
}, {
"js": "state",
"classNames": ["is-{state}"]
}, {
"js": "fullWidth",
"classNames": ["is-fullwidth"]
}],
"id": 7815642,
"isVisible": true,
"image": "",
"name": "",
"style": ""
}],
"description": "A button whose color is determined by the background color of its parent component (passed in via `parentColor` prop).",
"code": "\tconst {\n parentColor, \n size, \n state, \n fullWidth,\n // Passed to button element\n ...otherProps\n } = props;\n",
"isVisible": true,
"nameLibrary": "",
"tags": []
}, {
"type": "component",
"name": "Section Header",
"id": 5415335,
"children": [{
"type": "if",
"js": "props.title || props.subtitle",
"id": 8933982,
"children": [{
"type": "element",
"tagName": "header",
"children": [{
"type": "if",
"js": "props.title",
"id": 3832557,
"children": [{
"type": "element",
"tagName": "h1",
"classNames": ["title", "is-spaced", "has-text-weight-bold"],
"children": [{
"type": "text",
"text": "{props.title}",
"id": 3346646,
"isVisible": true
}],
"classNameExpressions": [{
"js": "props.size",
"classNames": ["is-{props.size}"]
}, {
"js": "props.size === 1",
"classNames": ["is-size-2-mobile"]
}],
"id": 5428871,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"style": ""
}],
"isVisible": true
}, {
"type": "if",
"js": "props.subtitle",
"children": [{
"type": "element",
"tagName": "p",
"classNames": ["subtitle"],
"children": [{
"type": "text",
"text": "{props.subtitle}",
"id": 4050505,
"isVisible": true
}],
"id": 2045497,
"classNameExpressions": [{
"js": "props.size > 4",
"classNames": ["is-6"]
}],
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"style": ""
}],
"id": 4428299,
"isVisible": true
}],
"classNameExpressions": [{
"js": "props.centered",
"classNames": ["is-centered"]
}],
"style": "margin-bottom: 3rem;\n\n// Remove margin if nothing after header\n&:last-child{\n margin-bottom: 0;\n}\n\n// Added if props.centered is true\n&.is-centered {\n text-align: center;\n}\n\n.subtitle {\n\tmax-width: 700px;\n // So we can have max-width but still\n // have alignment controlled by text-align.\n display: inline-block;\n}",
"id": 4841502,
"name": "Header",
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": []
}],
"isVisible": true
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Background Image",
"id": 1986700,
"children": [{
"type": "element",
"tagName": "div",
"attributes": "{\n style: {\n '--image': `url(${props.image})`,\n '--opacity': props.opacity\n }\n}",
"style": "content: \"\";\nbackground-image: var(--image);\nbackground-position: center center;\nbackground-size: cover;\nopacity: var(--opacity);\ntop: 0;\nleft: 0;\nbottom: 0;\nright: 0;\nposition: absolute;\nz-index: 0;",
"id": 4730303,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"children": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Clients Section",
"id": 4279952,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 8194712,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 7285372,
"attributes": "{\n items: [\n {\n name: 'Instagram',\n image: \"https://uploads.divjoy.com/logo-instagram.svg\",\n width: \"150px\",\n },\n {\n name: 'Slack',\n image: \"https://uploads.divjoy.com/logo-slack.svg\",\n width: \"135px\"\n },\n {\n name: 'Tinder',\n image: \"https://uploads.divjoy.com/logo-tinder.svg\",\n width: \"90px\"\n },\n {\n name: 'Spotify',\n image: \"https://uploads.divjoy.com/logo-spotify.svg\",\n width: \"135px\"\n }\n ]\n}",
"id": 8708010,
"isVisible": true,
"children": []
}],
"id": 2018945,
"isVisible": true,
"attributes": "{}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 1636201,
"isVisible": true
}],
"tags": ["Clients", "Popular"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Clients",
"id": 7285372,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-centered", "is-multiline"],
"children": [{
"type": "foreach",
"valName": "item",
"indexName": "index",
"objectName": "props.items",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-narrow", "has-text-centered"],
"children": [{
"type": "element",
"tagName": "div",
"style": "margin: 0 12px;\nimg {\n // Removes extra space under image\n vertical-align: bottom;\n}",
"children": [{
"type": "element",
"tagName": "img",
"attributes": "{\n src: item.image,\n width: item.width,\n alt: item.name\n}",
"id": 6426386,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": "",
"children": []
}],
"name": "Logo",
"id": 4646506,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}],
"attributes": "{\n key: index\n}",
"id": 6330706,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 2176993,
"isVisible": true,
"objectType": "array"
}],
"id": 2434375,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Features Section",
"id": 1166901,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 5566068,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 8535752,
"attributes": "{\n items: [\n {\n title: \"Explore\",\n description: \"Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.\",\n image: \"https://uploads.divjoy.com/undraw-mind_map_cwng.svg\"\n },\n {\n title: \"Explore\",\n description: \"Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.\",\n image: \"https://uploads.divjoy.com/undraw-personal_settings_kihd.svg\"\n },\n {\n title: \"Explore\",\n description: \"Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.\",\n image: \"https://uploads.divjoy.com/undraw-having_fun_iais.svg\"\n },\n {\n title: \"Explore\",\n description: \"Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.\",\n image: \"https://uploads.divjoy.com/undraw-balloons_vxx5.svg\"\n }\n ]\n}",
"id": 753221,
"isVisible": true,
"children": []
}],
"id": 2630198,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 7879233,
"isVisible": true
}],
"tags": ["Features", "Popular"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Features",
"id": 8535752,
"children": [{
"type": "element",
"tagName": "div",
"style": "max-width: 900px;\nmargin: 80px auto 0 auto;",
"children": [{
"type": "foreach",
"valName": "item",
"indexName": "index",
"objectName": "props.items",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-variable", "is-8", "is-vcentered", "has-text-centered-mobile"],
"style": "// Reverse every other row\n&:nth-of-type(even) {\n flex-direction: row-reverse;\n}\n\n&:not(:last-of-type) {\n padding-bottom: 1.5rem;\n @media screen and (min-width: 769px) {\n padding-bottom: 2.5rem;\n }\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-half"],
"children": [{
"type": "element",
"tagName": "h3",
"classNames": ["title", "has-text-weight-bold", "is-spaced", "is-3"],
"style": "margin-bottom: 1.2rem !important;",
"children": [{
"type": "text",
"text": "{item.title}",
"id": 967800,
"isVisible": true
}],
"id": 9683929,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}, {
"type": "element",
"tagName": "p",
"classNames": ["subtitle"],
"children": [{
"type": "text",
"text": "{item.description}",
"id": 4810067,
"isVisible": true
}],
"id": 1911482,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 836366,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["column"],
"children": [{
"type": "element",
"tagName": "figure",
"classNames": ["image"],
"children": [{
"type": "element",
"tagName": "img",
"attributes": "{\n src: item.image,\n alt: item.title\n}",
"id": 8166672,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 2009629,
"style": "max-width: 300px;\nmargin: 30px auto;",
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 5005051,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 7839467,
"attributes": "{\n\tkey: index\n}",
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 426775,
"isVisible": true,
"objectType": "array"
}],
"id": 2124975,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Testimonials Section",
"id": 3770170,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 5825807,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 472158,
"attributes": "{\n items: [\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-5.jpeg',\n name: 'Sarah Kline',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.',\n company: \"Company\"\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-48.jpeg',\n name: 'Shawna Murray',\n role: 'Software Engineer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam!',\n company: \"Company\"\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-12.jpeg',\n name: 'Blake Elder',\n role: 'Designer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae.',\n company: \"Company\"\n }\n ]\n}",
"id": 5346966,
"isVisible": true,
"children": []
}],
"id": 9651265,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 1543239,
"isVisible": true
}],
"tags": ["Testimonials"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Testimonials",
"id": 472158,
"children": [{
"type": "instance",
"componentId": 6198410,
"children": [{
"type": "foreach",
"valName": "item",
"objectName": "props.items",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-flex"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["card", "is-flex"],
"style": "flex-direction: column;",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["card-content", "has-text-centered", "is-flex"],
"style": "flex-direction: column;\nheight: 100%;\npadding: 1.8rem;",
"children": [{
"type": "element",
"tagName": "div",
"name": "Avatar Wrapper",
"style": "margin: 0 auto;",
"children": [{
"type": "instance",
"componentId": 7412067,
"attributes": "{\n\timage: item.avatar,\n size: 96,\n alt: item.name\n}",
"id": 2381070,
"isVisible": true,
"children": []
}],
"id": 3316611,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}, {
"type": "element",
"tagName": "p",
"name": "Quote",
"style": "margin-top: 30px;",
"children": [{
"type": "text",
"text": "\"{item.bio}\"",
"id": 1711314,
"isVisible": true
}],
"id": 5568984,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}, {
"type": "element",
"tagName": "div",
"name": "Info",
"style": "margin-top: auto;\npadding-top: 40px;",
"children": [{
"type": "element",
"tagName": "div",
"name": "Name",
"classNames": ["has-text-weight-bold"],
"children": [{
"type": "text",
"text": "{item.name}",
"id": 71786,
"isVisible": true
}],
"id": 385562,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"name": "Company",
"classNames": ["link", "is-size-7"],
"children": [{
"type": "text",
"text": "{item.company}",
"id": 2567670,
"isVisible": true
}],
"style": "margin-top: 3px;",
"id": 7909141,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": []
}],
"id": 7396980,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}],
"id": 987401,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 3219495,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 8349892,
"attributes": "{\n\tkey: index\n}",
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 9087936,
"indexName": "index",
"isVisible": true,
"objectType": "array"
}],
"id": 6131369,
"isVisible": true,
"attributes": "{\n\n}"
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Centered Columns",
"id": 6198410,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-centered", "is-variable", "is-4", "is-multiline"],
"children": [{
"type": "children",
"id": 7476441,
"isVisible": true
}],
"id": 2388015,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Avatar",
"id": 7412067,
"children": [{
"type": "element",
"tagName": "figure",
"classNames": ["image"],
"classNameExpressions": [{
"js": "size",
"classNames": ["is-{size}x{size}"]
}],
"children": [{
"type": "element",
"tagName": "img",
"attributes": "{\n src: image,\n alt: alt,\n ...otherProps\n}",
"classNames": ["is-rounded"],
"id": 7660562,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 3545177,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"style": ""
}],
"code": "\tconst { image, size, alt, ...otherProps } = props;\n",
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"name": "Footer",
"id": 203216,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["brand", "left"],
"children": [{
"type": "element",
"tagName": "a",
"attributes": "{\n href: '/' \n}",
"children": [{
"type": "element",
"tagName": "img",
"attributes": "{\n src: props.logo,\n alt: \"Logo\"\n}",
"id": 782650,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 4753230,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"id": 6328584,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["links", "right"],
"children": [{
"type": "element",
"tagName": "a",
"children": [{
"type": "text",
"text": "About",
"id": 4566084,
"isVisible": true
}],
"attributes": "{\n\thref: '/about'\n}",
"id": 5142584,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "a",
"children": [{
"type": "text",
"text": "FAQ",
"id": 41141,
"isVisible": true
}],
"attributes": "{\n\thref: '/faq',\n}",
"id": 7264362,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "a",
"children": [{
"type": "text",
"text": "Contact",
"id": 9366721,
"isVisible": true
}],
"attributes": "{\n\thref: '/contact',\n}",
"id": 2333053,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "a",
"children": [{
"type": "text",
"text": "Blog",
"id": 8263046,
"isVisible": true
}],
"attributes": "{\n target: \"_blank\",\n href: \"https://medium.com\",\n rel: \"noopener noreferrer\"\n}",
"id": 5194689,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"id": 847974,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["social", "right"],
"children": [{
"type": "element",
"tagName": "a",
"children": [{
"type": "element",
"tagName": "span",
"classNames": ["icon"],
"children": [{
"type": "element",
"tagName": "i",
"classNames": ["fab", "fa-twitter"],
"id": 6283470,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 3994074,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"attributes": "{\n\thref: 'https://twitter.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}",
"id": 8489828,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "a",
"children": [{
"type": "element",
"tagName": "span",
"classNames": ["icon"],
"children": [{
"type": "element",
"tagName": "i",
"classNames": ["fab", "fa-facebook-f"],
"id": 8936496,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 3232684,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"attributes": "{\n\thref: 'https://facebook.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}",
"id": 7606899,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "a",
"children": [{
"type": "element",
"tagName": "span",
"classNames": ["icon"],
"children": [{
"type": "element",
"tagName": "i",
"classNames": ["fab", "fa-instagram"],
"id": 8331840,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 2925991,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"attributes": "{\n\thref: 'https://instagram.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}",
"id": 2600085,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"id": 617938,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["copyright", "left"],
"children": [{
"type": "text",
"text": "{props.copyright}",
"id": 9660171,
"isVisible": true
}],
"id": 531660,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"style": "display: flex;\nflex-wrap: wrap;\n> div {\n display: flex;\n flex: none;\n justify-content: center;\n width: 100%;\n margin-bottom: 24px;\n}\n\n.brand {\n img {\n display: block;\n height: 32px;\n }\n}\n\n.social {\n align-items: flex-end;\n}\n\n.social, .links {\n a {\n color: inherit;\n &:hover {\n opacity: 0.8;\n }\n\n &:not(:first-of-type) {\n margin-left: 20px;\n }\n }\n}\n\n// Tablet and up\n@media screen and (min-width: 769px) {\n > div {\n flex: 50%;\n }\n\n .left {\n justify-content: flex-start;\n }\n\n .right {\n justify-content: flex-end;\n }\n \n // Move links to end (bottom right)\n // Swaps position with social\n .links {\n order: 1;\n }\n}",
"id": 4190157,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 4337160,
"isVisible": true
}],
"tags": ["Footer", "Popular"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"subtype": "page-component",
"children": [{
"type": "instance",
"componentId": 7454246,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"Your landing page title here\",\n subtitle: \"This landing page is perfect for showing off your awesome product and driving people to sign up for a paid plan.\",\n buttonText: \"Get Started\",\n // Image on right\n image: 'https://uploads.divjoy.com/undraw-japan_ubgk.svg',\n // Button onClick handler\n buttonOnClick: () => {\n // Navigate to pricing page\n router.push('/pricing');\n }\n}",
"id": 195077,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 4279952,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"light\",\n // normal, medium, large\n size: \"normal\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"\",\n subtitle: \"\"\n}",
"id": 813240,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 1166901,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"Features\",\n subtitle: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.\"\n}",
"id": 8647187,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 3770170,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"light\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"Here's what people are saying\",\n subtitle: \"\"\n}",
"id": 5160492,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 74477,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"Stay in the know\",\n subtitle: \"Receive our latest articles and feature updates\",\n buttonText: \"Subscribe\",\n inputPlaceholder: \"Enter your email\",\n subscribedMessage: \"You are now subscribed!\"\n}",
"id": 890301,
"isVisible": true,
"children": []
}],
"id": 1513260,
"code": "\tconst router = useRouter();\n",
"isVisible": true,
"path": "home"
}, {
"type": "component",
"subtype": "page-component",
"path": "about",
"id": 3773675,
"children": [{
"type": "instance",
"componentId": 4857083,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"primary\",\n // normal, medium, large\n size: \"large\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"We help you make money\",\n subtitle: \"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam!\"\n}",
"id": 1322277,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 6816015,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: \"Meet the Team\",\n subtitle: \"\"\n}",
"id": 8526933,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Content Section",
"id": 4857083,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 2\n}",
"id": 578586,
"isVisible": true,
"children": []
}],
"id": 5744175,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 9123185,
"isVisible": true
}],
"tags": ["Content"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Team Bios Section",
"id": 6816015,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 981326,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 9687587,
"attributes": "{\n people: [\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-68.jpeg',\n name: 'John Smith',\n role: 'Software Engineer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo.',\n twitterUrl: 'https://twitter.com',\n facebookUrl: 'https://facebook.com',\n linkedinUrl: 'https://linkedin.com'\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-35.jpeg',\n name: 'Lisa Zinn',\n role: 'Software Engineer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!',\n twitterUrl: 'https://twitter.com',\n facebookUrl: 'https://facebook.com',\n linkedinUrl: 'https://linkedin.com'\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-16.jpeg',\n name: 'Diana Low',\n role: 'Designer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!',\n twitterUrl: 'https://twitter.com',\n facebookUrl: 'https://facebook.com',\n linkedinUrl: 'https://linkedin.com'\n }\n ]\n}",
"id": 2949380,
"isVisible": true,
"children": []
}],
"id": 5420427,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 4242966,
"isVisible": true
}],
"tags": ["Popular", "Team"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Team Bios",
"id": 9687587,
"children": [{
"type": "instance",
"componentId": 6198410,
"children": [{
"type": "foreach",
"valName": "person",
"objectName": "props.people",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-half-tablet", "is-one-third-desktop", "is-flex"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["card", "is-flex"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["card-content", "is-flex", "has-text-centered"],
"children": [{
"type": "element",
"tagName": "div",
"name": "Avatar Wrapper",
"style": "margin: 0 auto;",
"children": [{
"type": "instance",
"componentId": 7412067,
"attributes": "{\n\timage: person.avatar,\n size: 128,\n alt: person.name\n}",
"id": 4474689,
"isVisible": true,
"children": []
}],
"id": 2904923,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}, {
"type": "element",
"tagName": "div",
"children": [{
"type": "element",
"tagName": "p",
"children": [{
"type": "text",
"text": "{person.name}",
"id": 830353,
"isVisible": true
}],
"name": "Name",
"classNames": ["is-size-5"],
"id": 5156861,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "p",
"children": [{
"type": "text",
"text": "{person.role}",
"id": 6516408,
"isVisible": true
}],
"name": "Role",
"classNames": ["is-size-7", "is-uppercase", "has-text-weight-semibold"],
"id": 8657684,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "p",
"children": [{
"type": "text",
"text": "{person.bio}",
"id": 4499683,
"isVisible": true
}],
"name": "Bio",
"style": "margin-top: 20px;",
"id": 9988572,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}],
"name": "Details",
"style": "margin-top: 20px;",
"id": 7698527,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}],
"style": "flex-direction: column;\nheight: 100%;\npadding: 1.8rem;",
"id": 3357018,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"style": "flex-direction: column;",
"id": 6450664,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 287490,
"attributes": "{\n\tkey: index\n}",
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3706765,
"indexName": "index",
"isVisible": true,
"objectType": "array"
}],
"id": 99593,
"isVisible": true,
"attributes": "{\n\n}"
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "Newsletter Section",
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-centered"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-12", "is-10-fullhd"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-vcentered"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-half"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["title"],
"children": [{
"type": "text",
"text": "{props.title}",
"id": 4153440,
"isVisible": true
}],
"id": 5227180,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["subtitle"],
"children": [{
"type": "text",
"text": "{props.subtitle}",
"id": 2994041,
"isVisible": true
}],
"id": 180416,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 8254421,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["column", "is-half"],
"children": [{
"type": "instance",
"componentId": 4938296,
"id": 6723650,
"attributes": "{\n parentColor: props.color,\n\tbuttonText: props.buttonText,\n inputPlaceholder: props.inputPlaceholder,\n subscribedMessage: props.subscribedMessage,\n\t// small, normal, medium, large\n size: \"medium\"\n}",
"isVisible": true,
"children": []
}],
"id": 4936903,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3334129,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 5195628,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 6212138,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 6031473,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 8188011,
"isVisible": true
}],
"id": 74477,
"code": " ",
"tags": ["Popular", "Newsletter"],
"isVisible": true,
"nameLibrary": "",
"description": ""
}, {
"type": "component",
"name": "Newsletter",
"children": [{
"type": "if",
"js": "subscribed === false",
"children": [{
"type": "element",
"tagName": "form",
"attributes": "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field", "is-grouped"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["control", "is-expanded"],
"children": [{
"type": "element",
"tagName": "input",
"attributes": "{\n type: 'email',\n placeholder: props.inputPlaceholder,\n onChange: (event) => setEmail(event.target.value)\n}",
"classNames": ["input", "is-{props.size}"],
"id": 2334275,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 5348542,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["control"],
"children": [{
"type": "instance",
"componentId": 8669042,
"attributes": "{\n\tparentColor: props.parentColor,\n size: props.size,\n onClick: props.buttonOnClick\n}",
"children": [{
"type": "text",
"text": "{props.buttonText}",
"id": 751726,
"isVisible": true
}],
"id": 7377433,
"isVisible": true
}],
"id": 568525,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 4088219,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 9147691,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"id": 2699611,
"isVisible": true
}, {
"type": "if",
"js": "subscribed === true",
"children": [{
"type": "text",
"text": "{props.subscribedMessage}",
"id": 813004,
"isVisible": true
}],
"id": 3854440,
"isVisible": true
}],
"id": 4938296,
"code": " const [email, setEmail] = useState('');\n const [subscribed, setSubscribed] = useState(false);\n \n const handleSubmit = () => {\n if (email){\n setSubscribed(true);\n // Parent component can optionally\n // find out when subscribed.\n props.onSubscribed && props.onSubscribed();\n // Subscribe them\n newsletter.subscribe({ email });\n }\n }\n ",
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"subtype": "page-component",
"path": "faq",
"id": 327204,
"children": [{
"type": "instance",
"componentId": 8074567,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n\ttitle: \"Frequently Asked Questions\",\n subtitle: \"\"\n}",
"id": 2798265,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "FAQ Section",
"id": 8074567,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 4849694,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 8283571,
"attributes": "{\n items: [\n {\n question: 'Integer ornare neque mauris?',\n answer: 'Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus. Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'Lorem ipsum dolor sit amet?',\n answer: 'Nunc nulla mauris, laoreet vel cursus lacinia, consectetur sit amet tellus. Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'Suspendisse ut tincidunt?',\n answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis, metus et mattis ullamcorper. Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'Ut enim ad minim veniam?',\n answer: 'Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'In velit mi, rhoncus dictum neque?',\n answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.'\n }\n ]\n}",
"id": 8641436,
"isVisible": true,
"children": []
}],
"id": 1107442,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3382393,
"isVisible": true
}],
"tags": ["FAQ", "Popular"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "FAQ",
"id": 8283571,
"children": [{
"type": "foreach",
"valName": "item",
"objectName": "props.items",
"children": [{
"type": "instance",
"componentId": 4138632,
"attributes": "{\n\tquestion: item.question,\n answer: item.answer,\n key: index\n}",
"id": 3188134,
"isVisible": true,
"children": []
}],
"id": 3564997,
"indexName": "index",
"isVisible": true,
"objectType": "array"
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"name": "FAQ Item",
"code": "\tconst [expanded, setExpanded] = useState(false);\t\n",
"id": 4138632,
"children": [{
"type": "element",
"tagName": "article",
"attributes": "{\n\tonClick: () => setExpanded(!expanded)\n}",
"style": "cursor: pointer;\npadding: 1.6rem 0;\nborder-bottom: 1px solid #efefef;\n&:last-child { \n border-bottom: none; \n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["title", "is-spaced", "is-4"],
"children": [{
"type": "element",
"tagName": "span",
"classNames": ["icon", "is-size-5", "has-text-primary"],
"children": [{
"type": "element",
"tagName": "i",
"classNames": ["fas"],
"classNameExpressions": [{
"js": "expanded",
"classNames": ["fa-minus"]
}, {
"js": "!expanded",
"classNames": ["fa-plus"]
}],
"id": 7252241,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"style": "",
"children": []
}],
"style": "margin-right: 1rem;",
"id": 6314855,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}, {
"type": "text",
"text": "{props.question}",
"id": 6690297,
"isVisible": true
}],
"id": 3811440,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "if",
"js": "expanded",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["subtitle"],
"children": [{
"type": "text",
"text": "{props.answer}",
"id": 3624243,
"isVisible": true
}],
"id": 6329152,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 9458739,
"isVisible": true
}],
"id": 6868745,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"name": "Pricing Section",
"id": 4443176,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tid: \"pricing\",\n color: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 4598409,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 2167828,
"attributes": "{\n // text on button\n buttonText: 'Choose',\n // callback when plan chosen (button clicked)\n onChoosePlan: (planId) => {\n // Add your own payments logic here\n \talert(`You chose the plan \"${planId}\"`);\n },\n items: [\n { \n id: 'monthly',\n timespan: \"Monthly\",\n price: \"29\",\n description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam.'\n },\n { \n id: 'yearly',\n timespan: \"Yearly\",\n price: \"19\",\n description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae.'\n }\n ]\n}",
"id": 2641926,
"isVisible": true,
"children": []
}],
"style": "max-width: 800px;",
"id": 5908858,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 6822629,
"isVisible": true
}],
"tags": ["Pricing", "Popular"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Pricing",
"id": 2167828,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["columns", "is-centered", "is-variable", "is-5"],
"children": [{
"type": "foreach",
"valName": "item",
"indexName": "index",
"objectName": "props.items",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["card"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["card-content"],
"children": [{
"type": "element",
"tagName": "div",
"style": "font-size: 1.25rem;",
"classNames": ["has-text-weight-bold"],
"children": [{
"type": "text",
"text": "{item.timespan}",
"id": 5672110,
"isVisible": true
}],
"name": "Period",
"id": 2393390,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": []
}, {
"type": "element",
"tagName": "div",
"style": "margin: 20px 0;",
"classNames": ["has-text-weight-bold"],
"children": [{
"type": "element",
"tagName": "span",
"children": [{
"type": "text",
"text": "$",
"id": 9593806,
"isVisible": true
}],
"classNames": ["is-size-3"],
"name": "Price Symbol",
"style": "opacity: 0.4;",
"id": 1967626,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": []
}, {
"type": "element",
"tagName": "span",
"children": [{
"type": "text",
"text": "{item.price}",
"id": 8603056,
"isVisible": true
}],
"classNames": ["is-size-1"],
"name": "Price Number",
"id": 1984251,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "span",
"children": [{
"type": "text",
"text": "/m",
"id": 6524326,
"isVisible": true
}],
"classNames": ["is-size-4"],
"name": "Price Month",
"style": "opacity: 0.4;",
"id": 8466525,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": []
}],
"name": "Price",
"id": 883311,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": []
}, {
"type": "element",
"tagName": "p",
"children": [{
"type": "text",
"text": "{item.description}",
"id": 5239080,
"isVisible": true
}],
"name": "Description",
"style": "padding-bottom: 40px;",
"id": 999032,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNames": [],
"classNameExpressions": []
}, {
"type": "element",
"tagName": "button",
"classNames": ["button", "is-medium", "is-primary"],
"children": [{
"type": "text",
"text": "{props.buttonText}",
"id": 9240044,
"isVisible": true
}],
"style": "margin-top: auto;",
"attributes": "{\n\tonClick: () => props.onChoosePlan(item.id)\n}",
"id": 2606941,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": []
}],
"style": "// Flex so that button can position self at \n// bottom of card using margin-top auto.\ndisplay: flex;\nflex-direction: column;\n// Stretch to fit column width\nwidth: 100%;\npadding: 2rem;",
"id": 2873169,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"style": "display: flex;\n// Stretch to fit column width\nwidth: 100%;\n// Ensure .card-content stretches to fit width\nalign-items: stretch;",
"classNameExpressions": [{
"js": "item.emphasized === true",
"classNames": ["emphasized"]
}],
"id": 1944025,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": ""
}],
"style": "display: flex;\nalign-items: stretch;",
"attributes": "{\n key: index\n}",
"id": 9946607,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 3852911,
"isVisible": true,
"objectType": "array"
}],
"id": 7267633,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"subtype": "page-component",
"path": "pricing",
"id": 9988735,
"children": [{
"type": "instance",
"componentId": 4443176,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n title: 'Pricing',\n subtitle: \"\"\n}",
"id": 6155292,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Form Field",
"id": 2768808,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["control"],
"children": [{
"type": "if",
"js": "props.type === \"textarea\"",
"children": [{
"type": "element",
"tagName": "textarea",
"attributes": "{\n type: props.type,\n value: props.value,\n placeholder: props.placeholder,\n onChange: (e) => props.onChange(e.target.value)\n}",
"classNames": ["textarea", "is-medium"],
"id": 398205,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 6549474,
"isVisible": true
}, {
"type": "if",
"js": "props.type !== \"textarea\"",
"children": [{
"type": "element",
"tagName": "input",
"attributes": "{\n type: props.type,\n value: props.value,\n placeholder: props.placeholder,\n onChange: (e) => props.onChange(e.target.value)\n}",
"classNames": ["input", "is-medium"],
"id": 889978,
"isVisible": true,
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 6476692,
"isVisible": true
}],
"id": 5235996,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "if",
"js": "props.error",
"children": [{
"type": "element",
"tagName": "p",
"classNames": ["help", "is-danger"],
"children": [{
"type": "text",
"text": "{props.error.message}",
"id": 5299485,
"isVisible": true
}],
"id": 9601294,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 1823889,
"isVisible": true
}],
"id": 1060601,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"subtype": "page-component",
"path": "contact",
"id": 8532180,
"children": [{
"type": "instance",
"componentId": 4150400,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"medium\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n\ttitle: \"Contact Us\",\n subtitle: \"\",\n buttonText: \"Send message\",\n showNameField: true\n}",
"id": 2665747,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Contact Section",
"id": 4150400,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 4071896,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 5469661,
"attributes": "{\n parentColor: props.color,\n showNameField: props.showNameField,\n buttonText: props.buttonText,\n}",
"id": 8209060,
"isVisible": true,
"children": []
}],
"style": "max-width: 850px;",
"id": 2533263,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": []
}],
"id": 5180594,
"isVisible": true
}],
"tags": ["Contact", "Popular"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Contact Form",
"code": "\t// State for input values\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [message, setMessage] = useState('');\n\n // Whether to show errors\n // We set to true if they submit and there are errors.\n // We only show errors after they submit because\n // it's annoying to see errors while typing.\n const [showErrors, setShowErrors] = useState(false);\n \n // Error array we'll populate\n let errors = [];\n\n // Function for fetching error for a field\n const getError = (field) => {\n return errors.find((e) => e.field === field);\n }\n \n // Function to see if field is empty\n const isEmpty = (val) => val.trim() === '';\n \n\t// Add error if email empty\n if (isEmpty(email)){\n errors.push({\n field: 'email',\n message: 'Please enter an email'\n });\n }\n \n// Add error if message empty\n if (isEmpty(message)){\n errors.push({\n field: 'message',\n message: 'Please enter a message'\n });\n }\n \n\t// Add error if name shown and empty\n if (props.showNameField){\n if (isEmpty(name)){\n errors.push({\n field: 'name',\n message: 'Please enter your name'\n });\n }\n }\n\n // Handle form submission\n const handleSubmit = (e) => {\n // If field errors then show them\n if (errors.length){\n setShowErrors(true);\n }else{\n // Otherwise call onSubmit with form data\n if (props.onSubmit){\n props.onSubmit({\n name,\n email,\n message\n });\n }\n }\n }\n ",
"id": 2896856,
"children": [{
"type": "if",
"js": "props.status && props.status.message",
"children": [{
"type": "instance",
"componentId": 8324765,
"attributes": "{\n\ttype: props.status.type,\n message: props.status.message\n}",
"id": 114896,
"isVisible": true,
"children": []
}],
"id": 1815689,
"isVisible": true
}, {
"type": "element",
"tagName": "form",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field", "is-horizontal"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field-body"],
"children": [{
"type": "if",
"js": "props.showNameField",
"children": [{
"type": "instance",
"componentId": 2768808,
"attributes": "{\n value: name,\n type: 'text',\n placeholder: 'Name',\n\terror: showErrors && getError('name'),\n onChange: (value) => setName(value)\n}",
"id": 4532532,
"isVisible": true,
"children": []
}],
"id": 2002727,
"isVisible": true
}, {
"type": "instance",
"componentId": 2768808,
"attributes": "{\n value: email,\n type: 'email',\n placeholder: 'Email',\n\terror: showErrors && getError('email'),\n onChange: (value) => setEmail(value)\n}",
"id": 6729270,
"isVisible": true,
"children": []
}],
"id": 8382708,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 365257,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["field", "is-horizontal"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field-body"],
"children": [{
"type": "instance",
"componentId": 2768808,
"attributes": "{\n value: message,\n type: 'textarea',\n placeholder: 'Message',\n\terror: showErrors && getError('message'),\n onChange: (value) => setMessage(value)\n}",
"id": 8365187,
"isVisible": true,
"children": []
}],
"id": 8359098,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 1359873,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["field", "is-horizontal"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field-body"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["field"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["control"],
"children": [{
"type": "instance",
"componentId": 8669042,
"attributes": "{\n\tparentColor: props.parentColor,\n size: \"medium\",\n state: props.status && \n props.status.type === \"pending\" ?\n 'loading' : 'normal'\n}",
"children": [{
"type": "text",
"text": "{props.buttonText}",
"id": 9112618,
"isVisible": true
}],
"id": 8423764,
"isVisible": true
}],
"id": 2553172,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 4119607,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 7385159,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3883,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"attributes": "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}",
"id": 980695,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"name": "Contact",
"code": "\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ name, email, message }) => {\n setStatus({ type: \"pending\" });\n \n contact.submit({ name, email, message })\n \t.then(() => {\n \tsetStatus({\n \ttype: \"success\",\n \tmessage: \"Your message has been sent! We'll get back to you soon.\"\n \t});\n \t})\n }",
"id": 5469661,
"children": [{
"type": "instance",
"componentId": 2896856,
"attributes": "{\n parentColor: props.parentColor,\n showNameField: props.showNameField,\n buttonText: props.buttonText,\n onSubmit: onSubmit,\n status: status\n}",
"id": 7744584,
"isVisible": true,
"children": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"name": "Form Status",
"id": 8324765,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["notification"],
"classNameExpressions": [{
"js": "props.type === \"error\"",
"classNames": ["is-danger"]
}, {
"js": "props.type === \"success\"",
"classNames": ["is-success"]
}],
"children": [{
"type": "text",
"text": "{props.message}",
"id": 6208534,
"isVisible": true
}],
"id": 2491376,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"style": ""
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"subtype": "page-component",
"path": "dashboard",
"code": "\tconst auth = useAuth();\n\tconst router = useRouter();\n\n\t// Redirect to signin\n\t// if not signed in.\n\tuseEffect(() => {\n if (auth.user === false){\n \trouter.push('/signin');\n }\n }, [auth, router]);\n",
"id": 9447965,
"children": [{
"type": "instance",
"componentId": 8384420,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"large\",\n // Text content\n title: \"Dashboard\",\n subtitle: \"Dashboard components are coming to the Divjoy library soon. For now, you can implement a custom dashboard here after exporting your code.\"\n}",
"id": 8433171,
"isVisible": true,
"children": []
}],
"isVisible": true
}, {
"type": "component",
"name": "Dashboard Section",
"id": 8384420,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 6816971,
"isVisible": true,
"children": []
}],
"id": 4452922,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 368304,
"isVisible": true
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"subtype": "page-component",
"path": "signin",
"id": 4045617,
"children": [{
"type": "instance",
"componentId": 2902377,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"large\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n\ttitle: \"Welcome back\",\n subtitle: \"\",\n buttonText: \"Sign in\",\n}",
"id": 6038296,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Auth",
"code": "\t// State for all inputs\n const [email, setEmail] = useState('');\n const [pass, setPass] = useState('');\n const [confirmPass, setConfirmPass] = useState('');\n \n // Whether to show errors\n // We set to true if they submit and there are errors.\n // We only show errors after they submit because\n // it's annoying to see errors while typing.\n const [showErrors, setShowErrors] = useState(false);\n \n // Error array we'll populate\n let errors = [];\n\n // Function for fetching error for a field\n const getError = (field) => {\n return errors.find((e) => e.field === field);\n }\n \n // Function to see if field is empty\n const isEmpty = (val) => val.trim() === '';\n \n // Add error if email empty\n if (['signin','signup','forgotpass'].includes(props.mode)){\n if (isEmpty(email)){\n errors.push({\n field: 'email',\n message: 'Please enter an email'\n });\n }\n }\n \n // Add error if password empty\n if (['signin', 'signup', 'changepass'].includes(props.mode)){\n if (isEmpty(pass)){\n errors.push({\n field: 'pass',\n message: 'Please enter a password'\n });\n }\n }\n \n // Add error if confirmPass empty or\n\t// if it doesn't match pass.\n\t// Only for signup and changepass views.\n if (['signup', 'changepass'].includes(props.mode)){\n if (isEmpty(confirmPass)){\n errors.push({\n field: 'confirmPass',\n message: 'Please confirm password'\n });\n }else if (pass !== confirmPass){\n errors.push({\n field: 'confirmPass',\n message: `This doesn't match your password`\n });\n }\n }\n\n // Handle form submission\n const handleSubmit = () => {\n // If field errors then show them\n if (errors.length){\n setShowErrors(true);\n }else{\n // Otherwise call onSubmit with email/pass\n if (props.onSubmit){\n props.onSubmit({\n email,\n pass\n });\n }\n }\n }\n ",
"id": 63699,
"children": [{
"type": "element",
"tagName": "div",
"children": [{
"type": "if",
"js": "props.status && props.status.message",
"children": [{
"type": "instance",
"componentId": 8324765,
"attributes": "{\n\ttype: props.status.type,\n message: props.status.message\n}",
"id": 5710328,
"isVisible": true,
"children": []
}],
"id": 5805610,
"isVisible": true
}, {
"type": "element",
"tagName": "form",
"children": [{
"type": "if",
"js": "['signup', 'signin', 'forgotpass'].includes(props.mode)",
"children": [{
"type": "instance",
"componentId": 2768808,
"attributes": "{\n value: email,\n type: 'email',\n placeholder: 'Email',\n\terror: showErrors && getError('email'),\n onChange: (value) => setEmail(value)\n}",
"id": 7961212,
"isVisible": true,
"children": []
}],
"id": 9069362,
"isVisible": true
}, {
"type": "if",
"js": "['signup', 'signin', 'changepass'].includes(props.mode)",
"children": [{
"type": "instance",
"componentId": 2768808,
"attributes": "{\n value: pass,\n type: 'password',\n placeholder: 'Password',\n\terror: showErrors && getError('pass'),\n onChange: (value) => setPass(value)\n}",
"id": 5398172,
"isVisible": true,
"children": []
}],
"id": 6566228,
"isVisible": true
}, {
"type": "if",
"js": "['signup', 'changepass'].includes(props.mode)",
"children": [{
"type": "instance",
"componentId": 2768808,
"attributes": "{\n value: confirmPass,\n type: 'password',\n placeholder: 'Confirm Password',\n\terror: showErrors && getError('confirmPass'),\n onChange: (value) => setConfirmPass(value)\n}",
"id": 361947,
"isVisible": true,
"children": []
}],
"id": 7858956,
"isVisible": true
}, {
"type": "element",
"tagName": "div",
"classNames": ["field"],
"children": [{
"type": "element",
"tagName": "p",
"classNames": ["control", ""],
"children": [{
"type": "instance",
"componentId": 8669042,
"attributes": "{\n\tparentColor: props.parentColor,\n size: \"medium\",\n fullWidth: true,\n state: props.status && \n \t\t\tprops.status.type === \"pending\" ?\n\t\t\t\t\t\t'loading' : 'normal'\n}",
"children": [{
"type": "text",
"text": "{props.buttonText}",
"id": 7223197,
"isVisible": true
}],
"id": 9599909,
"isVisible": true
}],
"id": 1976494,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"name": "Submit",
"id": 2933438,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "if",
"js": "['signup', 'signin'].includes(props.mode)",
"id": 4019975,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["has-text-centered"],
"children": [{
"type": "if",
"js": "props.mode === \"signup\"",
"children": [{
"type": "text",
"text": "Have an account already?",
"id": 405129,
"isVisible": true
}, {
"type": "element",
"tagName": "a",
"children": [{
"type": "text",
"text": "Sign in",
"id": 5532821,
"isVisible": true
}],
"attributes": "{\n href: '/signin'\n}",
"id": 3021224,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"id": 1718561,
"isVisible": true
}, {
"type": "if",
"js": "props.mode === 'signin'",
"children": [{
"type": "element",
"tagName": "a",
"children": [{
"type": "text",
"text": "Create an account",
"id": 119509,
"isVisible": true
}],
"attributes": "{\n href: '/signup'\n}",
"id": 3288573,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "a",
"attributes": "{\n href: '/forgotpass'\n}",
"children": [{
"type": "text",
"text": "Forgot password",
"id": 5157568,
"isVisible": true
}],
"id": 6632095,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"id": 4822433,
"isVisible": true
}],
"name": "Bottom Link",
"style": "margin-top: 1rem;\nfont-size: 0.9rem;\na {\n margin: 0 0.5rem;\n}",
"id": 1854125,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"classNameExpressions": []
}],
"isVisible": true
}],
"attributes": "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}",
"id": 6086474,
"isVisible": true,
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": ""
}],
"style": "width: 100%;\nmax-width: 450px;\nmargin: 0 auto;",
"id": 5859175,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"name": "Sign In Section",
"id": 2902377,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 5988133,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 6850885,
"attributes": "{\n buttonText: props.buttonText,\n parentColor: props.color,\n onSignin: onSignin\n}",
"id": 2737557,
"isVisible": true,
"children": []
}],
"id": 9088759,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3089850,
"isVisible": true
}],
"code": "\t// Go to page after signin\n const onSignin = () => {\n router.push('/dashboard');\n }\n ",
"tags": ["Signup"],
"isVisible": true,
"nameLibrary": "",
"description": ""
}, {
"type": "component",
"name": "Sign In",
"code": "\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ email, pass }) => {\n setStatus({ type: \"pending\" });\n \tauth.signin(email, pass)\n \t.then(user => {\n \tprops.onSignin && props.onSignin();\n \t})\n .catch(error => {\n \tsetStatus({\n \ttype: \"error\",\n message: error.message\n \t});\n \t\t});\n }\n ",
"id": 6850885,
"children": [{
"type": "instance",
"componentId": 63699,
"attributes": "{\n mode: 'signin',\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}",
"id": 9415858,
"isVisible": true,
"children": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"subtype": "page-component",
"path": "signup",
"id": 4305746,
"children": [{
"type": "instance",
"componentId": 6969772,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"large\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n\ttitle: \"Get yourself an account\",\n subtitle: \"\",\n buttonText: \"Sign up\",\n}",
"id": 5045478,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Sign Up Section",
"id": 6969772,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 8892414,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 6300485,
"attributes": "{\n\tbuttonText: props.buttonText,\n parentColor: props.color,\n onSignup: onSignup\n}",
"id": 1730012,
"isVisible": true,
"children": []
}],
"id": 6557236,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3466550,
"isVisible": true
}],
"code": "\t// Go to page after signup\n const onSignup = () => {\n \trouter.push('/dashboard');\n }\n ",
"tags": ["Signup"],
"isVisible": true,
"nameLibrary": "",
"description": ""
}, {
"type": "component",
"name": "Sign Up",
"code": "\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ email, pass }) => {\n setStatus({ type: \"pending\" });\n auth.signup(email, pass)\n \t.then(user => {\n \tprops.onSignup && props.onSignup();\n \t})\n .catch(error => {\n \tsetStatus({\n \ttype: \"error\",\n message: error.message\n \t});\n \t});\n }\n ",
"id": 6300485,
"children": [{
"type": "instance",
"componentId": 63699,
"attributes": "{\n mode: \"signup\",\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}",
"id": 3564542,
"isVisible": true,
"children": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"subtype": "page-component",
"path": "forgotpass",
"id": 5642556,
"children": [{
"type": "instance",
"componentId": 4632703,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"large\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n\ttitle: \"Get a new password\",\n subtitle: \"\",\n buttonText: \"Reset password\",\n}",
"id": 377481,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Forgot Pass Section",
"id": 4632703,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 4448198,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 8572589,
"attributes": "{\n\tbuttonText: props.buttonText,\n parentColor: props.color\n}",
"id": 5133597,
"isVisible": true,
"children": []
}],
"id": 8356221,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 3563592,
"isVisible": true
}],
"tags": ["Signup"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Forgot Pass",
"id": 8572589,
"children": [{
"type": "instance",
"componentId": 63699,
"attributes": "{\n mode: 'forgotpass',\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}",
"id": 9813654,
"isVisible": true,
"children": []
}],
"code": "\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n\n\tconst onSubmit = ({ email }) => {\n setStatus({ type: \"pending\" });\n \tauth\n \t\t.sendPasswordResetEmail(email)\n .then(() => {\n setStatus({\n type: \"success\",\n message: \"Password reset email sent\"\n });\n })\n .catch(error => {\n setStatus({\n type: \"error\",\n message: error.message\n });\n });\n\t}\n",
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"subtype": "page-component",
"path": "changepass",
"id": 83283,
"children": [{
"type": "instance",
"componentId": 1634806,
"attributes": "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: \"white\",\n // normal, medium, large\n size: \"large\",\n // Background image URL\n backgroundImage: \"\",\n // Background image opacity (0-1)\n backgroundImageOpacity: 1,\n // Text content\n\ttitle: \"Choose a new password\",\n subtitle: \"\",\n buttonText: \"Change password\",\n}",
"id": 3926652,
"isVisible": true,
"children": []
}],
"isVisible": true,
"code": ""
}, {
"type": "component",
"name": "Change Pass Section",
"id": 1634806,
"children": [{
"type": "instance",
"componentId": 1079246,
"attributes": "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}",
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["container"],
"children": [{
"type": "instance",
"componentId": 5415335,
"attributes": "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}",
"id": 4614658,
"isVisible": true,
"children": []
}, {
"type": "instance",
"componentId": 2683725,
"attributes": "{\n buttonText: props.buttonText,\n parentColor: props.color\n}",
"id": 5378004,
"isVisible": true,
"children": []
}],
"id": 3025936,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 7758873,
"isVisible": true
}],
"tags": ["Signup"],
"isVisible": true,
"nameLibrary": "",
"description": "",
"code": ""
}, {
"type": "component",
"name": "Change Pass",
"code": "\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ pass }) => {\n setStatus({ type: \"pending\" });\n auth\n \t.confirmPasswordReset(pass)\n \t.then(() => {\n \tsetStatus({\n \ttype: \"success\",\n message: \"Your password has been changed\"\n });\n \t})\n \t.catch(error => {\n setStatus({\n \ttype: \"error\",\n message: error.message\n });\n \t});\n }\n ",
"id": 2683725,
"children": [{
"type": "instance",
"componentId": 63699,
"attributes": "{\n mode: 'changepass',\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}",
"id": 340607,
"isVisible": true,
"children": []
}],
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": []
}, {
"type": "component",
"subtype": "page-component",
"path": "",
"id": 5368693,
"isVisible": true,
"code": "",
"children": []
}, {
"type": "component",
"name": "HeaderDesktop",
"children": [{
"type": "element",
"tagName": "section",
"classNames": ["section", "is-hidden-mobile"],
"id": 3959916,
"children": [{
"type": "text",
"text": "{console.log('ksalfkadlfa', props.authContext)}",
"id": 2919726,
"isVisible": true,
"libraryName": "text"
}, {
"type": "element",
"tagName": "div",
"classNames": ["container", "is-fluid"],
"id": 8808457,
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["level-left"],
"children": [{
"type": "element",
"tagName": "div",
"classNames": ["column", "is-narrow"],
"children": [{
"type": "element",
"tagName": "span",
"classNames": ["icon", "_menu_icon"],
"children": [{
"type": "element",
"tagName": "i",
"classNames": ["fas", "fa-bars"],
"id": 7165191,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"children": []
}],
"id": 5827931,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"libraryName": ".icon"
}],
"id": 2435164,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}, {
"type": "element",
"tagName": "div",
"classNames": ["column", "has-text-centered"],
"children": [{
"type": "element",
"tagName": "figure",
"classNames": ["image", "_center_logo"],
"children": [{
"type": "element",
"tagName": "div",
"id": 1786368,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNames": [],
"classNameExpressions": [],
"style": "height: 60px;\nwidth: 60px;",
"children": [],
"libraryName": "div"
}],
"id": 198933,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"libraryName": ".image"
}],
"id": 3840995,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"id": 1114229,
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "",
"libraryName": ".columns"
}],
"isVisible": true,
"attributes": "{\n\n}",
"image": "",
"name": "",
"classNameExpressions": [],
"style": ""
}],
"isVisible": true,
"attributes": "",
"image": "",
"name": "",
"classNameExpressions": [],
"style": "padding: 1rem 1.5rem;\n\n& ._menu_icon {\n font-size: 1.8rem;\n color: #ccc;\n cursor: pointer;\n}\n\n& ._center_logo {\n transition: background-image .2s ease-in-out;\n background-image:url('http://localhost:8000/app/assets/img/reflection-app-grey.png');\n background-repeat: no-repeat;\n background-size: contain;\n width: 60px;\n margin: 0 auto;\n cursor: pointer;\n &:hover {\n background-image: url('http://localhost:8000/app/assets/img/reflection-app-gradiant.png');\n }\n}",
"libraryName": ".section"
}],
"id": 8182826,
"isVisible": true,
"nameLibrary": "",
"description": "",
"tags": [],
"code": ""
}, {
"type": "component",
"id": 9542426,
"isVisible": true,
"name": "Provider",
"nameLibrary": "",
"description": "",
"tags": [],
"code": "\n\tconst {textContext} = props\n",
"children": [{
"type": "instance",
"componentId": 8182826,
"id": 544060,
"isVisible": true,
"attributes": "import React, { useState, useEffect, useContext, createContext } from \"react\";\n\nconst authContext = createContext();\nconsole.log('>>> authContext', {useState, useEffect, useContext});\n\n{\n\tauthContext\n}",
"children": []
}]
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment