From 1c82c9653f0fa66d42e50243791e5447b2d14d8a Mon Sep 17 00:00:00 2001
From: Carlos Cruz <me@carcruzcast.com>
Date: Mon, 7 Feb 2022 15:19:48 +0000
Subject: [PATCH 1/3] feat: replace Links to react-router ones

---
 src/pages/HomePage/HomePage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index 3cb60aa4..e49d5256 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -5,7 +5,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import withStyles from '@material-ui/core/styles/withStyles';
 import RootRef from '@material-ui/core/RootRef';
-import Link from '@material-ui/core/Link';
+import Link from '../../components/Link';
 
 import { Splash } from '../../ot-ui-components';
 
@@ -143,7 +143,7 @@ class HomePage extends Component {
                     style={{ textAlign: 'center' }}
                     className={classes.exampleLink}
                   >
-                    <Link href={d.url} underline="none">
+                    <Link to={d.url} underline="none">
                       {d.label}
                     </Link>
                   </Typography>

From 3fc379b39cb00f6686546798b55961bd6907fe38 Mon Sep 17 00:00:00 2001
From: Carlos Cruz <me@carcruzcast.com>
Date: Wed, 9 Feb 2022 10:27:58 +0000
Subject: [PATCH 2/3] refactor: home page intro links

---
 src/pages/HomePage/HomePage.js | 184 +++++++++++++++++++++++++--------
 1 file changed, 139 insertions(+), 45 deletions(-)

diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index e49d5256..8b224552 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -1,23 +1,26 @@
 import React, { Component, Fragment } from 'react';
 import { Helmet } from 'react-helmet';
+import { Grid, Box, Typography, useMediaQuery } from '@material-ui/core';
+import { useTheme, withStyles, makeStyles } from '@material-ui/core/styles';
 
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import withStyles from '@material-ui/core/styles/withStyles';
-import RootRef from '@material-ui/core/RootRef';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCircle,
+  faDownload,
+  faLaptopCode,
+  faQuestionCircle,
+  faFileAlt,
+  faCommentDots,
+} from '@fortawesome/free-solid-svg-icons';
 import Link from '../../components/Link';
-
-import { Splash } from '../../ot-ui-components';
-
-import HomeBox from './HomeBox';
-
 import Search from '../../components/Search';
-import PortalFeaturesIcon from '../../components/PortalFeaturesIcon';
 import ScrollDownButton from '../../components/ScrollDownButton';
 import NavBar from '../../components/NavBar/NavBar';
-
 import Version from '../../components/Version';
 import Footer from '../../components/Footer';
+import { Splash } from '../../ot-ui-components';
+
+import HomeBox from './HomeBox';
 
 import { externalLinks, mainMenuItems } from '../../constants';
 
@@ -36,7 +39,7 @@ const EXAMPLES = [
   },
 ];
 
-const styles = theme => {
+const containerStyles = theme => {
   return {
     highlight: {
       color: theme.palette.primary.main,
@@ -94,9 +97,67 @@ const styles = theme => {
         color: theme.palette.primary.dark,
       },
     },
+    hpSection: {
+      marginBottom: '40px',
+      marginTop: '60px',
+    },
+    linksContainer: {
+      marginTop: '15px',
+      marginBottom: '15px',
+    },
   };
 };
 
+const useHelpBoxStyle = makeStyles(theme => ({
+  baseLink: {
+    whiteSpace: 'pre-wrap',
+  },
+  helpBoxes: {
+    maxWidth: '120px',
+    textAlign: 'center',
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'left',
+    },
+  },
+}));
+
+const HelpBoxPanel = ({ fai, url, label, external }) => {
+  const theme = useTheme();
+  const xsMQ = useMediaQuery(theme.breakpoints.down('xs'));
+  const classes = useHelpBoxStyle();
+  if (xsMQ) {
+    // on xsmall screens
+    return (
+      <Link to={url} external={external} className={classes.baseLink}>
+        <Grid container wrap="nowrap" alignItems="center" spacing={1}>
+          <Grid item>
+            <div className="fa-layers fa-fw fa-3x">
+              <FontAwesomeIcon icon={faCircle} />
+              <FontAwesomeIcon icon={fai} transform="shrink-8" inverse />
+            </div>
+          </Grid>
+          <Grid item>
+            <Typography display="inline" wrap>
+              {label}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Link>
+    );
+  }
+  return (
+    <Box className={classes.helpBoxes}>
+      <Link to={url} external={external} className={classes.baseLink}>
+        <div className="fa-layers fa-fw fa-6x">
+          <FontAwesomeIcon icon={faCircle} />
+          <FontAwesomeIcon icon={fai} transform="shrink-8" inverse />
+        </div>
+        <Typography wrap>{label}</Typography>
+      </Link>
+    </Box>
+  );
+};
+
 class HomePage extends Component {
   constructor(props) {
     super(props);
@@ -116,7 +177,7 @@ class HomePage extends Component {
         <Helmet>
           <title>Open Targets Genetics</title>
         </Helmet>
-        <RootRef rootRef={this.searchSectionRef}>
+        <main ref={this.searchSectionRef}>
           <Grid
             className={classes.searchSection}
             container
@@ -179,37 +240,70 @@ class HomePage extends Component {
               />
             </Grid>
           </Grid>
-        </RootRef>
-        <Grid container justifyContent="center">
-          <Grid className={classes.list} item md={4}>
-            <p className={classes.introTitle}>
-              Welcome to Open Targets Genetics
-            </p>
-            <p className={classes.introText}>
-              Open Targets Genetics is the latest release from Open Targets, an
-              innovative, large-scale, multi-year, public-private partnership
-              that uses human genetics and genomics data for systematic drug
-              target identification and prioritisation.
-            </p>
-            <p className={classes.introText}>
-              The Portal offers three unique features to help you discover
-              associations between genes, variants, and traits:
-            </p>
-            <p className={classes.introText}>
-              + Browse and rank gene and variant associations identified by our
-              Locus-to-Gene (L2G) scoring pipeline
-            </p>
-            <p className={classes.introText}>
-              + Uncover credible sets for variant and trait associations based
-              on our fine mapping analyses pipeline
-            </p>
-            <p className={classes.introText}>
-              + Explore and compare studies from UK Biobank, FinnGen, and GWAS
-              Catalog using our multi-trait comparison tool
-            </p>
-          </Grid>
-          <Grid container item md={4} justifyContent="center">
-            <PortalFeaturesIcon />
+        </main>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          direction="column"
+          className={classes.hpSection}
+        >
+          <Grid item xs={10} md={10}>
+            <Typography variant="h4" component="h1" align="center" paragraph>
+              Get started with the Genetics Portal
+            </Typography>
+
+            <Grid
+              container
+              justifyContent="space-evenly"
+              alignItems="flex-start"
+              spacing={5}
+              className={classes.linksContainer}
+            >
+              <Grid item xs={12} sm={'auto'}>
+                <HelpBoxPanel
+                  fai={faDownload}
+                  url="https://genetics-docs.opentargets.org/data-access/data-download"
+                  label="Download all of our open datasets"
+                  external
+                />
+              </Grid>
+              <Grid item xs={12} sm={'auto'}>
+                <HelpBoxPanel
+                  fai={faLaptopCode}
+                  url="https://genetics-docs.opentargets.org/data-access/graphql-api"
+                  label="Access data with our GraphQL API"
+                  external
+                />
+              </Grid>
+
+              <Grid item xs={12} sm={'auto'}>
+                <HelpBoxPanel
+                  fai={faQuestionCircle}
+                  url="https://genetics-docs.opentargets.org/"
+                  label="Check out our Platform documentation"
+                  external
+                />
+              </Grid>
+
+              <Grid item xs={12} sm={'auto'}>
+                <HelpBoxPanel
+                  fai={faFileAlt}
+                  url="https://genetics-docs.opentargets.org/citation"
+                  label="Read our latest Platform publications"
+                  external
+                />
+              </Grid>
+
+              <Grid item xs={12} sm={'auto'}>
+                <HelpBoxPanel
+                  fai={faCommentDots}
+                  url="https://community.opentargets.org/"
+                  label="Join the Open Targets Community"
+                  external
+                />
+              </Grid>
+            </Grid>
           </Grid>
         </Grid>
         <Footer externalLinks={externalLinks} />
@@ -218,4 +312,4 @@ class HomePage extends Component {
   }
 }
 
-export default withStyles(styles)(HomePage);
+export default withStyles(containerStyles)(HomePage);

From afbb0729a40921ce92e1d7fc837d3e71d84fd74d Mon Sep 17 00:00:00 2001
From: Carlos Cruz <me@carcruzcast.com>
Date: Mon, 14 Feb 2022 17:57:49 +0000
Subject: [PATCH 3/3] feat: add about text

---
 src/pages/HomePage/HomePage.js | 74 +++++++++++++++-------------------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index 8b224552..170015df 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -41,22 +41,11 @@ const EXAMPLES = [
 
 const containerStyles = theme => {
   return {
-    highlight: {
-      color: theme.palette.primary.main,
-      fontWeight: 'bold',
-    },
     searchSection: {
       position: 'relative',
       height: '100vh',
       overflow: 'visible',
     },
-    slogan: {
-      color: theme.palette.grey[700],
-      fontFamily: 'Inter',
-      fontSize: '18px',
-      marginBottom: '15px',
-      textAlign: 'center',
-    },
     examples: {
       marginTop: '12px',
     },
@@ -67,24 +56,6 @@ const containerStyles = theme => {
       position: 'absolute',
       bottom: '10px',
     },
-    introTitle: {
-      color: theme.palette.grey[700],
-      fontFamily: 'Inter',
-      fontSize: '22px',
-      fontWeight: 'bold',
-    },
-    introText: {
-      color: theme.palette.grey[800],
-      fontFamily: 'Inter',
-    },
-    list: {
-      paddingTop: '44px',
-    },
-    listText: {
-      color: theme.palette.grey[800],
-      fontFamily: 'Inter',
-      fontSize: '18px',
-    },
     linkHeader: {
       marginTop: '22px',
     },
@@ -92,19 +63,17 @@ const containerStyles = theme => {
       position: 'absolute',
       bottom: 0,
     },
-    link: {
-      '&:hover': {
-        color: theme.palette.primary.dark,
-      },
-    },
     hpSection: {
       marginBottom: '40px',
-      marginTop: '60px',
+      marginTop: '80px',
     },
     linksContainer: {
       marginTop: '15px',
       marginBottom: '15px',
     },
+    homeSection: {
+      marginBottom: '40px',
+    },
   };
 };
 
@@ -137,9 +106,7 @@ const HelpBoxPanel = ({ fai, url, label, external }) => {
             </div>
           </Grid>
           <Grid item>
-            <Typography display="inline" wrap>
-              {label}
-            </Typography>
+            <Typography display="inline">{label}</Typography>
           </Grid>
         </Grid>
       </Link>
@@ -152,7 +119,7 @@ const HelpBoxPanel = ({ fai, url, label, external }) => {
           <FontAwesomeIcon icon={faCircle} />
           <FontAwesomeIcon icon={fai} transform="shrink-8" inverse />
         </div>
-        <Typography wrap>{label}</Typography>
+        <Typography>{label}</Typography>
       </Link>
     </Box>
   );
@@ -248,9 +215,34 @@ class HomePage extends Component {
           direction="column"
           className={classes.hpSection}
         >
-          <Grid item xs={10} md={10}>
+          <Grid item xs={10} md={8} className={classes.homeSection}>
+            <Typography variant="h4" component="h1" align="center" paragraph>
+              About Open Targets Genetics
+            </Typography>
+            <Typography paragraph>
+              Open Targets Genetics is a comprehensive tool highlighting
+              variant-centric statistical evidence to allow both prioritisation
+              of candidate causal variants at trait-associated loci and
+              identification of potential drug targets.
+            </Typography>
+            <Typography paragraph>
+              It aggregates and integrates genetic associations curated from
+              both literature and newly-derived loci from UK Biobank and FinnGen
+              and also contains functional genomics data (e.g. chromatin
+              conformation, chromatin interactions) and quantitative trait loci
+              (eQTLs and pQTLs). Large-scale pipelines apply statistical
+              fine-mapping across thousands of trait-associated loci to resolve
+              association signals and link each variant to its proximal and
+              distal target gene(s) using a Locus2Gene assessment. Integrated
+              cross-trait colocalisation analyses and linking to detailed
+              pharmaceutical compounds extend the capacity of Open Targets
+              Genetics to explore drug repositioning opportunities and shared
+              genetic architecture.
+            </Typography>
+          </Grid>
+          <Grid item xs={10} md={8} className={classes.homeSection}>
             <Typography variant="h4" component="h1" align="center" paragraph>
-              Get started with the Genetics Portal
+              Get started with Open Targets Genetics
             </Typography>
 
             <Grid