diff --git a/src/assets/images/leaders/avadhoot-bhayte@2x.jpeg b/src/assets/images/leaders/avadhoot-bhayte@2x.jpeg new file mode 100644 index 00000000..36443519 Binary files /dev/null and b/src/assets/images/leaders/avadhoot-bhayte@2x.jpeg differ diff --git a/src/assets/images/leaders/gautam-rege@2x.jpeg b/src/assets/images/leaders/gautam-rege@2x.jpeg new file mode 100644 index 00000000..ad57d5a6 Binary files /dev/null and b/src/assets/images/leaders/gautam-rege@2x.jpeg differ diff --git a/src/assets/images/leaders/maragatha-sundari@2x.jpeg b/src/assets/images/leaders/maragatha-sundari@2x.jpeg new file mode 100644 index 00000000..6ee49caf Binary files /dev/null and b/src/assets/images/leaders/maragatha-sundari@2x.jpeg differ diff --git a/src/assets/images/leaders/sachin-shintre@2x.jpeg b/src/assets/images/leaders/sachin-shintre@2x.jpeg new file mode 100644 index 00000000..67fe901d Binary files /dev/null and b/src/assets/images/leaders/sachin-shintre@2x.jpeg differ diff --git a/src/assets/images/leaders/sameer-tilak@2x.jpeg b/src/assets/images/leaders/sameer-tilak@2x.jpeg new file mode 100644 index 00000000..1c7ac4b9 Binary files /dev/null and b/src/assets/images/leaders/sameer-tilak@2x.jpeg differ diff --git a/src/assets/images/leaders/satish-talim@2x.jpeg b/src/assets/images/leaders/satish-talim@2x.jpeg new file mode 100644 index 00000000..016c43d6 Binary files /dev/null and b/src/assets/images/leaders/satish-talim@2x.jpeg differ diff --git a/src/assets/images/leaders/sethu@2x.jpeg b/src/assets/images/leaders/sethu@2x.jpeg new file mode 100644 index 00000000..70281f09 Binary files /dev/null and b/src/assets/images/leaders/sethu@2x.jpeg differ diff --git a/src/assets/images/leaders/shailesh-kalekar@2x.jpeg b/src/assets/images/leaders/shailesh-kalekar@2x.jpeg new file mode 100644 index 00000000..a5e9bd18 Binary files /dev/null and b/src/assets/images/leaders/shailesh-kalekar@2x.jpeg differ diff --git a/src/assets/images/leaders/vabhaivi-rege@2x.jpeg b/src/assets/images/leaders/vabhaivi-rege@2x.jpeg new file mode 100644 index 00000000..49a362a3 Binary files /dev/null and b/src/assets/images/leaders/vabhaivi-rege@2x.jpeg differ diff --git a/src/assets/images/quotes@2x.png b/src/assets/images/quotes@2x.png new file mode 100644 index 00000000..954544db Binary files /dev/null and b/src/assets/images/quotes@2x.png differ diff --git a/src/assets/images/revampImages/innovations-bg@2x.png b/src/assets/images/revampImages/innovations-bg@2x.png new file mode 100644 index 00000000..312bc158 Binary files /dev/null and b/src/assets/images/revampImages/innovations-bg@2x.png differ diff --git a/src/assets/images/revampImages/success-story@2x.png b/src/assets/images/revampImages/success-story@2x.png new file mode 100644 index 00000000..cf117592 Binary files /dev/null and b/src/assets/images/revampImages/success-story@2x.png differ diff --git a/src/assets/stylesheets/_shared.scss b/src/assets/stylesheets/_shared.scss index 68d3263f..c5d57eaa 100644 --- a/src/assets/stylesheets/_shared.scss +++ b/src/assets/stylesheets/_shared.scss @@ -340,7 +340,10 @@ img { /* shared end */ .link-item-wrap { - padding: rem(40px) 0 rem(80px); + padding: 3rem 0; + @include media-breakpoint-up(lg) { + padding: 5rem 0; + } .link-item-list { flex-direction: column; @@ -354,21 +357,21 @@ img { transform: translateY(-50%); background-color: #e86055; width: 100%; - height: rem(4px); + height: 0.25rem; } } } .link-item { - padding: 0 rem(24px); + padding: 0 1.5rem; z-index: 9999; > a { - border-radius: 12px; - max-width: rem(329px); - width: rem(329px); - font-size: rem(20px); - line-height: rem(24px); + max-width: 17.75rem; + width: 17.75rem; + border-radius: 0.75rem; + font-size: 1.25rem; + line-height: 1.5rem; color: $white; font-weight: 600; background-size: cover !important; @@ -376,30 +379,24 @@ img { padding: 40px 24px; @include media-breakpoint-up(lg) { - font-size: rem(31px); - line-height: rem(36px); + font-size: 1.9375rem; + line-height: 2.25rem; + max-width: 20.5625rem; + width: 20.5625rem; } &:focus-visible { outline-offset: unset; outline: none; } - - &.-leadership { - background: url("../images/revampImages/leadership-bg.png") no-repeat; - } - - &.-contact-us { - background: url("../images/revampImages/contact-us-bg.png") no-repeat; - } } .arrow-img { - width: rem(25px); + width: 1.5625rem; } &:not(:first-child) { - margin-top: rem(24px); + margin-top: 1.5rem; @include media-breakpoint-up(lg) { margin-top: 0; diff --git a/src/assets/stylesheets/_variables.scss b/src/assets/stylesheets/_variables.scss index f1da7f3b..7bc001d7 100644 --- a/src/assets/stylesheets/_variables.scss +++ b/src/assets/stylesheets/_variables.scss @@ -21,6 +21,7 @@ $assets_url: "../"; //$gray-900: #212529 !default; //$black: #000 !default; $gray-10: #1a1a1a; // black 90% +$gray-11: #1c1c1c; $gray-20: #333333; // black 80% $gray-40: #666666; $gray-44: #707070; @@ -29,7 +30,8 @@ $gray-60: #999999; // black 40% $gray-68: #adadad; // black 32% $gray-94: #efefef; // black 6% $gray-95: #f2f2f2; // black 5% -$gray-96: #f4f4f4; // black 4% +$gray-96: #f4f4f4; +$north-gray: #697579; // black 4% //$grays: () !default; //$grays: map-merge(( diff --git a/src/components/team/index.js b/src/components/team/index.js index f4b8cb23..5929b274 100644 --- a/src/components/team/index.js +++ b/src/components/team/index.js @@ -1,76 +1,362 @@ -import React, { Fragment, useState, useEffect } from "react"; -import { Link } from "react-router-dom"; +import React, { Fragment } from "react"; +import IconWithLink from "../shared/iconWithLink"; +import quotesImg from "../../assets/images/quotes@2x.png"; +import gautumRege from "../../assets/images/leaders/gautam-rege@2x.jpeg"; +import sethu from "../../assets/images/leaders/sethu@2x.jpeg"; +import vaibhaviRege from "../../assets/images/leaders/vabhaivi-rege@2x.jpeg"; +import maragatha from "../../assets/images/leaders/maragatha-sundari@2x.jpeg"; +import sameerTilak from "../../assets/images/leaders/sameer-tilak@2x.jpeg"; +import avadhootBhayte from "../../assets/images/leaders/avadhoot-bhayte@2x.jpeg"; +import satishTalim from "../../assets/images/leaders/satish-talim@2x.jpeg"; +import sachinShintre from "../../assets/images/leaders/sachin-shintre@2x.jpeg"; +import shaileshKalekar from "../../assets/images/leaders/shailesh-kalekar@2x.jpeg"; +import * as routes from "../../routeConstants.js"; +import "./team.scss"; +import AboutUsCard from "../../shared-components/aboutUsCard/aboutUsCard"; +import CtaButton from "../../shared-components/ctaButton/ctaButton"; -import * as routeConstants from "../../routeConstants"; -import JoshLeaderProfiles from "./joshLeaderProfiles"; -import JoshNerdProfiles from "./joshNerdProfiles"; -import { API_BASE_URL, API_PUBLIC_URL } from "../../globalConstants"; +const OurTeam = (props) => { + const linkListItem = [ + { + linkTitle: "Contact Us", + link: routes.CONTACT_US_URL, + linkClassName: "-contact-us", + }, + { + linkTitle: "Success Stories", + link: routes.SUCCESS_STORIES_URL, + linkClassName: "-success-story", + }, + ]; -const GITHUB_BASE_URL = "https://github.com/"; -// const JOSH_CAREER_URL = "http://careers.joshsoftware.com/"; - -const OurTeam = props => { - const [members, setMembers] = useState([]), - [leaders, setLeaders] = useState([]), - [loading, setLoading] = useState(true); - - useEffect(() => { - async function fetchData() { - fetch(`${API_BASE_URL}team`, { - method: "get", - headers: { "Content-Type": "application/json" } - }) - .then(res => res.json()) - .then(res => { - setMembers(res.members); - setLeaders(res.leaders); - setLoading(false); - }); - } - fetchData(); - }, []); - - if (loading) { - return null; - } else { - return ( - - {/*
-
-
-
*/} - {/*
*/} - - {/** JOSH LEADERS */} - - - {/** JOSH NERDS */} -
-
- + return ( + +
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Gautam Rege
+ +
+
+ + +
+
+
+
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Sethupathi Asokan
+ +
+
+ + +
+
+
+ profile img +
+
+
+
+
+

Leadership

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed + do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit + amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut laboreLorem ipsum dolor sit amet, consectetur + adipisicing elit, sed do eiusmod tempor incididunt ut labore + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed + do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit + amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore Lorem ipsum dolor sit amet, consectetur + adipisicing elit, sed do eiusmod tempor incididunt ut + laboreLorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt. +

+
+
+
- {/** Navigations */} -
- - About Us - - {/* - Career - */} +
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Vaibhavi Rege
+ +
+
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Maragatha Sundari
+ +
+
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Sameer Tilak
+ +
+
+ + +
+
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Sachin Shintre
+ +
+
+ + +
+
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Satish Talim
+ +
+
+ +
+
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Avadhoot Bhatye
+ +
+
+
+
+
+
+
+ profile img +
+
+
+ quotes img +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusm.adipisicing elit, sed do eiusm. +

+
Shailesh Kalekar
+ +
+
+ +
+
+
+
+
+
-
- - ); - } +
+ +
+ + ); }; export default OurTeam; diff --git a/src/components/team/team.css b/src/components/team/team.css index e69de29b..1656170b 100644 --- a/src/components/team/team.css +++ b/src/components/team/team.css @@ -0,0 +1,229 @@ +/* variables */ +/* variables end */ +/* mixins */ +/* rem unit mixin */ +/* flex Sass mixin */ +/* mixins end */ +.josh-leadership-wrapper { + padding: 2rem 0 0; } + +.leadership-row { + display: grid; + grid-template-columns: 1fr; + gap: 0.5rem; + margin: 0 1rem; } + @media (min-width: 768px) { + .leadership-row { + grid-template-columns: repeat(1, 434px); } } + @media (min-width: 992px) { + .leadership-row { + grid-template-columns: repeat(2, 434px); + gap: 0.75rem; + margin: 0; } } + .leadership-row:not(:first-child) { + margin-top: 0.5rem; } + @media (min-width: 992px) { + .leadership-row:not(:first-child) { + margin-top: 0.75rem; } } + +.leadership-item .leadership-item-card { + height: 12.1875rem; } + @media (min-width: 768px) { + .leadership-item .leadership-item-card { + height: unset; } } + +.leadership-item .leader-profile-wrap img { + height: 100%; } + +.leadership-item .leader-profile-wrap, +.leadership-item .leader-info { + flex: 0 0 50%; } + +.leadership-item .leader-info { + padding: 0.75rem; } + .leadership-item .leader-info .quotes-img { + width: 1.5rem; + height: 1.25rem; } + .leadership-item .leader-info p, + .leadership-item .leader-info h5, + .leadership-item .leader-info label { + color: #fff; } + .leadership-item .leader-info p { + font-size: 0.875rem; + line-height: 1.1875rem; + margin-bottom: 0.5rem; } + @media (min-width: 992px) { + .leadership-item .leader-info p { + font-size: 0.875rem; + margin-bottom: 1rem; } } + .leadership-item .leader-info h5, + .leadership-item .leader-info label { + font-size: 0.6875rem; + line-height: 0.9375rem; } + @media (min-width: 992px) { + .leadership-item .leader-info h5, + .leadership-item .leader-info label { + font-size: 0.875rem; + line-height: 1.1875rem; } } + .leadership-item .leader-info::before { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + left: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-right: 0.625rem solid #697579; } + .leadership-item .leader-info.-light-grey { + background-color: #697579; } + .leadership-item .leader-info.-light-grey::before { + border-right: 0.625rem solid #697579; } + .leadership-item .leader-info.-dark-blue { + background-color: #5886b2; } + .leadership-item .leader-info.-dark-blue::before { + border-right: 0.625rem solid #5886b2; } + .leadership-item .leader-info.-dark-blue::after { + border-left: 0.625rem solid #5886b2; } + .leadership-item .leader-info.-light-blue { + background-color: #77a9d9; } + .leadership-item .leader-info.-light-blue::before { + border-right: 0.625rem solid #77a9d9; } + .leadership-item .leader-info.-light-blue::after { + border-left: 0.625rem solid #77a9d9; } + .leadership-item .leader-info.-dark-grey { + background-color: #575353; } + .leadership-item .leader-info.-dark-grey::before { + border-right: 0.625rem solid #575353; } + .leadership-item .leader-info.-dark-grey::after { + border-left: 0.625rem solid #575353; } + +.leadership-item.founders-col { + order: 2; } + @media (min-width: 992px) { + .leadership-item.founders-col { + order: unset; } } + +.leadership-item:nth-child(even) .leadership-item-card { + flex-direction: row-reverse; } + +.leadership-item:nth-child(even) .leader-info::before { + content: unset; } + +.leadership-item:nth-child(even) .leader-info::after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + right: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-left: 0.625rem solid #697579; } + +.leadership-item:nth-child(even) .leader-info.-light-blue::after { + border-left: 0.625rem solid #77a9d9; } + +@media (min-width: 992px) { + .leadership-item:nth-child(even) .leadership-item-card { + flex-direction: unset; } + .leadership-item:nth-child(even) .leader-info::after { + content: unset; } + .leadership-item:nth-child(even) .leader-info::before { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + left: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-right: 0.625rem solid #697579; } + .leadership-item:nth-child(even) .leader-info.-light-blue::before { + border-right: 0.625rem solid #77a9d9; } } + +.leadership-row.-founders-row .leadership-item-card:last-child { + margin-top: 0.5rem; } + @media (min-width: 992px) { + .leadership-row.-founders-row .leadership-item-card:last-child { + margin-top: 0.75rem; } } + .leadership-row.-founders-row .leadership-item-card:last-child .leader-info::before { + content: unset; } + .leadership-row.-founders-row .leadership-item-card:last-child .leader-info::after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + right: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-left: 0.625rem solid #5886b2; } + +@media (min-width: 992px) { + .leadership-row.-leaders-row .leadership-item:nth-child(4n + 3) .leadership-item-card, .leadership-row.-leaders-row .leadership-item:nth-child(4n + 4) .leadership-item-card { + flex-direction: row-reverse; } + .leadership-row.-leaders-row .leadership-item:nth-child(4n + 3) .leadership-item-card .leader-info::before, .leadership-row.-leaders-row .leadership-item:nth-child(4n + 4) .leadership-item-card .leader-info::before { + content: unset; } + .leadership-row.-leaders-row .leadership-item:nth-child(4n + 3) .leadership-item-card .leader-info::after, .leadership-row.-leaders-row .leadership-item:nth-child(4n + 4) .leadership-item-card .leader-info::after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + right: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-left: 0.625rem solid #697579; } + .leadership-row.-leaders-row .leadership-item:nth-child(4n + 3) .leadership-item-card .leader-info.-light-blue::after, .leadership-row.-leaders-row .leadership-item:nth-child(4n + 4) .leadership-item-card .leader-info.-light-blue::after { + border-left: 0.625rem solid #77a9d9; } + .leadership-row.-leaders-row .leadership-item:nth-child(4n + 3) .leadership-item-card .leader-info.-dark-grey::after, .leadership-row.-leaders-row .leadership-item:nth-child(4n + 4) .leadership-item-card .leader-info.-dark-grey::after { + border-left: 0.625rem solid #575353; } } + +.professional-platforms a { + background-color: #fff; + border-radius: 0.25rem; + padding: 0.125rem 0.25rem; } + .professional-platforms a i { + color: #697579; + font-size: 1rem; } + .professional-platforms a:not(:first-child) { + margin-left: 0.5rem; } + .professional-platforms a:hover { + text-decoration: none; } + +.leadership-description { + margin-bottom: 1rem; + padding: 0 1rem; } + @media (min-width: 992px) { + .leadership-description { + margin-bottom: 0; + padding: 0 2rem; } } + .leadership-description h1 { + text-align: center; + font-size: 2.25rem; + line-height: 2.625rem; + color: #1c1c1c; + margin-bottom: 1.5rem; } + @media (min-width: 992px) { + .leadership-description h1 { + font-size: 3.125rem; + line-height: 3.6875rem; + text-align: left; } } + .leadership-description p { + font-size: 1rem; + line-height: 1.375rem; + color: #1c1c1c; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + text-align: justify; } + @media (min-width: 992px) { + .leadership-description p { + display: block; } } diff --git a/src/components/team/team.scss b/src/components/team/team.scss index 8b137891..365bd6f1 100644 --- a/src/components/team/team.scss +++ b/src/components/team/team.scss @@ -1 +1,337 @@ +@import "../../assets/stylesheets/core"; +.josh-leadership-wrapper { + padding: 2rem 0 0; +} + +.leadership-row { + display: grid; + grid-template-columns: 1fr; + gap: 0.5rem; + margin: 0 1rem; + + @include media-breakpoint-up(md) { + grid-template-columns: repeat(1, 434px); + } + + @include media-breakpoint-up(lg) { + grid-template-columns: repeat(2, 434px); + gap: 0.75rem; + margin: 0; + } + + &:not(:first-child) { + margin-top: 0.5rem; + @include media-breakpoint-up(lg) { + margin-top: 0.75rem; + } + } +} + +.leadership-item { + .leadership-item-card { + height: 12.1875rem; + + @include media-breakpoint-up(md) { + height: unset; + } + } + .leader-profile-wrap { + img { + height: 100%; + } + } + .leader-profile-wrap, + .leader-info { + flex: 0 0 50%; + } + + .leader-info { + padding: 0.75rem; + .quotes-img { + width: 1.5rem; + height: 1.25rem; + } + + p, + h5, + label { + color: $white; + } + + p { + font-size: 0.875rem; + line-height: 1.1875rem; + margin-bottom: 0.5rem; + + @include media-breakpoint-up(lg) { + font-size: 0.875rem; + margin-bottom: 1rem; + } + } + + h5, + label { + font-size: 0.6875rem; + line-height: 0.9375rem; + + @include media-breakpoint-up(lg) { + font-size: 0.875rem; + line-height: 1.1875rem; + } + } + + &::before { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + left: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-right: 0.625rem solid $north-gray; + } + + &.-light-grey { + background-color: $north-gray; + &::before { + border-right: 0.625rem solid $north-gray; + } + } + + &.-dark-blue { + background-color: $blue-smart; + &::before { + border-right: 0.625rem solid $blue-smart; + } + + &::after { + border-left: 0.625rem solid $blue-smart; + } + } + &.-light-blue { + background-color: $jordy-blue; + &::before { + border-right: 0.625rem solid $jordy-blue; + } + &::after { + border-left: 0.625rem solid $jordy-blue; + } + } + + &.-dark-grey { + background-color: $mortor; + &::before { + border-right: 0.625rem solid $mortor; + } + &::after { + border-left: 0.625rem solid $mortor; + } + } + } + + &.founders-col { + order: 2; + + @include media-breakpoint-up(lg) { + order: unset; + } + } + + &:nth-child(even) { + .leadership-item-card { + flex-direction: row-reverse; + } + .leader-info { + &::before { + content: unset; + } + + &::after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + right: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-left: 0.625rem solid $north-gray; + } + + &.-light-blue { + &::after { + border-left: 0.625rem solid $jordy-blue; + } + } + } + + @include media-breakpoint-up(lg) { + .leadership-item-card { + flex-direction: unset; + } + .leader-info { + &::after { + content: unset; + } + + &::before { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + left: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-right: 0.625rem solid $north-gray; + } + + &.-light-blue { + &::before { + border-right: 0.625rem solid $jordy-blue; + } + } + } + } + } +} + +.leadership-row { + &.-founders-row { + .leadership-item-card { + &:last-child { + margin-top: 0.5rem; + + @include media-breakpoint-up(lg) { + margin-top: 0.75rem; + } + + .leader-info { + &::before { + content: unset; + } + + &::after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + right: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-left: 0.625rem solid $blue-smart; + } + } + } + } + } + + &.-leaders-row { + .leadership-item { + &:nth-child(4n + 3), + &:nth-child(4n + 4) { + .leadership-item-card { + @include media-breakpoint-up(lg) { + flex-direction: row-reverse; + + .leader-info { + &::before { + content: unset; + } + + &::after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + top: 0.75rem; + right: -0.5625rem; + border-top: 0.625rem solid transparent; + border-bottom: 0.625rem solid transparent; + border-left: 0.625rem solid $north-gray; + } + + &.-light-blue { + &::after { + border-left: 0.625rem solid $jordy-blue; + } + } + + &.-dark-grey { + &::after { + border-left: 0.625rem solid $mortor; + } + } + } + } + } + } + } + } +} + +.professional-platforms { + a { + background-color: $white; + border-radius: 0.25rem; + padding: 0.125rem 0.25rem; + + i { + color: $north-gray; + font-size: 1rem; + } + + &:not(:first-child) { + margin-left: 0.5rem; + } + + &:hover { + text-decoration: none; + } + } +} + +.leadership-description { + margin-bottom: 1rem; + padding: 0 1rem; + @include media-breakpoint-up(lg) { + margin-bottom: 0; + padding: 0 2rem; + } + h1 { + text-align: center; + font-size: 2.25rem; + line-height: 2.625rem; + color: $gray-11; + margin-bottom: 1.5rem; + + @include media-breakpoint-up(lg) { + font-size: 3.125rem; + line-height: 3.6875rem; + text-align: left; + } + } + + p { + font-size: 1rem; + line-height: 1.375rem; + color: $gray-11; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + text-align: justify; + + @include media-breakpoint-up(lg) { + display: block; + } + } +} diff --git a/src/shared-components/aboutUsCard/aboutUsCard.css b/src/shared-components/aboutUsCard/aboutUsCard.css new file mode 100644 index 00000000..fd6eeafe --- /dev/null +++ b/src/shared-components/aboutUsCard/aboutUsCard.css @@ -0,0 +1,30 @@ +/* variables */ +/* variables end */ +/* mixins */ +/* rem unit mixin */ +/* flex Sass mixin */ +/* mixins end */ +.about-us-box { + background-color: #575353; + padding: 1rem; } + @media (min-width: 992px) { + .about-us-box { + height: 13.75rem; + padding: 0.5rem 2rem; } } + .about-us-box h6, + .about-us-box p { + color: #fff; } + .about-us-box h6 { + font-size: 1.3125rem; + line-height: 2.3125rem; } + .about-us-box p { + font-size: 1rem; + line-height: 1.375rem; } + @media (min-width: 992px) { + .about-us-box p { + font-size: 0.75rem; + line-height: 1.125rem; } } + @media (min-width: 992px) { + .about-us-box .btn.link-btn { + font-size: 0.625rem; + line-height: 0.6875rem; } } diff --git a/src/shared-components/aboutUsCard/aboutUsCard.js b/src/shared-components/aboutUsCard/aboutUsCard.js new file mode 100644 index 00000000..26470f88 --- /dev/null +++ b/src/shared-components/aboutUsCard/aboutUsCard.js @@ -0,0 +1,30 @@ +import React from "react"; +import LinkButton from "../linkButton/linkButton"; +import { useHistory } from "react-router-dom"; +import "./aboutUsCard.css"; + +const AboutUsCard = (props) => { + let history = useHistory(); + + function handleClick() { + history.push("/about-us"); + } + return ( + <> +
+
About Us
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, + consectetur adipisicing elit, sed do eiusmod tempor incididunt ut + laboreLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, + consectetur adipisicing elit, sed do eiusmod tempor +

+ +
+ + ); +}; + +export default AboutUsCard; diff --git a/src/shared-components/aboutUsCard/aboutUsCard.scss b/src/shared-components/aboutUsCard/aboutUsCard.scss new file mode 100644 index 00000000..95237c16 --- /dev/null +++ b/src/shared-components/aboutUsCard/aboutUsCard.scss @@ -0,0 +1,35 @@ +@import "../../assets/stylesheets/core"; + +.about-us-box { + background-color: $mortor; + padding: 1rem; + @include media-breakpoint-up(lg) { + height: 13.75rem; + padding: 0.5rem 2rem; + } + + h6, + p { + color: $white; + } + h6 { + font-size: 1.3125rem; + line-height: 2.3125rem; + } + + p { + font-size: 1rem; + line-height: 1.375rem; + @include media-breakpoint-up(lg) { + font-size: 0.75rem; + line-height: 1.125rem; + } + } + + .btn.link-btn { + @include media-breakpoint-up(lg) { + font-size: 0.625rem; + line-height: 0.6875rem; + } + } +} diff --git a/src/shared-components/ctaButton/ctaButton.css b/src/shared-components/ctaButton/ctaButton.css new file mode 100644 index 00000000..88653c12 --- /dev/null +++ b/src/shared-components/ctaButton/ctaButton.css @@ -0,0 +1,6 @@ +/* variables */ +/* variables end */ +/* mixins */ +/* rem unit mixin */ +/* flex Sass mixin */ +/* mixins end */ diff --git a/src/shared-components/ctaButton/ctaButton.js b/src/shared-components/ctaButton/ctaButton.js new file mode 100644 index 00000000..d7c81520 --- /dev/null +++ b/src/shared-components/ctaButton/ctaButton.js @@ -0,0 +1,22 @@ +import React from "react"; +import CtaButtonItem from "../ctaButtonItem/ctaButtonItem"; +// import CtaButtonItem from ".."; +import "./ctaButton.css"; + +const CtaButton = ({ linkListItem }) => { + return ( +
+
    + {linkListItem.map((linkItem, index) => ( + + ))} +
+
+ ); +}; + +export default CtaButton; diff --git a/src/shared-components/ctaButton/ctaButton.scss b/src/shared-components/ctaButton/ctaButton.scss new file mode 100644 index 00000000..d8b313cd --- /dev/null +++ b/src/shared-components/ctaButton/ctaButton.scss @@ -0,0 +1 @@ +@import "../../assets/stylesheets/core"; diff --git a/src/shared-components/ctaButtonItem/ctaButtonItem.css b/src/shared-components/ctaButtonItem/ctaButtonItem.css new file mode 100644 index 00000000..cf5f3b2a --- /dev/null +++ b/src/shared-components/ctaButtonItem/ctaButtonItem.css @@ -0,0 +1,17 @@ +/* variables */ +/* variables end */ +/* mixins */ +/* rem unit mixin */ +/* flex Sass mixin */ +/* mixins end */ +.link-item-wrap .link-item > a.-leadership { + background: url("../../assets/images/revampImages/leadership-bg.png") no-repeat; } + +.link-item-wrap .link-item > a.-success-story { + background: url("../../assets/images/revampImages/success-story@2x.png") no-repeat; } + +.link-item-wrap .link-item > a.-innovation { + background: url("../../assets/images/revampImages/innovations-bg@2x.png") no-repeat; } + +.link-item-wrap .link-item > a.-contact-us { + background: url("../../assets/images/revampImages/contact-us-bg.png"); } diff --git a/src/shared-components/ctaButtonItem/ctaButtonItem.js b/src/shared-components/ctaButtonItem/ctaButtonItem.js new file mode 100644 index 00000000..f84ba4dc --- /dev/null +++ b/src/shared-components/ctaButtonItem/ctaButtonItem.js @@ -0,0 +1,40 @@ +import React from "react"; +import "./ctaButtonItem.css"; +import PropTypes from "prop-types"; +import arrowImg from "../../assets/images/revampImages/next-arrow.png"; + +const CtaButtonItem = ({ linkTitle, link, linkClassName }) => { + return ( + <> +
  • + + {linkTitle} + arrow icon + +
    • + {/* {contactus && ( +
  • + + {linkTitle} + arrow icon + +
    • + )} */} + + ); +}; + +CtaButtonItem.prototype = { + link: PropTypes.string, + leadership: PropTypes.string, + contactus: PropTypes.string, + linkClassName: PropTypes.string, +}; + +export default CtaButtonItem; diff --git a/src/shared-components/ctaButtonItem/ctaButtonItem.scss b/src/shared-components/ctaButtonItem/ctaButtonItem.scss new file mode 100644 index 00000000..3471dece --- /dev/null +++ b/src/shared-components/ctaButtonItem/ctaButtonItem.scss @@ -0,0 +1,25 @@ +@import "../../assets/stylesheets/core"; + +.link-item-wrap { + .link-item { + > a { + &.-leadership { + background: url("../../assets/images/revampImages/leadership-bg.png") + no-repeat; + } + &.-success-story { + background: url("../../assets/images/revampImages/success-story@2x.png") + no-repeat; + } + + &.-innovation { + background: url("../../assets/images/revampImages/innovations-bg@2x.png") + no-repeat; + } + + &.-contact-us { + background: url("../../assets/images/revampImages/contact-us-bg.png"); + } + } + } +} diff --git a/src/shared-components/linkButton/linkButton.js b/src/shared-components/linkButton/linkButton.js index 081f1019..856e1db3 100644 --- a/src/shared-components/linkButton/linkButton.js +++ b/src/shared-components/linkButton/linkButton.js @@ -2,12 +2,13 @@ import React from "react"; import { Button } from "reactstrap"; import "./linkButton.css"; -const LinkButton = ({ className, buttonText, link, icon }) => { +const LinkButton = ({ className, buttonText, onClick }) => { return ( <>