diff --git a/src-ts/lib/styles/mixins/_breakpoints.mixins.scss b/src-ts/lib/styles/mixins/_breakpoints.mixins.scss index 66d0db6de..abef61820 100644 --- a/src-ts/lib/styles/mixins/_breakpoints.mixins.scss +++ b/src-ts/lib/styles/mixins/_breakpoints.mixins.scss @@ -67,6 +67,12 @@ } } +@mixin ltelg { + @media (max-width: #{$lg-max}) { + @content; + } +} + @mixin lg { @media (min-width: #{$lg-min}) and (max-width: #{$lg-max}){ @content; diff --git a/src-ts/tools/work/work-type-banner/WorkTypeBanner.module.scss b/src-ts/tools/work/work-type-banner/WorkTypeBanner.module.scss new file mode 100644 index 000000000..325e9a8c3 --- /dev/null +++ b/src-ts/tools/work/work-type-banner/WorkTypeBanner.module.scss @@ -0,0 +1,328 @@ +@import '../../../lib/styles/mixins'; +@import '../../../lib/styles/variables'; + +.heroContainer { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 0px 0px 0px; + gap: 24px; + + + height: 104px; + + background: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%); + border-radius: 0px; + + /* Inside auto layout */ + flex: none; + order: 2; + align-self: stretch; + flex-grow: 0; + + + &.website-design, + &.website-design-legacy, + &.data-exploration, + &.review--payment { + background: linear-gradient(84.92deg, #065D6E 2.08%, #06596E 2.09%, #3E3B91 97.43%); + } + + &.find-me-data, + &.problem-statement--data-advisory { + background: linear-gradient(84.92deg, #723390 2.08%, #8C384F 97.43%); + } + + &.website-bug-hunt { + background: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%); + } + + margin-bottom: -35px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + + @include ltelg { + height: 283px; + overflow: hidden; + flex-direction: column; + align-items: flex-start; + padding: 0px; + grid-template-columns: auto; + margin-top: 0 !important; + border-radius: 0 !important; + gap: 0px; + } + + .heroBackgroundContainer { + position: static; + width: 359px; + left: 793px; + top: 0px; + margin: 0px; + + flex: none; + order: 1; + align-self: stretch; + flex-grow: 0; + + border-radius: 0 8px 8px 0; + + @include ltelg { + width: 100%; + height: 156px; + order: 0; + } + + &.website-bug-hunt { + background: url("./images/bug-hunt.png"); + background-size: cover; + + @include ltelg { + background: url("./images/bug-hunt-mobile.png"); + background-size: cover; + background-position: bottom; + } + } + + &.data-exploration { + background: url("./images/data-exploration.png"); + background-size: cover; + + @include ltelg { + background: url("./images/data-exploration-mobile.png"); + background-size: cover; + background-position: bottom; + } + } + + &.find-me-data { + background: url("./images/find-me-data.png"); + background-size: cover; + + @include ltelg { + background: url("./images/find-me-data-mobile.png"); + background-size: cover; + background-position: bottom; + } + } + + &.problem-statement--data-advisory { + background: url("./images/problem-statement.png"); + background-size: cover; + + @include ltelg { + background: url("./images/problem-statement-mobile.png"); + background-size: cover; + background-position: bottom; + } + } + + &.website-design, + &.website-design-legacy { + background: url("./images/website-design-v2.png"); + background-size: cover; + + @include ltelg { + background: url("./images/website-design-banner-mobile.png"); + background-size: cover; + background-position: bottom; + } + } + } + + .heroContent { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 16px 0px; + color: $tc-white; + + position: static; + left: 32px; + top: 0px; + + /* Inside auto layout */ + flex: none; + order: 0; + flex-grow: 1; + margin: 0px 24px; + + @include ltelg { + margin: 0px 16px; + padding: 8px 0px; + } + + .heroHeader { + /* Auto layout */ + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + + position: static; + left: 0px; + top: 0px; + + /* Inside auto layout */ + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + + .heroIconContainer { + /* Auto layout */ + display: flex; + flex-direction: row; + align-items: flex-start; + margin-right: 16px; + + position: static; + width: 40px; + left: 0px; + top: 0px; + } + + .heroHeaderContent { + /* Auto layout */ + display: flex; + flex-direction: column; + align-items: flex-start; + row-gap: 16px; + padding: 0px; + + position: static; + left: 56px; + top: 0px; + + /* Inside auto layout */ + flex: none; + order: 1; + flex-grow: 1; + + font-size: 42px; + font-weight: 400; + + @include ltelg { + flex: auto; + } + + .heroHeaderTitle { + height: 32px; + font-family: 'Barlow Condensed'; + font-style: normal; + font-weight: 600; + font-size: 34px; + line-height: 32px; + text-transform: uppercase; + color: #FFFFFF; + + /* Inside auto layout */ + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + + @include ltelg { + font-size: 28px; + line-height: 32px; + width: 288px; + } + } + + .heroHeaderSubtitle { + height: 24px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; + + /* Inside auto layout */ + flex: none; + order: 1; + align-self: stretch; + flex-grow: 0; + + @include ltelg { + font-size: 14px; + line-height: 20px; + width: 288px; + height: 60px; + } + } + } + } + + .heroText { + position: static; + // height: 96px; + left: 0px; + top: 64px; + max-width: 713px; + + /* desktop/body-large */ + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 32px; + /* or 133% */ + + /* gray/white */ + color: #FFFFFF; + + /* Inside auto layout */ + order: 1; + margin: 16px 0px; + flex: none; + align-self: stretch; + flex-grow: 0; + } + } +} + +.cardContainer { + display: flex; + column-gap: 8px; + justify-content: space-around; + + @include ltelg { + flex-direction: column; + justify-content: flex-start; + align-items: center; + row-gap: 8px; + } + + .card { + /* Auto layout */ + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + row-gap: 8px; + padding: 32px; + + position: static; + min-width: 500px; + max-width: 568px; + height: 172px; + + /* gray/white */ + background: $tc-white; + /* Button hover shadow */ + box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); + border-radius: 8px; + + .title { + font-size: 24px; + } + + .text { + font-size: 16px; + line-height: 28px; + text-align: center; + } + } +} \ No newline at end of file diff --git a/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx b/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx new file mode 100644 index 000000000..a9a98e8c3 --- /dev/null +++ b/src-ts/tools/work/work-type-banner/WorkTypeBanner.tsx @@ -0,0 +1,37 @@ +import { FC } from 'react' + +import styles from './WorkTypeBanner.module.scss' + +interface WorkTypeBannerProps { + subTitle: string, + title: string, + workType: string +} + +export const WorkTypeBanner: FC = (props: WorkTypeBannerProps) => { + + const styleType: string = props.workType + .toLowerCase() + .split(' ') + .join('-') + .split('&') + .join('') + + return ( +
+
+
+
+
+
{props.title}
+
{props.subTitle}
+
+
+
+
+ ) +} + +export default WorkTypeBanner diff --git a/src-ts/tools/work/work-type-banner/images/bug-hunt-mobile.png b/src-ts/tools/work/work-type-banner/images/bug-hunt-mobile.png new file mode 100644 index 000000000..5457c75c5 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/bug-hunt-mobile.png differ diff --git a/src-ts/tools/work/work-type-banner/images/bug-hunt.png b/src-ts/tools/work/work-type-banner/images/bug-hunt.png new file mode 100644 index 000000000..a96a05ef5 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/bug-hunt.png differ diff --git a/src-ts/tools/work/work-type-banner/images/data-exploration-mobile.png b/src-ts/tools/work/work-type-banner/images/data-exploration-mobile.png new file mode 100644 index 000000000..ae3518053 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/data-exploration-mobile.png differ diff --git a/src-ts/tools/work/work-type-banner/images/data-exploration.png b/src-ts/tools/work/work-type-banner/images/data-exploration.png new file mode 100644 index 000000000..57fd079a4 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/data-exploration.png differ diff --git a/src-ts/tools/work/work-type-banner/images/find-me-data-mobile.png b/src-ts/tools/work/work-type-banner/images/find-me-data-mobile.png new file mode 100644 index 000000000..d5b5509fe Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/find-me-data-mobile.png differ diff --git a/src-ts/tools/work/work-type-banner/images/find-me-data.png b/src-ts/tools/work/work-type-banner/images/find-me-data.png new file mode 100644 index 000000000..566741157 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/find-me-data.png differ diff --git a/src-ts/tools/work/work-type-banner/images/problem-statement-mobile.png b/src-ts/tools/work/work-type-banner/images/problem-statement-mobile.png new file mode 100644 index 000000000..a02eafdff Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/problem-statement-mobile.png differ diff --git a/src-ts/tools/work/work-type-banner/images/problem-statement.png b/src-ts/tools/work/work-type-banner/images/problem-statement.png new file mode 100644 index 000000000..afdc507b4 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/problem-statement.png differ diff --git a/src-ts/tools/work/work-type-banner/images/website-design-banner-mobile.png b/src-ts/tools/work/work-type-banner/images/website-design-banner-mobile.png new file mode 100644 index 000000000..917c3fdcf Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/website-design-banner-mobile.png differ diff --git a/src-ts/tools/work/work-type-banner/images/website-design-v2.png b/src-ts/tools/work/work-type-banner/images/website-design-v2.png new file mode 100644 index 000000000..16b4dcf37 Binary files /dev/null and b/src-ts/tools/work/work-type-banner/images/website-design-v2.png differ diff --git a/src-ts/tools/work/work-type-banner/index.ts b/src-ts/tools/work/work-type-banner/index.ts new file mode 100644 index 000000000..0c8dfb0d5 --- /dev/null +++ b/src-ts/tools/work/work-type-banner/index.ts @@ -0,0 +1 @@ +export { default as WorkTypeBanner } from './WorkTypeBanner'