Home Part 1 started and Made Some Parts Of it (view description)

blob maked
h1 made and styled
grid
making the blur

src/Pages/Home/Home.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import DesktopMenu from '../../Components/navBar/desktopMenu';
-import MobileMockup from '../../Components/mobileMockup/mobileMockup';
 import './Home.css';
+import HomePart1 from './Part1/homePart1';
 
 const HomePage = () =>{
     return(
         <div className='HomePage'>
             <DesktopMenu />
-            <MobileMockup />
+            <HomePart1 />
         </div>
     )
 };

src/Pages/Home/Part1/homePart1.css

@@ -0,0 +1,47 @@
+.part1Blob{
+    width:24em;
+    height:24em;
+    background-color: #C1ECFF;
+    border-radius: 50%;
+    margin-bottom: -24em;
+    opacity: 0.35;
+    box-shadow: 0px 0px 38px #1577F8;
+    margin-left:-5em;
+    filter: blur(8px);
+}
+
+.HomePart1{
+    display: flex;
+    background-color: rgba(255,255,255,0.5);
+    direction: rtl;
+    width:calc(100% - 10em);
+    padding: 0em 5em;
+    
+}
+.Part1Cont{
+    background-color: none;
+    width:80%;
+    padding: 4%;
+}
+.Part1Cont h1{
+    font-size: 48px;
+    font-weight:bolder;
+    font-family: 'iranSans';
+    background: linear-gradient(90deg, #0D41E1, #0C63E7, #0A85ED, #09A6F3, #07C8F9);
+    background-clip: text;
+  -webkit-text-fill-color: transparent;
+    margin-bottom: -12px;
+    word-spacing: -4px;
+    letter-spacing: -1px;
+    width: 70%;
+}
+.Part1Cont h2{
+    width:65%;
+    font-size: 27px;
+
+}
+
+.Part1Cont p{
+    width:65%;
+    font-size: 15px;
+}

src/Pages/Home/Part1/homePart1.js

@@ -0,0 +1,25 @@
+import React from "react";
+import MobileMockup from "../../../Components/mobileMockup/mobileMockup";
+
+import './homePart1.css';
+
+const HomePart1 = () =>{
+    return(
+        <div className="Part1Container">
+            <div className="part1Blob"></div>
+        <div className="HomePart1">
+            <MobileMockup />
+            <div className="Part1Cont">
+                <h1>این بار داستان فرق می کند</h1>
+                <h2>راهکاری برای کاهش هزینه ها، زمان و منابع شما...</h2>
+                <p>
+                با استفاده از پلتفرم چت هوشمند بازو شما می توانید نیاز به نیروی انسانی برای پاسخگویی به
+مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
+                </p>
+            </div>
+        </div>
+        </div>
+    );
+};
+
+export default HomePart1;