Merge pull request #289 from Kehinded/dev

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

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;
+    }
+}

client/src/components/ToolsViewPage/ToolsView.js

@@ -1,8 +1,12 @@
-import React from "react";
+import React, {useState} from "react";
+import HeroSection from "../HeroSection/HeroSection";
 const ToolsView = () => {
+  const [showHero, setShowHero] = useState(true)
+
   return (
-    <div>
+    <div style={{padding: "12px 2rem"}}>
       {/* insert your component for those working on the company tools view page */}
+     {showHero &&  <HeroSection showHeroSection={() => setShowHero(!showHero)} />}
     </div>
   );
 };