+
- Sparkbox
-
+ Sparkbox
+
diff --git a/components/logo/logo.module.scss b/components/logo/logo.module.scss
index c4db10c..9f750f7 100644
--- a/components/logo/logo.module.scss
+++ b/components/logo/logo.module.scss
@@ -2,264 +2,29 @@
@use '../../styles/spacing' as *;
@use '../../styles/mixins' as *;
-.hero {
- width: $component-width;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &__header-label {
+.logo {
+ &__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 {
+ &--full {
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;
+ &--half {
+ display: none;
}
- &__grid {
- width: 70%;
+ &--full {
+ display: block;
+ margin-bottom: -10rem;
}
}
@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;
- }
+ &--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..b88d1fb
--- /dev/null
+++ b/components/subscribe-cta/subscribe-cta.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from './subscribe-cta.module.scss';
+
+const SubscribeCTA = () => (
+
+
+
+
Deserunt, Nulla Non?
+
+ 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 minima dignissimos commodi similique qui.
+
+
Subscribe to Our Newsletter
+
+
+
+);
+
+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..8b5a017
--- /dev/null
+++ b/components/subscribe-cta/subscribe-cta.module.scss
@@ -0,0 +1,165 @@
+@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;
+ }
+
+ a {
+ width: 15rem;
+ padding: 0.5rem;
+ font-size: 1.15rem;
+ border: 3px white solid;
+ color: white;
+ background-color: rgba(0, 0, 0, 0);
+ text-decoration: none;
+
+ &: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(54, 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) {
+ margin-top: 7px;
+ grid-area: 2 / 1 / 6 / 22;
+ background-color: $c-highlight-pink;
+ }
+
+ &:nth-child(2) {
+ grid-area: 6 / 22 / 14 / 44;
+ background-color: $c-highlight-blue;
+ }
+
+ &:nth-child(3) {
+ grid-area: 4 / 44 / 8 / 55;
+ background-color: $c-highlight-pink;
+ }
+ }
+
+ // Circle: Top Left
+ &--shape1 {
+ grid-area: 4 / 32 / 8 / 42;
+ margin-top: 1.25rem;
+
+ circle {
+ stroke: $c-highlight-green;
+ }
+ }
+
+ // Triangle: Bottom Right
+ &--shape2 {
+ display: none;
+ grid-area: 10 / 28 / 14 / 48;
+ margin-top: -1rem;
+
+ path {
+ stroke: $c-highlight-blue;
+ stroke-width: 0.5px;
+ }
+ }
+ }
+ }
+
+ @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%;
+ grid-template-columns: repeat(65, 1fr);
+ grid-template-rows: repeat(13, 1fr);
+
+ &--shape2 {
+ display: block;
+ }
+ }
+ }
+}
diff --git a/pages/apply/index.js b/pages/apply/index.js
index 8c71f72..d855e74 100644
--- a/pages/apply/index.js
+++ b/pages/apply/index.js
@@ -1,6 +1,8 @@
import React from 'react';
import Head from 'next/head';
import styles from './index.module.scss';
+import ApplyHero from '../../components/apply-hero/apply-hero';
+import SubscribeCTA from '../../components/subscribe-cta/subscribe-cta';
import Footer from '../../components/footer/footer';
const ApplyPage = () => (
@@ -9,37 +11,10 @@ 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.
-
+
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
+
+ 
+ 
+ 
+