docs: updates and rewrites

src/components/Domains/CountriesTable.tsx

@@ -0,0 +1,49 @@
+import TableCell from '@components/Pricing/Table/TableCell';
+import { Fragment } from 'react';
+import clsx from 'clsx';
+import { Headers, OFAC_COUNTRIES } from './constants';
+
+const CountriesTable: React.FC = () => {
+  return (
+    <table
+      className="hidden w-full border-collapse lg:table"
+      cellSpacing={0}
+      cellPadding={0}
+    >
+      <thead>
+        <tr>
+          {Headers.map((header) => (
+            <th>
+              <div
+                className={`flex h-full w-full flex-col items-start justify-center gap-16 px-12 py-4  lg:max-w-[345px]`}
+              >
+                {header}
+              </div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody className="rounded-b-12">
+        {OFAC_COUNTRIES.map(({ country, countryCode }) => (
+          <Fragment key={countryCode}>
+            <tr>
+              <td>
+                <TableCell className={`justify-start whitespace-pre-wrap`}>
+                  {country}
+                </TableCell>
+              </td>
+
+              <td>
+                <TableCell className={`justify-start whitespace-pre-wrap `}>
+                  {countryCode}
+                </TableCell>
+              </td>
+            </tr>
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default CountriesTable;

src/components/Domains/constants.ts

@@ -0,0 +1,54 @@
+import type { Countries, CountryHeaders } from './types';
+
+export const Headers: CountryHeaders = ['Country', 'Country Code'];
+
+export const OFAC_COUNTRIES: Countries = [
+  {
+    country: 'Zimbabwe',
+    countryCode: 'ZW',
+  },
+  {
+    country: 'Iran',
+    countryCode: 'IR',
+  },
+  {
+    country: 'Myanmar',
+    countryCode: 'MM',
+  },
+  {
+    country: 'Russia',
+    countryCode: 'RU',
+  },
+  {
+    country: 'Sudan',
+    countryCode: 'SD',
+  },
+  {
+    country: 'Iraq',
+    countryCode: 'IQ',
+  },
+  {
+    country: 'Ivory Coast',
+    countryCode: 'CI',
+  },
+  {
+    country: 'North Korea',
+    countryCode: 'KP',
+  },
+  {
+    country: 'Syria',
+    countryCode: 'SY',
+  },
+  {
+    country: 'Cuba',
+    countryCode: 'CU',
+  },
+  {
+    country: 'Belarus',
+    countryCode: 'BY',
+  },
+  {
+    country: 'Liberia',
+    countryCode: 'LR',
+  },
+];

src/components/Domains/types.ts

@@ -0,0 +1,6 @@
+export type Countries = {
+  country: string;
+  countryCode: string;
+}[];
+
+export type CountryHeaders = string[];

src/components/FrameworkComparisonTable/FrameworkComparisonTable.tsx

@@ -0,0 +1,84 @@
+import TableCell from '@components/Pricing/Table/TableCell';
+import { features, frameworks } from './constants';
+import type { FeatureSupport } from './types';
+
+const FrameworkComparisonTable: React.FC = () => {
+  const renderFeatureIcon = (
+    supported: FeatureSupport,
+    featureName: string,
+  ) => {
+    if (supported === true) {
+      return '✅';
+    } else if (supported === false) {
+      return '❌';
+    } else {
+      return '―';
+    }
+  };
+  return (
+    <div className="container mx-auto px-4 py-10">
+      {/* Legend */}
+      <div className="mb-6 flex items-center justify-end space-x-10">
+        <div className="flex items-center">
+          {'✅'}
+          <span className="ml-4 text-[14px]">Supported</span>
+        </div>
+        <div className="flex items-center">
+          {'❌'}
+          <span className="ml-4 text-[14px]">Not Supported</span>
+        </div>
+        <div className="flex items-center">
+          {'―'}
+          <span className="ml-4 text-[14px] ">Not Applicable</span>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="rounded-lg w-full border-collapse overflow-hidden shadow-sm">
+          <thead>
+            <tr className="bg-gray-50">
+              <th className="px-4 py-3 text-left text-[14px] font-medium lg:text-[17px]">
+                Framework
+              </th>
+              {features.map((feature) => (
+                <th
+                  key={feature.key}
+                  className="px-4 py-3 text-center text-[14px] font-medium lg:text-[17px]"
+                >
+                  {feature.name}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {frameworks.map((framework) => (
+              <tr key={framework.name}>
+                <td>
+                  <TableCell
+                    className={`whitespace-pre-wrap text-[14px] lg:text-[17px]`}
+                  >
+                    {framework.name}
+                  </TableCell>
+                </td>
+                {features.map((feature) => (
+                  <td>
+                    <TableCell
+                      className={`whitespace-pre-wrap text-[14px] lg:text-[17px]`}
+                    >
+                      {renderFeatureIcon(
+                        framework[feature.key as keyof FeatureSupport],
+                        feature.key,
+                      )}
+                    </TableCell>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default FrameworkComparisonTable;

src/components/FrameworkComparisonTable/constants.ts

@@ -0,0 +1,121 @@
+import type { Feature, Framework } from './types';
+
+export const frameworks: Framework[] = [
+  {
+    name: 'Next.js',
+    ssg: true,
+    ssr: false,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'SvelteKit',
+    ssg: true,
+    ssr: true,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Astro',
+    ssg: true,
+    ssr: true,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Create React App',
+    ssg: true,
+    ssr: false,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Vue',
+    ssg: true,
+    ssr: false,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Gatsby',
+    ssg: true,
+    ssr: false,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Nuxt',
+    ssg: true,
+    ssr: true,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Vite',
+    ssg: true,
+    ssr: false,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Jekyll',
+    ssg: true,
+    ssr: false,
+    apiRoutes: null,
+    isr: null,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Hugo',
+    ssg: true,
+    ssr: false,
+    apiRoutes: null,
+    isr: null,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Gridsome',
+    ssg: true,
+    ssr: false,
+    apiRoutes: false,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+  {
+    name: 'Svelte + Sapper',
+    ssg: true,
+    ssr: true,
+    apiRoutes: true,
+    isr: false,
+    fleekFunctions: true,
+    previewDeployments: true,
+  },
+];
+
+export const features: Feature[] = [
+  { key: 'ssg', name: 'SSG' },
+  { key: 'ssr', name: 'SSR' },
+  { key: 'apiRoutes', name: 'API routes' },
+  { key: 'isr', name: 'ISR' },
+  { key: 'fleekFunctions', name: 'Fleek Functions' },
+  { key: 'previewDeployments', name: 'Preview deployments' },
+];

src/components/FrameworkComparisonTable/types.ts

@@ -0,0 +1,16 @@
+export type FeatureSupport = boolean | null;
+
+export interface Framework {
+  name: string;
+  ssg: FeatureSupport;
+  ssr: FeatureSupport;
+  apiRoutes: FeatureSupport;
+  isr: FeatureSupport;
+  fleekFunctions: FeatureSupport;
+  previewDeployments: FeatureSupport;
+}
+
+export interface Feature {
+  key: keyof Omit<Framework, 'name'>;
+  name: string;
+}

src/components/Permissions/PermissionsTable.tsx

@@ -1,6 +1,4 @@
 import TableCell from '@components/Pricing/Table/TableCell';
-import TableHeader from '@components/Pricing/Table/TableHeader';
-import TableSubheader from '@components/Pricing/Table/TableSubheader';
 import { Fragment } from 'react';
 import clsx from 'clsx';
 import { PERMISSIONS_ROLES, PERMISSIONS_SECTIONS } from './constants';
@@ -18,12 +16,12 @@ const PermissionsTable: React.FC = () => {
       <thead>
         <tr>
           <th className="w-1/4">
-            <div className=" flex h-full w-full flex-col gap-16  rounded-tl-12  border-1 border-b-0 border-ui-mid-grey  px-20 py-20 lg:max-w-[345px]"></div>
+            <div className=" flex h-full w-full flex-col gap-16  rounded-tl-12 px-20 py-20 lg:max-w-[345px]"></div>
           </th>
           {Object.values(PERMISSIONS_ROLES).map(({ header }) => (
             <th>
               <div
-                className={`flex h-full w-full flex-col items-center justify-between gap-16 ${header === 'Read Only' ? 'rounded-tr-12' : ''} border-1 border-b-0  border-ui-mid-grey  px-20 py-20 lg:max-w-[345px]`}
+                className={`flex h-full w-full flex-col items-center justify-between gap-16 ${header === 'Read Only' ? 'rounded-tr-12' : ''}  px-20 py-20 lg:max-w-[345px]`}
               >
                 {header}
               </div>
@@ -39,7 +37,7 @@ const PermissionsTable: React.FC = () => {
                 <td colSpan={5}>
                   <div
                     className={clsx(
-                      'flex h-52 w-full items-center justify-between border-x-1 border-y-1 border-ui-mid-grey bg-gray-dark-1 p-12',
+                      'flex h-52 w-full items-center justify-between  bg-gray-dark-1 p-12',
                     )}
                   >
                     <div className="flex w-full items-center">

src/components/Pricing/Table/TableCell.tsx

@@ -11,7 +11,7 @@ const TableCell = ({ children, className }: TableCellProps) => (
   <div
     className={clsx(
       className,
-      'flex min-h-52 border-collapse items-center border border-ui-mid-grey bg-gray-dark-1 p-12 ',
+      'flex min-h-52 border-collapse items-center bg-gray-dark-1 p-12',
     )}
   >
     <Text style="m">{children}</Text>

src/components/Sidebar.tsx

@@ -105,6 +105,7 @@ const SidebarMenu: React.FC<Props> = ({ data, pathname, indexNameDocs }) => {
 
           if (item.category !== ROOT_FALLBACK_CATEGORY) {
             isOpen = isMd ? item.category === activeCategory : true;
+
             return (
               <li key={`${idx}-${item.slug}`}>
                 <details