PROD-2435 basic info form header

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;

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

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<WorkTypeBannerProps> = (props: WorkTypeBannerProps) => {
+
+  const styleType: string = props.workType
+    .toLowerCase()
+    .split(' ')
+    .join('-')
+    .split('&')
+    .join('')
+
+  return (
+    <div className={`${styles.heroContainer} ${styles[styleType]}`}>
+      <div
+        className={`${styles.heroBackgroundContainer} ${styles[styleType]}`}
+      ></div>
+      <div className={styles.heroContent}>
+        <div className={styles.heroHeader}>
+          <div className={styles.heroHeaderContent}>
+            <div className={styles.heroHeaderTitle}>{props.title}</div>
+            <div className={styles.heroHeaderSubtitle}>{props.subTitle}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WorkTypeBanner

src-ts/tools/work/work-type-banner/index.ts

@@ -0,0 +1 @@
+export { default as WorkTypeBanner } from './WorkTypeBanner'