CoCalc -- onprem.tsx

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/next/pages/pricing/onprem.tsx
⁵⁹⁶¹ views
1
/*
2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Alert, Button, Divider, Layout, List } from "antd";
7
import { ReactNode, type JSX } from "react";
8

9
import { Icon, IconName } from "@cocalc/frontend/components/icon";
10
import getSupportUrl from "@cocalc/frontend/support/url";
11
import { money } from "@cocalc/util/licenses/purchase/utils";
12
import { COLORS } from "@cocalc/util/theme";
13

14
import Footer from "components/landing/footer";
15
import Head from "components/landing/head";
16
import Header from "components/landing/header";
17
import PricingItem, { Line } from "components/landing/pricing-item";
18
import { Paragraph, Text, Title } from "components/misc";
19
import A from "components/misc/A";
20

21
import { MAX_WIDTH } from "lib/config";
22
import { Customize } from "lib/customize";
23
import withCustomize from "lib/with-customize";
24

25
const PUBLISH_PRICE = false;
26

27
const CM = <Icon name="check" />;
28

29
const INF = "∞";
30
interface Item {
31
  title: string;
32
  icon: IconName;
33
  individuals: string;
34
  price: number | null;
35
  academic?: ReactNode;
36
  extra?: number;
37
  prod?: string;
38
}
39

40
const data: Item[] = [
41
  {
42
    title: "Small Business",
43
    icon: "experiment",
44
    individuals: "≤ 25",
45
    price: 10000,
46
  },
47
  {
48
    title: "Large Organization",
49
    icon: "home",
50
    individuals: "> 25",
51
    price: null,
52
    prod: "≥1",
53
  },
54
  {
55
    title: "University",
56
    icon: "graduation-cap",
57
    individuals: "≤ 150",
58
    price: 6000,
59
    academic: CM,
60
  },
61
];
62

63
export default function OnPrem({ customize }) {
64
  const { siteName } = customize;
65
  return (
66
    <Customize value={customize}>
67
      <Head title={`${siteName} – On-Premises Offerings`} />
68
      <Layout>
69
        <Header page="pricing" subPage="onprem" />
70
        <Layout.Content
71
          style={{
72
            backgroundColor: "white",
73
          }}
74
        >
75
          <Body />
76
          <Footer />
77
        </Layout.Content>
78
      </Layout>
79
    </Customize>
80
  );
81
}
82

83
function Body() {
84
  const contactURL = getSupportUrl({
85
    subject: "Purchase CoCalc OnPrem",
86
    type: "chat",
87
    url: "",
88
  });
89

90
  function renderContactButton(
91
    text: string | ReactNode = "Contact Us",
92
  ): JSX.Element {
93
    return (
94
      <Button size="large" href={contactURL} type="primary" block>
95
        {text}
96
      </Button>
97
    );
98
  }
99

100
  function renderContact(): JSX.Element {
101
    return (
102
      <Alert
103
        type="info"
104
        banner={true}
105
        showIcon={false}
106
        style={{
107
          textAlign: "center",
108
          padding: "30px",
109
          marginTop: "30px",
110
          marginBottom: "30px",
111
          borderRadius: "10px",
112
        }}
113
        message={
114
          <>
115
            <Paragraph strong style={{ fontSize: "150%" }}>
116
              Ready to bring CoCalc to your organization?{" "}
117
              <A href={contactURL} external>
118
                Let's get in contact!
119
              </A>
120
            </Paragraph>
121
            <Paragraph>
122
              Every enterprise deployment is unique. We'll work with you to
123
              understand your specific requirements, from user scale and
124
              security needs to integration with existing systems.
125
            </Paragraph>
126
            <Paragraph>
127
              <Text strong>We offer flexible licensing options</Text>, including
128
              volume discounts for large organizations, academic discounts for
129
              educational institutions, multi-year agreements, and comprehensive
130
              support packages. Plus, we provide a{" "}
131
              <Text strong>free evaluation period</Text> to ensure CoCalc OnPrem
132
              meets your needs before you commit.
133
            </Paragraph>
134
            {renderContactButton()}
135
          </>
136
        }
137
      />
138
    );
139
  }
140

141
  function renderPriceInfo(): JSX.Element {
142
    if (PUBLISH_PRICE) {
143
      return (
144
        <>
145
          <Title level={3}>Purchasing CoCalc OnPrem</Title>
146
          <List
147
            grid={{ gutter: 30, column: 3, xs: 1, sm: 1 }}
148
            dataSource={data}
149
            renderItem={({
150
              price,
151
              individuals,
152
              icon,
153
              title,
154
              academic,
155
              prod,
156
            }) => {
157
              return (
158
                <PricingItem title={title} icon={icon}>
159
                  <Line amount={individuals} desc={"Monthly Active Users¹"} />
160
                  <Line amount={prod ?? 1} desc="Production Deployment" />
161
                  <Line amount={1} desc="Test Deployment" />
162
                  <Line amount={INF} desc="Number of Projects" />
163
                  <Line amount={INF} desc="Project Collaborators" />
164
                  <Line amount={INF} desc="Cluster Resources²" />
165
                  <Line amount={CM} desc="Help for Initial Setup" />
166
                  <Line amount={CM} desc="Premium Support" />
167
                  <Divider />
168
                  <Line
169
                    amount={CM}
170
                    desc="Collaborative Jupyter, LaTeX, SageMath, R, ..."
171
                  />
172
                  <Line amount={CM} desc="Custom Software Environments" />
173
                  <Line amount={CM} desc="Regular Software Upgrades" />
174
                  <Line amount={CM} desc="Flexible LLM integration³" />
175
                  <Line amount={CM} desc="GPU Support" />
176
                  <Line amount={CM} desc="SAML SSO" />
177

178
                  <br />
179
                  <div
180
                    style={{
181
                      textAlign: "center",
182
                    }}
183
                  >
184
                    {typeof price === "number"
185
                      ? renderContactButton(
186
                          <span
187
                            style={{
188
                              fontWeight: "bold",
189
                              fontSize: "18pt",
190
                              color: COLORS.GRAY_DD,
191
                              padding: "10px",
192
                            }}
193
                          >
194
                            {money(price, true)}
195
                            <span style={{ color: COLORS.GRAY }}>/year</span>
196
                          </span>,
197
                        )
198
                      : renderContactButton()}
199
                  </div>
200
                  {academic ? (
201
                    <>
202
                      <Divider />
203
                      <Line
204
                        amount={academic}
205
                        desc={<Text strong>Academic discount</Text>}
206
                      />
207
                    </>
208
                  ) : undefined}
209
                </PricingItem>
210
              );
211
            }}
212
          />
213
          {renderContact()}
214
          <Paragraph
215
            style={{
216
              marginTop: "100px",
217
              borderTop: `1px solid ${COLORS.GRAY_L}`,
218
              color: COLORS.GRAY,
219
            }}
220
          >
221
            ¹ "Monthly Active Users" is defined as the maximum count of distinct
222
            "Active Users" during any calendar month, who actually use CoCalc.
223
            <br />² There are no limitations on the number of CPU cores, Memory
224
            or Virtual Machines your instance of CoCalc OnPrem can make use of
225
            in your cluster.
226
            <br />³ Configure CoCalc OnPrem to use your own internal LLM server
227
            for increased privacy.
228
          </Paragraph>
229
        </>
230
      );
231
    } else {
232
      return <>{renderContact()}</>;
233
    }
234
  }
235

236
  function cloud(): JSX.Element {
237
    return (
238
      <>
239
        {/* <Title level={2}>
240
          CoCalc OnPrem <Icon name="network-wired" style={{ float: "right" }} />
241
        </Title> */}
242

243
        <Paragraph>
244
          <Text strong>
245
            <A href="https://onprem.cocalc.com/">CoCalc OnPrem</A>{" "}
246
          </Text>{" "}
247
          brings the power of collaborative scientific computing to your
248
          organization's infrastructure. Keep your data secure, maintain full
249
          control over your environment, and provide your teams with the same
250
          cutting-edge tools used by leading research institutions and
251
          enterprises worldwide.
252
        </Paragraph>
253

254
        {/* IMPORTANT: keep the NASA text snippet exactly as it is -- https://github.com/sagemathinc/cocalc/issues/8545  */}
255
        <Paragraph>
256
          Our software is used by NASA's Space Science and Mission Operations
257
          organization.
258
        </Paragraph>
259

260
        <Title level={3}>Why Choose CoCalc OnPrem?</Title>
261
        <Paragraph>Deploy CoCalc on your own systems and gain:</Paragraph>
262

263
        <ul>
264
          <li>
265
            <Text strong>Complete data sovereignty and security</Text> - Your
266
            research data never leaves your infrastructure, ensuring compliance
267
            with regulatory requirements and protecting sensitive intellectual
268
            property.
269
          </li>
270
          <li>
271
            <Text strong>Seamless IT integration</Text> - Works with your
272
            existing authentication systems (SAML SSO), network policies, and
273
            security frameworks.
274
          </li>
275
          <li>
276
            <Text strong>Customizable environments</Text> - Tailor software
277
            stacks and computing resources to match your specific research
278
            workflows and organizational needs.
279
          </li>
280
          <li>
281
            <Text strong>Expert deployment and support</Text> - Our team
282
            provides comprehensive guidance through setup, configuration, and
283
            ongoing management.
284
          </li>
285
          <li>
286
            <Text strong>Scalable performance</Text> - Handle growing teams and
287
            computational demands without compromising on collaboration or
288
            security.
289
          </li>
290
        </ul>
291

292
        <Paragraph>
293
          Experience the cutting-edge capabilities of CoCalc within your own
294
          secure ecosystem, providing your team or institution with a tailored,
295
          high-performance platform for scientific computing, mathematics, and
296
          data science collaboration.
297
        </Paragraph>
298

299
        <Title level={3}>Complete Research Environment</Title>
300
        <ul>
301
          <li>
302
            <Text strong>Accelerated Research</Text> - Reduce time-to-insight
303
            with collaborative tools that streamline scientific workflows
304
          </li>
305
          <li>
306
            <Text strong>Interactive Computing</Text> - Jupyter notebooks for
307
            Python, R, SageMath, and Octave
308
          </li>
309
          <li>
310
            <Text strong>Collaboration</Text> - Real-time editing of LaTeX,
311
            Markdown, and code files, as well as integrated chatrooms and task
312
            lists
313
          </li>
314
          <li>
315
            <Text strong>Linux Terminals</Text> - Use any CLI tool to maximize
316
            flexibility or conduct advanced computing tasks
317
          </li>
318
          <li>
319
            <Text strong>Custom Software</Text> - Flexible environments
320
            supporting your specific research needs
321
          </li>
322
        </ul>
323

324
        <Paragraph>
325
          All tools work seamlessly together, enabling your researchers to focus
326
          on discovery rather than technical setup.
327
        </Paragraph>
328

329
        <Title level={3}>Enterprise Benefits</Title>
330
        <ul>
331
          <li>
332
            <Text strong>Cost Efficiency</Text> - Reduce dependency on external
333
            SaaS/cloud services and unify several tools in one place
334
          </li>
335
          <li>
336
            <Text strong>Regulatory Compliance</Text> - Meet stringent data
337
            residency and security requirements
338
          </li>
339
        </ul>
340

341
        {renderPriceInfo()}
342

343
        <Title level={3}>Technical Requirements</Title>
344
        <Paragraph>
345
          CoCalc OnPrem requires a modern infrastructure setup. Our team will
346
          work with your IT department to ensure smooth deployment:
347
        </Paragraph>
348
        <Paragraph>
349
          <ul>
350
            <li>
351
              <Text strong>Kubernetes</Text> - A modern container management
352
              system for scalable deployment: starting at just a single VM up to
353
              dozens of heterogeneous nodes.
354
            </li>
355
            <li>
356
              <Text strong>Domain and SSL certificate</Text> - Secure access
357
              configuration for your users.
358
            </li>
359
            <li>
360
              <Text strong>Database infrastructure</Text> - PostgreSQL for
361
              application data storage.
362
            </li>
363
            <li>
364
              <Text strong>Shared storage system</Text> - Network file system
365
              for collaborative project data.
366
            </li>
367
            <li>
368
              <Text strong>IT support resources</Text> - Your internal team or
369
              our experts to manage the deployment.
370
            </li>
371
          </ul>
372
        </Paragraph>
373

374
        <Paragraph>
375
          Read more about how to deploy mand manage CoCalc Onprem in its{" "}
376
          <A href="https://onprem.cocalc.com/">online documentation</A>.
377
        </Paragraph>
378
      </>
379
    );
380
  }
381

382
  return (
383
    <div
384
      style={{
385
        maxWidth: MAX_WIDTH,
386
        margin: "15px auto",
387
        padding: "15px",
388
        backgroundColor: "white",
389
      }}
390
    >
391
      <Title level={1} style={{ textAlign: "center" }}>
392
        <Icon name="server" style={{ marginRight: "30px" }} /> CoCalc
393
        On-Premises
394
      </Title>
395

396
      <div>{cloud()}</div>
397
    </div>
398
  );
399
}
400

401
export async function getServerSideProps(context) {
402
  return await withCustomize({ context });
403
}
404

405