9 |
76 | )} />
77 | )
78 |
79 | CTA.init = ({
80 | services: {ui: {toggleModal}}
81 | }) => ({
82 | toggleSignUpModal: e => {
83 | window.analytics.track('Sign up Website')
84 | toggleModal('signup')
85 | }
86 | })
87 |
88 | export default connect(CTA)
89 |
--------------------------------------------------------------------------------
/src/components/shared/header/user-nav.js:
--------------------------------------------------------------------------------
1 | import Nav from '../../ui/nav'
2 | import {MatchAsGuest, MatchAsMember} from '../../ui/router'
3 |
4 | const UserNav = ({theme, toggleSignUp, toggleSignIn, pageStatus}) => (
5 | Ready to get started?
10 |Try Syncano for free for 30 days. No credit card required.
11 | 12 |
13 |
14 | {/* TODO: Will be replaced with modal form */}
15 | {/* */}
16 |
17 |
18 |
19 |
32 |
33 |
75 |
6 | (
7 |
14 | )} />
15 |
16 | (
17 |
23 | )} />
24 |
25 |
124 |
125 | )
126 |
127 | export default UserNav
128 |
--------------------------------------------------------------------------------
/src/components/shared/youTube.js:
--------------------------------------------------------------------------------
1 | /*
2 | Usage:
3 |
4 |
10 | 
18 |
19 |
29 |
30 | )
31 | }
32 |
33 | export default Avatar
34 |
--------------------------------------------------------------------------------
/src/components/ui/button.js:
--------------------------------------------------------------------------------
1 | const Button = ({
2 | children,
3 | primary, secondary, outline, github, google, facebook, full, square,
4 | ...props
5 | }) => (
6 |
164 | )
165 |
166 | export default Button
167 |
--------------------------------------------------------------------------------
/src/components/ui/grid.js:
--------------------------------------------------------------------------------
1 | const Nav = ({children, wrap}) => (
2 |
6 | {children}
7 |
8 |
22 |
23 | )
24 |
25 | export default Nav
26 |
--------------------------------------------------------------------------------
/src/components/ui/head.js:
--------------------------------------------------------------------------------
1 | import Head from 'zefir/head'
2 | import React from 'react'
3 |
4 | const {OPTIMIZELY_KEY} = process.env
5 | const isDesktop = window.innerWidth > 768
6 | const robotoFontLink =
9 | const ptMonoFontLink =
12 |
13 | export default ({children}) => (
14 |
15 |
16 |
17 | {children}
18 | { isDesktop && ptMonoFontLink }
19 | { isDesktop && robotoFontLink }
20 | {React.Children.map(children, item => {
21 | if (item.type === 'title') {
22 | const title = item.props.children
23 | const page = title.indexOf('-') >= 0 ? title.split('-')[1] : title
24 |
25 | window.analytics.page(`Website -${page}`, {
26 | path: window.location.hash
27 | })
28 | }
29 | })}
30 |
31 | )
32 |
--------------------------------------------------------------------------------
/src/components/ui/hexagon.js:
--------------------------------------------------------------------------------
1 | import Hex from 'react-hexagon'
2 |
3 | const Hexagon = ({width, fill, opacity, children, style, position}) => {
4 | let positionStyle = {}
5 | const element = (
6 |
35 | {element}
36 |
37 | )
38 | }
39 |
40 | return element
41 | }
42 |
43 | export default Hexagon
44 |
--------------------------------------------------------------------------------
/src/components/ui/input-list.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const InputList = ({children, errors = {}}) => {
4 | const errorKeys = Object.keys(errors)
5 | const matchedErrors = React.Children.map(children, input => input.props.name)
6 | const unmatchedErors = errorKeys.filter(err => matchedErrors.indexOf(err) < 0)
7 |
8 | return (
9 |
10 | {React.Children.map(children, input => (
11 |
36 | )
37 | }
38 |
39 | export default InputList
40 |
--------------------------------------------------------------------------------
/src/components/ui/input.js:
--------------------------------------------------------------------------------
1 | const Input = ({full, white, clearable, handleClear, ...props}) => (
2 |
12 | {input}
13 |
14 | {errors[input.props.name] && (
15 |
18 | ))}
19 |
20 | {unmatchedErors.map(err => (
21 | {errors[input.props.name]}
16 | )}
17 | {errors[err]}
22 | ))}
23 |
24 |
35 |
8 |
9 |
10 | {clearable && props.value && (
11 |
12 | )}
13 |
54 |
55 | )
56 |
57 | export default Input
58 |
--------------------------------------------------------------------------------
/src/components/ui/link.js:
--------------------------------------------------------------------------------
1 | import {Link} from 'zefir/router'
2 |
3 | export default props => (
4 |
5 |
6 |
7 |
16 |
17 | )
18 |
--------------------------------------------------------------------------------
/src/components/ui/loader.js:
--------------------------------------------------------------------------------
1 | const Loader = () => (
2 |
3 |
20 |
21 | )
22 |
23 | export default Loader
24 |
--------------------------------------------------------------------------------
/src/components/ui/logo/index.js:
--------------------------------------------------------------------------------
1 | import Logo from './logo.svg'
2 |
3 | export default Logo
4 |
--------------------------------------------------------------------------------
/src/components/ui/logo/logo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/ui/markdown.js:
--------------------------------------------------------------------------------
1 | import {MarkdownPreview} from 'react-marked-markdown'
2 |
3 | const Markdown = ({content}) => (
4 |
5 |
155 | )
156 |
157 | export default Markdown
158 |
--------------------------------------------------------------------------------
/src/components/ui/menu.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Menu = ({children}) => (
4 | -
5 | {React.Children.map(children, item => (
6 |
- {item} 7 | ))} 8 | 9 | 68 |
5 |
13 | )
14 |
--------------------------------------------------------------------------------
/src/components/ui/nav.js:
--------------------------------------------------------------------------------
1 | import {Children} from 'react'
2 |
3 | const Nav = ({children, stack}) => (
4 |
5 |
24 | )
25 |
26 | export default Nav
27 |
--------------------------------------------------------------------------------
/src/components/ui/router.js:
--------------------------------------------------------------------------------
1 | import {Match, Switch, defineMatch} from 'zefir/router'
2 |
3 | const isGuest = ({stores}) => !stores.auth.isLoggedIn
4 | const MatchAsGuest = defineMatch(isGuest)
5 |
6 | const isMember = ({stores}) => stores.auth.isLoggedIn
7 | const MatchAsMember = defineMatch(isMember)
8 |
9 | export {Match, MatchAsGuest, MatchAsMember, Switch}
10 |
--------------------------------------------------------------------------------
/src/components/ui/scroll-manager.js:
--------------------------------------------------------------------------------
1 | import {Component} from 'react'
2 |
3 | class ScrollManager extends Component {
4 | componentDidMount (prevProps) {
5 | const isLocal = window.location.hostname === 'localhost'
6 |
7 | if (!isLocal) {
8 | window.scrollTo(0, 0)
9 | }
10 | }
11 |
12 | render () {
13 | return null
14 | }
15 | }
16 |
17 | export default ScrollManager
18 |
--------------------------------------------------------------------------------
/src/components/ui/sidebar.js:
--------------------------------------------------------------------------------
1 | const Sidebar = ({children}) => (
2 | -
6 | {Children.map(children, Item => (
7 |
- 8 | {Item} 9 | 10 | ))} 11 |
3 | {children}
4 |
5 |
15 |
16 | )
17 |
18 | export default Sidebar
19 |
--------------------------------------------------------------------------------
/src/components/ui/text.js:
--------------------------------------------------------------------------------
1 | const Text = ({children}) => (
2 |
3 | {children}
4 |
123 |
124 | )
125 |
126 | export default Text
127 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
38 | )
39 |
40 | BookMeetingForm.init = ({
41 | services: {
42 | ui: {toggleModal}
43 | },
44 | form: {fields: {name, email, company}}
45 | }) => ({
46 | email,
47 | name,
48 | company,
49 | toggleModal,
50 | addLead: () => {
51 | const env = process.env.API_URL === 'https://api.syncano.io/' ? 'production' : 'staging'
52 | const emailValue = email.value
53 | const nameValue = name.value
54 | const companyValue = company.value
55 |
56 | addIntercomLead({
57 | email: emailValue,
58 | env,
59 | customAttributes:
60 | {
61 | enterprise: true,
62 | name: nameValue,
63 | company: companyValue
64 | }
65 | })
66 |
67 | window.analytics.track('Book Meeting')
68 | toggleModal('book-meeting')
69 | toggleModal('booking-confirmed')
70 | }
71 | })
72 |
73 | BookMeetingForm.form = {
74 | formName: 'BookMeetingForm',
75 | fields: {
76 | email: {
77 | type: 'email',
78 | placeholder: 'E-mail address...'
79 | },
80 | name: {
81 | type: 'name',
82 | placeholder: 'Full name...'
83 | },
84 | company: {
85 | type: 'company',
86 | placeholder: 'Company name...'
87 | }
88 | }
89 | }
90 |
91 | export default connect(BookMeetingForm)
92 |
--------------------------------------------------------------------------------
/src/views/enterprise/components/enterpriseComponents.js:
--------------------------------------------------------------------------------
1 | import Logo from '../../../components/ui/logo'
2 | import Hexagon from '../../../components/ui/hexagon'
3 |
4 | const EnterpriseComponents = () => (
5 |
22 |
24 |
25 |
36 |
37 |
26 |
27 |
28 |
29 |
30 |
31 |
35 |
32 |
33 |
34 |
6 |
125 | )
126 |
127 | export default EnterpriseComponents
128 |
--------------------------------------------------------------------------------
/src/views/enterprise/components/enterpriseCta.js:
--------------------------------------------------------------------------------
1 | import {connect} from 'zefir/utils'
2 | import Button from '../../../components/ui/button'
3 | import Hexagon from '../../../components/ui/hexagon'
4 | import {MatchAsGuest} from '../../../components/ui/router'
5 |
6 | const EnterpriseCTA = ({toggleBookMeetingModal}) => (
7 |
7 |
48 |
124 |
8 |
24 |
9 |
11 | Cloud Tech
12 |
13 |
23 | -
14 |
- Iterate faster with less resources thanks to the developer friendly Syncano Automation SDK 15 |
- Reuse your code and connect legacy IT with Syncano Sockets 16 |
- Scale instantaneously to thousands of users with Syncano Cloud OS 17 |
- 18 | Don’t reinvent the wheel. 19 | Browse Syncano Socket Registry and reuse solutions created by the community 20 | 21 |
25 |
40 |
26 |
28 | Crowdsourced Development
29 |
30 |
39 | -
31 |
- 32 | Embrace the digital transformation with the power of crowdsourcing. 33 | Get access to a pool of 60.000 Syncano Developers 34 | 35 |
- Launch MVPs faster with smaller teams thanks to our innovative work methodologies 36 |
- Have our innovation specialists guide you through the process 37 |
41 |
44 |
45 |
47 |
10 |
67 | )}
68 | />
69 | )
70 |
71 | EnterpriseCTA.init = ({
72 | services: {ui: {toggleModal}}
73 | }) => ({
74 | toggleBookMeetingModal: () => {
75 | window.analytics.track('Booking Form Opened')
76 | toggleModal('book-meeting')
77 | }
78 | })
79 |
80 | export default connect(EnterpriseCTA)
81 |
--------------------------------------------------------------------------------
/src/views/enterprise/components/enterpriseFeatures.js:
--------------------------------------------------------------------------------
1 | import Header from '../../../components/shared/header'
2 | import IconServer from '../../../static/img/enterprise/server-check.svg'
3 | import IconIntegrations from '../../../static/img/enterprise/code-1.svg'
4 | import IconDevelopment from '../../../static/img/enterprise/window-code.svg'
5 | import IconTraining from '../../../static/img/enterprise/graduation-cap.svg'
6 | import Hexagon from '../../../components/ui/hexagon'
7 |
8 | const EnterpriseFeatures = () => (
9 | Let’s talk
11 |12 | We’d love to have a chat about how your organization can leverage the power of Syncano 13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
66 |
10 |
151 | )
152 |
153 | export default EnterpriseFeatures
154 |
--------------------------------------------------------------------------------
/src/views/enterprise/components/enterpriseGraph.js:
--------------------------------------------------------------------------------
1 | import IconTransformation from '../../../static/img/enterprise/transformation.svg'
2 | import Hexagon from '../../../components/ui/hexagon'
3 |
4 |
5 | const EnterpriseGraph = () => (
6 |
11 |
13 | Get access to exclusive enterprise features
12 |
14 |
69 |
150 |
15 |
26 |
16 |
18 |
19 | Self-hosted
20 |
21 |
22 | Host Syncano on your infrastructure and get maximum control and security
23 | combined with the scalability of your solution.
24 |
25 |
27 |
38 |
28 |
30 |
31 | Custom integrations
32 |
33 |
34 | Easily connect your existing API’s and databases with Syncano through Sockets
35 | - scripts that execute code in the cloud and make it simple to write any integration.
36 |
37 |
39 |
50 |
40 |
42 |
43 | Development
44 |
45 |
46 | No resources? Get access to our crowd of developers who already use Syncano.
47 | They will help you build your next killer service on request.
48 |
49 |
51 |
61 |
52 |
54 |
55 | Support & Training
56 |
57 |
58 | Receive first-class training and support from a dedicated team of Syncano specialists working for you on-site.
59 |
60 |
62 |
65 |
66 |
68 |
7 |
78 | )
79 |
80 | export default EnterpriseGraph
81 |
--------------------------------------------------------------------------------
/src/views/enterprise/index.js:
--------------------------------------------------------------------------------
1 | import {Match} from '../../components/ui/router'
2 | import Head from '../../components/ui/head'
3 | import Page from '../../components/ui/page'
4 | import Footer from '../../components/shared/footer'
5 | import Header from '../../components/shared/header'
6 | import EnterpriseCTA from './components/enterpriseCta'
7 | import EnterpriseTestimonials from './components/enterpriseTestimonials'
8 | import EnterpriseFeatures from './components/enterpriseFeatures'
9 | import EnterpriseComponents from './components/enterpriseComponents'
10 | import EnterpriseGraph from './components/enterpriseGraph'
11 | import Hexagon from '../../components/ui/hexagon'
12 |
13 | const Enterprise = ({
14 | router: {history: {push}}
15 | }) => (
16 |
8 |
24 |
77 |
9 |
12 | Lead the digital transformation and become a disruptor in your market.
10 |Leave the hard part to Syncano.
11 |
13 |
15 |
16 |
18 |
19 |
23 |
22 |
26 |
27 |
38 |
39 |
28 |
32 |
33 |
37 | Our customers and partners include
40 |
41 | 
42 | 
43 | 
44 | 
45 |
46 |
42 |
43 |
44 |
45 |
21 |
22 |
40 |
41 |
42 | How is Syncano different from other cloud backend products?
23 |Syncano has been created with developers in mind; built for engineers by engineers. During the development of the latest version, we carefully listened to the feedback and learned our lessons. The outcome is a tool that seamlessly integrates with your workflow and takes it to the next level. With Syncano, working with the backend feels like http://locallhost.
24 | 25 |How does your pricing model work?
26 |Operations on Syncano are based on the number of API calls and the time it takes to execute the backend script code inside of the sockets you use. We have monthly pricing plans that include a fixed amount of API calls and script execution time. The basic plan of USD 25 includes 1 million API calls and 270k script seconds, which should usually cover around 1000 daily users making several requests through your frontend.
27 | 28 |What happens if I exceed my usage?
29 |Your application will continue to work without any interruptions, regardless of the usage of the backend. If you exceed your usage, overage fees will appear as a separate bill at the end of the month, which is our billing period. You can change your plan at any time and set limits to notify you in the event of getting close to exceeding your current plan.
30 | 31 |What will happen if my app gets popular and attracts millions of users?
32 |Will be as excited as you! You don’t need to worry about scaling issues, as our infrastructure will scale along with the load of your users. We have a proven track record of handling millions of API requests daily.
33 | 34 |Where are the libraries for iOS and Android?
35 |Syncano is currently in beta and we provide a client library for JavaScript. We are also working on the iOS, Android and Unity libraries and they will be released very soon. Ask us on Slack to get the ETAs.
36 | 37 |How can I get support?
38 |You can join our Slack channel for community support, talk to us via the messenger in the Dashboard after you log in, or simply send us an email. You can also browse through our documentation.
39 | { scrollTo(sectionId) }}
26 | >
27 |
101 | )
102 | }
103 | }
104 |
105 | ContentNavItem.init = ({
106 | section,
107 | sectionId,
108 | text,
109 | stores: {featuresPage}
110 | }) => ({
111 | section,
112 | sectionId,
113 | text,
114 | featuresPage
115 | })
116 |
117 | export default connect(ContentNavItem)
118 |
--------------------------------------------------------------------------------
/src/views/features/components/content-nav/icon-1.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/views/features/components/content-nav/index.js:
--------------------------------------------------------------------------------
1 | import {observer} from "mobx-react";
2 | import {scrollTo} from '../../helpers'
3 | import ContentNavItem from './content-nav-item'
4 |
5 | const ContentNav = () => (
6 |
28 |
31 |
32 |
100 | {text}
30 |
7 |
43 | )
44 |
45 | export default ContentNav
46 |
--------------------------------------------------------------------------------
/src/views/features/components/registries-section/icon-fb.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/views/features/components/registries-section/icon-sentry.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/features/components/registries-section/icon-stripe.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/views/features/components/registries-section/icon-twitter.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/views/features/featuresPage.service.js:
--------------------------------------------------------------------------------
1 | import {action} from 'mobx'
2 |
3 | export default class {
4 | @action.bound setActiveSection (value) {
5 | this.store.activeSection = value
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/views/features/featuresPage.store.js:
--------------------------------------------------------------------------------
1 | import {observable} from 'mobx'
2 |
3 | export default observable({
4 | activeSection: 0
5 | })
6 |
--------------------------------------------------------------------------------
/src/views/features/helpers.js:
--------------------------------------------------------------------------------
1 | export function findOffsetTop (obj) {
2 | var curtop = 0
3 |
4 | if (obj.offsetParent) {
5 | do {
6 | curtop += obj.offsetTop
7 | } while ((obj = obj.offsetParent))
8 |
9 | return [curtop - 55]
10 | }
11 | }
12 |
13 | export function scrollTo (id) {
14 | window.scroll(0, findOffsetTop(document.getElementById(id)))
15 | }
16 |
--------------------------------------------------------------------------------
/src/views/features/index.js:
--------------------------------------------------------------------------------
1 | import {Component} from 'react'
2 | import {StickyContainer, Sticky} from 'react-sticky'
3 | import {scrollTo} from './helpers'
4 |
5 | import Footer from '../../components/shared/footer'
6 | import Header from '../../components/shared/header'
7 | import CTA from '../../components/shared/cta'
8 |
9 | import Head from '../../components/ui/head'
10 | import Page from '../../components/ui/page'
11 | import Button from '../../components/ui/button'
12 |
13 | import ContentNav from './components/content-nav'
14 | import CommunitySection from './components/community-section'
15 | import AutomationSDKSection from './components/automation-sdk-section'
16 | import CloudOsSection from './components/cloud-os-section'
17 | import RegistriesSection from './components/registries-section'
18 |
19 | class Features extends Component {
20 | componentWillUnmount () {
21 | window.removeEventListener('scroll', this.handleScroll)
22 | }
23 |
24 | componentDidMount () {
25 | const {hash} = this.props
26 |
27 | if (hash) {
28 | setTimeout(() => scrollTo(hash.substr(1)), 10)
29 | }
30 |
31 | window.addEventListener('scroll', this.handleScroll)
32 | }
33 |
34 | render () {
35 | const {toggleSignUpModal, scrollToTop} = this.props
36 |
37 | return (
38 |
46 |
51 |
56 |
58 |
59 |
60 |
62 |
63 |
64 |
66 |
67 |
68 |
70 |
71 |
75 |
76 |
77 |
6 |
129 | )
130 |
131 | export default Innovation
132 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/hexagons.svg:
--------------------------------------------------------------------------------
1 |
78 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-fb.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-firebase.svg:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-google-analytics.svg:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-segment.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-sentry.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-slack.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-stripe.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/views/landing/sections/sockets/icon-twitter.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/views/missing.js:
--------------------------------------------------------------------------------
1 | import Head from '../components/ui/head'
2 | import Page from '../components/ui/page'
3 | import Link from '../components/ui/link'
4 |
5 | const Missing = () => (
6 |
9 |
12 |
13 |
14 |
15 |
22 |
23 | {/*
24 |
16 | Syncano is a development platform for building more, faster by leveraging existing backend code. Developers can finally spend their time solving app specific challenges.
17 |
18 |
19 | Technology transforms the unthinkable into reality. The Pacemaker saves millions from the grief of loss. There’s still abundant untapped opportunity to change the world through the apps you build.
20 |
21 |
25 |
*/}
28 |
29 | {/* Speed of innovation matters
26 |Go build something amazing!
27 |
30 |
31 |
32 |
*/}
37 |
38 |
128 |
33 |
36 |
12 |
15 |
16 |
31 | Page was not found
13 | Back to home 14 |
9 |
132 | )
133 |
134 | export default PricingTable
135 |
--------------------------------------------------------------------------------
/src/views/pricing/index.js:
--------------------------------------------------------------------------------
1 | import Head from '../../components/ui/head'
2 | import Page from '../../components/ui/page'
3 | import Footer from '../../components/shared/footer'
4 | import Header from '../../components/shared/header'
5 | import CTA from '../../components/shared/cta'
6 | import FAQ from './sections/faq'
7 | import Scaling from './sections/scaling'
8 | import PricingTable from './components/pricing-table'
9 |
10 | const Pricing = ({toggleSignUpModal}) => (
11 |
10 |
16 |
17 |
18 | Base price
19 |
20 | $25
21 | /mo
22 |
23 |
24 |
25 | -
26 |
- Full access to all features 27 |
- 60 requests per second 28 |
- Unlimited storage 29 |
- 16 instances (apps) 30 |
- 8 concurrent scripts 31 |
- Unlimited users 32 |
- 1,000,000 API calls 33 |
- 270,000 Script seconds 34 |
37 | (
38 | (
47 |
54 |
55 |
131 |
39 |
40 |
44 | )} />
45 |
46 |
41 | No credit card required
42 |
43 |
48 |
51 |
52 | )} />
53 |
19 |
22 |
23 | We help you build technology that matters, faster
20 |30-day money back guarantee. No contracts. Upgrade, downgrade, or cancel at any time.
21 |
24 |
26 |
6 |
142 | )
143 |
144 | export default FAQ
145 |
--------------------------------------------------------------------------------
/src/views/pricing/sections/scaling.js:
--------------------------------------------------------------------------------
1 | import Hexagon from '../../../components/ui/hexagon'
2 | import Grid from '../../../components/ui/grid'
3 | import PricingEstimate from '../components/pricing-estimate'
4 |
5 | const Scaling = () => (
6 |
9 |
12 |
13 |
14 |
33 |
34 |
141 |
15 |
32 |
16 |
19 | What happens if I exceed my usage?
17 |When you log into your Syncano Dashboard, you can set hard limits (absolute) and soft limits (warnings/notifications issued). If you actually exceed your usage, overage fees will appear as a separate bill at the end of the month (billing period). You can change your plan and limits at any time.
18 |
20 |
23 | How is a Script second measured?
21 |A Script is measured by a Webhook, Schedule, Trigger, and automation. You’re billed for each second a Script is run.
22 |
24 |
27 | When will I be billed?
25 |As soon as you're ready to switch to a paid account, choose your plan and simply enter your credit card. The bill for the first month is prorated but we still give you the full month’s usage. On the 1st of every month, you are billed up front for that entire month's usage. Should you exceed your usage, you can always change your plan and/or pay the overage. Your overage will appear as a separate bill at the end of that month.
26 |
28 |
31 | Which metrics can I access?
29 |Usage is accessible in your Dashboard. Easily track the number of API calls and Script executions per each Instance (app) on Syncano.
30 |
7 |
162 | )
163 |
164 | export default Scaling
165 |
--------------------------------------------------------------------------------
/src/views/signin.js:
--------------------------------------------------------------------------------
1 | import Footer from '../components/shared/footer'
2 | import Header from '../components/shared/header'
3 | import Head from '../components/ui/head'
4 | import Page from '../components/ui/page'
5 | import SignInForm from '../components/shared/auth/signin'
6 |
7 | const SignIn = () => (
8 |
8 |
10 |
11 |
12 |
17 |
18 | Syncano scales with you
13 |14 | Your app will always get the capacity it needs - and you only pay for what you use. 15 |
16 |
19 |
20 |
35 |
36 |
37 |
161 |
21 |
29 | Estimated monthly cost
22 |23 | Apps come in different shapes and sizes. As you grow, you can adjust your plan based on your needs. 24 |
25 |26 | Pay fair overage rates when you see the number of app users skyrocket and exceed the limits of your current plan. We give a progressive discount, so bigger volume means lower unit prices. 27 |
28 |
30 |
34 |
14 |
19 |
20 |
21 |
23 |
24 |
25 |
26 |
46 |
19 |
21 |
22 |
23 |
24 |
40 |
27 |
30 | 
31 |
32 | )}
33 | title='Join the Community'
34 | subtitle='Join the Syncano community and chat with other developers. Share ideas, learn, build together or ask us anything!'
35 | />
36 |
37 |
31 |
38 |
40 |
41 |
42 |
72 |
9 |
26 |
27 |
51 |
52 | )
53 |
54 | SlackInviteForm.form = {
55 | formName: 'SlackInviteFormForm',
56 | fields: {
57 | email: {
58 | required: 'true',
59 | type: 'email',
60 | placeholder: 'E-mail address'
61 | }
62 | }
63 | }
64 |
65 | SlackInviteForm.init = ({
66 | stores: { messages },
67 | services: { slackInvite: { sendInvitation } },
68 | form: { fields: { email }, submit }
69 | }) => ({
70 | messages,
71 | email,
72 | sendInvitation: (e) => submit(e, sendInvitation)
73 | })
74 |
75 | export default connect(SlackInviteForm)
76 |
--------------------------------------------------------------------------------
/src/views/sockets/components/hexagon.js:
--------------------------------------------------------------------------------
1 | import Color from 'color'
2 | import Icon from './icon.svg'
3 | import Hexagon from '../../../components/ui/hexagon'
4 |
5 | export default ({onClick, fill, title, icon}) => (
6 |
7 |
75 | )
76 |
--------------------------------------------------------------------------------
/src/views/sockets/components/icon.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/views/sockets/components/list-item.js:
--------------------------------------------------------------------------------
1 | import get from 'lodash.get'
2 | import Hexagon from './hexagon'
3 | import Avatar from '../../../components/ui/avatar'
4 | import Link from '../../../components/ui/link'
5 |
6 | const ListItem = ({item, toggleModal}) =>
7 |
8 |
35 |
36 |
74 |
9 | {icon
10 | ? 
11 | :
13 |
34 |
9 |
10 |
17 |
18 |
35 |
36 |
98 | 19 | 20 | {item.name} 21 | 22 |
23 |24 | {item.description.length > 140 25 | ? `${item.description.substr(0, 140)}...` 26 | : item.description} 27 |
28 |
29 |
34 |
31 | {item.author.display_name}
32 |
33 |
7 |
57 | )
58 |
59 | List.init = ({
60 | services: {
61 | sockets,
62 | ui: {toggleModal}
63 | },
64 | stores: {
65 | sockets: store,
66 | pending
67 | }
68 | }) => {
69 | if (store.items.length === 0) {
70 | sockets.fetch()
71 | }
72 |
73 | return ({
74 | store,
75 | pending,
76 | toggleDetailsModal: () => toggleModal('socket-details')
77 | })
78 | }
79 |
80 | export default connect(List)
81 |
--------------------------------------------------------------------------------
/src/views/sockets/components/search.js:
--------------------------------------------------------------------------------
1 | import {connect} from 'zefir/utils'
2 | import {action} from 'mobx'
3 | import Input from '../../../components/ui/input'
4 |
5 | const Search = ({store, search, handleSearch, handleClear}) => (
6 | -
8 | {pending.has('sockets.fetch') ? (
9 |
10 |
15 | )
16 | : store.sortedItems.length === 0 ? (
17 |
11 |
14 | Loading sockets…
13 | No sockets found
18 | )
19 | : store.sortedItems.map(item => (
20 |
7 |
8 |
9 | {store.sortedItems.length > 0 && search.value && (
10 |
28 | )
29 |
30 | Search.init = ({
31 | form: {fields: {search}, setValue},
32 | stores: {
33 | sockets: store
34 | },
35 | services: {sockets}
36 | }) => ({
37 | search,
38 | store,
39 | handleSearch: (e) => {
40 | sockets.search(e.target.value)
41 | setValue(e)
42 | },
43 | handleClear: () => {
44 | setValue('search', '')
45 | sockets.search('')
46 | }
47 | })
48 |
49 | Search.form = {
50 | formName: 'SocketsSearchForm',
51 | fields: (props) => ({
52 | search: {
53 | type: 'search',
54 | placeholder: 'Search for Syncano Sockets'
55 | }
56 | })
57 | }
58 |
59 | export default connect(Search)
60 |
--------------------------------------------------------------------------------
/src/views/sockets/components/sidebar.js:
--------------------------------------------------------------------------------
1 | import {connect} from 'zefir/utils'
2 | import SortList from './sort-list'
3 | import Search from './search'
4 |
5 | const Sidebar = ({store: {sortDirection, sortBy}, handleSortChange}) =>
6 |
45 |
46 | Sidebar.init = ({stores: {sockets: store}, services: {sockets}}) => ({
47 | store,
48 | handleSortChange: name => {
49 | if (name === store.sortBy) {
50 | sockets.toggleSortDirection()
51 | }
52 |
53 | sockets.sortBy(name)
54 | },
55 | })
56 |
57 | export default connect(Sidebar)
58 |
--------------------------------------------------------------------------------
/src/views/sockets/components/sort-list.js:
--------------------------------------------------------------------------------
1 | import Menu from '../../../components/ui/menu'
2 |
3 | const SortList = ({items, active, direction, handleClick}) => (
4 |
11 | {store.sortedItems.length} sockets found for "{search.value}"
12 |
13 | )}
14 |
15 |
27 |
5 |
18 |
19 |
70 |
71 | )
72 |
73 | export default SortList
74 |
--------------------------------------------------------------------------------
/src/views/sockets/index.js:
--------------------------------------------------------------------------------
1 | import {Match} from '../../components/ui/router'
2 | import Head from '../../components/ui/head'
3 | import Page from '../../components/ui/page'
4 | import Footer from '../../components/shared/footer'
5 | import Header from '../../components/shared/header'
6 | import Grid from '../../components/ui/grid'
7 | import Modal from '../../components/ui/modal'
8 | import CTA from '../../components/shared/cta'
9 | import List from './components/list'
10 | import Details from './components/details'
11 | import Search from './components/search'
12 |
13 | const Sockets = ({
14 | router: {history: {push}}
15 | }) => (
16 |
28 |
36 |
37 |
29 |
31 |
32 |
33 |
35 |
45 |