Home Page Part 1 Done

src/Pages/Home/Part1/homePart1.css

@@ -45,3 +45,44 @@
     width:65%;
     font-size: 15px;
 }
+.stepsOfSignUp{
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+}
+.stepsOfSignUp .step{
+    width:32.5%;
+}
+.stepsOfSignUp .step .firstStep{
+    padding: 10px 15px;
+    color:white;
+    border-radius:50% ;
+    background: linear-gradient(45deg, white, #006FFF);
+    box-shadow: 4px -4px #006FFF;
+    filter:blur(0px);
+   font-weight: bold;
+}
+.stepsOfSignUp .step .secondStep{
+    padding: 10px 15px;
+    color:white;
+    border-radius:50% ;
+    background: linear-gradient(45deg, white, #FF0900);
+    box-shadow: 4px -4px #FF0900;
+    filter:blur(0px);
+    font-weight: bold;
+}
+.stepsOfSignUp .step .thirdStep{
+    padding: 10px 15px;
+    color:white;
+    border-radius:50% ;
+    background: linear-gradient(45deg, white, #00FF2B);
+    box-shadow: 4px -4px #00FF2B;
+    filter:blur(0px);
+    font-weight: bold;
+}
+.stepsOfSignUp .step div{
+
+    margin:10px;
+    padding: 10px;
+    font-size: 15px;
+}

src/Pages/Home/Part1/homePart1.js

@@ -4,8 +4,8 @@ import MobileMockup from "../../../Components/mobileMockup/mobileMockup";
 
 import './homePart1.css';
 
-const HomePart1 = () =>{
+const HomePart1 = () => {
-    return(
+    return (
         <div className="Part1Container">
             <div className="part1Blob"></div>
             <div className="HomePart1">
@@ -15,11 +15,36 @@ const HomePart1 = () =>{
                     <h2>راهکاری برای کاهش هزینه ها، زمان و منابع شما...</h2>
                     <p>
                         با استفاده از پلتفرم چت هوشمند بازو شما می توانید نیاز به نیروی انسانی برای پاسخگویی به
-مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
+                        مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
                     </p>
 
                     <KhabarNameh />
 
+                    <div className="stepsOfSignUp">
+
+                        <div className="step">
+                            <span className="firstStep">1</span>
+                            <div>
+                                برای شروع کافیه که ایمیل خودتون را ثبت کرده و وبسایتی که می‌خواید باهاش از خدمات ما استفاده کنید رو داخل پنل ثبت کنید
+                            </div>
+                        </div>
+
+                        <div className="step">
+                            <span className="secondStep">2</span>
+                            <div>
+                            توی این مرحله کافیه که تنظیمات ابتدایی از جمله پیام خوش آمدگویی، ساعات کاری و ... رو شخصی سازی کنید تا ربات آماده راه اندازی بشه                            
+                            </div>
+                        </div>
+
+                        <div className="step">
+                            <span className="thirdStep">3</span>
+                            <div>
+                            تمام ! آخرین مرحله باید کد یا پلاگین ما رو روی‌ وبسایتتون ثبت کنید تا بتونید با مشتریانتون ارتباط برقرار کنید                            
+                            </div>
+                        </div>
+
+                    </div>
+
                 </div>
             </div>
         </div>