feat: update Pricing page

src/components/pages/pricing/features/features.jsx

@@ -16,42 +16,42 @@ const FEATURES = [
   {
     icon: storageIcon,
     title: 'High availability.',
-    description: `Storage uses <a href="${LINKS.docsHighAvailability}">multi-AZ</a> to minimize disruptions without HA standbys.`,
+    description: `Neon’s storage is <a href="${LINKS.docsHighAvailability}">multi-AZ</a> by default, without the need for HA standbys.`,
   },
   {
     icon: replicasIcon,
     title: 'Read replicas.',
-    description: `Offload read-heavy <a href="${LINKS.docs}/introduction/read-replicas">workloads to replicas</a>, avoiding storage costs.`,
+    description: `Neon lets you offload <a href="${LINKS.docs}/introduction/read-replicas">read-heavy queries</a> without added storage costs.`,
   },
   {
     icon: autoscalingIcon,
     title: 'Autoscaling.',
-    description: `Neon automatically <a href="${LINKS.autoscaling}">adjusts compute</a> and storage as needed.`,
+    description: `Neon automatically <a href="${LINKS.autoscaling}">adjusts compute</a> and storage based on demand, including on the Free plan.`,
   },
   {
     icon: monitoringIcon,
     title: 'Monitoring.',
-    description: `Monitor resource usage in <a href="${LINKS.docs}/introduction/monitoring-page">real time</a> with optimization dashboards.`,
+    description: `Built-in dashboards in the console give you <a href="${LINKS.docs}/introduction/monitoring-page">real-time</a> visibility into usage and performance.`,
   },
   {
     icon: connectionsIcon,
     title: 'Connection pooling.',
-    description: `Built on pgBouncer, ready to scale to <a href="${LINKS.connectionPooling}">10,000 connections</a>.`,
+    description: `All Neon databases can use pooled connections built on pgBouncer (up to <a href="${LINKS.connectionPooling}">10,000 connections</a>).`,
   },
   {
     icon: extensionsIcon,
     title: 'Postgres extensions library.',
-    description: `Extend with <a href="${LINKS.pgSearch}">pg_search</a>, PostGIS, TimescaleDB, etc.`,
+    description: `You can add extensions like <a href="${LINKS.docsExtensionsPgVector}">pg_vector</a>, <a href="${LINKS.docsExtensionsPostgisRelatedExtensions}">PostGIS</a>, <a href="${LINKS.docsExtensionsTimescaledb}">TimescaleDB</a>, and many more.`,
   },
   {
     icon: authIcon,
-    title: 'Neon auth.',
-    description: `Simple setup, built right <a href="${LINKS.auth}">into the platform</a> — no added overhead.`,
+    title: 'Auth.',
+    description: `Neon comes with <a href="${LINKS.auth}">built-in authentication</a> based on Better Auth, with a one-click install.`,
   },
   {
     icon: securityIcon,
     title: 'GDPR and ISO compliance.',
-    description: `Visit our <a href="${LINKS.security}">Security page</a> for more information.`,
+    description: `Included across all plans. Learn more on our <a href="${LINKS.security}">Security page</a>.`,
   },
 ];
 
@@ -60,13 +60,13 @@ const Features = () => (
     <Container size="1152" className="px-8">
       <h2
         className={clsx(
-          'text-pretty indent-24 text-5xl leading-dense tracking-tighter text-gray-new-50',
-          'xl:px-8 xl:text-[40px] lg:text-wrap lg:px-5 lg:indent-16 lg:text-[28px] md:indent-0 md:text-[24px] sm:px-0',
+          'text-pretty text-5xl leading-dense tracking-tighter text-gray-new-50',
+          'xl:px-8 xl:text-[40px] lg:text-wrap lg:px-5 lg:text-[28px] md:text-[24px] sm:px-0',
           '[&>strong]:font-normal [&>strong]:text-white'
         )}
       >
-        <strong>Powerful and essential features </strong>
-        that are consistently available in every Neon database, regardless of configuration or plan.
+        <strong>Included with every Neon database, on every plan, by default.</strong> These are
+        core platform capabilities that come out of the box with Neon.
       </h2>
       <ul
         className={clsx(

src/components/pages/pricing/hero/plans/data/plans.js

@@ -3,116 +3,165 @@ import LINKS from 'constants/links';
 export default [
   {
     planId: 'free',
-    type: 'Free Plan',
-    title: '$0',
+    type: 'For basic use',
+    title: 'Free',
     subtitle: 'No card required',
-    price: 0,
-    description: 'For prototypes and side projects',
-    features: [
-      {
-        title: '100 projects',
-        info: '<p>A project is a top-level container<br/> for your database environment.</p>',
-        moreLink: { text: 'Read more', href: '#what-is-a-project' },
-      },
-      {
-        title: '100 CU-hours per project',
-        info: '<p>CU-hour = CU x active hours (compute usage)</p><p>1 CU ≈ 4 GB RAM</p>',
-        moreLink: { text: 'Read more', href: '#compute-usage' },
+    price: {
+      small: 0,
+      medium: 0,
+      large: 0,
+    },
+    features: {
+      database: {
+        title: 'Database',
+        features: [
+          {
+            title: '100 projects',
+            info: '<p>A project is a top-level container<br/> for your database environment.</p>',
+            moreLink: { text: 'Read more', href: '#what-is-a-project' },
+          },
+          {
+            title: '100 CU-hrs per project',
+            info: '<p>CU-hour = CU x active hours</p><p>1 CU ≈ 4 GB RAM</p>',
+            moreLink: { text: 'Read more', href: '#compute-usage' },
+          },
+          {
+            title: '0.5 GB of storage per project',
+          },
+          {
+            title: 'Sizes up to 2 CU (8 GB RAM)',
+          },
+        ],
       },
-      {
-        title: '0.5 GB per project',
+      backend: {
+        title: 'Backend',
+        features: [
+          { title: 'Auth: built on Better Auth' },
+          { title: 'Data API: PostgREST compatible' },
+        ],
       },
-      {
-        title: 'Sizes to 2 CU',
-        subtitle: '(8 GB RAM)',
+      other: {
+        title: 'Features',
+        features: [{ title: 'Branching' }, { title: 'Autoscaling' }, { title: 'Read replicas' }],
       },
-    ],
-    otherFeatures: {
-      title: 'Features',
-      features: [
-        { title: 'Auth', tag: 'new' },
-        { title: 'Autoscaling' },
-        { title: 'Read replicas' },
-        { title: 'Built-in high availability' },
-      ],
     },
     button: {
       url: LINKS.signup,
+      text: 'Try Neon',
       event: 'Hero Free Tier Panel',
     },
   },
   {
     planId: 'launch',
-    type: 'Launch',
-    title: 'Usage-based',
-    subtitle: 'No monthly minimum',
+    type: 'For building products',
+    title: 'Launch',
     highlighted: true,
-    price: 5,
-    priceFrom: true,
-    description: 'For startups and growing teams',
-    features: [
-      {
-        title: '100 projects',
-        info: '<p>A project is a top-level container<br/> for your database environment.</p>',
-        moreLink: { text: 'Read more', href: '#what-is-a-project' },
+    hasDynamicPricing: true,
+    price: {
+      small: 25,
+      medium: 35,
+      large: 45,
+    },
+    features: {
+      database: {
+        title: 'Database',
+        features: [
+          {
+            title: '100 projects',
+            info: '<p>A project is a top-level container<br/> for your database environment.</p>',
+            moreLink: { text: 'Read more', href: '#what-is-a-project' },
+          },
+          {
+            title: '$0.106 per CU-hr',
+            info: '<p>CU-hour = CU x active hours</p><p>1 CU ≈ 4 GB RAM</p>',
+            moreLink: { text: 'Read more', href: '#compute-usage' },
+          },
+          {
+            title: '$0.35 per GB-month',
+          },
+          { title: 'Sizes up to 16 CU (64 GB RAM)' },
+        ],
       },
-      {
-        title: '$0.106 per CU-hour compute',
-        info: '<p>CU-hour = CU x active hours (compute usage)</p><p>1 CU ≈ 4 GB RAM</p>',
-        moreLink: { text: 'Read more', href: '#compute-usage' },
+      backend: {
+        title: 'Backend',
+        features: [
+          { title: 'Auth: 1M MAU', info: '<p>More capacity available via support request</p>' },
+          {
+            title: 'Data API: 1B requests',
+            info: '<p>More capacity available via support request</p>',
+          },
+        ],
       },
-      {
-        title: '$0.35 per GB-month storage',
+      other: {
+        title: 'All features in free, plus...',
+        features: [{ title: '7-day time travel/restores' }, { title: '3-day metrics/logs in UI' }],
       },
-      { title: 'Sizes up to 16 CU', subtitle: '(64 GB RAM)' },
-    ],
-    otherFeatures: {
-      title: 'All features in Free, plus...',
-      features: [{ title: '7-day time travel/PITR' }, { title: '3-day monitoring retention' }],
     },
     button: {
       url: `${LINKS.console}/app/billing#plans`,
+      text: 'Get started',
       theme: 'primary',
       event: 'Hero Launch Panel',
     },
   },
   {
     planId: 'scale',
-    type: 'Scale',
-    title: 'Usage-based',
-    subtitle: 'No monthly minimum',
-    price: 50,
-    priceFrom: true,
-    description: 'For the most demanding workloads',
-    features: [
-      {
-        title: '1,000+ projects',
-        info: '<p>Accounts needing more than 1k projects<br/> can contact support for a limit increase.</p>',
-        moreLink: { text: 'Read more', href: '#what-is-a-project' },
+    type: 'For production workloads',
+    title: 'Scale',
+    hasDynamicPricing: true,
+    price: {
+      small: 50,
+      medium: 60,
+      large: 70,
+    },
+    features: {
+      database: {
+        title: 'Database',
+        features: [
+          {
+            title: '1,000+ projects',
+            info: '<p>A project is a top-level container<br/> for your database environment.</p>',
+            moreLink: { text: 'Read more', href: '#what-is-a-project' },
+          },
+          {
+            title: '$0.222 per CU-hr',
+            info: '<p>CU-hour = CU x active hours</p><p>1 CU ≈ 4 GB RAM</p>',
+            moreLink: { text: 'Read more', href: '#compute-usage' },
+          },
+          {
+            title: '$0.35 per GB-month',
+          },
+          { title: 'Sizes up to 56 CU (224 GB RAM)' },
+        ],
       },
-      {
-        title: '$0.222 per CU-hour compute',
-        info: '<p>CU-hour = CU x active hours (compute usage)</p><p>1 CU ≈ 4 GB RAM</p>',
-        moreLink: { text: 'Read more', href: '#compute-usage' },
+      backend: {
+        title: 'Backend',
+        features: [
+          { title: 'Auth: 1M MAU', info: '<p>More capacity available via support request</p>' },
+          {
+            title: 'Data API: 1B requests',
+            info: '<p>More capacity available via support request</p>',
+          },
+        ],
       },
-      {
-        title: '$0.35 per GB-month storage',
+      other: {
+        title: 'All features in launch, plus...',
+        features: [
+          { title: '30-day time travel/restores' },
+          { title: '14-day metrics/logs in UI' },
+          { title: 'Metrics/logs export (Otel, Datadog)' },
+          { title: 'Private network, IP rules' },
+          {
+            title: 'SLAs, SOC2, HIPAA',
+            info: '<p>HIPAA incurs additional costs.</p>',
+            moreLink: { text: 'Read more', href: '/docs/security/hipaa' },
+          },
+        ],
       },
-      { title: 'Sizes up to 56 CU', subtitle: '(224 GB RAM)' },
-    ],
-    otherFeatures: {
-      title: 'All features in Launch, plus...',
-      features: [
-        { title: '30-day time travel/PITR' },
-        { title: '14-day monitoring retention' },
-        { title: 'Metrics / logs export' },
-        { title: 'Private Network / IP Rules' },
-        { title: '99.95% SLA' },
-        { title: 'SOC 2 Report, HIPAA Available' },
-      ],
     },
     button: {
       url: `${LINKS.console}/app/billing#plans`,
+      text: 'Get started',
       theme: 'primary',
       event: 'Hero Scale Panel',
     },

src/components/pages/pricing/hero/plans/features/features.jsx

@@ -69,9 +69,9 @@ Feature.propTypes = {
 };
 
 const Features = ({ title, features, type, highlighted }) => (
-  <div className="flex flex-col gap-y-3 border-t border-dashed border-gray-new-20 p-5">
+  <div className="flex flex-col gap-y-3.5 px-6 py-4 md:px-5">
     {title && (
-      <p className="text-[15px] font-normal leading-snug tracking-extra-tight text-gray-new-60">
+      <p className="font-mono text-xs font-medium uppercase leading-none tracking-extra-tight text-gray-new-50">
         {title}
       </p>
     )}