Merge pull request #419 from yoution/issue-411

fix: issue #411

Author: nikolay83

src/routes/CreateNewTeam/components/LandingBox/index.jsx

@@ -9,6 +9,7 @@ import "./styles.module.scss";
 import Button from "components/Button";
 
 function LandingBox({
+  showGap,
   icon,
   title,
   description,
@@ -23,24 +24,20 @@ function LandingBox({
         backgroundImage,
       }}
     >
+      {showGap && <div styleName='gap'>OR</div>}
       <div styleName="flex-container">
-        <div styleName="icon-and-text">
           <div styleName="icon">{icon}</div>
-          <div>
-            <h3 styleName="title">{title}</h3>
-            <p>{description}</p>
-          </div>
-        </div>
-        <Button
-          size="large"
-          type="secondary"
-          onClick={onClick}
-          disabled={isDisabled}
-        >
-          Select
-        </Button>
+          <h3 styleName="title">{title}</h3>
+          <p styleName="description">{description}</p>
+          <Button
+            size="large"
+            type="secondary"
+            onClick={onClick}
+            disabled={isDisabled}
+          >
+            Select
+          </Button>
       </div>
-      <div styleName="bg-icon">{icon}</div>
     </div>
   );
 }
@@ -51,6 +48,7 @@ LandingBox.propTypes = {
   description: PT.string,
   onClick: PT.func,
   isDisabled: PT.bool,
+  showGap: PT.bool,
   backgroundImage: PT.string,
 };
 

src/routes/CreateNewTeam/components/LandingBox/styles.module.scss

@@ -2,20 +2,29 @@
 
 .landing-box {
   @include rounded-card;
-  padding: 44px 50px;
+  flex: 1;
   color: #fff;
+  padding-bottom: 30px;
+  height: 324px;
+  margin: 20px 10px;
   position: relative;
-  overflow: hidden;
-  margin-top: 20px;
 }
 
 .flex-container {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  height: 100%;
+  flex-direction: column;
   align-items: center;
-  position: relative;
-  z-index: 10;
+
+  .icon {
+    margin: 30px 0 20px;
+    width: 50px;
+    height: 50px;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
   button {
     border: none;
   }
@@ -29,27 +38,30 @@
   margin-bottom: 10px;
 }
 
-.bg-icon {
-  position: absolute;
-  right: 0;
-  top: 60px;
-  opacity: 10%;
-  svg {
-    width: 144px;
-    height: 144px;
-  }
+.description {
+  flex:1;
+  white-space: pre-line;
+  font-size: 16px;
+  line-height: 26px;
+  width: 268px;
+  text-align: center;
 }
 
-.icon-and-text {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: stretch;
-  margin-right: 40px;
-}
 
-.icon {
-  width: 72px;
-  height: 72px;
-  margin-right: 40px;
+.gap {
+  font-family: Roboto;
+  position: absolute;
+  background-color: #D4D4D4;
+  border: 3px solid #F4F5F6;
+  border-radius: 100%;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+  box-sizing: content-box;
+  color: #7F7F7F;
+  font-size: 16px;
+  text-align: center;
+  right: -32.5px;
+  z-index: 2;
+  top: 130px;
 }

src/routes/CreateNewTeam/pages/CreateTeamLanding/index.jsx

@@ -26,32 +26,37 @@ function CreateNewTeam() {
 
   return (
     <Page title="Find your Talent">
-      <PageHeader title={<div styleName="title">Find your Talent</div>} />
+      <PageHeader title={<div styleName="title">Let’s find you great talent</div>} />
       <p>
-        Please select how you'd like to search the Topcoder community for a
-        perfect match.
+        You can search for your perfect talent matches in 3 unique ways:
       </p>
-      <LandingBox
-        title="Choose a Role"
-        description="Select from a list of pre-defined roles which Topcoder develops talent for. Standardized Job Descriptions and baseline skills are available for review."
-        icon={<IconMultipleActionsCheck />}
-        backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)"
-        onClick={() => goToRoute("/taas/createnewteam/role")}
-      />
-      <LandingBox
-        title="Input Skills"
-        description="Select one or more technical skills you need. Topcoder will match your requirements to our talent."
-        icon={<IconListQuill />}
-        backgroundImage="linear-gradient(221.5deg, #2C95D7 0%, #9D41C9 100%)"
-        onClick={() => goToRoute("/taas/createnewteam/skills")}
-      />
-      <LandingBox
-        title="Input Job Description"
-        description="Input a Job Description and Topcoder will extract the required skills from it, then find the best matching talent for the job duties."
-        icon={<IconOfficeFileText />}
-        backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)"
-        onClick={() => goToRoute("/taas/createnewteam/jd")}
-      />
+      <div styleName="landing-box-container">
+        <LandingBox
+          showGap 
+          title="Search by Role"
+          description={"Examples:\n Search “Front-End Developer”\n or “UI Designer”"}
+          icon={<IconMultipleActionsCheck />}
+          backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)"
+          onClick={() => goToRoute("/taas/createnewteam/role")}
+        />
+        <LandingBox
+          showGap 
+          title="Search by Skills"
+          description={"Examples: \nJava, Python, React, Sketch"}
+          icon={<IconListQuill />}
+          backgroundImage="linear-gradient(221.5deg, #2C95D7 0%, #9D41C9 100%)"
+          onClick={() => goToRoute("/taas/createnewteam/skills")}
+        />
+        <LandingBox
+          title="Describe the Work"
+          description={"Provide a short description of talent\n you want or project work you’re \nlooking to do"}
+          icon={<IconOfficeFileText />}
+          backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)"
+          onClick={() => goToRoute("/taas/createnewteam/jd")}
+        />
+
+
+      </div>
     </Page>
   );
 }

src/routes/CreateNewTeam/pages/CreateTeamLanding/styles.module.scss

@@ -1,3 +1,9 @@
 .title {
   font-weight: 500;
-}
+}
+
+.landing-box-container {
+  display: flex;
+  margin-left: -10px;
+  margin-right: -10px;
+}