Skip to content

Commit

Permalink
feat: Create ApplyHero and SubscribeCTA components
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnest00
arnest00 committed Aug 23, 2022
1 parent 126ee90 commit f87cbb6
Show file tree
Hide file tree
Showing 9 changed files with 505 additions and 305 deletions.
64 changes: 64 additions & 0 deletions components/apply-hero/apply-hero.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import Logo from '../logo/logo';
import styles from './apply-hero.module.scss';

const ApplyHero = () => (
<header className={styles['apply-hero']}>
<div className={styles['apply-hero__container']}>
<Logo />
<div className={styles['apply-hero__header-content']}>
<div className={styles['apply-hero__text']}>
<h1>Ullam Pariatur Rerum Tenetur</h1>
<p>
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.
</p>
</div>
<div aria-hidden className={styles['apply-hero__art-container']}>
<div className={styles['apply-hero__grid']}>
<img src="/apprentices/Teresita.png" alt="" />
<img src="/apprentices/Jared.png" alt="" />
<img src="/apprentices/Marissa.png" alt="" />
<img src="/apprentices/Bennett.png" alt="" />
<div className={styles['apply-hero__grid--shape1']}>
<svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.00133 32.5401L20.2337 2.69278L37.4661 32.5401H3.00133Z" stroke="#FE3CB0" />
</svg>
</div>
<div className={styles['apply-hero__grid--shape2']}>
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="19.9315" cy="19.7905" r="18.2325" stroke="#01F5AC" />
</svg>
</div>
<div className={styles['apply-hero__grid--shape3']}>
<svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.00133 32.5401L20.2337 2.69278L37.4661 32.5401H3.00133Z" stroke="#FE3CB0" />
</svg>
</div>
<div className={styles['apply-hero__grid--shape4']}>
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="19.9315" cy="19.7905" r="18.2325" stroke="#01F5AC" />
</svg>
</div>
<div className={styles['apply-hero__grid--shape5']}>
<svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.00133 32.5401L20.2337 2.69278L37.4661 32.5401H3.00133Z" stroke="#FE3CB0" />
</svg>
</div>
<div className={styles['apply-hero__grid--shape6']}>
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="19.9315" cy="19.7905" r="18.2325" stroke="#01F5AC" />
</svg>
</div>
</div>
</div>
</div>
</div>
</header>
);

export default ApplyHero;
212 changes: 212 additions & 0 deletions components/apply-hero/apply-hero.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
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;
}
}

// 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;
}
}
}
}

@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 {
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%;

&--shape5 {
display: block;
}

&--shape6 {
display: block;
}
}
}
}
27 changes: 0 additions & 27 deletions components/hero/hero.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -167,17 +157,6 @@


@media (min-width: 43rem) {
&__sparkbox-logo {
&--half {
display: none;
}

&--full {
display: block;
margin-bottom: -10rem;
}
}

&__text {
order: 1;
width: 90%;
Expand Down Expand Up @@ -209,12 +188,6 @@
@media (min-width: 70.25rem) {
box-sizing: border-box;

&__sparkbox-logo {
&--full {
margin-bottom: 0;
}
}

&__header-content {
flex-direction: row;
}
Expand Down
8 changes: 4 additions & 4 deletions components/logo/logo.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit f87cbb6

Please sign in to comment.