diff --git a/src/routes/CreateNewTeam/components/LandingBox/index.jsx b/src/routes/CreateNewTeam/components/LandingBox/index.jsx index afdbeb0c..8cb8cffe 100644 --- a/src/routes/CreateNewTeam/components/LandingBox/index.jsx +++ b/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 &&
OR
}
-
{icon}
-
-

{title}

-

{description}

-
-
- +

{title}

+

{description}

+
-
{icon}
); } @@ -51,6 +48,7 @@ LandingBox.propTypes = { description: PT.string, onClick: PT.func, isDisabled: PT.bool, + showGap: PT.bool, backgroundImage: PT.string, }; diff --git a/src/routes/CreateNewTeam/components/LandingBox/styles.module.scss b/src/routes/CreateNewTeam/components/LandingBox/styles.module.scss index e37cf8e2..2ebda7a4 100644 --- a/src/routes/CreateNewTeam/components/LandingBox/styles.module.scss +++ b/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; } diff --git a/src/routes/CreateNewTeam/pages/CreateTeamLanding/index.jsx b/src/routes/CreateNewTeam/pages/CreateTeamLanding/index.jsx index 8cd612be..cc2f2abb 100644 --- a/src/routes/CreateNewTeam/pages/CreateTeamLanding/index.jsx +++ b/src/routes/CreateNewTeam/pages/CreateTeamLanding/index.jsx @@ -26,32 +26,37 @@ function CreateNewTeam() { return ( - Find your Talent} /> + Let’s find you great talent} />

- 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:

- } - backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)" - onClick={() => goToRoute("/taas/createnewteam/role")} - /> - } - backgroundImage="linear-gradient(221.5deg, #2C95D7 0%, #9D41C9 100%)" - onClick={() => goToRoute("/taas/createnewteam/skills")} - /> - } - backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)" - onClick={() => goToRoute("/taas/createnewteam/jd")} - /> +
+ } + backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)" + onClick={() => goToRoute("/taas/createnewteam/role")} + /> + } + backgroundImage="linear-gradient(221.5deg, #2C95D7 0%, #9D41C9 100%)" + onClick={() => goToRoute("/taas/createnewteam/skills")} + /> + } + backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)" + onClick={() => goToRoute("/taas/createnewteam/jd")} + /> + + +
); } diff --git a/src/routes/CreateNewTeam/pages/CreateTeamLanding/styles.module.scss b/src/routes/CreateNewTeam/pages/CreateTeamLanding/styles.module.scss index e1903c90..a81869ab 100644 --- a/src/routes/CreateNewTeam/pages/CreateTeamLanding/styles.module.scss +++ b/src/routes/CreateNewTeam/pages/CreateTeamLanding/styles.module.scss @@ -1,3 +1,9 @@ .title { font-weight: 500; -} \ No newline at end of file +} + +.landing-box-container { + display: flex; + margin-left: -10px; + margin-right: -10px; +}