89 updated the highlight text to a gradient (#97)

adriandelisle · web-flow · commit 0425cdf7acf6 · 2021-02-19T17:12:53.000-08:00
diff --git a/components/highlighted-text/index.js b/components/highlighted-text/index.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+const HighlightedText = styled.span`
+  background: linear-gradient(234.45deg, #12c6ff 0%, #6184c9 68.23%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: #54ffff;
+`
+
+export default HighlightedText
diff --git a/components/index.js b/components/index.js
@@ -5,6 +5,7 @@ export { default as CompanyLogo } from './company-logo'
 export { default as Footer } from './footer'
 export { default as Form } from './form'
 export { default as Heading } from './heading'
+export { default as HighlightedText } from './highlighted-text'
 export { default as Input } from './input'
 export { default as SiteHeader } from './site-header'
 export { default as Testimonials } from './testimonials'
diff --git a/pages/index.js b/pages/index.js
@@ -5,6 +5,7 @@ import {
   Footer,
   Testimonials,
   Heading,
+  HighlightedText,
   Text,
   SiteHeader,
 } from 'components'
@@ -26,8 +27,7 @@ const Home = () => (
         <div className={styles.heroContent}>
           <Heading className={styles.heroHeading}>
             We are the community for{' '}
-            <span className={styles.highlight}>remote-first</span> Software
-            Engineers
+            <HighlightedText>remote-first</HighlightedText> Software Engineers
           </Heading>
           <Text sectionText className={styles.heroText}>
             Commit is designing the future of work and we're putting Engineers
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -92,9 +92,6 @@ h1.heroHeading {
   margin-top: 200px;
   margin-bottom: 4.5rem;
 }
-h1.heroHeading .highlight {
-  color: #54ffff;
-}
 p.heroText {
   font-family: Montserrat;
   font-size: 1.5rem;
