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}
-
-
-
- Select
-
+
{title}
+
{description}
+
+ Select
+
- {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;
+}