reza added author image and some changes on desktop header

src/components/Vocal/Vocal.tsx

@@ -2,9 +2,6 @@ import React, { useState, useEffect } from "react";
 import SpeechRecognition, {
   useSpeechRecognition,
 } from "react-speech-recognition";
-import { toast } from "react-toastify";
-import MicIcon from "@material-ui/icons/Mic";
-import TextField from "@material-ui/core/TextField";
 
 import line1 from "../../assets/icons/line1.png";
 import line2 from "../../assets/icons/line2.png";

src/views/Home/Header/index.scss

@@ -10,14 +10,14 @@
     border-radius: 10px;
   }
   .item {
-    height: 420px;
+    height: 460px;
     background-size: 100% 100% !important;
     background-repeat: no-repeat !important;
     background-position: 0px 0px !important;
     font-family: numeralLight;
     color: white;
-    padding-right: 60%;
-    padding-top: 10%;
+    padding-right: 70%;
+    padding-top: 120px;
     border-radius: 10px;
     margin: 0px 10px;
     h1 {
@@ -36,7 +36,7 @@
     background: linear-gradient(
       0deg,
       hsla(0, 0%, 0%, 1) 0%,
-      hsla(250, 14%, 61%, 0) 64%
+      hsla(250, 14%, 61%, 0) 44%
     );
     border-radius: 10px;
   }
@@ -45,25 +45,43 @@
 @media screen and (min-width: 1441px) {
   .home-header {
     max-width: 1350px;
+    font-family: numeralLight;
+    &__info{
+      &--author{
+        position: absolute;
+        left: 30px;
+        bottom: 150px;
+        h3{
+          margin-right: 5px;
+          font-size: 15px;
+        }
+        i{
+          margin-right: 5px;
+          font-size: 15px;
+        }
+      }
+    }
     .item {
       h1 {
-        font-size: 30px;
+        font-family: numeralMedium;
+        font-size: 24px;
       }
       h2{
-        font-size: 20px;
+        font-size: 17px;
+        font-family: numeralMedium;
       }
     }
     .carousel-indicators li {
       margin-left: 20px !important;
-      max-width: 200px !important;
+      max-width: 150px !important;
       div {
         margin-right: 10px;
       }
       strong {
-        font-size: 14px;
+        font-size: 12px;
       }
       b {
-        font-size: 20px;
+        font-size: 16px;
       }
     }
   }
@@ -73,53 +91,40 @@
   .home-header {
     max-width: 1250px;
     .item {
+      padding-top: 130px;
       h1 {
-        font-size: calc(100vw / 50);
+        font-size: calc(100vw / 65);
       }
       h2 {
-        font-size: calc(100vw / 60);
-      }
-    }
-    .carousel-indicators li {
-      margin-left: 20px !important;
-      max-width: 200px !important;
-      div {
-        margin-right: 10px;
-      }
-      strong {
-        font-size: calc(100vw / 90);
-      }
-      b {
-        font-size: calc(100vw / 60);
+        font-size: calc(100vw / 80);
       }
     }
-  }
-}
-
-@media screen and (min-width: 641px) and (max-width: 1007px) {
-  .home-header {
-    max-width: 900px;
-    .item {
-      padding-top: 15%;
-      h1 {
-        font-size: calc(100vw / 50);
-      }
-      h2 {
-        font-size: calc(100vw / 60);
-        margin-top: 10px;
+    &__info{
+      &--author{
+        position: absolute;
+        left: 30px;
+        bottom: 150px;
+        h3{
+          margin-right: 5px;
+          font-size: calc(100vw / 100);
+        }
+        i{
+          margin-right: 5px;
+          font-size: calc(100vw / 100);
+        }
       }
     }
     .carousel-indicators li {
-      margin-left: 20px !important;
+      margin-left: 10px !important;
       max-width: 200px !important;
       div {
         margin-right: 10px;
       }
       strong {
-        font-size: calc(100vw / 70);
+        font-size: calc(100vw / 100);
       }
       b {
-        font-size: calc(100vw / 50);
+        font-size: calc(100vw / 90);
       }
     }
   }
@@ -129,7 +134,7 @@
   position: absolute !important;
   left: 0px !important;
   right: auto !important;
-  bottom: 10px !important;
+  bottom: 40px !important;
   z-index: auto !important;
   display: auto !important;
   justify-content: auto !important;
@@ -137,7 +142,7 @@
   margin: 0px !important;
   list-style: auto !important;
   color: white;
-  width: 40% !important;
+  width: 30% !important;
   justify-content: flex-start !important;
 
   span.active {

src/views/Home/Header/index.tsx

@@ -1,24 +1,12 @@
 import React from "react";
-import Carousel from "react-elastic-carousel";
 import "./index.scss";
-import Item from "./Item/index";
+import Avatar from '@material-ui/core/Avatar';
 
 export default function Header(props: any) {
   const { headerData } = props;
   return (
     <header className="home-header">
       <div id="myCarousel" className="carousel slide" data-ride="carousel">
-        {/* <ol className="carousel-indicators">
-          {headerData.map((item: any, i: any) => (
-            <li
-              data-target="#myCarousel"
-              data-slide-to={item.id}
-              className={item.id === 0 ? "active" : ""}
-              key={i}
-            ></li>
-          ))}
-        </ol> */}
-
         <div className="carousel-inner">
           {headerData.map((item: any, i: Number) => (
             <div
@@ -29,6 +17,14 @@ export default function Header(props: any) {
             >
               <div className="home-header__cover"></div>
               <div className="home-header__info d-flex flex-column">
+                <div className="home-header__info--author d-flex">
+                  <Avatar src={item.authorImage} />
+                  <div className="d-flex flex-column">
+                    <h3>{item.author}</h3>
+                    <i>نویسنده</i>
+                  </div>
+                </div>
+                <h1>{'0' + (item.id + 1)}</h1>
                 <h1>{item.name}</h1>
                 <h2>{item.subTitle}</h2>
               </div>
@@ -45,7 +41,7 @@ export default function Header(props: any) {
             >
               <span className={i === 0 ? "active" : ""}></span>
               <div className="d-flex flex-column">
-                <b>0{i + 1}</b>
+                <b>0{item1.id + 1}</b>
                 <strong>{item1.name}</strong>
               </div>
             </li>

src/views/Home/index.tsx

@@ -134,6 +134,14 @@ Home.defaultProps = {
       author: "جورج جونیور",
       imageUrl: header,
     },
+    {
+      id: 2,
+      name: "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
+      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
+      author: "جورج جونیور",
+      imageUrl: header,
+    },
   ],
   blogs: [
     {