new pricing plans table (#6581)

Author: hasparus

.eslintrc.cjs

@@ -231,6 +231,7 @@ module.exports = {
             'nextra-scrollbar',
             'no-scrollbar', // from Nextra
             'hive-slider',
+            'subheader',
           ],
           config: path.join(__dirname, './packages/web/docs/tailwind.config.ts'),
         },

packages/web/docs/package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "0.5.16",
-    "@theguild/tailwind-config": "0.6.2",
+    "@theguild/tailwind-config": "0.6.3",
     "@types/react": "18.3.18",
     "@types/rss": "^0.0.32",
     "next-sitemap": "4.2.3",

packages/web/docs/src/app/gateway/federation-compatible-benchmarks/benchmark-table-body.tsx

@@ -2,7 +2,6 @@
 
 import { use } from 'react';
 import { cn, ComparisonTable as Table } from '@theguild/components';
-import { functionalTones } from './functional-tones';
 import { CheckmarkIcon, XIcon } from './icons';
 
 interface BenchmarkDatum {
@@ -47,48 +46,35 @@ export function BenchmarkTableBody() {
             >
               <div className="flex items-center gap-2.5 whitespace-nowrap">
                 <div
-                  className="size-3 rounded-full"
-                  style={{
-                    background:
-                      compatibility > 99
-                        ? functionalTones.positiveBright
-                        : compatibility > 90
-                          ? functionalTones.warning
-                          : functionalTones.criticalBright,
-                  }}
+                  className={cn(
+                    'size-3 rounded-full',
+                    compatibility > 99
+                      ? 'bg-positive-bright'
+                      : compatibility > 90
+                        ? 'bg-warning-bright'
+                        : 'bg-critical-bright',
+                  )}
                 />
                 {row.name}
               </div>
             </Table.Cell>
             <Table.Cell className="text-sm text-green-800">{compatibility.toFixed(2)}%</Table.Cell>
             <Table.Cell>
-              <span
-                className="inline-flex items-center gap-0.5 text-sm"
-                style={{ color: functionalTones.positiveDark }}
-              >
+              <span className="text-positive-dark inline-flex items-center gap-0.5 text-sm">
                 <CheckmarkIcon className="size-4" /> {row.cases.passed}
               </span>
               {row.cases.failed > 0 && (
-                <span
-                  className="ml-2 inline-flex items-center text-sm"
-                  style={{ color: functionalTones.criticalDark }}
-                >
+                <span className="text-critical-dark ml-2 inline-flex items-center text-sm">
                   <XIcon className="size-4" /> {row.cases.failed}
                 </span>
               )}
             </Table.Cell>
             <Table.Cell>
-              <span
-                className="inline-flex items-center gap-0.5 text-sm"
-                style={{ color: functionalTones.positiveDark }}
-              >
+              <span className="text-positive-dark inline-flex items-center gap-0.5 text-sm">
                 <CheckmarkIcon className="size-4" /> {row.suites.passed}
               </span>
               {row.suites.failed > 0 && (
-                <span
-                  className="ml-2 inline-flex items-center text-sm"
-                  style={{ color: functionalTones.criticalDark }}
-                >
+                <span className="text-critical-dark ml-2 inline-flex items-center text-sm">
                   <XIcon className="size-4" /> {row.suites.failed}
                 </span>
               )}

packages/web/docs/src/app/gateway/federation-compatible-benchmarks/functional-tones.ts

@@ -1,7 +1,6 @@
 import { Suspense } from 'react';
 import { CallToAction, cn, Heading, ComparisonTable as Table } from '@theguild/components';
 import { BenchmarkTableBody } from './benchmark-table-body';
-import { functionalTones } from './functional-tones';
 import { CheckmarkIcon, XIcon } from './icons';
 
 export interface FederationCompatibleBenchmarksSectionProps
@@ -90,26 +89,22 @@ function BenchmarkLegend() {
     <div className="mt-6 flex flex-wrap gap-2 whitespace-nowrap text-xs text-green-800 sm:gap-4">
       <div className="flex gap-2 max-sm:-mx-1 max-sm:w-full sm:contents">
         <div className="flex items-center gap-1">
-          <CheckmarkIcon className="size-4" style={{ color: functionalTones.positiveDark }} />{' '}
-          Passed tests
+          <CheckmarkIcon className="text-positive-dark size-4" /> Passed tests
         </div>
         <div className="flex items-center gap-1">
-          <XIcon className="size-4" style={{ color: functionalTones.criticalDark }} /> Failed tests
+          <XIcon className="text-critical-dark size-4" /> Failed tests
         </div>
       </div>
       <div className="flex items-center gap-2">
-        <div
-          className="size-2 rounded-full"
-          style={{ background: functionalTones.positiveBright }}
-        />
+        <div className="bg-positive-bright size-2 rounded-full" />
         Perfect compatibility
       </div>
       <div className="flex items-center gap-2">
-        <div className="size-2 rounded-full" style={{ background: functionalTones.warning }} />
+        <div className="bg-warning-bright size-2 rounded-full" />
         75% and higher
       </div>
       <div className="flex items-center gap-2">
-        <div className="size-2 rounded-full" style={{ background: functionalTones.criticalDark }} />
+        <div className="bg-critical-dark size-2 rounded-full" />
         Less than 75%
       </div>
     </div>

packages/web/docs/src/app/gateway/federation-compatible-benchmarks/index.tsx

@@ -17,6 +17,7 @@ import { DynamicMetaTags } from './dynamic-meta-tags';
 import graphQLConfLocalImage from '../components/graphql-conf-image.webp';
 import '@theguild/components/style.css';
 import '../selection-styles.css';
+import '../easing-functions.css';
 import '../mermaid.css';
 import { NarrowPages } from './narrow-pages';
 

packages/web/docs/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { FrequentlyAskedQuestions } from '../../components/frequently-asked-ques
 import { LandingPageContainer } from '../../components/landing-page-container';
 import { PlanComparison } from '../../components/plan-comparison';
 import { Pricing } from '../../components/pricing';
+import { PlansTable } from '../../components/pricing/plans-table';
 
 export const metadata = {
   title: 'Hive Platform Pricing',
@@ -26,6 +27,8 @@ export default function PricingPage() {
 
       <PlanComparison className="mx-4 md:mx-6" />
 
+      <PlansTable />
+
       <CompanyTestimonialsSection className="mx-4 mt-6 md:mx-6" />
 
       <FrequentlyAskedQuestions className="mx-4 md:mx-6" />

packages/web/docs/src/app/pricing/page.tsx

@@ -167,7 +167,7 @@ export function CompanyTestimonialsSection({ className }: { className?: string }
                     value={company}
                     tabIndex={-1}
                     className={cn(
-                      'relative flex w-full shrink-0 snap-center flex-col',
+                      'relative flex w-full shrink-0 snap-center flex-col outline-none',
                       'gap-6 md:flex-row lg:gap-12',
                       'lg:data-[state="inactive"]:hidden',
                       caseStudyHref

packages/web/docs/src/components/company-testimonials/index.tsx

@@ -0,0 +1,17 @@
+// these are different than CheckIcon and CloseIcon we have in the design system
+
+export function CheckmarkIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M6.66668 10.1134L12.7947 3.98608L13.7373 4.92875L6.66668 11.9994L2.42401 7.75675L3.36668 6.81408L6.66668 10.1134Z" />
+    </svg>
+  );
+}
+
+export function XIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M7.99999 7.05806L11.3 3.75806L12.2427 4.70072L8.94266 8.00072L12.2427 11.3007L11.2993 12.2434L7.99932 8.94339L4.69999 12.2434L3.75732 11.3001L7.05732 8.00006L3.75732 4.70006L4.69999 3.75872L7.99999 7.05806Z" />
+    </svg>
+  );
+}

packages/web/docs/src/components/icons.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { ReactNode, useEffect, useRef } from 'react';
+
+const BOTTOM_THRESHOLD_ADJUSTMENT = 10;
+
+interface NestedStickyProps {
+  children: ReactNode;
+  offsetTop: number;
+  offsetBottom: number;
+  zIndex?: number;
+}
+
+/**
+ * `position: sticky` doesn't work in nested divs with overflow-x-hidden,
+ * and restructuring the app to put pricing table header on top level would
+ * require tricky state management, so we have this for the cases where we
+ * need position: sticky, but can't use it directly.
+ */
+export function NestedSticky({
+  children,
+  offsetTop,
+  offsetBottom,
+  zIndex = 10,
+}: NestedStickyProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const placeholder = container.firstElementChild as HTMLElement;
+    const sticky = container.lastElementChild as HTMLElement;
+    const parent = container.parentElement;
+
+    if (!placeholder || !sticky || !parent) return;
+
+    let width = 0;
+    let height = 0;
+    let rafId: number | null = null;
+
+    // relative at the top
+    // fixed when we scroll
+    // absolute when we're near the bottom
+    type State = 'fixed' | 'absolute' | 'relative';
+    let state: State = 'relative';
+    let prevState: State = 'relative';
+
+    const measureDimensions = () => {
+      const rect = sticky.getBoundingClientRect();
+      width = rect.width;
+      height = rect.height;
+
+      sticky.style.zIndex = String(zIndex);
+    };
+
+    const updateStyles = () => {
+      placeholder.style.height = state !== 'relative' ? `${height}px` : '0';
+
+      if (state === 'fixed') {
+        sticky.style.position = 'fixed';
+        sticky.style.top = `${offsetTop}px`;
+        sticky.style.width = `${width}px`;
+        sticky.setAttribute('data-sticky', 'fixed');
+      } else if (state === 'absolute') {
+        const containerRect = container.getBoundingClientRect();
+        const stickyRect = sticky.getBoundingClientRect();
+
+        const relativeTop = stickyRect.top - containerRect.top;
+
+        sticky.style.position = 'absolute';
+        sticky.style.top = `${relativeTop}px`;
+        sticky.style.width = `${width}px`;
+        sticky.setAttribute('data-sticky', 'absolute');
+      } else {
+        sticky.style.position = 'relative';
+        sticky.style.top = '';
+        sticky.style.width = '';
+        sticky.removeAttribute('data-sticky');
+      }
+    };
+
+    const handleScroll = () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+
+      rafId = requestAnimationFrame(() => {
+        const containerRect = container.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+
+        const shouldBeFixed = containerRect.top < offsetTop;
+
+        const nearBottom =
+          parentRect.bottom < offsetTop + height + offsetBottom + BOTTOM_THRESHOLD_ADJUSTMENT;
+
+        state = shouldBeFixed && nearBottom ? 'absolute' : shouldBeFixed ? 'fixed' : 'relative';
+
+        if (state !== prevState) {
+          prevState = state;
+          updateStyles();
+        }
+      });
+    };
+
+    const handleResize = () => {
+      const placeholderRect = placeholder.getBoundingClientRect();
+
+      width = placeholderRect.width;
+
+      updateStyles();
+      handleScroll();
+    };
+
+    measureDimensions();
+    handleScroll();
+
+    window.addEventListener('resize', handleResize, { passive: true });
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [offsetTop, offsetBottom, zIndex]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div style={{ width: '100%', height: 0 }} />
+      <div>{children}</div>
+    </div>
+  );
+}