next/onprem: mostly rewrite the cocalc onprem store page

Author: haraldschilly

src/packages/frontend/components/icon.tsx

@@ -159,6 +159,7 @@ import {
   PlusSquareOutlined,
   PoweroffOutlined,
   PrinterOutlined,
+  ProjectOutlined,
   QuestionCircleOutlined,
   RedoOutlined,
   ReloadOutlined,
@@ -383,6 +384,7 @@ const IconSpec: { [name: string]: any } = {
   frown: FrownOutlined,
   fx: FunctionOutlined,
   slides: FundProjectionScreenOutlined,
+  "project-outlined": ProjectOutlined,
   "gateway-outlined": GatewayOutlined,
   gavel: { IconFont: "gavel" },
   gears: ControlOutlined,

src/packages/next/pages/pricing/onprem.tsx

@@ -3,18 +3,53 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Alert, Button, Layout } from "antd";
+import { Alert, Button, Layout, List } from "antd";
+import { useRouter } from "next/router";
 
-import { Icon } from "@cocalc/frontend/components/icon";
+import { Icon, IconName } from "@cocalc/frontend/components/icon";
+import { money } from "@cocalc/util/licenses/purchase/utils";
+import { COLORS } from "@cocalc/util/theme";
 import Footer from "components/landing/footer";
 import Head from "components/landing/head";
 import Header from "components/landing/header";
+import PricingItem, { Line } from "components/landing/pricing-item";
 import { Paragraph, Text, Title } from "components/misc";
 import A from "components/misc/A";
 import { MAX_WIDTH } from "lib/config";
 import { Customize } from "lib/customize";
 import withCustomize from "lib/with-customize";
-import { useRouter } from "next/router";
+
+const PUBLISH_PRICE = true;
+
+interface Item {
+  title: string;
+  icon: IconName;
+  individuals: string;
+  price: number | null;
+  academic?: boolean;
+}
+
+const data: Item[] = [
+  {
+    title: "Small Business",
+    icon: "experiment",
+    individuals: "up to 25",
+    price: 5000,
+  },
+  {
+    title: "Academic Research",
+    icon: "graduation-cap",
+    individuals: "up to 25",
+    price: 3000,
+    academic: true,
+  },
+  {
+    title: "Large institution",
+    icon: "project-outlined",
+    individuals: "more than 25",
+    price: null,
+  },
+];
 
 export default function OnPrem({ customize }) {
   const { siteName } = customize;
@@ -39,68 +74,160 @@ export default function OnPrem({ customize }) {
 function Body() {
   const router = useRouter();
 
-  function cloud(): JSX.Element {
-    const body = encodeURIComponent(
-      "PLEASE EXPLAIN YOUR EXPECTED USE CASE TO HELP US GUIDE YOU:\n\nWE WOULD LOVE TO SETUP A VIDEO CALL WITH YOU! WHEN ARE YOU AVAILABLE?",
+  const body = encodeURIComponent(
+    "PLEASE EXPLAIN YOUR EXPECTED USE CASE TO HELP US GUIDE YOU:\n\nWE WOULD LOVE TO SETUP A VIDEO CALL WITH YOU! WHEN ARE YOU AVAILABLE?",
+  );
+
+  const contactURL = `/support/new?hideExtra=true&type=purchase&subject=CoCalc%20On-prem&body=${body}&title=Purchase%20CoCalc%20On-prem`;
+
+  function renderContact(): JSX.Element {
+    return (
+      <Alert
+        type="info"
+        banner={true}
+        showIcon={false}
+        style={{
+          textAlign: "center",
+          fontSize: "125%",
+          marginTop: "30px",
+          marginBottom: "30px",
+        }}
+        message={
+          <>
+            Please <A href={contactURL}>contact us</A> for questions, licensing
+            details, and purchasing.
+          </>
+        }
+      />
     );
+  }
+
+  function renderPriceInfo(): JSX.Element {
+    if (PUBLISH_PRICE) {
+      return (
+        <>
+          <List
+            grid={{ gutter: 30, column: 3, xs: 1, sm: 1 }}
+            dataSource={data}
+            renderItem={({ price, individuals, icon, title, academic }) => {
+              return (
+                <PricingItem title={title} icon={icon}>
+                  <Line amount={individuals} desc={"Users"} />
+                  {academic ? (
+                    <Line amount={1} desc="Academic discount" />
+                  ) : undefined}
+                  <br />
+                  <br />
+                  <div>
+                    <span
+                      style={{
+                        fontWeight: "bold",
+                        fontSize: "18pt",
+                        color: COLORS.GRAY_DD,
+                      }}
+                    >
+                      {typeof price === "number" ? (
+                        <>
+                          {money(price, true)}
+                          <span style={{ color: COLORS.GRAY_L }}>/year</span>
+                        </>
+                      ) : (
+                        <Button onClick={() => router.push(contactURL)}>
+                          Contact us
+                        </Button>
+                      )}
+                    </span>
+                  </div>
+                </PricingItem>
+              );
+            }}
+          />
+          <Paragraph>
+            Discounts for: academic institutions, multi-year committments,
+            first-year discounts, ...
+          </Paragraph>
+          {renderContact()}
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Paragraph>
+            CoCalc OnPrem is a scalable solution and the license price depends
+            on the use case, expected number of users, level of support, and
+            amount of customization and training involved.
+          </Paragraph>
+          {renderContact()}
+        </>
+      );
+    }
+  }
 
+  function cloud(): JSX.Element {
     return (
       <>
         <Title level={2}>
           CoCalc OnPrem <Icon name="network-wired" style={{ float: "right" }} />
         </Title>
+
         <Paragraph>
           <Text strong>
-            <A href="https://onprem.cocalc.com/">CoCalc OnPrem</A>
+            <A href="https://onprem.cocalc.com/">CoCalc OnPrem</A>{" "}
           </Text>{" "}
-          is an on-prem version of CoCalc that runs on a full-fledged{" "}
-          <A href={"https://kubernetes.io"}>Kubernetes Cluster</A>. The
-          underlying services and their architecture are the same, as the ones
-          that power the main service at cocalc.com. This means you get the same
-          overall performance, scalability and reliability as the{" "}
-          <A href="https://cocalc.com">main cocalc.com website</A>.
-        </Paragraph>
-        <Paragraph>
-          <Text strong>Features</Text>
+          is a <Text strong>self-hosted version of CoCalc</Text> designed to run
+          on your own infrastructure. Built on the same robust architecture that
+          powers the main CoCalc platform, OnPrem delivers exceptional
+          performance, scalability, and reliability. This enterprise-grade
+          solution offers:
           <ul>
+            <li>Complete control over your data and computing environment;</li>
             <li>
-              Jupyter Notebooks, a recent version of Sage, Python 3, R, Octave
-              and LaTeX. Editing code and text-files, Linux terminal, compiling
-              code, and virtual X11 desktop are included as well. Beyond the
-              standard set of included software, it's also possible to define
-              and build customized software environments.
+              Enhanced privacy and security for sensitive research and
+              educational content;
             </li>
             <li>
-              Support for <Text strong>single sign-on</Text>, in particular,
-              includes SAML.
+              Seamless integration with your existing IT infrastructure – for
+              example SAML based SSO authentication;
             </li>
+            <li>Customizable features to meet specific institutional needs;</li>
             <li>
-              The networking is defined by standard{" "}
-              <A href={"https://kubernetes.github.io/ingress-nginx/"}>
-                NGINX ingress rules
-              </A>
-              . It's possible to run within a VPN as well.
+              The full suite of collaborative tools available on cocalc.com:{" "}
+              <Text strong>
+                Jupyter Notebooks, Python, SageMath, R, Octave and LaTeX
+              </Text>
+              . Editing code- and text-files, Linux terminal, compiling code,
+              and a virtual X11 desktop are included as well. Beyond the
+              standard set of included software, it's also possible to define{" "}
+              <Text strong>customized software environments</Text>.
             </li>
             <li>
-              You can <Text strong>deploy</Text> this solution on your own
-              bare-metal cluster or managed kubernetes clusters like{" "}
-              <A href={"https://aws.amazon.com/eks/"}>Amazon's EKS</A> or{" "}
-              <A href={"https://cloud.google.com/kubernetes-engine"}>
-                Google's GKE
-              </A>
-              . Other options should work as well.
+              We'll guide you through the setup process and give you enough
+              information to be able to manage the service, react to issues,
+              plan resource requirements, and know how to scale the various
+              services to your expected usage.
             </li>
           </ul>
+          Experience the cutting-edge capabilities of CoCalc within your own
+          secure ecosystem, providing your team or institution with a tailored,
+          high-performance platform for scientific computing, mathematics, and
+          data science collaboration.
         </Paragraph>
+
         <Paragraph>
           <Text strong>Prerequisites</Text>
           <ul>
             <li>
-              A <Text strong>Kubernetes cluster</Text> and some experience
-              managing it. We'll guide you through the setup and give you enough
-              information to be able to manage the service, react to issues,
-              plan resource requirements, and know how to scale the various
-              services to your expected usage.
+              A{" "}
+              <Text strong>
+                <A href={"https://kubernetes.io"}>Kubernetes Cluster</A>
+              </Text>{" "}
+              and some experience managing it. OnPrem should run on your own
+              bare-metal cluster or a managed kubernetes clusters like{" "}
+              <A href={"https://aws.amazon.com/eks/"}>Amazon's EKS</A> or{" "}
+              <A href={"https://cloud.google.com/kubernetes-engine"}>
+                Google's GKE
+              </A>
+              .
             </li>
             <li>
               Some experience working with{" "}
@@ -114,7 +241,7 @@ function Body() {
               <A href={"https://letsencrypt.org/"}>letsencrypt</A>).
             </li>
             <li>
-              A standard{" "}
+              A common{" "}
               <A href={"https://www.postgresql.org/"}>
                 <Text strong>PostgreSQL</Text>
               </A>{" "}
@@ -140,21 +267,7 @@ function Body() {
           <A href="https://onprem.cocalc.com/">CoCalc OnPrem documentation</A>.
         </Paragraph>
         <Title level={3}>Purchasing CoCalc OnPrem</Title>
-        <Paragraph>
-          CoCalc OnPrem is a scalable solution and the license price depends on
-          the use case, expected number of users, level of support, and amount
-          of customization and training involved.
-          <Button
-            type="link"
-            onClick={() =>
-              router.push(
-                `/support/new?hideExtra=true&type=purchase&subject=CoCalc%20OnPrem%20Quote&body=${body}&title=Purchase%20CoCalc-OnPrem`,
-              )
-            }
-          >
-            Contact us for a quote.
-          </Button>
-        </Paragraph>
+        {renderPriceInfo()}
       </>
     );
   }
@@ -173,36 +286,7 @@ function Body() {
         Premises
       </Title>
 
-      <Paragraph>
-        CoCalc's on-premises offering allow you to run CoCalc on your own
-        machine or cluster in order to keep your data on-site and use compute
-        resources that you already have.
-      </Paragraph>
-      <div>
-        <Alert
-          type="info"
-          banner={true}
-          showIcon={false}
-          style={{
-            textAlign: "center",
-            fontSize: "125%",
-            marginTop: "30px",
-            marginBottom: "30px",
-          }}
-          message={
-            <>
-              Please{" "}
-              <A
-                href={`/support/new?hideExtra=true&type=purchase&subject=CoCalc%20On-prem&body=&title=Purchase%20CoCalc%20On-prem`}
-              >
-                contact us
-              </A>{" "}
-              for questions, licensing details, and purchasing.
-            </>
-          }
-        />
-        {cloud()}
-      </div>
+      <div>{cloud()}</div>
     </div>
   );
 }