improve product and customers pages

package.json

@@ -46,6 +46,7 @@
     "@types/webpack": "^4.4.22",
     "babel-loader": "^8.0.0",
     "babel-plugin-import": "^1.11.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "copy-webpack-plugin": "^4.3.1",
     "css-loader": "0.28.7",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
@@ -76,6 +77,8 @@
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
+    "@primer/octicons-react": "^9.1.1",
+    "@types/react-router-hash-link": "^1.2.1",
     "antd": "^3.1.3",
     "axios": "^0.17.1",
     "classnames": "^2.2.5",
@@ -88,7 +91,6 @@
     "prop-types": "^15.6.2",
     "query-string": "^5.0.1",
     "react": "^16.2.0",
-    "react-component-octicons": "^1.4.1",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
     "react-highlight-words": "^0.11.0",
@@ -100,6 +102,7 @@
     "react-responsive-redux": "^0.4.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-router-hash-link": "^1.2.1",
     "react-router-redux": "^4.0.8",
     "react-syntax-highlighter": "^8.0.1",
     "redux": "^3.7.2",

src/components/blocks/Customers.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { Row, Col } from "antd";
+import classNames from "classnames";
+import googleLogo from "assets/images/customers/google_logo.png";
+import facebookLogo from "assets/images/customers/facebook_logo.png";
+import redHatLogo from "assets/images/customers/red_hat_logo.png";
+import yahooLogo from "assets/images/customers/yahoo_logo.png";
+import ibmLogo from "assets/images/customers/ibm_logo.png";
+import xiaomiLogo from "assets/images/customers/xiaomi_logo.png";
+import samsungLogo from "assets/images/customers/samsung_logo.png";
+import nytLogo from "assets/images/customers/nyt_logo.png";
+import istioLogo from "assets/images/customers/istio_logo.png";
+import zalandoLogo from "assets/images/customers/zalando_logo.png";
+import awsLogo from "assets/images/customers/aws_logo.png";
+import netflixLogo from "assets/images/customers/netflix_logo.png";
+
+const usesCI = "usesCI";
+const usesLint = "usesLint";
+
+const customers = [
+  ["Google", googleLogo, "google/keytransparency", usesCI],
+  ["Facebook", facebookLogo, "facebookincubator/magma", usesLint],
+  ["AWS", awsLogo, "aws/aws-xray-sdk-go", usesLint],
+  ["Netflix", netflixLogo, "Netflix/titus-executor", usesLint, "img-responsive-80"],
+  ["Yahoo!", yahooLogo, "yahoo/yfuzz", usesCI, "img-responsive-80"],
+  ["IBM", ibmLogo, "ibm-developer/ibm-cloud-env-golang", usesLint, "img-responsive-80"],
+
+  // second row
+  ["Xiaomi", xiaomiLogo, "XiaoMi/soar", usesLint, "img-responsive-80"],
+  ["Samsung", samsungLogo, "samsung-cnct/cluster-api-provider-ssh", usesLint, "img-responsive-100"],
+  ["Istio", istioLogo, "istio/istio", usesCI, "img-responsive-80"],
+  ["Zalando", zalandoLogo, "zalando/postgres-operator", usesCI, "img-responsive-80"],
+  ["Red Hat", redHatLogo, "openshift/odo", usesCI],
+  ["The New York Times", nytLogo, "NYTimes/encoding-wrapper", usesLint, "img-responsive-100"],
+];
+
+const mostStarredRepos = [
+  "avelino/awesome-go",
+  "syncthing/syncthing",
+  "istio/istio",
+  "ncw/rclone",
+  "jesseduffield/lazygit",
+  "tsenart/vegeta",
+  "dgraph-io/dgraph",
+  "future-architect/vuls",
+  "dgraph-io/badger",
+  "loadimpact/k6",
+  "developer-learning/reading-go",
+  "go-swagger/go-swagger",
+  "gaia-pipeline/gaia",
+  "montferret/ferret",
+  "appleboy/gorush",
+  "smallnest/rpcx",
+  "michaelmure/git-bug",
+  "tendermint/tendermint",
+  "ovh/cds",
+];
+
+const renderCustomer = (cust: any) => (
+  <Col xs={4}>
+    <div className="flex-row-for-vertical-align">
+      <a target="_blank" href={cust[3] === usesCI ? `https://golangci.com/r/github.com/${cust[2]}` : `https://github.com/${cust[2]}`}>
+        <img
+          className={classNames(cust[4] ? cust[4] : "img-responsive-50", "flex-vertical-align")}
+          alt={`${cust[0]} Logo`}
+          src={cust[1]}
+        />
+      </a>
+    </div>
+  </Col>
+);
+
+const getRandomConnectedRepos = (n: number) => {
+  const shuffled = mostStarredRepos.sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, n).map((repo) => (
+    <a target="_blank" href={`https://golangci.com/r/github.com/${repo}`}><b>{repo}</b></a>
+  )).reduce((result, item) => <>{result}, {item}</>);
+};
+
+const Customers: React.StatelessComponent<any> = (props) => (
+    <section className="home-section home-section-padded home-section-gradient">
+      <div className="home-section-content">
+        <Row type="flex" justify="center">
+          <p id="customers" className="home-section-header">Thousands of companies trust GolangCI</p>
+        </Row>
+        <Row type="flex" align="middle">
+          {customers.slice(0, customers.length / 2).map(renderCustomer)}
+        </Row>
+        <Row type="flex" align="middle" className="next-row-in-section">
+          {customers.slice(customers.length / 2).map(renderCustomer)}
+        </Row>
+        <Row type="flex" justify="center" className="next-row-in-section">
+          <div className="full-screen-image">
+            <p className="home-section-text">Some random connected to GolangCI repos: {getRandomConnectedRepos(3)}</p>
+          </div>
+        </Row>
+      </div>
+    </section>
+);
+
+export default Customers;

src/components/blocks/PricingTable.tsx

@@ -20,6 +20,7 @@ export function buildPricingPlan(plan: Plan, buttonText: string, onButtonClick:
                 "Unlimited public repositories",
                 "GitHub integration",
                 "Automatic comments on pull request",
+                "4 vCPU and 16 GB containers for analysis",
             ]}
             buttonText={buttonText}
             onButtonClick={onButtonClick}
@@ -35,6 +36,7 @@ export function buildPricingPlan(plan: Plan, buttonText: string, onButtonClick:
                     features={[
                         "Unlimited private repositories",
                         "Higher analysis priority",
+                        "4 vCPU and 30 GB containers for analysis",
                         "Priority support",
                     ]}
                     buttonText={buttonText}

src/components/blocks/ProductIntro.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Row, Button, Icon } from "antd";
+import prCommentDemoImage from "assets/images/home/pr-comment-demo.png";
+import githubStatusImage from "assets/images/home/github-status.png";
+import { Link } from "react-router-dom";
+
+interface IOwnProps {
+  showLinkOnMoreDetails: boolean;
+}
+
+interface IProps extends IOwnProps {}
+
+class ProductIntro extends React.Component<IProps> {
+  public render() {
+    return (
+      <section className="home-section home-section-padded home-section-gradient">
+          <div className="home-section-content">
+            <Row type="flex" justify="center">
+              <p id="integrated-with-github" className="home-section-header">Integrated with GitHub</p>
+            </Row>
+            <Row type="flex" justify="center">
+              <div className="full-screen-image">
+                <p className="home-section-text">GolangCI works with GitHub pull requests. It comments lines in a changed code with found issues.</p>
+
+                <img className="img-responsive" alt="Demo of integration of GolangCI with GitHub Pull Requests" src={prCommentDemoImage} />
+              </div>
+            </Row>
+            <Row type="flex" justify="center">
+              <div className="home-github-status-demo">
+                <p className="home-section-text">GolangCI sets a GitHub pull request status: success or failure (issues were found).</p>
+                <img className="img-responsive" alt="Demo of integration of GolangCI with GitHub Commit Statuses" src={githubStatusImage} />
+              </div>
+            </Row>
+
+            {this.props.showLinkOnMoreDetails && (
+              <Row type="flex" justify="center" className="next-row-in-section">
+                <Link to="/product">
+                  <Button type="primary" size="large">
+                    <Icon type="deployment-unit" />
+                    See all features
+                  </Button>
+                </Link>
+              </Row>
+            )}
+          </div>
+        </section>
+    );
+  }
+}
+
+export default ProductIntro;