website: add pricing.

website/.vitepress/config.mts

@@ -125,7 +125,7 @@ export default defineConfig({
     logo: '/img/brand/logo.svg',
     nav: [
       { text: 'Product', link: '/product/electric', activeMatch: '/product/' },
-      { text: 'Use cases', link: '/use-cases/data-sync', activeMatch: '/use-cases/' },
+      { text: 'Pricing', link: '/pricing', activeMatch: '/pricing' },
       { text: 'Docs', link: '/docs/intro', activeMatch: '/docs/'},
       { text: 'Demos', link: '/demos', activeMatch: '/demos'},
       { text: 'Blog', link: '/blog', activeMatch: '/blog'},
@@ -146,49 +146,6 @@ export default defineConfig({
           ]
         }
       ],
-      '/use-cases': [
-        {
-          text: 'Use cases',
-          items: [
-            {
-              text: 'Replace data fetching with data sync',
-              link: '/use-cases/data-sync'
-            },
-            {
-              text: 'Build resilient software that works offline',
-              link: '/use-cases/local-first-software'
-            },
-            // {
-            //   text: 'Provision data into dev and test environments',
-            //   link: '/use-cases/dev-and-test'
-            // },
-            //{
-            //  text: 'Add multi-user collaboration to your apps',
-            //  link: '/use-cases/multi-user'
-            //},
-            {
-              text: 'Automate cache invalidation',
-              link: '/use-cases/cache-invalidation'
-            },
-            //{
-            //  text: 'Hydrating edge workers',
-            //  link: '/use-cases/edge-workers'
-            //},
-            //{
-            //  text: 'Partial replicas for distributed cloud services',
-            //  link: '/use-cases/cloud-services'
-            //},
-            {
-              text: 'Retrieve data for local AI',
-              link: '/use-cases/local-ai'
-            },
-            {
-              text: 'Reduce your cloud costs',
-              link: '/use-cases/cloud-costs'
-            }
-          ]
-        }
-      ],
       '/docs': [
         {
           text: 'Docs',

website/.vitepress/theme/Layout.vue

@@ -41,12 +41,13 @@ const { Layout } = DefaultTheme
 
 const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
+const shouldShowReleasebanner = frontmatter.hideReleaseBanner || !hasSidebar
 </script>
 
 <template>
   <Layout :class="!hasSidebar ? 'nav-relative' : ''">
     <template #layout-top>
-      <template v-if="!hasSidebar">
+      <template v-if="shouldShowReleasebanner">
         <ReleaseBanner />
       </template>
     </template>

website/.vitepress/theme/custom.css

@@ -80,6 +80,7 @@
   --vp-nav-logo-height: 30px;
 
   --vp-c-text-1: rgba(255, 255, 245, 0.92);
+  --vp-c-text-1-5: rgba(255, 255, 245, 0.86);
   --vp-c-text-2: rgba(235, 235, 245, 0.80);
   --vp-c-text-3: rgba(235, 235, 245, 0.68);
 
@@ -604,10 +605,10 @@ span.no-visual {
   color: var(--vp-c-bg);
 }
 .VPButton.small {
-  border-radius: 16px;
-  padding: 0 16px;
-  line-height: 34px;
-  font-size: 13.5px;
+  border-radius: 15px;
+  padding: 0 15px;
+  line-height: 30px;
+  font-size: 13px;
 }
 .VPButton.vspace {
   margin-top: 6px;

website/about/contact.md

@@ -2,25 +2,30 @@
 title: Contact
 description: >-
   Get in touch with us by email or say hello on our community Discord.
-image: /img/about/vizinada.jpg
+image: /img/about/golden-gate-bridge.jpg
 outline: deep
 ---
 
 <figure class="page-image">
-  <a href="/img/about/vizinada.lg.jpg" class="no-visual">
-    <img src="/img/about/vizinada.jpg" />
+  <a href="/img/about/golden-gate-bridge.lg.jpg" class="no-visual">
+    <img src="/img/about/golden-gate-bridge.jpg" />
   </a>
 </figure>
 
 # Contact us
 
-ElectricSQL is a [UK registered company](https://find-and-update.company-information.service.gov.uk/company/13573370) headquartered in [Istria](https://www.istra.hr/en/explore-istria).
+ElectricSQL is a US Delaware corp headquartered in the San Francisco Bay Area.
+<span class="no-wrap">Our team</span> works across US and European timezones.
 
 Get in touch by email on [[email protected]](mailto:[email protected]) or join our [community Discord](https://discord.electric-sql.com).
 
+## Sales
+
+Contact [[email protected]](mailto:[email protected]).
+
 ## Press
 
-For media enquiries, please contact us on [[email protected]](mailto:[email protected]).
+Contact [[email protected]](mailto:[email protected]).
 
 ## Logos
 

website/data/plans/accelerate.yaml

@@ -0,0 +1,21 @@
+name: Accelerate
+order: 40
+type: service
+
+price: "Faster"
+priceQualifier: "→ prod"
+
+# Hero card display
+who: "fewer mistakes and faster time to market"
+featuresTitle: "Direct access"
+features:
+  - "Dedicated resources"
+  - "Design and architecture"
+  - "Integration and rollout"
+
+
+# CTA
+ctaText: "Free consultation"
+ctaHref: "/about/contact#sales"
+ctaTheme: "alt"
+priceColor: "ddn"

website/data/plans/enterprise.yaml

@@ -0,0 +1,29 @@
+name: Enterprise
+order: 50
+type: enterprise
+
+price: "Custom"
+priceColor: "ddn"
+
+# Hero card display
+who: "organizations with large workloads and advanced needs"
+featuresTitle: "Bespoke solutions"
+features:
+  - "Higher usage limits"
+  - "Custom infrastructure"
+  - "Project solutions"
+
+# Comparison table metrics
+monthlyActiveUsers: "Unlimited"
+writesPerMinute: "Unlimited"
+operations: "Unlimited"
+shapes: "Unlimited"
+sources: "Unlimited"
+gbProcessed: "Unlimited"
+shapeRetention: "Unlimited"
+
+# CTA
+ctaText: "Contact sales"
+ctaTextSmall: "Contact"
+ctaHref: "/about/contact#sales"
+ctaTheme: "alt"

website/data/plans/free.yaml

@@ -0,0 +1,27 @@
+name: Free
+order: 10
+type: tier
+
+price: 0
+priceQualifier: "/ month"
+
+# Hero card display
+who: "solo developers, side projects and prototypes"
+featuresTitle: "Features"
+features:
+  - "Fully managed"
+
+# Comparison table metrics
+monthlyActiveUsers: "~1K"
+writesPerMinute: "~20"
+operations: 1000000
+shapes: 10000
+sources: 10
+gbProcessed: 10
+shapeRetention: "1 week"
+
+# CTA
+ctaText: "Get started"
+ctaTextSmall: "Choose"
+ctaHref: "https://dashboard.electric-sql.cloud"
+ctaTheme: "brand"

website/data/plans/growth.yaml

@@ -0,0 +1,29 @@
+name: Growth
+order: 30
+type: tier
+
+price: 349
+priceQualifier: "/ month"
+
+# Hero card display
+who: "scale-ups building large apps and platforms"
+featuresTitle: "Pro features +"
+features:
+  - "Role-based access control"
+  - "Network security controls"
+  - "Priority support"
+
+# Comparison table metrics
+monthlyActiveUsers: "~200K"
+writesPerMinute: "~6K"
+operations: 200000000
+shapes: 2000000
+sources: 100
+gbProcessed: 2000
+shapeRetention: "4 weeks"
+
+# CTA
+ctaText: "Get started"
+ctaTextSmall: "Choose"
+ctaHref: "https://dashboard.electric-sql.cloud?plan=growth"
+ctaTheme: "brand"

website/data/plans/open-source.yaml

@@ -0,0 +1,18 @@
+name: Open Source
+price: 0
+period: null
+order: 6
+type: other
+
+# This is for comparison table only
+proposition: "Want free with unlimited use? Electric is fully open-source and designed for self-hosting."
+
+# CTA
+ctaText: "Self-hosting"
+ctaHref: "/docs/guides/deployment"
+ctaTheme: "brand"
+
+# Comparison data  
+benefits: "[COPY NEEDED: Open source benefits]"
+when_to_choose: "[COPY NEEDED: When to choose Open Source]"
+supports_usage: "[COPY NEEDED: Open source usage level]"

website/data/plans/pro.yaml

@@ -0,0 +1,28 @@
+name: Pro
+order: 20
+type: tier
+
+price: 29
+priceQualifier: "/ month"
+
+# Hero card display
+who: "pro teams and startups building production apps"
+featuresTitle: "Free features +"
+features:
+  - "Dedicated resources"
+  - "Higher usage limits"
+
+# Comparison table metrics
+monthlyActiveUsers: "~10K"
+writesPerMinute: "~300"
+operations: 10000000
+shapes: 100000
+sources: 20
+gbProcessed: 100
+shapeRetention: "2 weeks"
+
+# CTA
+ctaText: "Get started"
+ctaTextSmall: "Choose"
+ctaHref: "https://dashboard.electric-sql.cloud?plan=pro"
+ctaTheme: "brand"

website/data/pricing.data.ts

@@ -0,0 +1,36 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { parse } from 'yaml'
+
+export default {
+  watch: ['./plans/*.yaml'],
+
+  load(files) {
+    const plans = files.map((file) => {
+      const slug = path.basename(file, '.yaml')
+      const contents = fs.readFileSync(file, 'utf-8')
+      const data = parse(contents)
+
+      return {
+        slug,
+        ...data
+      }
+    }).sort((a, b) => {
+      return (a.order || 999) - (b.order || 999)
+    })
+
+    // Filter by type
+    const tiers = plans.filter(plan => plan.type === 'tier')
+    const services = plans.filter(plan => plan.type === 'service')
+    const enterprise = plans.filter(plan => plan.type === 'enterprise')
+    const comparisonPlans = plans.filter(plan => plan.type === 'tier' || plan.type === 'enterprise')
+
+    return {
+      plans,
+      tiers,
+      services,
+      enterprise,
+      comparisonPlans
+    }
+  }
+}