Desktop Navigation Bar Done

src/Components/buttons/Button.css

@@ -0,0 +1,76 @@
+button{
+    font-family: 'IRAN SANS';
+    border: 0;
+    font-size: 0.7vw;
+}
+button.small{
+    padding:3px 15px;
+    border-radius: 10px;
+    border:1px solid #1577F8;
+}
+button.medium{
+    padding:10px 25px;
+    border-radius: 6px;
+    border:1px solid #1577F8;
+}
+button.large{
+    padding:10px 45px;
+    border-radius: 15px;
+    border:3px solid #1577F8;
+}
+button.primary{
+    border:0px;
+}
+button.primary.default{
+    background:#1577F8 ;
+    color:white;
+    transition: all 0.2s;
+}
+
+button.primary.default:hover{
+
+    color:white;
+    box-shadow: 0px 7px 20px rgba(120, 19, 42, 0.16);
+    cursor: pointer;
+}
+button.primary.default:active{
+    background:#0D41E1 ;
+    color:white;
+}
+button.primary.disabled{
+    background:#E8E8ED ;
+    color:white;
+    transition: all 0.2s;
+    
+}
+button.outlined.default{
+    background: none;
+    color:#1577F8;
+    transition: all 0.2s;
+}
+button.outlined.default:hover{
+    background: rgba(21,119,248,0.1);
+    color:#1577F8;
+    cursor:pointer;
+}
+button.outlined.disabled{
+    background: none;
+    color:#E8E8ED;
+    border:2px solid #E8E8ED;
+}
+
+button.text{
+    border:0px;
+    color:#1577F8;
+    background: none;
+    transition: all 0.2s;
+}
+button.text:hover{
+    border:0px;
+    color:#FDB79F;
+    background: none;
+    cursor: pointer;
+}
+button.text.disabled{
+    color:#E8E8ED;
+}

src/Components/buttons/Button.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import './Button.css';
+
+const Button = (props) =>{
+    return(
+        <a href={props.href}>
+
+            <button className={props.size + ' ' + props.type + ' ' + props.model} width={props.width}>
+               
+                {props.title}
+           
+            </button>
+        </a>
+    );
+};
+export default Button;
+
+
+/* 
+    You Must Include The Title of the Button As A Parameter Of The Component
+        Like This: <Button title=" " />
+
+    ------------------------------------------------------------------------
+
+    There Are 3 Types of Button: primary, outlined and text
+        You Can use them Like This: <Button type=" " />
+    
+    ------------------------------------------------------------------------
+    
+    There Are 3 Sizes of Button: small, medium, and large
+        You Can Use Them Like This: <Button size=" " />
+
+    ------------------------------------------------------------------------
+    
+    Also There is 2 Models Of Button: default, disabled
+        You Can Use Them Like This: <Button model=" " />
+    
+    ------------------------------------------------------------------------
+    
+    If You Want To Add A Link To The Button You Can Use href As a Parameter
+    In The Component.
+        You Can Use It Like This: <Button href=" " />
+*/

src/Components/navBar/desktopMenu.js

@@ -1,57 +1,60 @@
 import React from 'react';
 // import { Link } from 'react-router-dom';
+import Button from '../buttons/Button';
 
+
+import logo from '../../assets/images/logo.png';
 import './navBar.css';
 
 
 const DesktopMenu = ({ currentUser, hidden }) => (
     <div className='navBar'>
-    <div className="header">
-        <div className="logo-container">
-            {/* <img src={logo} className="logo" /> */}
-
-            <p className="logo" > پلتفرم بازوچت</p>
-        </div>
-        <div className="options">
-            <div className="option">
-                محصولات
+        <div className="header">
+            <div className="logo-container">
+                <img src={logo} className="logo" />
+                <p>
+                <span className='logoTitle'> پلتفرم چت بازو</span>
+                <span className='logoDes'>دستیار کسب و کار شما برای ارتباط با مشتریان</span>
+                </p>
             </div>
+            <div className="options">
+                <div className="option">
+                    محصولات
+                </div>
 
-            <div className="option">
-                راهکار ها
-            </div>
-            <div className="option">
-                تعرفه
-            </div>
+                <div className="option">
+                    راهکار ها
+                </div>
+                <div className="option">
+                    تعرفه
+                </div>
 
-            <div className="option">
-                منابع
-            </div>
+                <div className="option">
+                    منابع
+                </div>
 
-            <div className="option">
-               تعامل پذیری
-            </div>
+                <div className="option">
+                    تعامل پذیری
+                </div>
 
 
-           
 
 
-        </div>
 
-        <div className="headerButtons ">
-                <div className='nav-signin-desk signInBtn'>
-                    ثبتنام / ورود
-                </div>
+            </div>
+
+            <div className="headerButtons ">
+                <Button title='ثبتنام / ورود' type="outlined" model="default" size="medium" />
                 {/* <span className='nav-signin-mob'>
           <img src={navProPic} />
         </span> */}
 
-        <div className='tryitFree'>
-            رایگان امتحان کنید
-        </div>
+                <div className='tryitFree'>
+                    <Button title='رایگان امتحان کنید' type="primary" model="default" size="medium" />
+                </div>
             </div>
 
-    </div>
+        </div>
     </div>
 );
 

src/Components/navBar/navBar.css

@@ -5,7 +5,7 @@
     justify-content: center;
     background-color: white;
 
-    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
+    box-shadow:0px 0px 28px rgba(0,0,0,0.15);
     height:90px;
     vertical-align: middle;
 }
@@ -25,7 +25,7 @@
    top: 0;
     margin:0;
     vertical-align: middle;
-    padding: 20px 0px;
+    padding: 15px 0px;
   }
 
   
@@ -37,6 +37,18 @@
     vertical-align:middle;
     width:25%;
   }
+  .header .logo-container p{
+    display: flex;
+    flex-direction: column;
+    padding-right: 8px;
+    color:#132F52;
+  }
+  .logoTitle{
+      font-size: 15px;
+  }
+  .logoDes{
+      font-size: 8px;
+  }
   .header .logo-container .logo{
     height: 100%;
     
@@ -56,6 +68,8 @@
   .header .options .option {
     padding: 10px 15px;
     cursor: pointer;
+    color: rgba(19, 47,82, 0.66);
+    font-weight: bold;
   }
 
 
@@ -66,7 +80,7 @@
 }
 
 .headerButtons div{
-    padding: 10px 30px;
+    margin: 0px 30px;
 }