Home Page Part 1 Done

src/Pages/Home/Part1/homePart1.css

@@ -44,4 +44,45 @@
 .Part1Cont p{
     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,25 +4,50 @@ import MobileMockup from "../../../Components/mobileMockup/mobileMockup";
 
 import './homePart1.css';
 
-const HomePart1 = () =>{
-    return(
+const HomePart1 = () => {
+    return (
         <div className="Part1Container">
             <div className="part1Blob"></div>
-        <div className="HomePart1">
-            <MobileMockup />
-            <div className="Part1Cont">
-                <h1>این بار داستان فرق می کند</h1>
-                <h2>راهکاری برای کاهش هزینه ها، زمان و منابع شما...</h2>
-                <p>
-                با استفاده از پلتفرم چت هوشمند بازو شما می توانید نیاز به نیروی انسانی برای پاسخگویی به
-مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
-                </p>
-
-                <KhabarNameh />
+            <div className="HomePart1">
+                <MobileMockup />
+                <div className="Part1Cont">
+                    <h1>این بار داستان فرق می کند</h1>
+                    <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>
-        </div>
     );
 };