From b9d691c2ac27aa8b466bc78d36d7153ed141a098 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Fri, 4 Oct 2024 15:42:29 +0200 Subject: [PATCH 01/16] Added Toggle component, fixed toggeling between cloud and self hosted --- src/lib/components/ui/Toggle.svelte | 54 +++++++ src/routes/pricing/+page.svelte | 171 +++++++++++++++------ src/scss/6-elements/_lists.scss | 8 + src/scss/abstract/mixins/_cross-badge.scss | 12 ++ src/scss/abstract/mixins/_index.scss | 3 +- 5 files changed, 198 insertions(+), 50 deletions(-) create mode 100644 src/lib/components/ui/Toggle.svelte create mode 100644 src/scss/abstract/mixins/_cross-badge.scss diff --git a/src/lib/components/ui/Toggle.svelte b/src/lib/components/ui/Toggle.svelte new file mode 100644 index 0000000000..83473cb17b --- /dev/null +++ b/src/lib/components/ui/Toggle.svelte @@ -0,0 +1,54 @@ + + +
+
+ {#each options as option, index} + + {/each} +
\ No newline at end of file diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index 24b7f0dabd..c040ea57ca 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -8,10 +8,20 @@ import Faq from './faq.svelte'; import BG from './bg.png?enhanced'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; + import Toggle from '$lib/components/ui/Toggle.svelte'; const title = 'Pricing' + TITLE_SUFFIX; const description = 'Explore our straightforward pricing plans that scale with your project.'; const ogImage = DEFAULT_HOST + '/images/open-graph/website.png'; + + const pageStateOptions: Array<{label: string, key: string, isActive?: true}> = [{label: 'Cloud', key: 'cloud'},{label: 'Self hosted', key: 'self-hosted', isActive: true}]; + let activePageState: string = 'self-hosted'; + + function changePageState(newPageState: string) { + console.log('triggered'); + activePageState = newPageState; + console.log('activePageState', activePageState); + } @@ -56,10 +66,13 @@ > Simple, transparent pricing with no surprises +
+ +
-
+
    @@ -257,54 +270,108 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
+
+
+
    +
  • +
    +
    +
    +

    Community version

    +
    + $0 +
    +
    Free forever
    +

    + For developers who choose to manage their own infrastructure and hosting, with more setup and maintenance required. +

    + + Docs + +
    +
    + Includes: +
      +
    • + All core features of Appwrite +
      • +
    • Community support through our Discord server
      • +
    +
    +
    + Does not include: +
      +
    • + Automatic updates to latest Appwrite version +
      • +
    • Edge nodes multi region support
      • +
    • Roles with granular permissions
      • +
    • Support by the core team
      • +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +

    Enterprise

    +
    +
    + Custom +
    +
    per organization/month
    +

    + For organizations that need to self-host with full control, but also want premium support for scaling, monitoring, and advanced features. +

    + + Contact + +
    +
    +

    Everything in the Community version, plus:

    +
      +
    • Host your database or entire instance on AWS or any provider of your choice
      • +
    • Expert guidance for scaling your infrastructure
      • +
    • Assistance with upgrading to the latest Appwrite version
      • +
    • Monitoring and alerts
      • +
    • O24/7 premium support
      • +
    • SSO login
      • +
    • Add-ons
      • +
    • Roles with granular permissions
      • +
    +
    +
    +
    +
    • +
+
@@ -348,6 +415,12 @@ grid-template-columns: repeat(4, 1fr); } + .web-pricing-cards-list-self-hosted { + display: grid; + gap: 1rem; + grid-template-columns: repeat(2, 1fr); + } + .web-pricing-cards-list .web-main-body-500 { height: 78px; --p-font-size: unset !important; diff --git a/src/scss/6-elements/_lists.scss b/src/scss/6-elements/_lists.scss index a480ef8724..5e4728573a 100644 --- a/src/scss/6-elements/_lists.scss +++ b/src/scss/6-elements/_lists.scss @@ -77,6 +77,14 @@ } } +.#{$p}-checked-list-cross { + display:flex; flex-direction:column; gap:pxToRem(20); + li { + display:flex; align-items: start; gap:pxToRem(8); + &::before { @include cross-badge; } + } +} + .#{$p}-pink-dots { display:flex; flex-direction:column; gap:pxToRem(8); list-style:disc; padding-inline-start:pxToRem(24); diff --git a/src/scss/abstract/mixins/_cross-badge.scss b/src/scss/abstract/mixins/_cross-badge.scss new file mode 100644 index 0000000000..63a05e578a --- /dev/null +++ b/src/scss/abstract/mixins/_cross-badge.scss @@ -0,0 +1,12 @@ +@use '../../abstract/functions/pxToRem' as *; +@mixin cross-badge { + content: ""; + display:block; + inline-size:pxToRem(20); + min-inline-size:pxToRem(20); + block-size:pxToRem(24); + background-repeat: no-repeat; + background-size: contain; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI4IiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utb3BhY2l0eT0iMC4zMiIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03LjMwMDA1IDcuMzAwMDVMMTIuNyAxMi43IiBzdHJva2U9IiNFNEU0RTciIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNNy4zMDAwNSAxMi43MDAxTDEyLjcgNy4zMDAwNyIgc3Ryb2tlPSIjRTRFNEU3IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+); + background-position-y: center; +} \ No newline at end of file diff --git a/src/scss/abstract/mixins/_index.scss b/src/scss/abstract/mixins/_index.scss index 58ae1eae90..770d78d301 100644 --- a/src/scss/abstract/mixins/_index.scss +++ b/src/scss/abstract/mixins/_index.scss @@ -3,4 +3,5 @@ @forward "scroll"; @forward "numeric-badge"; @forward "checked-badge"; -@forward "border-gradient"; \ No newline at end of file +@forward "border-gradient"; +@forward "cross-badge"; \ No newline at end of file From fe17a535f4c8e1ccef7097be623ebc9d7a35895a Mon Sep 17 00:00:00 2001 From: ernstmul Date: Fri, 4 Oct 2024 15:55:35 +0200 Subject: [PATCH 02/16] Fix mobile --- src/routes/pricing/+page.svelte | 7 +- src/routes/pricing/compare-support.svelte | 652 ++++++++++++++++++++++ 2 files changed, 658 insertions(+), 1 deletion(-) create mode 100644 src/routes/pricing/compare-support.svelte diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index c040ea57ca..df303fb349 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -418,7 +418,12 @@ .web-pricing-cards-list-self-hosted { display: grid; gap: 1rem; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(1, 1fr); + + @media (min-width: 1023px){ + grid-template-columns: repeat(2, 1fr); + } + } .web-pricing-cards-list .web-main-body-500 { diff --git a/src/routes/pricing/compare-support.svelte b/src/routes/pricing/compare-support.svelte new file mode 100644 index 0000000000..b10b040138 --- /dev/null +++ b/src/routes/pricing/compare-support.svelte @@ -0,0 +1,652 @@ + + + (scrollDir = getScrollDir())} /> + +
+
+
+
+
+
{ + shouldShowTable = !e.detail; + }} + > +

Compare plans

+

+ Discover our plans and find the one that fits your project’s needs. +

+
+ +
+ + + {tab} + + +
+ +
+
+ {activeTable} + {#key `${activeTable}-${shouldShowTable}`} +
+ {#if shouldShowTable && activeTable} + {activeTable} + {/if} +
+ {/key} +
+
+
+

Free

+ + Start building + +
+
+
+
+

Pro

+ + Start building + +
+
+
+
+

Scale

+ +
+
+
+
+

Enterprise

+ + Contact + +
+
+
+
+ + {#each tables as table} + {@const isOpen = $value?.includes(table.title)} + { + const isVisible = e.detail; + visibleTables.update((p) => { + if (isVisible) { + return [...p, table.title]; + } else { + return p.filter((t) => t !== table.title); + } + }); + }} + > + + + + {#each table.rows as row} + + + {#each cols as col, index} + + {/each} + + {/each} + +
+ +
+
+ {row.title} + +
+ 		+ {#if typeof row[col] === 'string'} + {row[col]} + {:else} + yes + {/if} +
+ {/each} +
+
+
+
+
+ + From aa18db89fd13f2b8d8fed20d011571e6ca886857 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Fri, 4 Oct 2024 16:32:52 +0200 Subject: [PATCH 03/16] Show support plans --- src/routes/pricing/+page.svelte | 130 ++-- src/routes/pricing/compare-support.svelte | 698 +++------------------- 2 files changed, 163 insertions(+), 665 deletions(-) diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index df303fb349..7ec290b500 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -5,6 +5,7 @@ import { Main } from '$lib/layouts'; import { TITLE_SUFFIX } from '$routes/titles'; import ComparePlans from './compare-plans.svelte'; + import CompareSupport from './compare-support.svelte'; import Faq from './faq.svelte'; import BG from './bg.png?enhanced'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; @@ -14,7 +15,10 @@ const description = 'Explore our straightforward pricing plans that scale with your project.'; const ogImage = DEFAULT_HOST + '/images/open-graph/website.png'; - const pageStateOptions: Array<{label: string, key: string, isActive?: true}> = [{label: 'Cloud', key: 'cloud'},{label: 'Self hosted', key: 'self-hosted', isActive: true}]; + const pageStateOptions: Array<{ label: string; key: string; isActive?: true }> = [ + { label: 'Cloud', key: 'cloud' }, + { label: 'Self hosted', key: 'self-hosted', isActive: true } + ]; let activePageState: string = 'self-hosted'; function changePageState(newPageState: string) { @@ -67,7 +71,7 @@ Simple, transparent pricing with no surprises
- +
@@ -83,14 +87,16 @@ >
-

Free

+

+ Free +

$0
 
-

+

For personal hobby projects and students.

-

Pro

+

+ Pro +

Popular
per member/month
-

+

For pro developers and teams that need to scale their products.

@@ -187,14 +195,16 @@ >
-

Scale

+

+ Scale +

$599
per organization/month
-

+

For scaling teams and agencies that need dedicated support.

@@ -231,14 +241,16 @@ >
-

Enterprise

+

+ Enterprise +

Custom
per organization/month
-

+

For enterprises that need more power and premium support.

@@ -272,7 +284,10 @@
-
+
Does not include:
  • - Automatic updates to latest Appwrite version + Automatic updates to latest Appwrite + version +
    • +
  • + Edge nodes multi region support +
    • +
  • + Roles with granular permissions
    • -
  • Edge nodes multi region support
    • -
  • Roles with granular permissions
  • Support by the core team
@@ -332,7 +361,9 @@
-

Enterprise

+

+ Enterprise +

per organization/month
-

- For organizations that need to self-host with full control, but also want premium support for scaling, monitoring, and advanced features. +

+ For organizations that need to self-host with full + control, but also want premium support for scaling, + monitoring, and advanced features.

ContactContact

Everything in the Community version, plus:

    -
  • Host your database or entire instance on AWS or any provider of your choice
    • -
  • Expert guidance for scaling your infrastructure
    • -
  • Assistance with upgrading to the latest Appwrite version
    • +
  • + Host your database or entire instance on + AWS or any provider of your choice +
    • +
  • + Expert guidance for scaling your + infrastructure +
    • +
  • + Assistance with upgrading to the latest + Appwrite version +
  • Monitoring and alerts
  • O24/7 premium support
  • SSO login
  • Add-ons
    • -
  • Roles with granular permissions
    • +
  • + Roles with granular permissions +
@@ -375,7 +427,12 @@
- +
+ +
+
+ +
@@ -416,14 +473,13 @@ } .web-pricing-cards-list-self-hosted { - display: grid; - gap: 1rem; - grid-template-columns: repeat(1, 1fr); - - @media (min-width: 1023px){ - grid-template-columns: repeat(2, 1fr); - } + display: grid; + gap: 1rem; + grid-template-columns: repeat(1, 1fr); + @media (min-width: 1023px) { + grid-template-columns: repeat(2, 1fr); + } } .web-pricing-cards-list .web-main-body-500 { diff --git a/src/routes/pricing/compare-support.svelte b/src/routes/pricing/compare-support.svelte index b10b040138..c28c358fe4 100644 --- a/src/routes/pricing/compare-support.svelte +++ b/src/routes/pricing/compare-support.svelte @@ -1,652 +1,94 @@ - (scrollDir = getScrollDir())} /> - -
-
+
+
-
+
-
{ - shouldShowTable = !e.detail; - }} - > -

Compare plans

+
+

Support

- Discover our plans and find the one that fits your project’s needs. + We offer different support tiers for self-hosted projects who need + premium support.

- -
- - - {tab} - - -
- -
+
+
+
+ {#each supportOptions as supportOption}
- {activeTable} - {#key `${activeTable}-${shouldShowTable}`} -
- {#if shouldShowTable && activeTable} - {activeTable} - {/if} -
- {/key} -
-
-
-

Free

- - Start building - +
+ {supportOption.header.title}{supportOption.header.price}
-
-
-
-

Pro

- - Start building - -
-
-
-
-

Scale

- -
-
-
-
-

Enterprise

- - Contact - -
-
-
-
- - {#each tables as table} - {@const isOpen = $value?.includes(table.title)} - { - const isVisible = e.detail; - visibleTables.update((p) => { - if (isVisible) { - return [...p, table.title]; - } else { - return p.filter((t) => t !== table.title); - } - }); - }} - > - - - - {#each table.rows as row} - - - {#each cols as col, index} - - {/each} - - {/each} - -
- -
-
- {row.title} - -
- 		- {#if typeof row[col] === 'string'} - {row[col]} - {:else} - yes - {/if} -
+ Contact us + +
{/each} -
+ +
Response times
+
10GB
+
300GB
+
300GB
+ +
Avg resolution time
+
-
+
$40 per 100GB
+
$40 per 100GB
+ +
Availability
+
2GB
+
150GB
+
150GB
+ +
Support channels
+
-
+
$3 per 100GB
+
$3 per 100GB
+ +
Support agents
+
750k Executions
+
3.5M Executions
+
3.5M Executions
+
- - From 429d82cbb44f39b81139bd2dee68823c4bb7fac9 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Fri, 4 Oct 2024 16:34:55 +0200 Subject: [PATCH 04/16] Set default back to cloud --- src/routes/pricing/+page.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index 7ec290b500..c4e12e1d54 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -16,10 +16,10 @@ const ogImage = DEFAULT_HOST + '/images/open-graph/website.png'; const pageStateOptions: Array<{ label: string; key: string; isActive?: true }> = [ - { label: 'Cloud', key: 'cloud' }, - { label: 'Self hosted', key: 'self-hosted', isActive: true } + { label: 'Cloud', key: 'cloud', isActive: true }, + { label: 'Self hosted', key: 'self-hosted'} ]; - let activePageState: string = 'self-hosted'; + let activePageState: string = 'cloud'; function changePageState(newPageState: string) { console.log('triggered'); From 13bb31109d09c28d053e5d7fa8e3460c57c907ac Mon Sep 17 00:00:00 2001 From: ernstmul Date: Thu, 10 Oct 2024 14:12:47 +0200 Subject: [PATCH 05/16] Select for mobile --- src/routes/pricing/compare-support.svelte | 148 ++++++++++++++++++---- 1 file changed, 121 insertions(+), 27 deletions(-) diff --git a/src/routes/pricing/compare-support.svelte b/src/routes/pricing/compare-support.svelte index c28c358fe4..edaada71ad 100644 --- a/src/routes/pricing/compare-support.svelte +++ b/src/routes/pricing/compare-support.svelte @@ -1,33 +1,93 @@
@@ -43,7 +103,41 @@

-
+
+
+ + +
  • + + +
    • +
  • + + +
    • +
  • + + +
    + +
    +
    • +
  • + + +
    • +
  • + +