Adding ODC page

.env

@@ -1,2 +1,3 @@
+SKIP_PREFLIGHT_CHECK=true
 REACT_APP_ENV = ''
 REACT_APP_PLAGROUND = 'Karthik'

src/components/molecules/Logo.jsx

@@ -15,7 +15,7 @@ export const LogoHeadingWrapper = styled.h1`
 `;
 
 export const LinkWrapper = styled.a`
-  float: left:
+  float: left;
   width: 100%;
   height: 100%;
 `;

src/components/molecules/OffshoreBnrBtm.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import { Image } from '../atoms';
+import SetupIcon from '../../assets/images/setupIcon.png';
+import longTermIcon from '../../assets/images/longtermIcon.png';
+import FocusIcon from '../../assets/images/focusIcon.png';
+
+export const Uxgbnrbtn = styled.div`
+  position: absolute;
+  display: flex;
+  margin-top: 480px; 
+  justify-content: space-between;
+
+  @media (max-width: 768px){
+      display: grid; 
+  }
+`;
+
+export const UxgbnrTerms = styled.div`
+  display: flex;
+  margin-left: 100px;
+  margin-top: 30px;
+
+  @media (max-width: 768px) {
+    display: grid;
+  }
+`;
+
+export const UxgTermList = styled.div`
+  display: flex;
+  margin: 30px;
+
+  @media (max-width: 768px) {
+    display: grid;
+    font-size: 15px;
+  }
+`;
+
+export const OffshoreHead = styled.h3`
+  display: flex;
+  font-size: 25px;
+  margin-left: 15px;
+
+  @media (max-width: 768px) {
+    display: grid;
+    font-size: 15px;
+    flex-direction: column; 
+  }
+`;
+
+export const OffshoreInfo = styled.p`
+  font-size: 15px;
+  letter-spacing: 0.5px;
+  margin-top: 35px;
+  margin-left: 60px;
+  line-height: 18px;
+  position: absolute;
+  width: 25%;
+
+  @media (max-width: 768px) {
+    display: grid;
+    font-size: 15px;
+    margin-top: 10px;
+    margin-left: 12px;
+    flex-direction: column;
+    width: 70%;
+    position: relative;
+  }
+`;
+
+
+
+
+
+export const Offshorebnrbtm = (props) => {
+    return (
+      <Uxgbnrbtn>
+        <UxgbnrTerms>
+          <UxgTermList>
+            <Image mobilesrcfile={longTermIcon} />
+            <OffshoreHead>Long Term Engagement</OffshoreHead>
+            <OffshoreInfo>
+              Offshore Developement center are very useful while looking for long term
+            </OffshoreInfo>
+          </UxgTermList>
+
+          <UxgTermList>
+            <Image mobilesrcfile={FocusIcon} />
+            <OffshoreHead>Focus on your Engagement</OffshoreHead>
+            <OffshoreInfo>
+              Remote you will be able to focus more on the project itself & make your business
+              flourish
+            </OffshoreInfo>
+          </UxgTermList>
+
+          <UxgTermList>
+            <Image mobilesrcfile={SetupIcon} />
+            <OffshoreHead>Get your set-upped center</OffshoreHead>
+            <OffshoreInfo>
+              We offer dedicated offshore development teams, infrastructure based on the development
+            </OffshoreInfo>
+          </UxgTermList>
+        </UxgbnrTerms>
+      </Uxgbnrbtn>
+    );
+}
+
+Offshorebnrbtm.defaultProps={};

src/components/molecules/RedefiningOdc.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+export const RedefiningOdc = () => {
+
+}

src/components/molecules/index.js

@@ -2,3 +2,5 @@ export { default as ListFooter } from './ListFooter';
 export { Logo } from './Logo';
 export { default as RightHeader } from './RightHeader';
 export { default as Main } from './Main';
+export {Offshorebnrbtm} from '../molecules/OffshoreBnrBtm';
+export {RedefiningOdc} from '../molecules/RedefiningOdc';

src/components/organisms/Banner.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import { colors } from '../../theme';
+
+
+const BannerWrapper = styled.div`
+  color: ${colors.accent.teal100};
+`;
+
+export const Banners = (props) => {
+    return <BannerWrapper>
+
+    </BannerWrapper>
+}

src/components/organisms/Offshore.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+// import { colors, device} from '../../theme';
+import {Image} from '../atoms';
+import mobilesrcfile from '../../assets/images/Offshore_banner.png';
+import {Offshorebnrbtm} from '../molecules/OffshoreBnrBtm';
+
+
+const OffshoreWrapper = styled.div`
+  background: #eff5fc;
+  padding: 20px 25px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: right;
+  position: relative;
+  float: right;
+  height: 100%;
+`;
+
+export const OffshoreHeading = styled.h2`
+  font-size: 52px;
+  width: 50%;
+  line-height: 70px;
+  margin-top: 120px;
+  margin-left: 80px;
+
+  @media (max-width: 768px) {
+    width: 50%;
+    font-size: 25px;
+    line-height: 25px;
+    margin-top: 10px;
+    margin-left: 10px;
+  }
+`;
+
+export const OffshoreInfo = styled.p`
+  margin: 0;
+  font-size: 20px;
+  line-height: 32px;
+  margin-top: 300px;
+  margin-left: 80px;
+  margin-right: 750px;
+  letter-spacing: 0.214286px;
+  position: absolute;
+
+  @media (max-width: 768px) {
+    width: 50%;
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 100px;
+    margin-left: 10px;
+  }
+`;
+
+export const OffshoreBtn = styled.button`
+  color: #ffffff;
+  border: solid 1px #3c50e0;
+  background: #3c50e0;
+  border-radius: 8px;
+  font-size: 16px;
+  text-align: center;
+  letter-spacing: 0.142857px;
+  min-width: 175px;
+  height: 60px;
+  margin-top: 450px;
+  margin-left: -1500px;
+
+  @media (max-width: 768px) {
+    width: 50%;
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 270px;
+    margin-left: -180px;
+  }
+`;
+
+export const Offshore = (props) => {
+    return (
+      <OffshoreWrapper>
+        <OffshoreHeading>Offshore Developement Center</OffshoreHeading>
+        <OffshoreInfo>
+          Would you be surprised if we tell you that you can lessen your development cost with
+          better software quality? Well, it is possible and it can be done by having an Offshore
+          Development Center (ODC).
+        </OffshoreInfo>
+        <OffshoreBtn>Get in Touch</OffshoreBtn>
+        <Image
+          mobilesrcfile={mobilesrcfile}
+        />
+        <Offshorebnrbtm />
+      </OffshoreWrapper>
+    );
+}
+
+Offshore.defaultProps = {};

src/components/organisms/index.js

@@ -1,2 +1,3 @@
 export { Header } from './Header';
 export { Footer } from './Footer';
+export { Offshore } from './Offshore';

src/components/views/UXG.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components/macro';
 
 import { Main} from "../molecules";
-import { Header, Footer } from "../organisms";
+import { Header, Footer, Offshore } from "../organisms";
 
 import { connect } from "react-redux";
 
@@ -21,6 +21,7 @@ export const UXG = (props) => {
   return <PageWrapper>
       { !props.preview && <> 
         <Header />
+        <Offshore />
       </>}
       <Main/>
       <Footer/>