renamed and rearranged files

src/App.scss

@@ -0,0 +1,3 @@
+@import '/src/common/styles/global.scss';
+/* Theme variables */
+@import '/src/theme/variables.scss';

src/App.tsx

@@ -19,8 +19,8 @@ import '@ionic/react/css/text-transformation.css';
 import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
 
-/* Theme variables */
-import './theme/variables.css';
+import './App.scss';
+import ConnectWithUs from './pages/ConnectWithUs';
 
 setupIonicReact();
 
@@ -31,6 +31,9 @@ const App: React.FC = () => (
         <Route exact path="/WorkWithUs">
           <WorkWithUs />
         </Route>
+        <Route exact path="/ConnectWithUs">
+          <ConnectWithUs />
+        </Route>
         <Route exact path="/">
           <Redirect to="/WorkWithUs" />
         </Route>

src/assets/icons/back-2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6.092" height="9.658" viewBox="0 0 6.092 9.658">
+  <path id="back" d="M10.889.857,6,5.747l4.768,4.768,1.2-1.2L8.4,5.747l3.688-3.688Z" transform="translate(-6 -0.857)" fill-rule="evenodd"/>
+</svg>

src/common/styles/global.scss

@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Poppins:wght@100&display=swap');
+
+
+:root {
+    /* font size */
+    font-size: 62.5%;
+    font-family: 'Poppins', sans-serif;
+    /* box-sizing */
+    box-sizing: border-box;
+
+    /* margin and padding */
+    margin: 0;
+    padding: 0;
+}

src/components/JobDescriptionModal.module.scss

@@ -0,0 +1,142 @@
+.tempDiv {
+    background-color: black;
+    height: 100vh;
+    width: 100vw;
+    
+    .descriptionModal {
+        position: absolute;
+        left: 0;
+        // top: 20%;
+        top: calc(100vh - 56rem);
+        background-color: #FFFFFF;
+        // height: 80vh;
+        // height: 80%;
+        height: 56rem;
+        width: 100vw;
+        border-radius: 3rem 3rem 0rem 0rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .iconHolder {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            margin-top: 2.5rem;
+
+            .developerIcon {
+                background-color: #F2F2F2;
+                border-radius: 2.5rem;
+                width: 5rem;
+                height: 5rem;
+    
+                svg {
+                    margin-left: 1.4rem;
+                    margin-top: 1.2rem;
+                    width: 2.8rem;
+                    height: 2.8rem;
+                }
+            }
+        }
+
+        .roleHeader {
+            text-align: center;
+            // margin: 2rem 0;
+            h3 {
+                color: #676767;
+                font-size: 2.1rem;
+                margin: 0;
+                font-family: 'Oswald', sans-serif;
+                font-weight: 600;
+                letter-spacing: 0.1rem;
+                margin-bottom: 0.4rem;
+            }
+
+            div {
+                color: #A3A3A3;
+                font-size: 1.4rem;
+                font-weight: 600;
+            }
+        }
+
+        .jd {
+            display: flex;
+            justify-content: center;
+
+            button {
+                width: 16rem;
+                height: 4.5rem;
+                border-radius: 1rem;
+                font-size: 1.4rem;
+                font-weight: 600;
+            }
+
+            .requirement {
+                background-color: #DAF3F5;
+                color: #6CB3B9;
+            }
+
+            .description {
+                background-color: #EDEDED;
+                color: #A3A3A3;
+                margin-left: 2rem;
+            }
+        }
+
+        .qualification {
+            width: 95%;
+            overflow-y: scroll;
+            max-height: 28.2rem;
+            h4 {
+                font-family: 'Oswald', sans-serif;
+                color: #747474;
+                font-size: 1.8rem;
+                font-weight: 600;
+                margin-left: 2.8rem;
+            }
+
+            ul {
+                list-style: none;
+
+                li {
+                    color: #A3A3A3;
+                    font-weight: 600;
+                    font-size: 1.4rem;
+                    line-height: 1.6;
+                    margin-left: 1.8rem;
+                    position: relative;
+                    &::before {
+                        content:  "";
+                        position: absolute;
+                        background: #BEBEBE;
+                        width: 0.8rem;
+                        height: 0.8rem;
+                        border-radius: 50%;
+                        left: -3rem;
+                        top: 0.7rem;
+                    }
+                }
+            }
+            
+        }
+
+        .applyBtn {
+            display: flex;
+            justify-content: center;    
+            // margin-bottom: 2rem;    
+            background-color: #FFFFFF;
+            box-shadow: 0rem -0.2rem 2.5rem #0000001C;    
+            height: 7.7rem;
+            button {
+                width: 30rem;
+                height: 4rem;
+                background-color: #33CE93;
+                border-radius: 2.5rem;
+                color: #FFFFFF;
+                font-size: 1.6rem;
+                font-weight: 600;
+                align-self: center;
+            }
+        }
+    }
+}

src/components/JobDescriptionModal.tsx

@@ -0,0 +1,59 @@
+import styles from './JobDescriptionModal.module.scss'
+
+import { ReactComponent as BackIcon } from '../assets/icons/back-2.svg';
+import { ReactComponent as ShareIcon } from '../assets/icons/share.svg';
+import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg';
+
+
+interface Props { }
+
+const JobDescriptionModal: React.FC<Props> = (props) => {
+    return (
+        <div className={styles.tempDiv}>
+            <div className={styles.descriptionModal}>
+                <div className={styles.iconHolder}>
+                    <div className={styles.backIcon}>
+                        <BackIcon />
+                    </div>
+                    <div className={styles.developerIcon}>
+                        <DeveloperIcon />
+                    </div>
+                    <div className={styles.shareIcon}>
+                        <ShareIcon />
+                    </div>
+                </div>
+                <div className={styles.roleHeader}>
+                    <h3>Software Developer</h3>
+                    <div>Full stack developer</div>
+                </div>
+                <div className={styles.jd}>
+                    <button className={styles.requirement}>Min Requirement</button>
+                    <button className={styles.description}>Job Description</button>
+                </div>
+                <div className={styles.qualification}>
+                    <h4>Minimum Qualification:</h4>
+
+                    <ul>
+                        <li>Lorem, ipsum dolor sit amet consectetur elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
+                        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
+                    </ul>
+
+                </div>
+                <div className={styles.applyBtn}>
+                    <button>Apply Now!</button>
+                </div>
+            </div>
+        </div>
+
+    )
+}
+
+export default JobDescriptionModal;

src/components/JobsCard.tsx

@@ -1,4 +1,4 @@
-import './JobsCard.scss';
+import styles from './JobsCard.module.scss';
 
 import { ReactComponent as ShareIcon } from '../assets/icons/share.svg';
 import { ReactComponent as ChairIcon } from '../assets/icons/officechair.svg';
@@ -16,29 +16,29 @@ interface Props {
 }
 const JobsCard: React.FC<Props> = (props: Props) => {
     return (
-        <div className='jobsCard'>
-            <header className='jobsCardHeader'>
-                <div className='developerIcon'>
+        <div className={styles.jobsCard}>
+            <header className={styles.jobsCardHeader}>
+                <div className={styles.developerIcon}>
                     {props.icon}
                 </div>
-                <div className='jobRole'>
+                <div className={styles.jobRole}>
                     <h3>{props.role}</h3>
                     <div>{props.team}</div>
                 </div>
-                <div className='shareIcon'>
+                <div className={styles.shareIcon}>
                     <ShareIcon />
                 </div>
             </header>
-            <section className='jobsCardDetails'>
-                <div className='openPosition'>
+            <section className={styles.jobsCardDetails}>
+                <div className={styles.openPosition}>
                     <ChairIcon />
                     <span>{props.openPosition}</span>
                 </div>
-                <div className='experience'>
+                <div className={styles.experience}>
                     <InfiniteIcon />
                     <span>{props.experience}</span>
                 </div>
-                <div className="location">
+                <div className={styles.location}>
                     <PinIcon />
                     <span>{props.location}</span>
                 </div>

src/pages/ConnectWithUs.tsx

@@ -0,0 +1,10 @@
+import styles from './WorkWithUs.module.scss';
+
+const ConnectWithUs = () => {
+    return (
+        <div>
+        </div>
+    )
+}
+
+export default ConnectWithUs;

src/pages/WorkWithUs.module.scss

@@ -0,0 +1,3 @@
+// IonContent {
+//     --background-color: black;
+// }

src/pages/WorkWithUs.tsx

@@ -2,19 +2,22 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/rea
 import JobsCard from '../components/JobsCard';
 import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg';
 
-import './WorkWithUs.scss';
+import styles from './WorkWithUs.module.scss';
+import JobDescriptionModal from '../components/JobDescriptionModal';
 
 const WorkWithUs: React.FC = () => {
   return (
     <IonPage>
-      <IonContent fullscreen className='content'>
-        <JobsCard
+      <IonContent fullscreen>
+        {/* <JobsCard
           role='Software Developer'
           team='engineering'
           openPosition='4 Open Position'
           experience='Minimum 3 years Experience'
           location='Montreal, Canada'
-          icon={<DeveloperIcon />} />
+          icon={<DeveloperIcon />} /> */}
+
+        {/* <JobDescriptionModal /> */}
 
       </IonContent>
     </IonPage>

src/theme/variables.css → src/theme/variables.scss

@@ -2,17 +2,9 @@
 http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
-@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Poppins:wght@100&display=swap');
 
 :root {
 
-  /* font size */
-  font-size: 62.5%;
-  font-family: 'Poppins', sans-serif;
-  /* box-sizing */
-  box-sizing: border-box;
-
   /** primary **/
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56, 128, 255;