feat: add status to features (#30382)

* first draft * add stage to features * finish features stages * update correct feature stages * add missing features * add proper client libs icons * keep tags lowercase
2026-10-05 09:25:06 +03:00 · 2024-12-02 22:05:37 +08:00
1 parent d88cb12794
commit f6f834e416
@@ -0,0 +1,88 @@
+export const JsIcon = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 55 55"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.730469 0.807739H54.2695V54.3468H0.730469V0.807739ZM41.6588 45.6917C39.1773 45.6917 37.7743 44.3974 36.6959 42.6365L32.6073 45.0118C34.0843 47.9301 37.1029 50.1566 41.7753 50.1566C46.5538 50.1566 50.1121 47.6752 50.1121 43.1456C50.1121 38.944 47.6986 37.0753 43.4239 35.2422L42.1662 34.7034C40.0076 33.7686 39.0728 33.1576 39.0728 31.6483C39.0728 30.4271 40.0068 29.4923 41.4804 29.4923C42.9251 29.4923 43.8556 30.1016 44.7182 31.6483L48.6359 29.1328C46.9788 26.2179 44.6791 25.1046 41.4804 25.1046C36.9873 25.1046 34.1124 27.977 34.1124 31.7503C34.1124 35.8464 36.5242 37.784 40.1546 39.3307L41.4124 39.8703C43.7069 40.874 45.0751 41.485 45.0751 43.2102C45.0751 44.6498 43.7435 45.6917 41.6588 45.6917ZM22.1613 45.6602C20.4327 45.6602 19.7138 44.4747 18.9234 43.0725L14.8281 45.5519C16.0145 48.0627 18.3473 50.1473 22.3754 50.1473C26.8336 50.1473 29.8879 47.7763 29.8879 42.5668V25.3919H24.8569V42.4989C24.8569 45.0135 23.8142 45.6602 22.1613 45.6602Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+export const FlutterIcon = (props: any) => (
+  <svg
+    width="59"
+    height="58"
+    viewBox="0 0 59 58"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M42.7859 8.69144L36.306 2.21152C35.4475 1.34882 33.6544 0.316956 32.1405 0.316956C30.838 0.316956 29.5608 0.57915 28.732 1.07394L13.8787 8.50055H40.9419C41.5663 8.50055 42.184 8.56542 42.7859 8.69144Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.28906 12.8012L1.46792 29.095C1.14229 29.7843 0.710938 30.9811 0.710938 31.7465C0.710938 33.4 1.43832 35.0916 2.60551 36.2926L9.30112 42.9383C9.2931 42.7955 9.28906 42.6522 9.28906 42.5084V12.8012Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.6841 50.367L24.1985 57.8814H48.0582V50.4088H17.5245C17.2426 50.4088 16.9622 50.3947 16.6841 50.367Z"
+      fill="currentColor"
+    />
+    <path
+      d="M50.1358 47.6558H58.2838V24.943L45.8917 12.5508C44.5789 11.238 42.7985 10.5005 40.9419 10.5005H12.7467L50.1358 47.6558Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.2891 11.8716V42.5084C11.2891 44.0104 11.8857 45.4509 12.9478 46.513C14.1617 47.7268 15.8079 48.4088 17.5245 48.4088H48.0561L11.2891 11.8716Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+export const SwiftIcon = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 58 57"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M57.3407 14.0476V42.6821C57.3407 43.9642 57.2338 45.1929 57.0201 46.4217C56.8064 47.6504 56.4325 48.8257 55.8448 49.9475C55.2572 51.016 54.5627 52.031 53.6545 52.9392C52.7997 53.8474 51.7847 54.5419 50.6628 55.1295C49.541 55.7172 48.3657 56.0912 47.1369 56.3048C45.9256 56.5155 44.6623 56.5704 43.4495 56.6231L43.3974 56.6254H14.7094C13.4273 56.6254 12.1986 56.5185 10.9698 56.3048C9.74112 56.0912 8.56582 55.7172 7.44394 55.1295C6.37549 54.5419 5.36046 53.8474 4.45228 52.9392C3.54409 52.0845 2.8496 51.0694 2.26195 49.9475C1.6743 48.8257 1.30034 47.6504 1.08665 46.4217C0.875966 45.2102 0.82107 43.9468 0.768367 42.7339L0.766113 42.6821V13.9941C0.819536 12.712 0.872962 11.4833 1.08665 10.2545C1.30034 9.02583 1.6743 7.85052 2.26195 6.72865C2.8496 5.6602 3.54409 4.64516 4.45228 3.73698C4.55912 3.63013 4.67932 3.52329 4.79952 3.41645C4.91972 3.30961 5.03992 3.20276 5.14677 3.09592C5.89468 2.50827 6.6426 1.97405 7.49737 1.54667C7.63092 1.49324 7.77784 1.42646 7.92475 1.35968C8.07166 1.2929 8.21857 1.22612 8.35212 1.1727C9.20689 0.852165 10.1151 0.585055 11.0233 0.424787C11.9062 0.268965 12.8397 0.214142 13.7255 0.162122C13.7508 0.160638 13.776 0.159156 13.8012 0.157674C14.0683 0.104251 14.3889 0.104248 14.7094 0.104248H43.3974C44.6795 0.104248 45.9082 0.211097 47.1369 0.424787C48.3657 0.638478 49.541 1.01243 50.6628 1.60007C51.7313 2.18772 52.7463 2.88222 53.6545 3.79041C54.5627 4.64517 55.2572 5.6602 55.8448 6.78208C56.4325 7.90395 56.8064 9.07925 57.0201 10.308C57.2308 11.5194 57.2857 12.7827 57.3384 13.9956L57.3407 14.0476ZM45.6946 34.4016L45.5343 35.0426C50.4492 41.026 49.1136 47.4367 48.3657 46.3148C45.8014 41.3999 41.1002 42.6287 38.6962 43.8574C38.5894 43.9108 38.4825 43.9776 38.3757 44.0444C38.2688 44.1111 38.162 44.1779 38.0551 44.2313C38.0551 44.2848 38.0017 44.2848 38.0017 44.2848C33.0334 46.9559 26.3022 47.1162 19.5709 44.2313C13.9081 41.7739 9.26034 37.6069 6.26868 32.7989C7.81793 33.9208 9.47404 34.9358 11.237 35.7371C18.3422 39.1028 25.5008 38.8357 30.576 35.7371C23.3639 30.1812 17.3272 22.9691 12.7328 17.0926C11.8781 16.0776 11.0767 14.9557 10.3822 13.8339C15.9382 18.8556 24.6461 25.2129 27.798 26.9758C21.1736 19.9775 15.2971 11.323 15.5642 11.5901C26.035 22.1144 35.7045 28.0977 35.7045 28.0977C36.0785 28.258 36.3456 28.4182 36.5593 28.5785C36.773 28.0443 36.9333 27.51 37.0935 26.9758C38.7496 20.8856 36.8798 13.8873 32.606 8.11765C42.3289 13.9407 48.0452 25.0526 45.6946 34.4016Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+export const PythonIcon = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 56 57"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.2861 1.17086C23.2052 0.83128 25.3862 0.636497 27.6701 0.625885C29.954 0.615273 32.3353 0.788831 34.6303 1.17086C38.2558 1.77512 41.3102 4.49488 41.3102 8.11546V20.8368C41.3102 24.5673 38.3448 27.6257 34.6303 27.6257H21.2861C16.7554 27.6257 12.9401 31.5154 12.9401 35.925V42.0287H8.3467C4.46398 42.0287 2.19606 39.2106 1.2464 35.2554C-0.034647 29.9419 0.0197613 26.7664 1.2464 21.6777C2.30982 17.2381 5.70965 14.9043 9.59237 14.9043H27.966V13.2071H14.6062V8.11546C14.6062 4.26017 15.6326 2.16964 21.2861 1.17086ZM22.9521 7.27463C22.9521 5.86635 21.8252 4.72101 20.4452 4.72101C19.0603 4.72101 17.9383 5.86635 17.9383 7.27463C17.9383 8.67792 19.0603 9.81268 20.4452 9.81268C21.8252 9.81268 22.9521 8.67792 22.9521 7.27463Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M42.9762 20.8371V14.9046H47.99C51.8777 14.9046 53.7103 17.8126 54.6699 21.6779C56.0053 27.0463 56.0647 31.0708 54.6699 35.2556C53.3196 39.3207 51.8727 42.029 47.99 42.029H27.9659V43.7262H41.3101V48.8178C41.3101 52.6731 37.9936 54.6329 34.6302 55.6067C29.5703 57.0749 25.515 56.8502 21.286 55.6067C17.7545 54.568 14.6061 52.4384 14.6061 48.8178V36.0965C14.6061 32.4359 17.6308 29.3076 21.286 29.3076H34.6302C39.0768 29.3076 42.9762 25.4364 42.9762 20.8371ZM37.9779 49.6587C37.9779 48.2554 36.856 47.1206 35.471 47.1206C34.0911 47.1206 32.9641 48.2554 32.9641 49.6587C32.9641 51.0669 34.0911 52.2123 35.471 52.2123C36.856 52.2123 37.9779 51.0669 37.9779 49.6587Z"
+      fill="currentColor"
+    />
+  </svg>
+)
@@ -1,44 +1,56 @@
+import { FunctionComponent } from 'react'
 import {
-  ChartScatter,
-  Database,
-  FileCode2,
-  Lock,
-  Cloud,
-  UploadCloud,
-  Image,
-  MessageCircle,
-  ShieldCheck,
-  Package,
-  Users,
-  Folders,
-  RectangleEllipsis,
-  Braces,
-  Globe,
-  UserX,
-  GitBranch,
-  DatabaseZap,
-  Mail,
-  Smartphone,
-  Server,
  Activity,
  BarChart,
+  Braces,
  Brain,
-  Puzzle,
+  ChartScatter,
+  Cloud,
+  Database,
  DatabaseBackup,
+  DatabaseZap,
+  Eye,
+  FileCode2,
+  Folders,
+  GitBranch,
+  Globe,
+  Image,
+  Lock,
+  Mail,
+  MessageCircle,
+  Package,
+  Puzzle,
+  RectangleEllipsis,
+  Server,
+  Shield,
+  ShieldCheck,
  ShieldPlus,
+  Smartphone,
  Terminal,
+  UploadCloud,
+  Users,
+  UserX,
  Zap,
 } from 'lucide-react'
+import { FlutterIcon, JsIcon, PythonIcon, SwiftIcon } from '~/components/svg-icons'
 import { PRODUCT, PRODUCT_SHORTNAMES } from 'shared-data/products'
 import type { LucideIcon } from 'lucide-react'

 enum ADDITIONAL_PRODUCTS {
-  PLATFORM = 'platform management',
+  PLATFORM = 'platform',
  STUDIO = 'studio',
 }

 export type FeatureProductType = PRODUCT | ADDITIONAL_PRODUCTS

+export enum PRODUCT_STAGES {
+  PRIVATE_ALPHA = 'Private Alpha',
+  PUBLIC_ALPHA = 'Public Alpha',
+  BETA = 'Beta',
+  PUBLIC_BETA = 'Public Beta',
+  GA = 'General Availability',
+}
+
 export type FeatureType = {
  /**
   * name of the feature
@@ -59,7 +71,7 @@ export type FeatureType = {
  /**
   * icon will be displayed in the feature card
   */
-  icon: string | LucideIcon
+  icon: string | LucideIcon | FunctionComponent
  /**
   * Each feature belongs to one or more products
   */
@@ -79,6 +91,17 @@ export type FeatureType = {
   * url to docs or blog page for this feature
   */
  docsUrl?: string
+  /**
+   * feature metadata on its status
+   */
+  status?: {
+    stage: PRODUCT_STAGES
+    availableOnSelfHosted: boolean
+    selfHostedTooling?: {
+      label: string
+      link: string
+    }
+  }
 }

 export const features: FeatureType[] = [
@@ -106,6 +129,10 @@ It's 100% portable, which means you can easily migrate your data to and from oth
    heroImageLight: '/images/features/postgres-database-light.png',
    docsUrl: 'https://supabase.com/docs/guides/database/overview',
    slug: 'postgres-database',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Vector database',
@@ -127,6 +154,10 @@ Supabase provides an open source toolkit for developing AI applications using Po
    heroImage: 'https://www.youtube-nocookie.com/embed/ibzlEQmgPPY',
    docsUrl: 'https://supabase.com/docs/guides/ai',
    slug: 'vector-database',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Auto-generated REST API via PostgREST',
@@ -149,6 +180,10 @@ Supabase automatically generates a comprehensive RESTful API from your database
    heroImageLight: '/images/features/auto-generated-rest-api-light.png',
    docsUrl: 'https://supabase.com/docs/guides/api#rest-api-overview',
    slug: 'auto-generated-rest-api',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Auto-generated GraphQL API via pg_graphql',
@@ -178,6 +213,10 @@ Supabase offers lightning-fast GraphQL APIs through its custom-built Postgres Gr
    heroImageLight: '/images/features/auto-generated-graphql-api-light.png',
    docsUrl: 'https://supabase.com/docs/guides/graphql/api',
    slug: 'auto-generated-graphql-api',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Database backups',
@@ -213,6 +252,14 @@ Supabase's backup solutions provide a balance of security, flexibility, and ease
    heroImageLight: '/images/features/backups-light.png',
    docsUrl: 'https://supabase.com/docs/guides/platform/backups',
    slug: 'database-backups',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+      selfHostedTooling: {
+        label: 'wal-g',
+        link: 'https://github.com/wal-g/wal-g',
+      },
+    },
  },
  {
    title: 'Custom domains',
@@ -238,6 +285,10 @@ By using custom domains, you create a more cohesive brand experience and gain fl
    heroImageLight: '/images/features/custom-domains-light.png',
    docsUrl: 'https://supabase.com/docs/guides/platform/custom-domains',
    slug: 'custom-domains',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'Network restrictions',
@@ -271,6 +322,10 @@ By implementing Network Restrictions, you create a more secure environment for y
    heroImageLight: '/images/features/network-restrictions-light.png',
    docsUrl: 'https://supabase.com/docs/guides/platform/network-restrictions',
    slug: 'network-restrictions',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'SSL enforcement',
@@ -306,6 +361,10 @@ By enabling SSL Enforcement, you implement a fundamental best practice in data p
    heroImageLight: '/images/features/ssl-enforcement-light.png',
    docsUrl: 'https://supabase.com/docs/guides/platform/ssl-enforcement',
    slug: 'ssl-enforcement',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'Branching',
@@ -338,6 +397,10 @@ Supabase Branching allows you to create and test changes in separate, temporary
    heroImageLight: '/images/features/branching-light.png',
    docsUrl: 'https://supabase.com/docs/guides/platform/branching',
    slug: 'branching',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_ALPHA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'Terraform provider',
@@ -374,6 +437,10 @@ By adopting the Supabase Terraform provider, teams can implement GitOps practice
    heroImageLight: '/images/features/terraform-provider-light.png',
    docsUrl: 'https://supabase.com/docs/guides/deployment/terraform',
    slug: 'terraform-provider',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_ALPHA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'Read replicas',
@@ -409,6 +476,10 @@ By leveraging Read Replicas, you can achieve consistent low-latency performance
    heroImage: 'https://www.youtube-nocookie.com/embed/PX3R1fXjJ2M',
    docsUrl: 'https://supabase.com/docs/guides/platform/read-replicas',
    slug: 'read-replicas',
+    status: {
+      stage: PRODUCT_STAGES.PRIVATE_ALPHA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'Fly Postgres',
@@ -443,6 +514,10 @@ By leveraging Fly Postgres, you can achieve improved global performance for your
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/platform/fly-postgres',
    slug: 'fly-postgres',
+    status: {
+      stage: PRODUCT_STAGES.PRIVATE_ALPHA,
+      availableOnSelfHosted: false,
+    },
  },
  {
    title: 'Postgres Extensions',
@@ -483,6 +558,10 @@ By leveraging these extensions, you can implement complex features more easily,
    heroImageLight: '/images/features/postgres-extensions-light.png',
    docsUrl: 'https://supabase.com/docs/guides/database/extensions',
    slug: 'postgres-extensions',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Database Webhooks',
@@ -505,6 +584,10 @@ This feature is particularly useful for developers looking to automate workflows
    heroImageLight: '/images/features/database-webhooks-light.png',
    docsUrl: 'https://supabase.com/docs/guides/database/webhooks',
    slug: 'database-webhooks',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Vault',
@@ -526,6 +609,10 @@ This feature is particularly useful for teams looking to enhance their security
    heroImage: 'https://supabase.com/docs/img/guides/database/vault-hello-compressed.mp4',
    docsUrl: 'https://supabase.com/docs/guides/database/vault',
    slug: 'vault',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_ALPHA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Supavisor',
@@ -547,10 +634,14 @@ This feature is particularly valuable for teams looking to optimize their databa
    heroImage: 'https://www.youtube-nocookie.com/embed/ogYNmJOFEpk',
    docsUrl: 'https://supabase.com/blog/supavisor-postgres-connection-pooler',
    slug: 'supavisor',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_BETA,
+      availableOnSelfHosted: true,
+    },
  },
  // Realtime
  {
-    title: 'Realtime Postgres changes',
+    title: 'Realtime - Postgres changes',
    subtitle: 'Receive your database changes through websockets.',
    description: `
 Supabase's Realtime Postgres Changes feature allows you to listen to database changes in real-time using the Realtime system. This capability enables you to build responsive, live-updating applications that reflect database changes instantly.
@@ -582,9 +673,13 @@ Supabase's Realtime Postgres Changes feature provides a powerful tool for creati
    heroImage: 'https://www.youtube-nocookie.com/embed/2rUjcmgZDwQ',
    docsUrl: 'https://supabase.com/docs/guides/realtime/postgres-changes',
    slug: 'realtime-postgres-changes',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
-    title: 'Realtime Broadcast',
+    title: 'Realtime - Broadcast',
    subtitle: 'Send messages between connected users through websockets.',
    description: `
 Supabase's Realtime Broadcast feature enables real-time communication between connected clients using the Realtime system. This functionality allows you to build interactive, collaborative applications where users can instantly share messages or data in real-time.
@@ -619,9 +714,13 @@ Supabase's Realtime Broadcast feature provides a powerful tool for creating resp
    heroImage: 'https://www.youtube-nocookie.com/embed/BelYEMJ2N00',
    docsUrl: 'https://supabase.com/docs/guides/realtime/broadcast',
    slug: 'realtime-broadcast',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
-    title: 'Realtime Presence',
+    title: 'Realtime - Presence',
    subtitle: 'Synchronize shared state between users through websockets.',
    description: `
 Supabase's Realtime Presence feature allows you to track and synchronize shared state between connected users in real-time. This capability enables you to build collaborative applications where users can see each other's status, actions, or any custom state information instantly.
@@ -655,6 +754,59 @@ Supabase's Realtime Presence feature provides a powerful tool for creating inter
    heroImage: 'https://www.youtube-nocookie.com/embed/BelYEMJ2N00',
    docsUrl: 'https://supabase.com/docs/guides/realtime/presence',
    slug: 'realtime-presence',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
+  },
+  {
+    title: 'Realtime - Broadcast Authorization',
+    subtitle: 'Control access to broadcast channels in real-time.',
+    description: `
+The Realtime Broadcast Authorization feature allows you to manage access permissions for broadcast channels in your application. This functionality ensures that only authorized users can listen to specific channels, enhancing security and control over real-time data streams.
+
+Key benefits:
+1. Secure Access Control: Implement fine-grained access control over who can receive broadcast messages in real-time.
+2. Customizable Permissions: Define specific authorization rules based on user roles or attributes.
+3. Enhanced User Experience: Ensure that users only receive relevant updates based on their permissions.
+4. Easy Integration with Existing Systems: Seamlessly integrate broadcast authorization into your current application architecture.
+5. Comprehensive Documentation Available: Access detailed guides on how to implement broadcast authorization effectively.
+
+This feature is particularly valuable for applications that require controlled access to live data streams, such as chat applications or collaborative tools.
+`,
+    icon: Shield,
+    products: [PRODUCT_SHORTNAMES.REALTIME, PRODUCT_SHORTNAMES.AUTHENTICATION],
+    heroImage: 'https://www.youtube-nocookie.com/embed/IXRrU9MpA8Q',
+    docsUrl: 'https://supabase.com/docs/guides/realtime/authorization#broadcast',
+    slug: 'realtime-broadcast-authorization',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_BETA,
+      availableOnSelfHosted: true,
+    },
+  },
+  {
+    title: 'Realtime - Presence Authorization',
+    subtitle: 'Manage presence information securely in real-time.',
+    description: ` 
+The Realtime Presence Authorization feature enables you to control access permissions related to presence information in your application. This allows you to manage who can see the online status of other users in real-time, enhancing privacy and security within collaborative environments.
+
+Key benefits:
+1. Controlled Visibility of Presence Data: Ensure that only authorized users can view the online status of others, protecting user privacy.
+2. Customizable Presence Rules: Define specific rules based on user roles or attributes for who can see presence information.
+3. Improved User Experience: Enhance collaboration by providing relevant presence information while maintaining security protocols.
+4. Seamless Integration: Easily incorporate presence authorization into existing systems without significant overhead.
+5. Detailed Implementation Guides: Access comprehensive documentation on how to implement presence authorization effectively.
+
+This feature is particularly useful for collaborative applications where knowing the online status of team members is crucial while ensuring privacy and security are maintained.`,
+    icon: Eye,
+    products: [PRODUCT_SHORTNAMES.REALTIME, PRODUCT_SHORTNAMES.AUTHENTICATION],
+    heroImage: 'https://www.youtube-nocookie.com/embed/IXRrU9MpA8Q',
+    docsUrl: 'https://supabase.com/docs/guides/realtime/authorization#presence',
+    slug: 'realtime-presence-authorization',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_BETA,
+      availableOnSelfHosted: true,
+    },
  },
  // Auth
  {
@@ -691,6 +843,10 @@ Supabase's Email Login provides a robust foundation for user authentication, all
    heroImageLight: '/images/features/email-login-light.png',
    docsUrl: 'https://supabase.com/docs/guides/auth/passwords',
    slug: 'email-login',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Social login',
@@ -726,6 +882,10 @@ Supabase's Social Login feature allows you to improve user experience and potent
    heroImageLight: '/images/features/social-login-light.png',
    docsUrl: 'https://supabase.com/docs/guides/auth/social-login',
    slug: 'social-login',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Phone logins',
@@ -760,6 +920,10 @@ Supabase's Phone Login feature enables a seamless authentication experience, par
    heroImageLight: '/images/features/phone-login-light.png',
    docsUrl: 'https://supabase.com/docs/guides/auth/phone-login',
    slug: 'phone-logins',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Passwordless login via Magic Links',
@@ -795,6 +959,10 @@ Supabase's Magic Links feature offers a secure and user-friendly authentication
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/auth/auth-email-passwordless',
    slug: 'passwordless-login-via-magicklink',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Multi-Factor Authentication (MFA)',
@@ -830,6 +998,10 @@ Supabase's MFA feature provides a robust tool for enhancing application security
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/auth/auth-mfa',
    slug: 'multi-factor-authentication',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Authorization via Row Level Security',
@@ -865,6 +1037,10 @@ Supabase's RLS feature provides a powerful tool for implementing sophisticated a
    heroImage: `https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/marketing/website/supabase-rls.mp4`,
    docsUrl: 'https://supabase.com/docs/guides/auth/row-level-security',
    slug: 'row-level-security',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Captcha protection',
@@ -900,6 +1076,10 @@ Supabase's Captcha Protection feature provides a powerful tool for enhancing app
    heroImageLight: '/images/features/auth-captcha-protection-light.png',
    docsUrl: 'https://supabase.com/docs/guides/auth/auth-captcha',
    slug: 'auth-captcha-protection',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Server-side Auth',
@@ -934,6 +1114,10 @@ Supabase's Server-side Auth feature allows developers to create more secure and
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/auth/server-side',
    slug: 'server-side-auth',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
  // Storage
  {
@@ -971,6 +1155,10 @@ Supabase Storage simplifies adding robust file management to your applications,
    heroImageLight: '/images/features/file-storage-light.png',
    docsUrl: 'https://supabase.com/docs/guides/storage',
    slug: 'file-storage',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Content Delivery Network',
@@ -1006,6 +1194,14 @@ Supabase's CDN significantly improves the performance and user experience of you
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/storage/cdn',
    slug: 'cdn',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+      selfHostedTooling: {
+        label: 'Cloudflare',
+        link: 'https://www.cloudflare.com',
+      },
+    },
  },
  {
    title: 'Smart Content Delivery Network',
@@ -1041,6 +1237,14 @@ Supabase's Smart CDN optimizes both performance and content accuracy, providing
    heroImage: 'https://www.youtube-nocookie.com/embed/NpEl20iuOtg',
    docsUrl: 'https://supabase.com/docs/guides/storage/cdn/smart-cdn',
    slug: 'smart-cdn',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+      selfHostedTooling: {
+        label: 'Cloudflare',
+        link: 'https://www.cloudflare.com',
+      },
+    },
  },
  {
    title: 'Image transformations',
@@ -1077,6 +1281,10 @@ Supabase's Image Transformations feature enables you to efficiently manage and s
    heroImage: 'https://www.youtube-nocookie.com/embed/dLqSmxX3r7I',
    docsUrl: 'https://supabase.com/docs/guides/storage/image-transformations',
    slug: 'image-transformations',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Resumable uploads',
@@ -1113,6 +1321,10 @@ Supabase's Resumable Uploads feature significantly improves the reliability and
    heroImage: 'https://www.youtube-nocookie.com/embed/pT2PcZFq_M0',
    docsUrl: 'https://supabase.com/docs/guides/storage/uploads/resumable-uploads',
    slug: 'resumable-uploads',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'S3 compatibility',
@@ -1150,6 +1362,10 @@ Supabase's S3 compatibility allows seamless integration with existing workflows
    heroImageLight: '/images/features/s3-compatibility-light.png',
    docsUrl: 'https://supabase.com/docs/guides/storage/s3/compatibility',
    slug: 's3-compatibility',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_ALPHA,
+      availableOnSelfHosted: true,
+    },
  },
  // Functions
  {
@@ -1189,6 +1405,10 @@ Supabase's Deno Edge Functions enable you to build responsive, globally distribu
    heroImage: 'https://www.youtube-nocookie.com/embed/5OWH9c4u68M',
    docsUrl: 'https://supabase.com/docs/guides/functions',
    slug: 'deno-edge-functions',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Regional invocations',
@@ -1220,6 +1440,10 @@ By leveraging Supabase's Regional Invocations, you can significantly enhance the
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/functions/regional-invocation',
    slug: 'regional-invocations',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'NPM compatibility',
@@ -1251,6 +1475,10 @@ By leveraging NPM Compatibility in Supabase Edge Functions, you can take advanta
    heroImage: 'https://www.youtube-nocookie.com/embed/eCbiywoDORw',
    docsUrl: 'https://supabase.com/blog/edge-functions-node-npm',
    slug: 'npm-compatibility',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
  // Vector
  {
@@ -1283,6 +1511,10 @@ By leveraging Supabase's AI Integrations, you can rapidly develop and deploy sop
    heroImage: 'https://www.youtube-nocookie.com/embed/OgnYxRkxEUw',
    docsUrl: 'https://supabase.com/docs/guides/ai/examples/huggingface-image-captioning',
    slug: 'ai-integrations',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  // Platform
  {
@@ -1316,6 +1548,10 @@ By leveraging the Supabase CLI, you can significantly improve your development w
    docsUrl:
      'https://supabase.com/docs/guides/local-development?queryGroups=package-manager&package-manager=pnpm',
    slug: 'cli',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Management API',
@@ -1348,6 +1584,10 @@ By utilizing the Supabase Management API, you can create more efficient, scalabl
    heroImageLight: '/images/features/management-api-light.png',
    docsUrl: 'https://supabase.com/docs/guides/project-management/api',
    slug: 'management-api',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Role-Based Access Control (RBAC)',
@@ -1380,6 +1620,10 @@ By leveraging Role-Based Access Control, you can create a secure, scalable, and
    docsUrl:
      'https://supabase.com/docs/guides/database/postgres/custom-claims-and-role-based-access-control-rbac',
    slug: 'role-based-access-control',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: false,
+    },
  },
  // Analytics
  {
@@ -1412,6 +1656,10 @@ By leveraging Supabase Reports, you gain a understanding of your project's perfo
    heroImageLight: '/images/features/reports-and-metrics-light.png',
    docsUrl: 'https://supabase.com/blog/supabase-reports-and-metrics',
    slug: 'reports-and-metrics',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'SOC 2 Compliance',
@@ -1449,6 +1697,10 @@ By building on Supabase's SOC 2 compliant platform, you gain a significant advan
    heroImage: '',
    docsUrl: 'https://supabase.com/docs/guides/security/compliance',
    slug: 'soc-2-compliance',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: false,
+    },
  },
  // Studio
  {
@@ -1472,6 +1724,10 @@ This feature is especially beneficial for teams looking to improve their databas
    docsUrl:
      'https://supabase.com/blog/studio-introducing-assistant#introducing-the-supabase-assistant',
    slug: 'ai-query-assistance',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_ALPHA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Logs & Analytics',
@@ -1494,6 +1750,10 @@ This feature is particularly valuable for teams looking to enhance their applica
    heroImageLight: '/images/features/logs-analytics-light.png',
    docsUrl: 'https://supabase.com/docs/guides/monitoring-troubleshooting/logs',
    slug: 'logs-analytics',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Visual Schema Designer',
@@ -1516,6 +1776,10 @@ This feature is particularly valuable for teams engaged in agile development pro
    heroImageLight: '/images/features/visual-schema-designer-light.png',
    docsUrl: 'https://supabase.com/blog/supabase-studio-3-0#schema-visualizer',
    slug: 'visual-schema-designer',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Policy Templates',
@@ -1538,6 +1802,10 @@ This feature is essential for organizations looking to maintain robust security
    heroImageLight: '/images/features/policy-templates-light.png',
    docsUrl: '',
    slug: 'policy-templates',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'SQL Editor',
@@ -1560,6 +1828,10 @@ This feature is particularly valuable for developers looking to streamline their
    heroImageLight: '/images/features/sql-editor-light.png',
    docsUrl: '',
    slug: 'sql-editor',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Security & Performance Advisor',
@@ -1582,6 +1854,10 @@ This feature is essential for organizations aiming to maintain high security sta
    heroImageLight: '/images/features/security-and-performance-advisor-light.png',
    docsUrl: 'https://supabase.com/blog/security-and-performance-advisor',
    slug: 'security-and-performance-advisor',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Postgres Roles',
@@ -1604,6 +1880,10 @@ This feature is particularly valuable for teams looking to implement robust secu
    heroImageLight: '/images/features/postgres-roles-light.png',
    docsUrl: 'https://supabase.com/docs/guides/database/postgres/roles',
    slug: 'postgres-roles',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Foreign Key Selector',
@@ -1626,6 +1906,10 @@ This feature is particularly beneficial for developers working with complex data
      'https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/docs/fk-lookup.mp4',
    docsUrl: 'https://supabase.com/blog/supabase-studio-2.0#foreign-key-selector',
    slug: 'foreign-key-selector',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
  },
  {
    title: 'Log Drains',
@@ -1647,5 +1931,109 @@ This feature is particularly useful for teams seeking to enhance their observabi
    heroImage: 'https://www.youtube-nocookie.com/embed/A4GFmvgxS-E',
    docsUrl: 'https://supabase.com/blog/log-drains',
    slug: 'log-drains',
+    status: {
+      stage: PRODUCT_STAGES.PUBLIC_ALPHA,
+      availableOnSelfHosted: true,
+    },
+  },
+  {
+    title: 'Client Library - JavaScript',
+    subtitle: 'Easily integrate Supabase with your JavaScript applications.',
+    description: `
+The Supabase JavaScript Client Library provides a straightforward way to interact with your Supabase database and services directly from your JavaScript applications. This library simplifies the process of making API calls, managing authentication, and handling real-time updates, making it an essential tool for developers working with Supabase.
+
+Key benefits:
+1. Simplified API Interaction: Easily connect to your Supabase backend with minimal setup.
+2. Built-in Authentication: Manage user authentication seamlessly within your JavaScript applications.
+3. Real-Time Capabilities: Subscribe to changes in your database and receive updates in real-time.
+4. Comprehensive Documentation: Access detailed guides and examples to help you get started quickly.
+5. Community Support: Join a growing community of developers using the JavaScript Client Library for various projects.
+
+This feature is particularly valuable for developers looking to build dynamic web applications that leverage the power of Supabase as a backend service.
+`,
+    icon: JsIcon,
+    products: [ADDITIONAL_PRODUCTS.PLATFORM],
+    heroImage: '',
+    docsUrl: 'https://supabase.com/docs/reference/javascript/start',
+    slug: 'client-library-javascript',
+    status: {
+      stage: PRODUCT_STAGES.GA,
+      availableOnSelfHosted: true,
+    },
+  },
+  {
+    title: 'Client Library - Flutter',
+    subtitle: 'Integrate Supabase into your Flutter applications effortlessly.',
+    description: `
+The Supabase Flutter Client Library allows developers to easily integrate Supabase into their Flutter applications. This library provides a comprehensive set of tools for managing database interactions, user authentication, and real-time data updates, all tailored for the Flutter framework.
+
+Key benefits:
+1. Seamless Integration: Connect your Flutter app to Supabase with minimal configuration.
+2. User Authentication: Manage user sign-ups, logins, and sessions directly within your Flutter application.
+3. Real-Time Updates: Receive live updates from your database, enhancing user experience.
+4. Detailed Documentation: Access extensive resources and examples to facilitate development.
+5. Active Community: Engage with other Flutter developers leveraging Supabase for their projects.
+
+This feature is particularly useful for Flutter developers aiming to create responsive mobile applications backed by a powerful database solution.
+`,
+    icon: FlutterIcon,
+    products: [ADDITIONAL_PRODUCTS.PLATFORM],
+    heroImage: '',
+    docsUrl: 'https://supabase.com/docs/reference/dart/start',
+    slug: 'client-library-flutter',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
+  },
+  {
+    title: 'Client Library - Swift',
+    subtitle: 'Effortlessly connect your Swift applications to Supabase.',
+    description: `
+The Supabase Swift Client Library provides an easy way for developers to integrate their iOS applications with Supabase services. This library simplifies database access, user authentication, and real-time data handling, making it an essential tool for Swift developers.
+
+Key benefits:
+1. Easy Integration: Quickly connect your Swift app to Supabase with straightforward setup instructions.
+2. Authentication Management: Handle user authentication seamlessly within your iOS applications.
+3. Real-Time Data Handling: Subscribe to changes in your database and receive updates instantly.
+4. Comprehensive Guides: Utilize detailed documentation and examples to streamline development.
+5. Supportive Community: Join a community of Swift developers using Supabase for their app development needs.
+
+This feature is particularly valuable for iOS developers looking to leverage the capabilities of Supabase in their mobile applications.
+`,
+    icon: SwiftIcon,
+    products: [ADDITIONAL_PRODUCTS.PLATFORM],
+    heroImage: '',
+    docsUrl: 'https://supabase.com/docs/reference/swift/start',
+    slug: 'client-library-swift',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
+  },
+  {
+    title: 'Client Library - Python',
+    subtitle: 'Integrate Supabase easily into your Python applications.',
+    description: `
+The Supabase Python Client Library enables developers to connect their Python applications with Supabase effortlessly. This library provides tools for interacting with the database, managing user authentication, and handling real-time updates, tailored specifically for Python developers.
+
+Key benefits:
+1. Simple Connection Setup: Easily connect your Python application to Supabase with minimal configuration.
+2. User Authentication Support: Manage user accounts and sessions directly within your Python code.
+3. Real-Time Data Updates: Subscribe to changes in your database and receive live updates as they occur.
+4. In-Depth Documentation: Access comprehensive guides and examples to assist in development.
+5. Engaged Community Support: Connect with other Python developers utilizing Supabase in their projects.
+
+This feature is especially beneficial for Python developers looking to build robust applications powered by a scalable backend service like Supabase.
+`,
+    icon: PythonIcon,
+    products: [ADDITIONAL_PRODUCTS.PLATFORM],
+    heroImage: '',
+    docsUrl: 'https://supabase.com/docs/reference/python/start',
+    slug: 'client-library-python',
+    status: {
+      stage: PRODUCT_STAGES.BETA,
+      availableOnSelfHosted: true,
+    },
  },
 ]
@@ -131,7 +131,7 @@ function FeaturesPage() {
                <h2 className="text-sm text-foreground-lighter">Filter by tags:</h2>
                <div className="flex flex-col gap-2.5">
                  {products
-                    .sort((a, b) => (a > b ? 1 : -1))
+                    .sort((a, b) => (a.toLowerCase() > b.toLowerCase() ? 1 : -1))
                    .map((product) => (
                      <div
                        key={product}
@@ -99,16 +99,29 @@ const FeaturePage: React.FC<FeaturePageProps> = ({ feature, prevFeature, nextFea
                flex flex-col
                gap-4 md:gap-8
                text-foreground-light
-                !py-10
+                !pt-10 !pb-4
              "
            >
              <div className="relative h-full flex flex-col items-start gap-2 w-full max-w-2xl mx-auto">
-                <div className="flex gap-1 flex-wrap mb-2">
+                <div className="flex flex-wrap items-center space-x-1 mb-2">
+                  <Link href="/features" passHref>
+                    <Badge
+                      className="p-0 h-[22px] w-[22px] rounded-full flex items-center justify-center text-foreground-lighter hover:text-foreground hover:border-foreground-lighter"
+                      size="small"
+                    >
+                      <ChevronLeft className="w-3.5 h-3.5" />
+                    </Badge>
+                  </Link>
                  {feature.products.map((product) => (
-                    <Link href={`/features?products=${product}`} passHref>
+                    <Link
+                      key={`product-${product}`}
+                      href={`/features?products=${product}`}
+                      className="inline-flex"
+                      passHref
+                    >
                      <Badge
                        key={product}
-                        className="capitalize hover:border-foreground-lighter"
+                        className="capitalize hover:border-foreground-lighter hover:text-foreground"
                        size="small"
                      >
                        {product}
@@ -186,6 +199,29 @@ const FeaturePage: React.FC<FeaturePageProps> = ({ feature, prevFeature, nextFea
            </SectionContainer>
          </header>
          <SectionContainer className="!pt-0">
+            <div className="prose w-full max-w-3xl mx-auto pb-4 mb-8 border-b flex flex-col md:flex-row gap-4 md:gap-8 flex-wrap justify-center text-sm text-foreground-lighter">
+              <div className="flex gap-2 items-center">
+                <span>Stage:</span>
+                <Badge>{feature.status?.stage}</Badge>
+              </div>
+              <div className="flex gap-2 items-center">
+                <span>Available on self-hosted:</span>
+                {feature.status?.selfHostedTooling ? (
+                  <Badge className="flex gap-1.5">
+                    Requires
+                    <Link
+                      href={feature.status?.selfHostedTooling.link}
+                      target="_blank"
+                      className="translate-y-px hover:cursor-pointer"
+                    >
+                      {feature.status?.selfHostedTooling?.label}
+                    </Link>
+                  </Badge>
+                ) : (
+                  <Badge>{feature.status?.availableOnSelfHosted ? 'Yes' : 'N/A'}</Badge>
+                )}
+              </div>
+            </div>
            <main className="max-w-xl mx-auto flex flex-col items-start gap-8">
              <div className="prose prose-docs">
                <ReactMarkdown>{feature.description}</ReactMarkdown>