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

blob maked
h1 made and styled
grid
making the blur
master
Pedram Keshavarzi 3 years ago
parent e2d4c5c0f6
commit 5f88d9f493
  1. 4
      src/Pages/Home/Home.js
  2. 47
      src/Pages/Home/Part1/homePart1.css
  3. 25
      src/Pages/Home/Part1/homePart1.js

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

@ -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;
}

@ -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;
Loading…
Cancel
Save