feat: design third-section-writes

src/asset/scss/halfPictureHalfWrites.scss

@@ -11,5 +11,34 @@
     height: 100%;
     width: 50%;
     background-color: black;
+    box-sizing: border-box;
+    padding:50px;
+
+    .half-writes-title{
+      width: 80%;
+      font-size: 30px;
+      font-weight: bold;
+      color: white;
+      margin:30px 0 20px 0;
+    }
+
+    .half-writes-detail{
+      width: 80%;
+      color: white;
+      margin-bottom: 40px;
+    }
+
+    .half-writes-button{
+      padding:10px;
+      border-radius: 10px;
+      border : 0.75px solid white;
+      color: white;
+    }
+
+    .half-writes-button:hover{
+      color: black;
+      background-color:  #E3BA19
+    }
+
   }
 }

src/asset/scss/main.scss

@@ -31,5 +31,5 @@
 
 .third-section{
   margin:30px 0;
-  height: 70vh;
+  height: 60vh;
 }

src/component/common/HalfPictureHalfWrites.js

@@ -11,6 +11,9 @@ function HalfPictureHalfWrites() {
     <div className="halfPictureHalfWrites-wrap">
       <img className="half-picture" src={half_image} alt="info" />
       <div className="half-writes">
+        <div className="half-writes-title">Design Your Career With Us</div>
+        <div className="half-writes-detail">Please write some words Please write some wordsPlease write some wordsPlease write some words Please write some words Please write some words Please write some words Please write some words Please write some words</div>
+        <button className="half-writes-button">JOIN OUR TEAM</button>
       </div>
     </div>
   )

src/component/common/SiteActivityComponent.js

@@ -69,9 +69,9 @@ function SiteActivityComponent(props) {
           {props.id === "totalTurnover" && <div className="main-info-unit">Total Turnover</div>}
           {props.id === "career" && <div className="main-info-unit">Career</div>}
 
-          {props.id === "projects" && <div className="main-info-unit-writes">Write some worlds</div>}
-          {props.id === "totalTurnover" && <div className="main-info-unit-writes">Write some worlds</div>}
-          {props.id === "career" && <div className="main-info-unit-writes">Write some worlds</div>}
+          {props.id === "projects" && <div className="main-info-unit-writes">Write some words</div>}
+          {props.id === "totalTurnover" && <div className="main-info-unit-writes">Write some words</div>}
+          {props.id === "career" && <div className="main-info-unit-writes">Write some words</div>}
         </div>
         {props.id === "projects" && <HomeWorkIcon sx={{ fontSize: 70, color: "white" }} />}
         {props.id === "totalTurnover" && <MoneyIcon sx={{ fontSize: 70, color: "white" }} />}