diff --git a/src/assets/i18n/en.ts b/src/assets/i18n/en.ts index 414486cd..6a9e34f7 100644 --- a/src/assets/i18n/en.ts +++ b/src/assets/i18n/en.ts @@ -129,8 +129,9 @@ export const translations = { fullName: 'Full Name*', company: 'Company', email: 'E-mail*', - phone: 'Phone', - github: 'GitHub URL', + phone: 'Phone*', + github: 'GitHub URL*', + designProfile: 'Portfolio*', whatAreYouWorkingOn: 'What are you working on?', appDevelopment: 'App Development', webDevelopment: 'Web Development', @@ -156,6 +157,9 @@ export const translations = { email: 'example@gmail.com', phone: 'Your Phone Number', message: 'Briefly describe your project', + fullName: 'Your Name Here', + github: 'Your Github account', + designProfile: 'Your Portfolio', }, }, }, @@ -303,9 +307,64 @@ export const translations = { opportunities: { hero: { - title: "Great News! We're Hiring.", - text: "If you're curious, hardworking, and adventurous, we're looking for you! Check out our job description and apply today.", - text2: 'Learn More', + title: 'Looking for a New Adventure?', + text: 'If you’re a talented designer or developer, we want to hear from you! Choose the role that best describes you to continue.', + text2: 'Let’s get to know each other…', + developer: 'DEVELOPER', + designer: 'DESIGNER', + develop: { + title: 'Show Us What You’re Made Of', + text: "If you're curious, hardworking, and adventurous, we're looking for you! Check out our job description and apply today.", + button: 'Apply Now', + }, + design: { + title: 'Show Us What You’re Made Of', + text: "If you're curious, hardworking, and adventurous, we're looking for you! Check out our job description and apply today.", + button: 'Apply Now', + }, + }, + candidate: { + develop: { + title: 'The ideal candidate can....', + text1: 'Be a great team player experienced in working with agile teams with the ability to collaborate closely with developers, copywriters and UX designers.', + text2: 'Continually keep yourself and your design team updated with the latest changes in your industry’s standards.', + text3: 'Be self-starter.', + text4: 'Be a team player -- you put the interests of the team and the company above your own.', + text5: 'Be passionate about open source software', + }, + design: { + title: 'The ideal candidate can....', + text1: 'Be a great team player experienced in working with agile teams with the ability to collaborate closely with developers, copywriters and UX designers.', + text2: 'Create, improve and utilize wireframes, prototypes, style guides, user flows, and effectively communicate your interaction ideas using any of these methods.', + text3: + 'Present and defend your design decisions. All your design decisions should be based on the overall design roadmap as well as your own design thinking and fundamental principles (i.e. color theory, visual weight, etc.)', + text4: 'Continually keep yourself and your design team updated with the latest changes in your industry’s standards.', + }, + }, + requisites: { + develop: { + title: 'And can meet the following prerequisites:', + text1: 'Three or more years of experience and proven track record.', + text2: 'Strong portfolio to be presented and defended during interview.', + text3: 'Experience using Firebase products (Database, Authentication, Notifications).', + text4: 'Experience in CSS (SCSS, BEM, LESS, SASS).', + text5: 'Experience in JavaScript (React, Angular, Node, Express).', + text6: 'Experience in Hybrid Apps (Ionic).', + text7: 'Experience with Heroku, Github Pages, or AWS is a plus.', + text8: 'Experience building web applications and/or mobile apps is a plus.', + text9: 'Experience in working on open source projects is a plus.', + }, + design: { + title: 'And can meet the following prerequisites', + text1: 'Three or more years of experience and proven track record.', + text2: 'Strong portfolio to be presented and defended during the interview.', + text3: 'Hands-on experience creating wireframes, prototypes, storyboards, user flows, etc.', + text4: 'Proficiency with tools such as Photoshop, Sketch, Illustrator, InVision, MarvelApp, etc.', + text5: 'Understanding of basic front-end languages: HTML5, CSS3 Javascript.', + text6: 'The ability to generate creative ideas with problem-solving mindset.', + text7: 'Experience working in an agile/scrum development process.', + text8: 'Be open to receiving objective criticism and improving upon it.', + }, }, intro: { title: 'Forget normal interviews!', @@ -352,18 +411,19 @@ export const translations = { form: { allset: "You're all set! Let's get started.", almost: 'Not quite...keep sliding or keep learning; you can do it!', - request: 'Request an interview', + request: 'Apply', midLevelTitle: 'Mid-Level Developer', technology: 'Technology', fullTime: 'Full-Time', submitTitle: 'Submit your application', - resume: 'Resume/CV', + resume: 'Resume/CV*', unique: { title: 'What makes you unique?', - text: 'In 150 characters or fewer, tell us what makes you unique. Try to be creative and say something that will catch our eye!', + text: 'In 200 characters or less, tell us what makes you unique.', }, submit: 'Submit Application', - submitted: 'Application Submitted', + submitted: 'Application Submitted!', + thanks_interest: 'Thank you for your interest in OpenForge.', thanks: { title: 'Thank you!', text: 'If your resume is a match, someone will be in touch to deliver the necessary materials to complete the challenge.', diff --git a/src/assets/opportunities/codemaster.png b/src/assets/opportunities/codemaster.png new file mode 100644 index 00000000..6977e212 Binary files /dev/null and b/src/assets/opportunities/codemaster.png differ diff --git a/src/assets/opportunities/designmaster.png b/src/assets/opportunities/designmaster.png new file mode 100644 index 00000000..345f9f6b Binary files /dev/null and b/src/assets/opportunities/designmaster.png differ diff --git a/src/assets/opportunities/opportunities-arrow-animated.svg b/src/assets/opportunities/opportunities-arrow-animated.svg new file mode 100644 index 00000000..957d38d2 --- /dev/null +++ b/src/assets/opportunities/opportunities-arrow-animated.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-arrow.svg b/src/assets/opportunities/opportunities-arrow.svg new file mode 100644 index 00000000..c40d9e38 --- /dev/null +++ b/src/assets/opportunities/opportunities-arrow.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-design-active.svg b/src/assets/opportunities/opportunities-design-active.svg new file mode 100644 index 00000000..1504e949 --- /dev/null +++ b/src/assets/opportunities/opportunities-design-active.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-designer-candidate.svg b/src/assets/opportunities/opportunities-designer-candidate.svg new file mode 100644 index 00000000..30b76827 --- /dev/null +++ b/src/assets/opportunities/opportunities-designer-candidate.svg @@ -0,0 +1 @@ +opportunities-designer-01 \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-dev-active.svg b/src/assets/opportunities/opportunities-dev-active.svg new file mode 100644 index 00000000..441a334e --- /dev/null +++ b/src/assets/opportunities/opportunities-dev-active.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-dev-candidate.svg b/src/assets/opportunities/opportunities-dev-candidate.svg new file mode 100644 index 00000000..813e2af4 --- /dev/null +++ b/src/assets/opportunities/opportunities-dev-candidate.svg @@ -0,0 +1 @@ +opportunities-dev \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-header-animated.svg b/src/assets/opportunities/opportunities-header-animated.svg new file mode 100644 index 00000000..0a5af6df --- /dev/null +++ b/src/assets/opportunities/opportunities-header-animated.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-header.svg b/src/assets/opportunities/opportunities-header.svg new file mode 100644 index 00000000..ce5709a8 --- /dev/null +++ b/src/assets/opportunities/opportunities-header.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-design-active.svg b/src/assets/opportunities/opportunities-mobile-design-active.svg new file mode 100644 index 00000000..3e477a18 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-design-active.svg @@ -0,0 +1 @@ +mobile-opp-design-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-dev-active.svg b/src/assets/opportunities/opportunities-mobile-dev-active.svg new file mode 100644 index 00000000..8b90d5b2 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-dev-active.svg @@ -0,0 +1 @@ +mobile-opp-dev-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-header-animated.svg b/src/assets/opportunities/opportunities-mobile-header-animated.svg new file mode 100644 index 00000000..a70f4eb0 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-header-animated.svg @@ -0,0 +1 @@ +Opp-default \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-transition-design-dev.svg b/src/assets/opportunities/opportunities-mobile-transition-design-dev.svg new file mode 100644 index 00000000..34842e63 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-transition-design-dev.svg @@ -0,0 +1 @@ +mobile-opp-dev-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-transition-design.svg b/src/assets/opportunities/opportunities-mobile-transition-design.svg new file mode 100644 index 00000000..e7e48214 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-transition-design.svg @@ -0,0 +1 @@ +mobile-opp-design-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-transition-dev-design.svg b/src/assets/opportunities/opportunities-mobile-transition-dev-design.svg new file mode 100644 index 00000000..e7e48214 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-transition-dev-design.svg @@ -0,0 +1 @@ +mobile-opp-design-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-mobile-transition-dev.svg b/src/assets/opportunities/opportunities-mobile-transition-dev.svg new file mode 100644 index 00000000..34842e63 --- /dev/null +++ b/src/assets/opportunities/opportunities-mobile-transition-dev.svg @@ -0,0 +1 @@ +mobile-opp-dev-header \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-design-active.svg b/src/assets/opportunities/opportunities-tablet-design-active.svg new file mode 100644 index 00000000..658e914a --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-design-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-dev-active.svg b/src/assets/opportunities/opportunities-tablet-dev-active.svg new file mode 100644 index 00000000..78815175 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-dev-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-header-animated.svg b/src/assets/opportunities/opportunities-tablet-header-animated.svg new file mode 100644 index 00000000..34f38194 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-header-animated.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-transition-design-dev.svg b/src/assets/opportunities/opportunities-tablet-transition-design-dev.svg new file mode 100644 index 00000000..a9efef8b --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-transition-design-dev.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-transition-design.svg b/src/assets/opportunities/opportunities-tablet-transition-design.svg new file mode 100644 index 00000000..c09672c1 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-transition-design.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-transition-dev-design.svg b/src/assets/opportunities/opportunities-tablet-transition-dev-design.svg new file mode 100644 index 00000000..63305770 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-transition-dev-design.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-tablet-transition-dev.svg b/src/assets/opportunities/opportunities-tablet-transition-dev.svg new file mode 100644 index 00000000..dfb92502 --- /dev/null +++ b/src/assets/opportunities/opportunities-tablet-transition-dev.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-design-dev.svg b/src/assets/opportunities/opportunities-transition-design-dev.svg new file mode 100644 index 00000000..5ccc0114 --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-design-dev.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-design.svg b/src/assets/opportunities/opportunities-transition-design.svg new file mode 100644 index 00000000..a0f225d0 --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-design.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-dev-design.svg b/src/assets/opportunities/opportunities-transition-dev-design.svg new file mode 100644 index 00000000..ca4ca31a --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-dev-design.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/opportunities-transition-dev.svg b/src/assets/opportunities/opportunities-transition-dev.svg new file mode 100644 index 00000000..b10569d7 --- /dev/null +++ b/src/assets/opportunities/opportunities-transition-dev.svg @@ -0,0 +1 @@ +Opportunities_head_image \ No newline at end of file diff --git a/src/assets/opportunities/test-designer.png b/src/assets/opportunities/test-designer.png new file mode 100644 index 00000000..0e600e35 Binary files /dev/null and b/src/assets/opportunities/test-designer.png differ diff --git a/src/assets/opportunities/test-dev.png b/src/assets/opportunities/test-dev.png new file mode 100644 index 00000000..af3750a2 Binary files /dev/null and b/src/assets/opportunities/test-dev.png differ diff --git a/src/components/app-input/app-input.scss b/src/components/app-input/app-input.scss index e5f34c06..41b4cbfa 100644 --- a/src/components/app-input/app-input.scss +++ b/src/components/app-input/app-input.scss @@ -23,3 +23,13 @@ display: block; } } + +input.form-control.slimmer { + @include media-breakpoint-down(xl) { + height: calc(2em + 0.25rem + 2px); + } + + @include media-breakpoint-down(sm) { + height: calc(2em + 0.75rem + 2px); + } +} diff --git a/src/components/app-input/app-input.tsx b/src/components/app-input/app-input.tsx index 38c07f0a..af61027c 100644 --- a/src/components/app-input/app-input.tsx +++ b/src/components/app-input/app-input.tsx @@ -23,6 +23,8 @@ export class AppInput { valueChanged: EventEmitter; @Prop() valid = false; + @Prop() + slimmer = false; inputHandler(event) { this.valueChanged.emit({ @@ -37,7 +39,10 @@ export class AppInput {
- +
- + +
); diff --git a/src/pages/app-opportunities/app-opportunities.scss b/src/pages/app-opportunities/app-opportunities.scss index d05f4f87..21b7ceb7 100644 --- a/src/pages/app-opportunities/app-opportunities.scss +++ b/src/pages/app-opportunities/app-opportunities.scss @@ -1,43 +1,252 @@ .opportunities { // hero .hero { - background-position: top center; - background-size: cover; - height: 100vh; + background-size: contain; + background-repeat: no-repeat; + height: calc(100vh - 152px); + padding-top: 76px; + margin-top: 76px; + + &.header-animated { + background-image: url('/assets/opportunities/opportunities-header-animated.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-header-animated.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 60px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-header-animated.svg'); + } + } + + &.header-transition-dev { + background-image: url('/assets/opportunities/opportunities-transition-dev.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-transition-dev.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 50px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-transition-dev.svg'); + } + } + + &.header-transition-design { + background-image: url('/assets/opportunities/opportunities-transition-design.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-transition-design.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 50px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-transition-design.svg'); + } + } + + &.header-transition-dev-design { + background-image: url('/assets/opportunities/opportunities-transition-dev-design.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-transition-dev-design.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 50px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-transition-dev-design.svg'); + } + } + + &.header-transition-design-dev { + background-image: url('/assets/opportunities/opportunities-transition-design-dev.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-transition-design-dev.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 50px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-transition-design-dev.svg'); + } + } + + &.header-dev-active { + background-image: url('/assets/opportunities/opportunities-dev-active.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-dev-active.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 50px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-dev-active.svg'); + } + } + + &.header-design-active { + background-image: url('/assets/opportunities/opportunities-design-active.svg'); + + @include media-breakpoint-down(md) { + background-size: cover; + background-repeat: no-repeat; + height: calc(100vh); + padding-top: 156px; + margin-top: 0; + background-image: url('/assets/opportunities/opportunities-tablet-design-active.svg'); + } + @include media-breakpoint-down(sm) { + background-size: contain; + margin-top: 0; + padding-top: 50px; + height: 100vh; + background-image: url('/assets/opportunities/opportunities-mobile-design-active.svg'); + } + } .container, .row { - height: 100%; + height: calc(100vh - 76px); + justify-content: center; + } + + .hero-text-container { + margin-top: 8rem; + + @include media-breakpoint-down(lg) { + margin-top: 4rem; + } + + @include media-breakpoint-down(sm) { + margin-top: 3rem; + } + } + + .hero-arrow-img { + display: flex; + margin-top: 1rem; + flex-direction: column; + justify-content: center; + align-items: center; + img { + width: 50px; + } } h2 { - color: $white; + color: #121212; font-size: 4rem; margin-bottom: 1rem; + text-align: center; @include media-breakpoint-down(lg) { font-size: 3rem; } + @include media-breakpoint-down(md) { + font-size: 2rem; + } @include media-breakpoint-down(sm) { - font-size: 2.2rem; + font-size: 26px; } } p { - color: $white; + color: #121212; font-size: 1.2rem; font-weight: 300; margin-bottom: 1.5rem; - max-width: 500px; + text-align: center; @include media-breakpoint-down(lg) { - font-size: 1rem; + font-size: 16px; + } + @include media-breakpoint-down(md) { + font-size: 14px; + } + } + + .opportunity-btn { + background-color: #0095aa; + border: 0.75px solid #ffffff; + border-radius: 16px; + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + + &.active, + &:focus { + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5), inset 0 0 7px 4px rgba(0, 0, 0, 0.3) !important; + background-color: #0095aa !important; + border-color: white !important; + } + + @include media-breakpoint-down(sm) { + width: 60%; + margin-top: 1rem; + margin-bottom: 1rem; + } + } + + .hero-type-buttons { + display: flex; + flex-direction: row; + justify-content: space-evenly; + + @include media-breakpoint-down(sm) { + flex-direction: column; + align-items: center; } } } + header.hero-submit { + margin-top: 76px; + } + .interviews { padding: 3rem 0; a { + color: #6d6e71; text-decoration: underline; } @@ -100,7 +309,10 @@ .apply { background: $gray-100; - padding: 5rem 0; + + .apply-1 { + padding: 4rem 0; + } h2 { color: $gray-800; @@ -151,12 +363,22 @@ // Application &.apply-2 { + padding: 4rem 0; + + @include media-breakpoint-down(xl) { + max-width: 60%; + } + + @include media-breakpoint-down(sm) { + max-width: initial; + } + h2 { text-align: center; } h3 { - margin-top: 50px; + padding-top: 0; @include media-breakpoint-down(sm) { text-align: center; } @@ -193,19 +415,39 @@ letter-spacing: 0.1rem; line-height: 1.4rem; margin-bottom: 0; - width: 20%; - @include media-breakpoint-down(sm) { - width: 100%; + width: 100%; + + &.resume { + width: initial; + } + + &.resume-filename { + width: initial; + margin-left: 16px; + } + + &.resume-btn { + background-color: #0095aa; + border: 0.75px solid #ffffff; + border-radius: 16px; + -webkit-box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + width: initial; + padding: 5px 10px; + text-align: center; + color: white; + margin-left: 16px; } } - .form-control, - input[type='file'] { + .form-control { display: inline-block; - width: 80%; - @include media-breakpoint-down(sm) { - width: 100%; - } + width: 100%; + } + + input[type='file'] { + visibility: hidden; + display: none; } } .error { @@ -213,6 +455,10 @@ color: #d9534f; } } + + .submit-btn-container { + text-align: center; + } } } @@ -220,4 +466,26 @@ margin-left: 5px; margin-right: 5px; } + + button.apply-btn { + background-color: #0095aa; + border: 0.75px solid #ffffff; + border-radius: 16px; + box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5); + } + + hr { + width: 100%; + margin: 0; + border: 1.5px solid rgba(23, 23, 25, 0.1); + } + + .submitted-text { + margin-top: 2rem; + + p { + margin-bottom: 0; + text-align: center; + } + } } diff --git a/src/pages/app-opportunities/app-opportunities.tsx b/src/pages/app-opportunities/app-opportunities.tsx index be937987..5569b37e 100644 --- a/src/pages/app-opportunities/app-opportunities.tsx +++ b/src/pages/app-opportunities/app-opportunities.tsx @@ -19,10 +19,10 @@ export class AppOpportunities { css: number; sketch: number; + photoshop: number; + illustrator: number; adobe: number; - interactive: number; - ux: number; - presentation: number; + prototyping: number; file: string; name: string; @@ -43,6 +43,7 @@ export class AppOpportunities { }; @State() fileError: any; + @State() fileName: any; @State() nameError: string; @State() emailError: string; @State() phoneError: string; @@ -106,6 +107,8 @@ export class AppOpportunities { url: 'https://openforge.io/opportunities/develop/', image: 'https://openforge.io/assets/graphic-opportunities-dev-header.png', }, + candidateUrl: '/assets/opportunities/codemaster.png', + requisitesUrl: '/assets/case-study-development.png', }, design: { googleDoc: 'https://docs.google.com/document/d/1wqwowtkU52JmLb8HkR-bOZhx_MpLIUXnTJSy47U_OuI/edit', @@ -131,20 +134,20 @@ export class AppOpportunities { name: 'sketch', }, second: { - label: 'Adobe CC', - name: 'adobe', + label: 'Photoshop CC', + name: 'photoshop', }, third: { - label: 'Interactive Prototyping', - name: 'interactive', + label: 'Illustrator CC', + name: 'illustrator', }, fourth: { - label: 'User Experience Design', - name: 'ux', + label: 'Adobe XD CC', + name: 'adobe', }, fifth: { - label: 'Presentation Design', - name: 'presentation', + label: 'Prototyping', + name: 'prototyping', }, }, metatags: { @@ -155,6 +158,8 @@ export class AppOpportunities { url: 'https://openforge.io/opportunities/design/', image: 'https://openforge.io/assets/graphic-opportunities-design-header.png', }, + candidateUrl: '/assets/opportunities/designmaster.png', + requisitesUrl: '/assets/case-study-design.png', }, }; @@ -167,17 +172,15 @@ export class AppOpportunities { @Prop() match: MatchResults; @Prop() history: RouterHistory; + @State() opporunityTypeCurrent: string; + @State() opporunityTypePrevious: string; + @State() opporunityTypeActive: string; + @Watch('match') matchHandler() { this.changeMetadata(); } - componentWillLoad() { - if (!this.texts[this.match.params.type]) { - this.history.push(`/`, {}); - } - } - componentDidLoad() { this.resetFormValues(); this.changeMetadata(); @@ -196,7 +199,7 @@ export class AppOpportunities { const { field, value, target } = event.detail; this.formValues[field] = value; - if (this.match.params.type === 'develop') { + if (this.opporunityTypeCurrent === 'develop') { if (this.formValues.angular > 90 && this.formValues.node > 90 && this.formValues.ionic > 90 && this.formValues.html > 90 && this.formValues.css > 90) { this.interviewButtonDisabled = false; } else { @@ -204,8 +207,8 @@ export class AppOpportunities { } } - if (this.match.params.type === 'design') { - if (this.formValues.sketch > 70 && this.formValues.adobe > 70 && this.formValues.interactive > 70 && this.formValues.ux > 70 && this.formValues.presentation > 70) { + if (this.opporunityTypeCurrent === 'design') { + if (this.formValues.sketch > 70 && this.formValues.photoshop > 70 && this.formValues.illustrator > 70 && this.formValues.adobe > 70 && this.formValues.prototyping > 70) { this.interviewButtonDisabled = false; } else { this.interviewButtonDisabled = true; @@ -269,16 +272,15 @@ export class AppOpportunities { handleSliders(e) { e.preventDefault(); this.canRequestInterview = true; - document.getElementById('apply').scrollIntoView({ block: 'start' }); + document.getElementById('hero').scrollIntoView({ block: 'start', behavior: 'smooth' }); } handleFile(e) { const files = e.target.files; const file = files[0]; - this.formData = new FormData(); this.formData.append('files', files[0]); - + this.fileName = file.name; this.formValues.formErrors.fileValid = e.target.checkValidity(); if (file && file.size > this.maxFileSize) { this.fileSizeErrorShown = true; @@ -319,7 +321,7 @@ export class AppOpportunities { this.formSubmitted = true; this.fileSizeErrorShown = false; - document.getElementById('apply').scrollIntoView({ block: 'start' }); + document.getElementById('thanks').scrollIntoView({ block: 'start' }); } catch (error) { console.log('Error', error); } @@ -331,264 +333,422 @@ export class AppOpportunities { form.scrollIntoView({ block: 'start', behavior: 'smooth' }); } + scrollToApply() { + const form = document.getElementById('applyForm'); + form.scrollIntoView({ block: 'start', behavior: 'smooth' }); + } + changeMetadata() { - if (this.texts[this.match.params.type]) { + if (this.texts[this.opporunityTypeCurrent]) { // Change meta tags dynamically d - document.querySelector("meta[property='og:title']").setAttribute('content', this.texts[this.match.params.type].metatags.title); - document.querySelector("meta[property='og:description']").setAttribute('content', this.texts[this.match.params.type].metatags.description); - document.querySelector("meta[property='og:url']").setAttribute('content', this.texts[this.match.params.type].metatags.url); - document.querySelector("meta[property='og:image']").setAttribute('content', this.texts[this.match.params.type].metatags.image); - document.querySelector("meta[name='keywords']").setAttribute('content', this.texts[this.match.params.type].metatags.keywords); + document.querySelector("meta[property='og:title']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.title); + document.querySelector("meta[property='og:description']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.description); + document.querySelector("meta[property='og:url']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.url); + document.querySelector("meta[property='og:image']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.image); + document.querySelector("meta[name='keywords']").setAttribute('content', this.texts[this.opporunityTypeCurrent].metatags.keywords); + } + } + + selectType(type: string) { + if (this.opporunityTypeCurrent !== type) { + this.opporunityTypePrevious = this.opporunityTypeCurrent; + this.opporunityTypeCurrent = type; + setTimeout(() => { + this.opporunityTypeActive = this.opporunityTypeCurrent; + }, 1000); } } render() { return (
- {/* header - hero */} - {this.texts[this.match.params.type] - ? [ -
-
-
-
-

- -

-

- -

- -
+ {!this.canRequestInterview ? ( + // Header for initial state +
+
+
+
+

+ +

+

+ +

+
+ + +
+
+ {this.opporunityTypeCurrent + ? [ + , + , + ] + : null}
-
, - - /* section - interviews */ -
+
+
+
+ ) : ( + // Header for the state after click on apply +
+ +

+ +

+

+ +

+
+ +
+ +
+ )} + {this.opporunityTypeCurrent ? ( + !this.canRequestInterview ? ( + // Content section for initial state +
+
+ +

+ +

+

+ +

+ + + +

+ +

+

+ +

+ +
+ +
- -

- -

-

- -

- - - -

- -

-

- +

+

+ +

+

+

- -
- -
-
-
-

- -

-

- -

+
+
+
+

{this.texts[this.opporunityTypeCurrent].firstSkill.name}

+
-
-
-

{this.texts[this.match.params.type].firstSkill.name}

- -
-
-

{this.texts[this.match.params.type].secondSkill.name}

- -
-
-

{this.texts[this.match.params.type].thirdSkill.name}

- - -
+
+

{this.texts[this.opporunityTypeCurrent].secondSkill.name}

+ +
+
+

{this.texts[this.opporunityTypeCurrent].thirdSkill.name}

+ +
- +
+ +
+ +

+ +

+

+ +

+ + + +

+ +

+

+ +

+ +
+
+ ) : ( + // Content section for the state after click on apply +
+
+ +

+ +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + {this.opporunityTypeCurrent === 'develop' ? ( +
  • + +
    • + ) : null} +
+ + +

+ +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + {this.opporunityTypeCurrent === 'develop' ? ( +
  • + +
    • + ) : null} +
+ +
+ ) + ) : null} + {this.opporunityTypeCurrent + ? [ +
- -

- -

-

- -

- - - -

- -

-

- -

- -
-
, + {!this.canRequestInterview ? ( + // First form with sliders +
+

+ +

+

+ +

- /* section - apply */ -
- {!this.formSubmitted ? ( -
- {!this.canRequestInterview ? ( - -

- -

+

- +

+

+ +

+
-
-

- -

-

- -

-
- - - - - - + + + + + - {!this.interviewButtonDisabled ? ( -

- -

- ) : ( -

- -

- )} - - - - ) : ( -
+ {!this.interviewButtonDisabled ? (

- Want to know exactly what you're getting yourself into? Check out our - - Google Document - - to see the ins and outs of what this epic adventure will include! +

-

- -

- -
- - -
-

- -