khabar name input done

src/Components/khabarNameInput/KhabarNameh.css

@@ -0,0 +1,15 @@
+.KhabarName input{
+    border-radius: 6px;
+    border: 1px solid #D1D1D1;
+    height: 50px;
+    width:30%;
+    font-family: 'iranSans';
+    margin:10px;
+    padding: 0px 20px;
+}
+.KhabarName input::placeholder{
+    color:#B8B8B8;
+}
+.KhabarName button{
+    height:50px;
+}

src/Components/khabarNameInput/KhabarNameh.js

@@ -0,0 +1,15 @@
+import React from "react";
+import Button from "../buttons/Button";
+
+import './KhabarNameh.css'
+
+const KhabarNameh = () =>{
+    return(
+        <div className="KhabarName">
+            <input type='email' placeholder="ایمیل خود را وارد کنید" />
+            <Button type="primary" model="default" title="ثبت نام رایگان" size="medium"/>
+        </div>
+    );
+};
+
+export default KhabarNameh;

src/Pages/Home/Part1/homePart1.js

@@ -1,4 +1,5 @@
 import React from "react";
+import KhabarNameh from "../../../Components/khabarNameInput/KhabarNameh";
 import MobileMockup from "../../../Components/mobileMockup/mobileMockup";
 
 import './homePart1.css';
@@ -16,6 +17,9 @@ const HomePart1 = () =>{
                 با استفاده از پلتفرم چت هوشمند بازو شما می توانید نیاز به نیروی انسانی برای پاسخگویی به
 مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
                 </p>
+
+                <KhabarNameh />
+
             </div>
         </div>
         </div>

src/index.css

@@ -42,3 +42,6 @@ code {
 *{
   transition: all 0.15s;
 }
+input:focus{
+  outline: 0px;
+}