Merge pull request #342 from zurichat/dev

Built the Hero Section on the home page to describe the plugin

README.md

@@ -29,10 +29,11 @@ https://externaltools.zuri.chat/
 #
 ## BACKEND
 
- - Switch to the **client** directory and install all dependencies
+ - Switch to the **client** directory, install all dependencies and build frontend
  ``` 
  cd server 
- yarn install  
+ yarn install 
+ yarn build 
  ```
 
 ## FRONTEND

client/public/index.html

@@ -13,8 +13,8 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- ################## START OF GOOGLE FONTS ##################### -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Oswald:wght@200;300;400;500;600;700&family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
     <!-- ################### END OF GOOGLE FONTS ####################### -->
     <title>React App</title>
   </head>

client/src/components/Apps/GoogleDrive/About/About.js

@@ -0,0 +1,14 @@
+import styles from './About.module.css'
+
+
+function About () {
+
+    return(
+        <div className={styles.wrapper}>
+            This is the about page
+        </div>
+    )
+}
+
+
+export default About

client/src/components/Apps/GoogleDrive/About/About.module.css

@@ -0,0 +1,3 @@
+.wrapper{
+    margin-top: 5px;
+}

client/src/components/Apps/GoogleDrive/GoogleDrive.js

@@ -1,7 +1,31 @@
-import React from "react";
+import React, {useState} from "react";
+import styles from './GoogleDrive.module.css'
+import Messages from './Messages/Messages'
+import About from './About/About'
 
-const GoogleDrive = () => {
-  return <div>This is the google drive page</div>;
+const  GoogleDrive = () => {
+
+  const [page, setPage] = useState('messages')
+
+  console.log(page)
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.layer1}>
+
+      </div>
+
+      <div className={styles.layer2}>
+        <h3 className={page==='messages'? styles.markGreen: null} onClick={() => setPage('messages')}>Messages</h3>
+        <h3 className={page==='about'? styles.markGreen: null} onClick={() => setPage('about')}>About</h3>
+      </div>
+      <React.Fragment>
+        {page === 'messages'? <Messages />:null}
+        {page === 'about'? <About />:null}
+      </React.Fragment>
+
+
+    </div>);
 };
 
 export default GoogleDrive;

client/src/components/Apps/GoogleDrive/GoogleDrive.module.css

@@ -0,0 +1,34 @@
+.container{
+    height: 100%;
+    padding-top: 6%;
+    background-color: #f6f6f6
+}
+
+.container .layer1{
+    width: 100%;
+    height: 8.97%;
+}
+
+.container .layer2{
+    border:  1px solid #E7E7E7;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+
+.container .layer2 h3{
+    height: 100%;
+
+    font-size: 14px;
+    text-align: center;
+    display: flex;
+    align-items: flex-end;
+    margin: 14px 14px 0 14px;
+    padding-bottom: 14px;
+    cursor: pointer;
+}
+
+.markGreen{
+    border-bottom: #0acf83 1px solid;
+}

client/src/components/Apps/GoogleDrive/Messages/Messages.js

@@ -0,0 +1,14 @@
+import styles from './Messages.module.css'
+
+
+function Messages (){
+
+    return(
+        <div className={styles.wrapper}>
+            This is the Messages page
+        </div>
+    )
+}
+
+
+export default Messages

client/src/components/Apps/GoogleDrive/Messages/Messages.module.css

@@ -0,0 +1,4 @@
+.wrapper{
+    width: 100%;
+    margin-top: 5px;
+}

client/src/components/HeroSection/HeroSection.js

@@ -0,0 +1,47 @@
+import styles from "./HeroSection.module.css"
+import HeroLaptopImg from "../../assets/hero-laptop.png"
+import DoubleRightArrow from "../../assets/double-arrow-right-icon.svg"
+
+import React from 'react'
+
+const HeroSection = ({showHeroSection}) => {
+    return (
+        <div className ={styles.hero_section}>
+            <div className={styles.title_box}>
+                <p className={styles.title}>tools</p>
+                <div className={styles.directory_box}>
+                    <div className={styles.icon}><img src={DoubleRightArrow} alt="double_arrow-icon" /></div>
+                    <div className={styles.directory_text}>Tool Directory</div>
+                </div>
+            </div>
+            {/* end of title box */}
+            <div className={styles.content_box}>
+                <span className={styles.cancel} onClick ={showHeroSection}>&times;</span>
+                <div className={styles.content_wrap}>
+                    <div className={styles.title}>Powerful tools integrated just for Zuri chat</div>
+                    <p className={styles.text}>Tools belong to you and your team, and they
+                     provide you extra features to make you more productive. 
+                    Install once and everyone can make use of them.</p>
+                    <button className={styles.btn}>Browse available tools</button>
+                </div>
+                {/* end of content-wrap */}
+                <div className={styles.image_box}>
+                    <figure className={styles.img_wrap}>
+                    <img src={HeroLaptopImg} alt="" className={styles.img} />
+                    </figure>
+                </div>
+            </div>
+        {/* end of content box */}
+        </div>
+    )
+}
+
+export default HeroSection
+
+
+
+
+
+// #242424  Powerful tools integrated just for Zuri chat
+// #3A3A3A    Tools belong to you and your team, and they provide you extra features to make you more productive. Install once and everyone can make use of them.
+// #009B69   Browse available tools

client/src/components/HeroSection/HeroSection.module.css

@@ -0,0 +1,197 @@
+
+.hero_section{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0rem;
+}
+
+.title_box{
+    color: #242424;
+    display: flex;
+    align-items: center;
+    margin-bottom: .6rem;
+}
+
+.title_box .title{
+   text-transform: capitalize;
+   font-size: 15px;
+   font-weight: bold;
+}
+
+.title_box .directory_box{
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    color: #3A3A3A;
+}
+
+.title_box .directory_box .icon{
+    margin-right: .5rem;
+}
+
+.title_box .directory_box .directory_text{
+    text-transform: capitalize;
+}
+
+.content_box {
+    width: 100%;
+    display: flex;
+    background-color: #ffffff;
+    padding: .3rem;
+    position: relative;
+    box-shadow: .1rem .1rem .4rem rgba(0,0,0, .2);
+    border-radius: .3rem;
+}
+
+.content_box .cancel{
+    position: absolute;
+    top: .3rem;
+    right: 1rem;
+    font-size: 2rem;
+    cursor: pointer;
+    transition: all .3s;
+}
+
+.content_box .cancel:hover{
+    transform: scale(1.1) translateY(-.2rem);
+}
+
+.content_box .content_wrap{
+    flex: 0 0 65%;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.content_box .content_wrap > *:not(:last-child){
+    margin-bottom: 1rem;
+}
+
+.content_box .content_wrap .title{
+   color: #242424;
+   font-size: 1.5rem;
+   font-weight: bold;
+}
+
+.content_box .content_wrap .text{
+    color: #3A3A3A ;
+    width: 85%;
+    font-size: 1rem;
+}
+
+.content_box .content_wrap .btn{
+    background-color: #009B69;
+    padding: .6rem 1rem;
+    color: #ffffff;
+    font-size: 1rem;
+    border-radius: .2rem;
+    margin-top: auto;
+    align-self: flex-start;  
+    transition: all .3s;
+}
+
+.content_box .content_wrap .btn:hover{
+    transform: translateY(-.1rem);
+}
+
+.content_box .image_box{
+    flex: 1;
+    padding: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.content_box .img_wrap{
+    height: 13rem;
+}
+
+.content_box .image_box .img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* media at 69em */
+
+@media only screen and (max-width:69em){
+
+    .title_box .title{
+       text-transform: capitalize;
+       font-size: 18px;
+       font-weight: bold;
+    }
+
+
+    .content_box .content_wrap{
+        flex: 0 0 60%;
+        padding: 1.2rem;
+    }
+
+
+    .content_box .content_wrap .title{
+       color: #242424;
+       font-size: 1.2rem;
+       font-weight: bold;
+    }
+
+    .content_box .content_wrap .text{
+        color: #3A3A3A ;
+        width: 100%;
+        font-size: 1rem;
+    }
+
+    .content_box .content_wrap .btn{
+        background-color: #009B69;
+        padding: .6rem 1rem;
+        color: #ffffff;
+        font-size: 1rem;
+        border-radius: .2rem;
+        margin-top: auto;
+        align-self: flex-start;  
+        transition: all .3s;
+    }
+
+    .content_box .content_wrap .btn:hover{
+        transform: translateY(-.1rem);
+    }
+
+    .content_box .image_box{
+        flex: 1;
+        padding: 2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .content_box .img_wrap{
+        height: 13rem;
+    }
+
+    .content_box .image_box .img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+/* media at 60em */
+
+@media only screen and (max-width:60em){
+    .content_box{
+        flex-direction: column;
+    }
+
+    .content_box .image_box{
+        display: none;
+    }
+}
+
+/* media at 47em */
+
+@media only screen and (max-width:47em){
+    .content_box .content_wrap .title{
+        margin-top: 1rem;
+    }
+}