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 = () => (
-
- - - - - Sparkbox - - - - -
+

Apprenticeships at Sparkbox

diff --git a/components/learn-more/learn-more.js b/components/learn-more/learn-more.js new file mode 100644 index 0000000..e69de29 diff --git a/components/learn-more/learn-more.module.scss b/components/learn-more/learn-more.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/components/logo/logo.js b/components/logo/logo.js new file mode 100644 index 0000000..7cbdf0b --- /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..c4db10c --- /dev/null +++ b/components/logo/logo.module.scss @@ -0,0 +1,265 @@ +@use '../../styles/colors' as *; +@use '../../styles/spacing' as *; +@use '../../styles/mixins' as *; + +.hero { + width: $component-width; + display: flex; + 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(); + max-width: $max-content-width; + display: flex; + flex-direction: column; + } + + &__header-content { + display: flex; + flex-direction: column; + } + + &__text { + display: flex; + flex-direction: column; + order: 1; + + h1 { + font-size: 2.65rem; + } + + h1, + p { + padding-bottom: 1rem; + font-weight: 100; + margin: 0; + } + } + + &__art-container { + display: none; + } + + &__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(11, 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: 2 / 18 / 7 / 41; + background-color: $c-highlight-blue; + } + + &:nth-child(2) { + grid-area: 7 / 7 / 11 / 18; + background-color: $c-highlight-green; + } + + &:nth-child(3) { + grid-area: 7 / 41 / 12 / 64; + background-color: $c-highlight-green; + } + + &:nth-child(4) { + margin-top: -3px; + grid-area: 12 / 18 / 17 / 41; + background-color: $c-highlight-pink; + } + + &:nth-child(5) { + grid-area: 17 / 41 / 20 / 51; + background-color: $c-highlight-blue; + } + // In mobile and tablet view only 3 images are shown + &:nth-child(n + 4) { + display: none; + } + } + + // Triangle: Top Right + &--shape1 { + grid-area: 1 / 37 / 3 / 46; + + path { + stroke: $c-highlight-pink; + } + } + + // Circle: Top Left + &--shape2 { + grid-area: 3 / 11 / 7 / 20; + + circle { + stroke: $c-highlight-green; + } + } + + // Triangle: Middle Left + &--shape3 { + grid-area: 6 / 2 / 9 / 9; + } + + // Circle: Middle Right + &--shape4 { + grid-area: 7 / 30 / 12 / 44; + + circle { + stroke: $c-highlight-blue; + stroke-width: 0.75; + } + } + + // Triangle: Bottom Left + &--shape5 { + display: none; + grid-area: 14 / 6 / 19 / 26; + + path { + stroke: $c-highlight-green; + stroke-width: 0.5; + } + } + + // Circle: Bottom Right + &--shape6 { + display: none; + grid-area: 13 / 39 / 15 / 44; + + circle { + stroke: $c-highlight-blue; + stroke-width: 1.5; + } + } + + // Triangle: Bottom Right + &--shape7 { + display: none; + grid-area: 16 / 49 / 19 / 56; + } + } + } + + + @media (min-width: 43rem) { + &__sparkbox-logo { + &--half { + display: none; + } + + &--full { + display: block; + margin-bottom: -10rem; + } + } + + &__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 { + width: 100%; + display: flex; + justify-content: flex-end; + } + + &__grid { + width: 70%; + } + } + + @media (min-width: 70.25rem) { + box-sizing: border-box; + + &__sparkbox-logo { + &--full { + margin-bottom: 0; + } + } + + &__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%; + + img { + &:nth-child(n + 4) { + display: block; + } + } + + &--shape5 { + display: block; + } + + &--shape6 { + display: block; + } + + &--shape7 { + display: block; + } + } + } +} diff --git a/pages/apply/index.js b/pages/apply/index.js new file mode 100644 index 0000000..8c71f72 --- /dev/null +++ b/pages/apply/index.js @@ -0,0 +1,49 @@ +import React from 'react'; +import Head from 'next/head'; +import styles from './index.module.scss'; +import Footer from '../../components/footer/footer'; + +const ApplyPage = () => ( +
+ + Become a Sparkbox Apprentice + + +
+ +
+ +
+

Ullam Pariatur Rerum Tenetur

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Officia nam impedit rem? + Dolorum distinctio provident officiis vero, + sapiente debitis dicta vitae aut perferendis ad, + eos veritatis iusto harum dolores eligendi fuga, + omnis culpa quod ut qui porro a sed repudiandae. +

+

+ Ab repellendus, repudiandae amet itaque. + Quod doloribus dolore sapiente id accusamus in deserunt, + incidunt facere porro excepturi iste architecto quasi. + Adipisci expedita quia modi aspernatur. + Hic pariatur eos voluptatem tenetur natus. + Necessitatibus inventore vero reiciendis culpa excepturi saepe repudiandae. +

+

+ Alias placeat fuga voluptates, impedit optio labore eius vitae explicabo. + Tempora exercitationem quis accusantium illo! Doloribus, deleniti! + Repellendus, voluptatibus ratione laudantium nisi minima dignissimos commodi similique qui. +

+
+ +
+); + +export default ApplyPage; diff --git a/pages/apply/index.module.scss b/pages/apply/index.module.scss new file mode 100644 index 0000000..e69de29