Feat add apprentice qualities

components/apprentice-qualities/apprentice-qualities.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import styles from './apprentice-qualities.module.scss';
+
+const ApprenticeQualities = () => (
+  <section className={styles['apprentice-qualities']}>
+    <div className={styles['apprentice-qualities__main']}>
+      <img
+        src="/apprentice-qualities.svg"
+        alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
+        className={styles['apprentice-qualities__image']}
+      />
+      <article className={styles['apprentice-qualities__article']}>
+        <h2 className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
+          What we look for
+        </h2>
+        <p className={
+          styles['apprentice-qualities__article-subheading']
+        }
+        >
+          Qualities of Successful Apprentices
+        </p>
+        <div className={styles['apprentice-qualities__article-text']}>
+          <p>
+            We build responsive, standards-compliant, content-focused,
+            well-crafted, accessible, valuable, beautiful web sites and apps,
+            and we&apos;re looking for some web geeks that want to do the same.
+          </p>
+          <p>
+            Passion, character, and initiative are a requirement.
+            A long resumé is not—as long as you care about the right things,
+            we can help build your skillset.
+            This is true for those we hire, and it is equally true for our apprentices.
+            Through your apprenticeship, we hope to help develop you into the sort of individual
+            we’d want to hire. And we may do just that.
+          </p>
+          <p>
+            We’re looking primarily for those interested in an apprenticeship
+            in web development—frontend, backend, or anything code related.
+            What we’re looking for most, however, are individuals who are
+            excited to make their mark on the web industry. In your application,
+            provide anything and everything you can that will convince us you are that geek.
+          </p>
+        </div>
+      </article>
+    </div>
+  </section>
+);
+
+export default ApprenticeQualities;

components/apprentice-qualities/apprentice-qualities.module.scss

@@ -0,0 +1,112 @@
+$c-highlight-green: #01F5AC;
+
+.primary {
+  color: $c-highlight-green;
+}
+
+
+.apprentice-qualities {
+  width: 100%;
+  min-height: 50rem;
+
+  &__main {
+    margin: auto;
+  }
+
+  &__image {
+    display: none;
+  }
+
+  &__article {
+    &-text {
+      font-style: normal;
+      font-weight: normal;
+      font-size: 1rem;
+      line-height: 1.375rem;
+      padding: 0 2rem;
+    }
+
+    &-heading {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 0.938rem;
+      line-height: 2.063rem;
+      letter-spacing: 0.1rem;
+      padding: 0 2rem;
+      text-transform: uppercase;
+      margin-bottom: 0;
+    }
+
+    &-subheading {
+      margin: 0;
+      padding: 0.5rem 2rem 0;
+      letter-spacing: -0.02rem;
+      font-size: 1.563rem;
+      line-height: 1.75rem;
+    }
+  }
+}
+
+@media screen and (min-width: 700px) {
+  .apprentice-qualities {
+    position: relative;
+    padding-top: 3rem;
+    background:
+      linear-gradient(180deg, #0A0A0A, 33%, transparent),
+      url('../../public/apprentice-qualities-background.svg'),
+      url('../../public/apprentice-qualities-background.svg'),
+      url('../../public/apprentice-qualities-background.svg');
+    background-repeat: repeat-x;
+    background-size: 20rem;
+    background-position:
+      -8rem 0rem,
+      2rem 17.4rem,
+      -8rem 34.7rem;
+
+    &__main {
+      display: flex;
+      position: relative;
+    }
+
+    &__image {
+      display: block;
+      position: absolute;
+      left: 1.2rem;
+      top: 14.4rem;
+      pointer-events: none;
+      width: 21.5rem;
+    }
+
+    &__article {
+      position: absolute;
+      left: 23rem;
+      top: 8rem;
+    }
+  }
+}
+
+@media screen and (min-width: 1150px) {
+  .apprentice-qualities {
+    background-position:
+      calc(50% - 13.6rem) 0rem,
+      calc(50% - 3.6rem) 17.3rem,
+      calc(50% - 13.6rem) 34.7rem;
+
+    &__main {
+      flex-direction: row;
+      justify-content: center;
+      padding-top: 5rem;
+    }
+
+    &__image {
+      position: revert;
+      padding-top: 9.3rem;
+    }
+
+    &__article {
+      position: revert;
+      max-width: 90ch;
+      padding-top: 3rem;
+    }
+  }
+}

pages/components.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from '../components/link/link';
 import Apprentice from '../components/apprentice/apprentice';
 import SocialLinks from '../components/social-links/social-links';
+import ApprenticeQualities from '../components/apprentice-qualities/apprentice-qualities';
 
 const Components = () => {
   const links = [
@@ -21,6 +22,8 @@ const Components = () => {
       <div style={{ width: '320px' }}>
         <Apprentice name="Rise Erpelding" image="/apprentices/image.png" links={links} />
       </div>
+      <h2>Apprentice Qualities</h2>
+      <ApprenticeQualities />
     </main>
   );
 };