feat: update homepage to fit new design

Author: danielgolden

src/components/HomePageHighlights.js

@@ -8,12 +8,14 @@ const HomePageHighlights = ({ data }) => {
   const projects = data;
   return (
     <div className={styles.featuredExternalProjects}>
-      <h4 className={styles.featuredExternalProjectsTitle}>
-        Projects that we support
-      </h4>
-      <p className={styles.featuredExternalProjectsDescription}>
-        New Relic contributes resources to the development of these projects.
-      </p>
+      <div className={styles.featuredExternalProjectsHeader}>
+        <h4 className={styles.featuredExternalProjectsTitle}>
+          Projects that we support
+        </h4>
+        <p className={styles.featuredExternalProjectsDescription}>
+          New Relic contributes resources to the development of these projects.
+        </p>
+      </div>
       <div className={styles.externalProjectsList}>
         {projects.map(project => {
           return <ProjectModule data={project} key={project.title} row />;

src/components/HomePageHighlights.module.scss

@@ -1,52 +1,33 @@
 .featured-external-projects {
-  margin: 135px 0 160px;
-
-  &:before {
-    position: absolute;
-    left: 0;
-    content: "";
-    height: 360px;
-    background-color: var(--color-neutrals-100);
-    width: 100%;
-    transform: skewY(-2deg) translateY(-55px);
-    z-index:-1;
-  }
+  margin: 45px 0 160px;
+}
 
-  &:after {
-    background-image: linear-gradient(0deg, var(--color-neutrals-100) 70%, rgba(255,255,255, 0));
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    transform: skewY(-2deg) translateY(-250px);
-    display: block;
-    height: 200px;
-  }
+.featured-external-projects-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  border-bottom: 1px dotted var(--color-neutrals-300);
+  margin-bottom: 30px;
 }
 
 .featured-external-projects-title {
+  margin-top: 0;
+  margin-bottom: 9px;
+  line-height: 40px;
   position: relative;
-  z-index:100;
-  font-size: 24px;
+  font-size: 30px;
+  color: var(--color-neutrals-900);
   font-family: var(--secondary-font-family);
-  text-align: center;
-  line-height: 25px;
-  margin-bottom: 6px;
+  text-align: left;
   font-weight: 400;
 }
 
 .featured-external-projects-description {
-  position: relative;
-  z-index:100;
-  margin: 0 0 30px 0;
+  margin-top: 0;
+  margin-bottom: 10px;
+  text-align: center;
   font-size: 16px;
-  line-height: 19px;
   color: var(--color-neutrals-600);
-  text-align: center;
-
-  a {
-    display: inline-block;
-  }
 }
 
 .external-projects-list {

src/components/HomePageInternalProjects.module.scss

@@ -1,3 +1,4 @@
+
 .featured-internal-projects {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

src/components/ProjectModule.module.scss

@@ -8,9 +8,10 @@
   text-align: center;
   background-color: var(--color-background);
   position: relative;
-  border-radius: 4px;
   z-index: 100;
-  box-shadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687), 0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336), 0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03), 0px 22.3363px 17.869px rgba(0, 85, 90, 0.0357664), 0px 41.7776px 33.4221px rgba(0, 85, 90, 0.0431313), 0px 100px 80px rgba(0, 85, 90, 0.06);
+  border: 1px solid var(--color-neutrals-300);
+  box-shadow: 0px 0.249053px 0.553451px rgba(0, 0, 0, 0.00562291), 0px 0.598509px 1.33002px rgba(0, 0, 0, 0.00807786), 0px 1.12694px 2.50431px rgba(0, 0, 0, 0.01), 0px 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221), 0px 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771), 0px 9px 20px rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
   transition: all .13s var(--ease-out-quad);
 
   &:last-child {

src/components/SimpleProjectModule.module.scss

@@ -4,8 +4,8 @@
   padding: 16px 20px;
   box-sizing: border-box;
   background: var(--color-background);
-  border: 1px solid var(--color-neutrals-300);
   box-sizing: border-box;
+  border: 1px solid var(--color-neutrals-300);
   box-shadow: 0px 0.249053px 0.553451px rgba(0, 0, 0, 0.00562291), 0px 0.598509px 1.33002px rgba(0, 0, 0, 0.00807786), 0px 1.12694px 2.50431px rgba(0, 0, 0, 0.01), 0px 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221), 0px 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771), 0px 9px 20px rgba(0, 0, 0, 0.02);
   border-radius: 4px;
   transition: all .1s var(--ease-out-quad);

src/pages/home-page.module.scss

@@ -343,6 +343,17 @@ img.play-button {
 
 .featured-internal-projects-container {
   margin-bottom: 40px;
+
+  &:before {
+    position: absolute;
+    left: 0;
+    content: "";
+    height: 500px;
+    background-color: var(--color-neutrals-100);
+    width: 100%;
+    transform: skewY(-2deg) translateY(-80px);
+    z-index:-1;
+  }
 }
 
 .responsive-video-container {