Skip to content

Commit f87cbb6

Browse files
arnest00arnest00
committed
feat: Create ApplyHero and SubscribeCTA components
1 parent 126ee90 commit f87cbb6

9 files changed

Lines changed: 505 additions & 305 deletions

File tree

‎components/apply-hero/apply-hero.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import Logo from '../logo/logo';
3+
import styles from './apply-hero.module.scss';
4+
5+
const ApplyHero = () => (
6+
<header className={styles['apply-hero']}>
7+
<div className={styles['apply-hero__container']}>
8+
<Logo />
9+
<div className={styles['apply-hero__header-content']}>
10+
<div className={styles['apply-hero__text']}>
11+
<h1>Ullam Pariatur Rerum Tenetur</h1>
12+
<p>
13+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
14+
Officia nam impedit rem?
15+
Dolorum distinctio provident officiis vero,
16+
sapiente debitis dicta vitae aut perferendis ad,
17+
eos veritatis iusto harum dolores eligendi fuga,
18+
omnis culpa quod ut qui porro a sed repudiandae.
19+
</p>
20+
</div>
21+
<div aria-hidden className={styles['apply-hero__art-container']}>
22+
<div className={styles['apply-hero__grid']}>
23+
<img src="/apprentices/Teresita.png" alt="" />
24+
<img src="/apprentices/Jared.png" alt="" />
25+
<img src="/apprentices/Marissa.png" alt="" />
26+
<img src="/apprentices/Bennett.png" alt="" />
27+
<div className={styles['apply-hero__grid--shape1']}>
28+
<svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<path d="M3.00133 32.5401L20.2337 2.69278L37.4661 32.5401H3.00133Z" stroke="#FE3CB0" />
30+
</svg>
31+
</div>
32+
<div className={styles['apply-hero__grid--shape2']}>
33+
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
34+
<circle cx="19.9315" cy="19.7905" r="18.2325" stroke="#01F5AC" />
35+
</svg>
36+
</div>
37+
<div className={styles['apply-hero__grid--shape3']}>
38+
<svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
39+
<path d="M3.00133 32.5401L20.2337 2.69278L37.4661 32.5401H3.00133Z" stroke="#FE3CB0" />
40+
</svg>
41+
</div>
42+
<div className={styles['apply-hero__grid--shape4']}>
43+
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
44+
<circle cx="19.9315" cy="19.7905" r="18.2325" stroke="#01F5AC" />
45+
</svg>
46+
</div>
47+
<div className={styles['apply-hero__grid--shape5']}>
48+
<svg viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
49+
<path d="M3.00133 32.5401L20.2337 2.69278L37.4661 32.5401H3.00133Z" stroke="#FE3CB0" />
50+
</svg>
51+
</div>
52+
<div className={styles['apply-hero__grid--shape6']}>
53+
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
54+
<circle cx="19.9315" cy="19.7905" r="18.2325" stroke="#01F5AC" />
55+
</svg>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</header>
62+
);
63+
64+
export default ApplyHero;

‎components/apply-hero/apply-hero.module.scss‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
@use '../../styles/colors' as *;
2+
@use '../../styles/spacing' as *;
3+
@use '../../styles/mixins' as *;
4+
5+
.apply-hero {
6+
width: $component-width;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
11+
&__container {
12+
@include horizontal-section-spacing();
13+
@include vertical-section-spacing();
14+
max-width: $max-content-width;
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
19+
&__header-content {
20+
display: flex;
21+
flex-direction: column;
22+
}
23+
24+
&__text {
25+
display: flex;
26+
flex-direction: column;
27+
order: 1;
28+
29+
h1 {
30+
font-size: 2.65rem;
31+
}
32+
33+
h1,
34+
p {
35+
padding-bottom: 1rem;
36+
font-weight: 100;
37+
margin: 0;
38+
}
39+
}
40+
41+
&__art-container {
42+
display: none;
43+
}
44+
45+
&__grid {
46+
display: none;
47+
}
48+
49+
@supports (display: grid) {
50+
&__art-container {
51+
display: block;
52+
padding-bottom: 1rem;
53+
}
54+
55+
&__grid { // This grid is for the hero images and svgs
56+
display: grid;
57+
grid-template-columns: repeat(63, 1fr);
58+
grid-template-rows: repeat(11, 1fr);
59+
60+
img {
61+
max-width: 100%;
62+
63+
// Images below are placed in the grid in order from top to bottom and left to right
64+
&:nth-child(1) {
65+
grid-area: 2 / 18 / 7 / 41;
66+
background-color: $c-highlight-blue;
67+
}
68+
69+
&:nth-child(2) {
70+
grid-area: 7 / 7 / 11 / 18;
71+
background-color: $c-highlight-green;
72+
}
73+
74+
&:nth-child(3) {
75+
grid-area: 7 / 41 / 12 / 64;
76+
background-color: $c-highlight-green;
77+
}
78+
79+
&:nth-child(4) {
80+
margin-top: -3px;
81+
grid-area: 12 / 18 / 17 / 41;
82+
background-color: $c-highlight-pink;
83+
}
84+
}
85+
86+
// Triangle: Top Right
87+
&--shape1 {
88+
grid-area: 1 / 37 / 3 / 46;
89+
90+
path {
91+
stroke: $c-highlight-pink;
92+
}
93+
}
94+
95+
// Circle: Top Left
96+
&--shape2 {
97+
grid-area: 3 / 11 / 7 / 20;
98+
99+
circle {
100+
stroke: $c-highlight-green;
101+
}
102+
}
103+
104+
// Triangle: Middle Left
105+
&--shape3 {
106+
grid-area: 6 / 2 / 9 / 9;
107+
}
108+
109+
// Circle: Middle Right
110+
&--shape4 {
111+
grid-area: 7 / 30 / 12 / 44;
112+
113+
circle {
114+
stroke: $c-highlight-blue;
115+
stroke-width: 0.75;
116+
}
117+
}
118+
119+
// Triangle: Bottom Left
120+
&--shape5 {
121+
display: none;
122+
grid-area: 14 / 6 / 19 / 26;
123+
124+
path {
125+
stroke: $c-highlight-green;
126+
stroke-width: 0.5;
127+
}
128+
}
129+
130+
// Circle: Bottom Right
131+
&--shape6 {
132+
display: none;
133+
grid-area: 13 / 39 / 15 / 44;
134+
135+
circle {
136+
stroke: $c-highlight-blue;
137+
stroke-width: 1.5;
138+
}
139+
}
140+
}
141+
}
142+
143+
@media (min-width: 43rem) {
144+
&__text {
145+
order: 1;
146+
width: 90%;
147+
margin-top: -3.5rem;
148+
149+
h1 {
150+
width: 60%;
151+
font-size: 3.4rem;
152+
}
153+
154+
p {
155+
width: 80%;
156+
font-size: 1.25rem;
157+
line-height: 1.8;
158+
}
159+
}
160+
161+
&__art-container {
162+
width: 100%;
163+
display: flex;
164+
justify-content: flex-end;
165+
}
166+
167+
&__grid {
168+
width: 70%;
169+
}
170+
}
171+
172+
@media (min-width: 70.25rem) {
173+
box-sizing: border-box;
174+
175+
&__header-content {
176+
flex-direction: row;
177+
}
178+
179+
&__text {
180+
width: 100%;
181+
order: 0;
182+
margin-top: 2rem;
183+
184+
h1 {
185+
font-size: 4.5rem;
186+
width: 100%;
187+
}
188+
189+
p {
190+
font-size: 1.2rem;
191+
width: 95%;
192+
}
193+
}
194+
195+
&__art-container {
196+
justify-content: flex-start;
197+
margin-top: -7rem;
198+
}
199+
200+
&__grid {
201+
width: 100%;
202+
203+
&--shape5 {
204+
display: block;
205+
}
206+
207+
&--shape6 {
208+
display: block;
209+
}
210+
}
211+
}
212+
}

‎components/hero/hero.module.scss‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,6 @@
88
justify-content: center;
99
align-items: center;
1010

11-
&__header-label {
12-
@include visually-hidden();
13-
}
14-
15-
&__sparkbox-logo {
16-
&--full {
17-
display: none;
18-
}
19-
}
20-
2111
&__container {
2212
@include horizontal-section-spacing();
2313
@include vertical-section-spacing();
@@ -167,17 +157,6 @@
167157

168158

169159
@media (min-width: 43rem) {
170-
&__sparkbox-logo {
171-
&--half {
172-
display: none;
173-
}
174-
175-
&--full {
176-
display: block;
177-
margin-bottom: -10rem;
178-
}
179-
}
180-
181160
&__text {
182161
order: 1;
183162
width: 90%;
@@ -209,12 +188,6 @@
209188
@media (min-width: 70.25rem) {
210189
box-sizing: border-box;
211190

212-
&__sparkbox-logo {
213-
&--full {
214-
margin-bottom: 0;
215-
}
216-
}
217-
218191
&__header-content {
219192
flex-direction: row;
220193
}

‎components/logo/logo.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)