diff --git a/__tests__/__snapshots__/snapshot.js.snap b/__tests__/__snapshots__/snapshot.js.snap index 313afef..b6d6a9c 100644 --- a/__tests__/__snapshots__/snapshot.js.snap +++ b/__tests__/__snapshots__/snapshot.js.snap @@ -10,10 +10,12 @@ exports[`renders homepage unchanged 1`] = `
-
+
Sparkbox ( +
+
+ +
+
+

Become an Apprentice

+

+ We're honored that you're here! + We trust that you've read all about our apprenticeships, but if not, + {' '} + + you'll want to take a few minutes to do that. + +

+
+
+
+ + + + +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +); + +export default ApplyHero; diff --git a/components/apply-hero/apply-hero.module.scss b/components/apply-hero/apply-hero.module.scss new file mode 100644 index 0000000..48334a8 --- /dev/null +++ b/components/apply-hero/apply-hero.module.scss @@ -0,0 +1,212 @@ +@use '../../styles/colors' as *; +@use '../../styles/spacing' as *; +@use '../../styles/mixins' as *; + +.apply-hero { + width: $component-width; + display: flex; + justify-content: center; + align-items: center; + + &__container { + @include horizontal-section-spacing(); + @include vertical-section-spacing(); + max-width: $max-content-width; + display: flex; + flex-direction: column; + } + + &__header-content { + display: flex; + flex-direction: column; + } + + &__text { + display: flex; + flex-direction: column; + margin-top: 1rem; + + h1 { + font-size: 2.65rem; + } + + h1, + p { + padding-bottom: 1rem; + font-weight: 100; + margin: 0; + } + } + + &__art-container { + display: none; + order: 1; + } + + &__grid { + display: none; + } + + @supports (display: grid) { + &__art-container { + display: block; + padding-bottom: 1rem; + } + + &__grid { // This grid is for the hero images and svgs + display: grid; + grid-template-columns: repeat(63, 1fr); + grid-template-rows: repeat(18, 1fr); + + img { + max-width: 100%; + + // Images below are placed in the grid in order from top to bottom and left to right + &:nth-child(1) { + grid-area: 3 / 3 / span 5 / span 23; + background-color: $c-highlight-blue; + } + + &:nth-child(2) { + grid-area: 5 / 49 / span 4 / span 13; + margin-top: 6px; + background-color: $c-highlight-green; + } + + &:nth-child(3) { + grid-area: 8 / 26 / span 5 / span 23; + background-color: $c-highlight-pink; + } + + &:nth-child(4) { + grid-area: 13 / 3 / span 5 / span 23; + background-color: $c-highlight-green; + } + } + + // Triangle: Top Left + &--shape1 { + grid-area: 2 / 23 / span 2 / span 9; + + path { + stroke: $c-highlight-pink; + } + } + + // Circle: Top Right + &--shape2 { + grid-area: 3 / 39 / span 5 / span 14; + + circle { + stroke: $c-highlight-blue; + stroke-width: 0.75; + } + } + + // Triangle: Middle Left + &--shape3 { + grid-area: 7 / 8 / span 5 / span 20; + + path { + stroke: $c-highlight-green; + stroke-width: 0.5; + } + } + + // Circle: Middle Right + &--shape4 { + grid-area: 11 / 48 / span 2 / span 5; + margin-top: -1rem; + + circle { + stroke: $c-highlight-green; + stroke-width: 1.5; + } + } + + // Triangle: Bottom + &--shape5 { + grid-area: 13 / 25 / span 3 / span 7; + margin-top: -1rem; + + path { + stroke: $c-highlight-blue; + stroke-width: 0.75; + } + } + + // Circle: Bottom + &--shape6 { + grid-area: 17 / 13 / span 4 / span 9; + + circle { + stroke: $c-highlight-pink; + stroke-width: 0.75; + } + } + } + } + + @media (min-width: 43rem) { + &__text { + order: 1; + width: 90%; + margin-top: -3.5rem; + + h1 { + width: 60%; + font-size: 3.4rem; + } + + p { + width: 80%; + font-size: 1.25rem; + line-height: 1.8; + } + } + + &__art-container { + order: unset; + width: 100%; + display: flex; + justify-content: flex-end; + } + + &__grid { + width: 70%; + } + } + + @media (min-width: 70.25rem) { + box-sizing: border-box; + + &__header-content { + flex-direction: row; + } + + &__text { + width: 100%; + order: 0; + margin-top: 2rem; + + h1 { + font-size: 4.5rem; + width: 100%; + } + + p { + font-size: 1.2rem; + width: 95%; + } + } + + &__art-container { + justify-content: flex-start; + margin-top: -7rem; + } + + &__grid { + width: 100%; + } + } +} diff --git a/components/hero/hero.js b/components/hero/hero.js index 54a9629..96488ea 100644 --- a/components/hero/hero.js +++ b/components/hero/hero.js @@ -1,20 +1,11 @@ import React from 'react'; +import Logo from '../logo/logo'; import styles from './hero.module.scss'; const Hero = () => (
- +

Apprenticeships at Sparkbox

diff --git a/components/hero/hero.module.scss b/components/hero/hero.module.scss index c4db10c..bbc33a5 100644 --- a/components/hero/hero.module.scss +++ b/components/hero/hero.module.scss @@ -8,16 +8,6 @@ justify-content: center; align-items: center; - &__header-label { - @include visually-hidden(); - } - - &__sparkbox-logo { - &--full { - display: none; - } - } - &__container { @include horizontal-section-spacing(); @include vertical-section-spacing(); @@ -167,17 +157,6 @@ @media (min-width: 43rem) { - &__sparkbox-logo { - &--half { - display: none; - } - - &--full { - display: block; - margin-bottom: -10rem; - } - } - &__text { order: 1; width: 90%; @@ -209,12 +188,6 @@ @media (min-width: 70.25rem) { box-sizing: border-box; - &__sparkbox-logo { - &--full { - margin-bottom: 0; - } - } - &__header-content { flex-direction: row; } diff --git a/components/learn-more/learn-more.js b/components/learn-more/learn-more.js new file mode 100644 index 0000000..922ed34 --- /dev/null +++ b/components/learn-more/learn-more.js @@ -0,0 +1,69 @@ +import React from 'react'; +import styles from './learn-more.module.scss'; + +const LearnMore = () => ( +
+
+
+

+ Requirements +

+

+ Full-Stack Developer Apprentice +

+
+

+ Passion, character, and initiative are a requirement, + and we're looking for those who have at least a beginning knowledge + of web development fundamentals who are interested in learning + both frontend and backend development and + who are excited to make their mark on the web industry. +

+

+ In 2023, we plan to offer just one Full-Stack Developer Apprenticeship, + which will run July through December. + Late applications will not be considered. +

+
+

+ Frontend Design Apprentice +

+
+

+ Passion, character, and initiative are a requirement, + and we're looking for those who have have design chops, + at least beginning knowledge of web development fundamentals, + and a desire to write beautiful, clean, accessible code. + At Sparkbox, Frontend Designers are the bridge between design and development, + practicing in both disciplines. +

+

+ In 2023, we plan to offer one Frontend Design Apprenticeship, + which will run January through June. + Late applications will not be considered. +

+
+

+ UI/UX Design Apprentice +

+
+

+ Passion, character, and initiative are a requirement, + and we're looking for those who have design chops + and an interest in user experience research, testing, and best practice on the web. + This apprenticeship teaches web UI/UX principles, practices, and tools, + but it does not teach coding. + It's more about usability tests and Figma than HTML and CSS. +

+

+ In 2023, we plan to offer one UI/UX Design Apprenticeship + which will run January through June. + Late applications will not be considered. +

+
+
+
+
+); + +export default LearnMore; diff --git a/components/learn-more/learn-more.module.scss b/components/learn-more/learn-more.module.scss new file mode 100644 index 0000000..9902d2d --- /dev/null +++ b/components/learn-more/learn-more.module.scss @@ -0,0 +1,87 @@ +@use '../../styles/colors' as *; +@use '../../styles/spacing' as *; +@use '../../styles/mixins' as *; + +.primary { + color: $c-highlight-green; +} + +.learn-more { + @include vertical-section-spacing(); + width: $component-width; + + &__main { + @include horizontal-section-spacing(); + box-sizing: border-box; + justify-content: right; + max-width: $max-content-width + ($xlarge-screen-padding * 2); + margin: auto; + } + + &__article { + &-text { + font-style: normal; + font-weight: normal; + font-size: 1rem; + line-height: 1.375rem; + } + + &-heading { + font-style: normal; + font-weight: 500; + font-size: 0.938rem; + line-height: 2.063rem; + letter-spacing: 0.1rem; + text-transform: uppercase; + margin-bottom: 0; + } + + &-subheading { + margin: 0; + letter-spacing: -0.02rem; + font-size: 1.563rem; + line-height: 1.75rem; + } + } +} + +@media (min-width: 48rem) { + .learn-more { + min-height: 50rem; + position: relative; + padding-top: 3rem; + + &__main { + display: flex; + position: relative; + } + + &__article { + display: flex; + flex-direction: column; + position: absolute; + left: 25rem; + top: 8rem; + padding-top: 3rem; + padding-right: 3.75rem; + } + } +} + +@media (min-width: 62rem) { + .learn-more { + &__main { + flex-direction: row; + justify-content: center; + padding-top: 5rem; + } + + &__article { + position: revert; + padding-right: 0; + width: 70ch; + max-width: 90ch; + margin-left: 40%; + } + } +} diff --git a/components/logo/logo.js b/components/logo/logo.js new file mode 100644 index 0000000..72dd493 --- /dev/null +++ b/components/logo/logo.js @@ -0,0 +1,18 @@ +import React from 'react'; +import styles from './logo.module.scss'; + +const Logo = () => ( + +); + +export default Logo; diff --git a/components/logo/logo.module.scss b/components/logo/logo.module.scss new file mode 100644 index 0000000..9f750f7 --- /dev/null +++ b/components/logo/logo.module.scss @@ -0,0 +1,30 @@ +@use '../../styles/colors' as *; +@use '../../styles/spacing' as *; +@use '../../styles/mixins' as *; + +.logo { + &__label { + @include visually-hidden(); + } + + &--full { + display: none; + } + + @media (min-width: 43rem) { + &--half { + display: none; + } + + &--full { + display: block; + margin-bottom: -10rem; + } + } + + @media (min-width: 70.25rem) { + &--full { + margin-bottom: 0; + } + } +} diff --git a/components/subscribe-cta/subscribe-cta.js b/components/subscribe-cta/subscribe-cta.js new file mode 100644 index 0000000..09e281a --- /dev/null +++ b/components/subscribe-cta/subscribe-cta.js @@ -0,0 +1,46 @@ +import React from 'react'; +import styles from './subscribe-cta.module.scss'; + +const SubscribeCTA = () => ( +
+
+
+

Keep in Touch

+

+ Sign up for our monthly newsletter + to be notified when applications open, + or you can check out our careers page + for all currently available positions. +

+ +
+
+
+ + + +
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+); + +export default SubscribeCTA; diff --git a/components/subscribe-cta/subscribe-cta.module.scss b/components/subscribe-cta/subscribe-cta.module.scss new file mode 100644 index 0000000..4a4b966 --- /dev/null +++ b/components/subscribe-cta/subscribe-cta.module.scss @@ -0,0 +1,217 @@ +@use '../../styles/colors' as *; +@use '../../styles/spacing' as *; +@use '../../styles/mixins' as *; + +.subscribe-cta { + @include horizontal-section-spacing(); + @include vertical-section-spacing(); + display: flex; + align-items: center; + flex-direction: column; + box-sizing: border-box; + + + &__container { + max-width: $max-content-width; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__text-container { + order: 1; + + h2 { + font-size: 3.25rem; + font-family: 'Sole Serif', serif; + font-weight: 100; + } + + p { + margin-bottom: 3rem; + } + } + + &__link-container { + $bp-links-move-inline: 37.5rem; + + display: flex; + flex-direction: column; + + @media (min-width: $bp-links-move-inline) { + flex-direction: row; + } + + a { + width: 100%; + padding: 0.5rem; + font-size: 1.15rem; + border: 3px white solid; + box-sizing: border-box; + color: white; + background-color: rgba(0, 0, 0, 0); + text-decoration: none; + + @media (min-width: $bp-links-move-inline) { + width: fit-content; + max-width: 15rem; + } + + & + a { + margin-top: 1.5rem; + + @media (min-width: $bp-links-move-inline) { + margin-top: 0; + margin-left: 1.5rem; + } + } + + &:hover { + color: black; + background-color: white; + } + } + } + + &__art-container { + width: 90%; + display: flex; + justify-content: center; + order: 0; + } + + &__grid { + display: none; + } + + @supports (display:grid) { + &__grid { + display: grid; + grid-template-columns: repeat(63, 1fr); + grid-template-rows: repeat(12, 1fr); + + img { + max-width: 100%; + + // Images below are placed in the grid in order from top to bottom and left to right + &:nth-child(1) { + grid-area: 1 / 38 / span 8 / span 22; + background-color: $c-highlight-green; + } + + &:nth-child(2) { + grid-area: 5 / 16 / span 8 / span 22; + background-color: $c-highlight-blue; + } + + &:nth-child(3) { + grid-area: 9 / 38 / span 2 / span 11; + background-color: $c-highlight-pink; + } + } + + // Triangle + &--shape1 { + grid-area: 10 / 35 / span 5 / span 15; + stroke-width: 0.5; + margin-top: 1rem; + + path { + stroke: $c-highlight-green; + } + } + + // Circle: top + &--shape2 { + grid-area: 1 / 33 / span 4 / span 9; + margin-top: -2rem; + + circle { + stroke: $c-highlight-blue; + } + } + + // Circle: bottom + &--shape3 { + grid-area: 5 / 4 / span 4 / span 17; + margin-top: 1.5rem; + + circle { + stroke: $c-highlight-pink; + } + } + } + } + + @media (min-width: 45rem) { + &__text-container { + width: 100%; + margin-top: -10rem; + + p { + width: 70%; + font-size: 1.5rem; + } + } + + &__art-container { + width: 100%; + display: flex; + justify-content: flex-end; + } + + &__grid { + width: 50%; + } + + &__footer { + font-size: 1rem; + margin-top: 10rem; + } + } + + @media (min-width: 70.25rem) { + &__container { + flex-direction: row; + } + + &__text-container { + margin: 5rem 0; + order: 0; + + p { + margin-bottom: 5rem; + width: 100%; + } + } + + &__grid { + width: 90%; + + img { + &:nth-child(3) { + grid-area: 9 / 5 / span 2 / span 11; + } + } + + &--shape1 { + grid-area: 4 / 35 / span 5 / span 20; + margin-top: 1.25rem; + + path { + stroke: $c-highlight-pink; + } + } + + &--shape3 { + grid-area: 9 / 12 / span 4 / span 15; + margin-top: 1.25rem; + + circle { + stroke: $c-highlight-green; + } + } + } + } +} diff --git a/pages/apply/index.js b/pages/apply/index.js new file mode 100644 index 0000000..1cf22d6 --- /dev/null +++ b/pages/apply/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import Head from 'next/head'; +import styles from './index.module.scss'; +import ApplyHero from '../../components/apply-hero/apply-hero'; +import LearnMore from '../../components/learn-more/learn-more'; +import SubscribeCTA from '../../components/subscribe-cta/subscribe-cta'; +import Footer from '../../components/footer/footer'; + +const ApplyPage = () => ( +
+ + Sparkbox Apprentices + + + + +
+ + +
+ +
+
+); + +export default ApplyPage; diff --git a/pages/apply/index.module.scss b/pages/apply/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/pages/index.js b/pages/index.js index de3bd32..b55dd44 100644 --- a/pages/index.js +++ b/pages/index.js @@ -26,6 +26,7 @@ const Home = ({ apprenticeData: { currentApprenticeGroup, previousApprenticeGrou +
diff --git a/public/apprentices/Meg.png b/public/apprentices/Meg.png new file mode 100644 index 0000000..a64217d Binary files /dev/null and b/public/apprentices/Meg.png differ diff --git a/public/apprentices/Osmond.png b/public/apprentices/Osmond.png new file mode 100644 index 0000000..ee522c1 Binary files /dev/null and b/public/apprentices/Osmond.png differ diff --git a/public/apprentices/Theo.png b/public/apprentices/Theo.png new file mode 100644 index 0000000..6afc560 Binary files /dev/null and b/public/apprentices/Theo.png differ