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 { Row, Col } from "antd";
7
import { ReactNode } from "react";
8

9
import A from "components/misc/A";
10
import Code from "./code";
11
import { CSS, Paragraph, Title } from "components/misc";
12
import { MAX_WIDTH_LANDING } from "lib/config";
13

14
export const STYLE_PITCH: CSS = {
15
  padding: "60px 15px",
16
  backgroundColor: "white",
17
} as const;
18

19
interface Props {
20
  col1: ReactNode;
21
  col2: ReactNode;
22
  ext?: string;
23
  style?: CSS;
24
  title?: ReactNode;
25
}
26

27
export default function Pitch(props: Props) {
28
  const { col1, col2, ext, style, title } = props;
29
  return (
30
    <div style={{ ...STYLE_PITCH, ...style }}>
31
      {title ? (
32
        <Title level={2} style={{ textAlign: "center", ...style }}>
33
          {title}
34
        </Title>
35
      ) : undefined}
36
      <Row
37
        gutter={20}
38
        style={{ maxWidth: MAX_WIDTH_LANDING, margin: "0 auto" }}
39
      >
40
        <Col lg={12}>{col1}</Col>
41
        <Col lg={12}>{col2}</Col>
42
      </Row>
43
      {ext && <CallToAction ext={ext} />}
44
    </div>
45
  );
46
}
47

48
const STYLE_CALL: CSS = {
49
  textAlign: "center",
50
  padding: "30px 0",
51
  fontSize: "14pt",
52
} as const;
53

54
function CallToAction(props: { ext: string }) {
55
  const { ext } = props;
56
  return (
57
    <Paragraph style={STYLE_CALL}>
58
      <strong>Ready out of the box</strong>:{" "}
59
      <A href="https://doc.cocalc.com/getting-started.html">
60
        Sign up, create a project
61
      </A>
62
      , create or <A href="https://doc.cocalc.com/howto/upload.html">upload</A>{" "}
63
      your {ext && <Code>*.{ext}</Code>} file, and you're ready to go!
64
    </Paragraph>
65
  );
66
}
67

68