feat: update homepage to fit new design

newrelic · Jul 28, 2020 · 0d09907 · 0d09907
1 parent 2bdf7ef
commit 0d09907
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 45 deletions.
diff --git a/src/components/HomePageHighlights.js b/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 />;

diff --git a/src/components/HomePageHighlights.module.scss b/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 {

diff --git a/src/components/HomePageInternalProjects.module.scss b/src/components/HomePageInternalProjects.module.scss
@@ -1,3 +1,4 @@
+
 .featured-internal-projects {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

diff --git a/src/components/ProjectModule.module.scss b/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 {

diff --git a/src/components/SimpleProjectModule.module.scss b/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);

diff --git a/src/pages/home-page.module.scss b/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 {