Merge pull request #106 from seknox/update-landing-page

website updates

website/docusaurus.config.js

@@ -67,7 +67,8 @@ module.exports = {
           ],
         },
         // { to: 'features', label: 'Features', position: 'left' },
-        // { to: 'security', label: 'Security', position: 'left' },
+        { to: 'security', label: 'Security', position: 'right' },
+        // { to: 'pricing', label: 'Pricing', position: 'right' },
         {
           to: 'docs/',
           activeBasePath: 'docs',
@@ -87,6 +88,7 @@ module.exports = {
           className: 'header-github-link',
           position: 'right',
           'aria-label': 'GitHub repository',
+          // label: 'Github',
         },
         {
           href: 'https://www.trasa.io/docs/install/installation/',

website/src/components/landing/oss-enterprise/index.js

@@ -2,8 +2,8 @@ import { Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 // import DashImage from '../../static/img/trasa-bluebg.svg';
-import ThemeBase from '../../muiTheme';
 import HubspotForm from 'react-hubspot-form';
+import ThemeBase from '../../muiTheme';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -31,10 +31,10 @@ export default function Features() {
             Open source and Enterprise
           </Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={7}>
           <Typography variant="body1" component="p">
-            TRASA is opensource project with Mozilla Public License (MPLv2). <br />
-            For Enterprise deployments and support, ping us using form below.
+            TRASA is fully free and open source project distributed under Mozilla Public License
+            (MPLv2). For enterprise deployments and support, send us your interest using form ahead.
           </Typography>
         </Grid>
         <Grid item xs={12}>

website/src/components/landing/primary.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import React from 'react';
 // import DashImage from '../../static/img/trasa-bluebg.svg';
 import ThemeBase from '../muiTheme';
+import GreenCheck from '../../../static/img/icons/green-check.png';
 
 const useStyles = makeStyles((theme) => ({
   background: {
@@ -42,10 +43,20 @@ const useStyles = makeStyles((theme) => ({
       // boxShadow: '0 0 10px #030417',
     },
   },
+  check: {
+    padding: 12,
+  },
+  customGrid: {
+    margin: 0,
+    padding: 0,
+    textAlign: 'center',
+    marginLeft: '10%',
+  },
 }));
 
 export default function MainCta() {
   const imgUrl = useBaseUrl('dash/access-stats.png');
+  // const imgUrl = useBaseUrl('arch/zero-trust-service-access.svg');
   const classes = useStyles();
   return (
     <ThemeBase>
@@ -66,11 +77,61 @@ export default function MainCta() {
               secure remote access to Web, SSH, RDP and Database services
             </Typography> */}
 
-            <Typography variant="subtitle1" style={{ textAlign: 'center' }}>
-              Identity aware access proxy, privileged access management, two-factor authentication,
-              device trust, and policies that enable secure remote access to Web, SSH, RDP, and
-              Database services.
-            </Typography>
+            <Grid container className={classes.customGrid} spacing={1}>
+              <Grid item xs={1}>
+                <img className={classes.check} src={GreenCheck} width={20} />{' '}
+              </Grid>
+              <Grid item xs={11}>
+                <Typography variant="subtitle2" style={{ textAlign: 'justify' }}>
+                  Identity Aware Access Proxy
+                </Typography>
+              </Grid>
+
+              <Grid item xs={1}>
+                <img className={classes.check} src={GreenCheck} width={20} />{' '}
+              </Grid>
+              <Grid item xs={11}>
+                <Typography variant="subtitle2" style={{ textAlign: 'justify' }}>
+                  Privileged Access Management
+                </Typography>
+              </Grid>
+
+              <Grid item xs={1}>
+                <img className={classes.check} src={GreenCheck} width={20} />{' '}
+              </Grid>
+              <Grid item xs={11}>
+                <Typography variant="subtitle2" style={{ textAlign: 'justify' }}>
+                  Two-Factor Authentication
+                </Typography>
+              </Grid>
+
+              <Grid item xs={1}>
+                <img className={classes.check} src={GreenCheck} width={20} />{' '}
+              </Grid>
+              <Grid item xs={11}>
+                <Typography variant="subtitle2" style={{ textAlign: 'justify' }}>
+                  Device Hygiene and Context Aware Policies
+                </Typography>
+              </Grid>
+
+              <Grid item xs={1}>
+                <img className={classes.check} src={GreenCheck} width={20} />{' '}
+              </Grid>
+              <Grid item xs={11}>
+                <Typography variant="subtitle2" style={{ textAlign: 'justify' }}>
+                  Web, SSH, RDP, and Database services.
+                </Typography>
+              </Grid>
+
+              {/* <Grid item xs={1}>
+                <img className={classes.check} src={GreenCheck} width={20} />{' '}
+              </Grid>
+              <Grid item xs={11}>
+                <Typography variant="subtitle2" style={{ textAlign: 'justify' }}>
+                  Free and open source
+                </Typography>
+              </Grid> */}
+            </Grid>
 
             <Grid item xs={12}>
               <Grid container spacing={0} direction="row" alignItems="center" justify="center">

website/src/components/landing/secondary.js

@@ -3,9 +3,6 @@ import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import ThemeBase from '../muiTheme';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 
 const useStyles = makeStyles(() => ({
   ctaPad: {
@@ -35,9 +32,9 @@ export default function Enterprise() {
               applications and <br /> services, access by internal team or managed service provider;
             </Typography>
             <Typography variant="subtitle1" style={{ textAlign: 'center' }}>
-              <b>TRASA</b> provides modern security features and enables best practice security{' '}
-              <br /> to protect Web, SSH, RDP and Database services from unauthorized or malicious
-              access.
+              <b>TRASA</b> is a free and open source project that provides modern security features
+              and enables best practice security to protect Web, SSH, RDP, and Database services
+              from unauthorized or malicious access.
             </Typography>
           </div>
         </Grid>

website/src/components/landing/showcase/geo-spanned/index.js

@@ -0,0 +1,76 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Paper, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+// import DashImage from '../../static/img/trasa-bluebg.svg';
+import ThemeBase from '../../../muiTheme';
+
+const useStyles = makeStyles((theme) => ({
+  background: {
+    // background: '#f5f6ff',
+  },
+  paper: {
+    background: '#fafafa',
+  },
+  ctaPad: {
+    marginTop: 50,
+  },
+  ctaTxt: {
+    fontSize: '24px',
+    // color: 'white',
+    fontFamily: 'Open Sans, Rajdhani',
+    // paddingLeft: '40%',
+    padding: theme.spacing(2),
+    // background: 'linear-gradient(to left, #1a2980, #26d0ce)',
+  },
+  image: {
+    boxShadow: '0 0 20px 0 rgba(0,0,0,0.12)',
+  },
+  paper: {
+    backgroundColor: 'transparent',
+    // padding: theme.spacing(2),
+
+    borderColor: '#FFFFFF',
+    //   boxShadow: '0 3px 5px 2px white',
+    color: 'white',
+    textAlign: 'center',
+  },
+  featuresList: {
+    paddingTop: 50,
+    color: 'black',
+    fontSize: '18px',
+    fontFamily: 'Open Sans, Rajdhani',
+  },
+}));
+
+export default function Features() {
+  const imgUrl = useBaseUrl('arch/geo-spanned.svg');
+  const classes = useStyles();
+  return (
+    <ThemeBase>
+      <Grid container spacing={6}>
+        <Grid item xs={12} sm={12} md={6}>
+          <Paper className={classes.paper} elevation={0}>
+            <Typography variant="h2"> Geo spanned access point.</Typography>
+            <br />
+            <Typography variant="body1">
+              Distributed teams and distributed edge computing is the new norm for modern
+              tech-driven teams. TRASA can be deployed as Geo spanned access points, protecting
+              internal infrastructure access with the highest availability. Configure from a single
+              dashboard, and policy will be synced automatically to every access point.
+            </Typography>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={12} sm={12} md={6} className={classes.image}>
+          <Paper className={classes.paper} elevation={0}>
+            <div className={classes.featuresList}>
+              <img src={imgUrl} alt="Geo spanned TRASA" />
+            </div>
+          </Paper>
+        </Grid>
+      </Grid>
+    </ThemeBase>
+  );
+}

website/src/components/landing/showcase/index.js

@@ -3,8 +3,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 // import DashImage from '../../static/img/trasa-bluebg.svg';
 import ThemeBase from '../../muiTheme';
+import RemoteAccess from './secure-remote-access';
 import Integrations from './integrations';
 import UACL from './unified-access-control';
+import GeoSpanned from './geo-spanned';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -27,15 +29,27 @@ export default function Features() {
         className={classes.root}
       >
         <Grid item xs={12} sm={12} md={12}>
-          <UACL />
+          <RemoteAccess />
+          <br /> <br />
+          <br /> <br />
+        </Grid>
+        <Grid item xs={12} sm={12} md={12}>
+          <GeoSpanned />
           <br /> <br />
           <br /> <br />
         </Grid>
+
         <Grid item xs={12} sm={12} md={12}>
           <Integrations />
           <br /> <br />
           <br /> <br />
         </Grid>
+
+        <Grid item xs={12} sm={12} md={12}>
+          <UACL />
+          <br /> <br />
+          <br /> <br />
+        </Grid>
       </Grid>
     </ThemeBase>
   );