taha12322
3 years ago
parent
dab4bc7048
commit
1d1a7041c8
36 changed files with 3420 additions and 1688 deletions
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
@ -1,25 +0,0 @@ |
|||||||
{ |
|
||||||
"short_name": "React App", |
|
||||||
"name": "Create React App Sample", |
|
||||||
"icons": [ |
|
||||||
{ |
|
||||||
"src": "favicon.ico", |
|
||||||
"sizes": "64x64 32x32 24x24 16x16", |
|
||||||
"type": "image/x-icon" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"src": "logo192.png", |
|
||||||
"type": "image/png", |
|
||||||
"sizes": "192x192" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"src": "logo512.png", |
|
||||||
"type": "image/png", |
|
||||||
"sizes": "512x512" |
|
||||||
} |
|
||||||
], |
|
||||||
"start_url": ".", |
|
||||||
"display": "standalone", |
|
||||||
"theme_color": "#000000", |
|
||||||
"background_color": "#ffffff" |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
# https://www.robotstxt.org/robotstxt.html |
|
||||||
User-agent: * |
|
||||||
Disallow: |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
.App { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.App-logo { |
|
||||||
height: 40vmin; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
.App-logo { |
|
||||||
animation: App-logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.App-header { |
|
||||||
background-color: #282c34; |
|
||||||
min-height: 100vh; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: calc(10px + 2vmin); |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.App-link { |
|
||||||
color: #61dafb; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes App-logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,25 +1,21 @@ |
|||||||
import logo from './logo.svg'; |
import React from "react"; |
||||||
import './App.css'; |
import { BrowserRouter as Router, Switch } from "react-router-dom"; |
||||||
|
|
||||||
function App() { |
//components
|
||||||
|
import Links from "./components/Links"; |
||||||
|
import RoutPage from "./components/RoutPage"; |
||||||
|
|
||||||
|
const App = () => { |
||||||
return ( |
return ( |
||||||
<div className="App"> |
<> |
||||||
<header className="App-header"> |
<Router> |
||||||
<img src={logo} className="App-logo" alt="logo" /> |
<Links /> |
||||||
<p> |
<Switch> |
||||||
Edit <code>src/App.js</code> and save to reload. |
<RoutPage /> |
||||||
</p> |
</Switch> |
||||||
<a |
</Router> |
||||||
className="App-link" |
</> |
||||||
href="https://reactjs.org" |
|
||||||
target="_blank" |
|
||||||
rel="noopener noreferrer" |
|
||||||
> |
|
||||||
Learn React |
|
||||||
</a> |
|
||||||
</header> |
|
||||||
</div> |
|
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
export default App; |
export default App; |
||||||
|
|||||||
@ -1,8 +0,0 @@ |
|||||||
import { render, screen } from '@testing-library/react'; |
|
||||||
import App from './App'; |
|
||||||
|
|
||||||
test('renders learn react link', () => { |
|
||||||
render(<App />); |
|
||||||
const linkElement = screen.getByText(/learn react/i); |
|
||||||
expect(linkElement).toBeInTheDocument(); |
|
||||||
}); |
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,17 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
const Links = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Link to="/1"></Link> |
||||||
|
<Link to="/2"></Link> |
||||||
|
<Link to="/3"></Link> |
||||||
|
<Link to="/4"></Link> |
||||||
|
<Link to="/login"></Link> |
||||||
|
<Link to="/rule"></Link> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Links; |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Route } from "react-router-dom"; |
||||||
|
import Splash1 from "./logIn/Splashes/Splash1"; |
||||||
|
import Splash2 from "./logIn/Splashes/Splash2"; |
||||||
|
import Splash3 from "./logIn/Splashes/Splash3"; |
||||||
|
import Splash4 from "./logIn/Splashes/Splash4"; |
||||||
|
import LogIn from "./logIn/LogIn"; |
||||||
|
import Rule from "./logIn/Rule"; |
||||||
|
|
||||||
|
const RoutPage = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Route path="/1"> |
||||||
|
<Splash1 /> |
||||||
|
</Route> |
||||||
|
<Route path="/2"> |
||||||
|
<Splash2 /> |
||||||
|
</Route> |
||||||
|
<Route path="/3"> |
||||||
|
<Splash3 /> |
||||||
|
</Route> |
||||||
|
<Route path="/4"> |
||||||
|
<Splash4 /> |
||||||
|
</Route> |
||||||
|
<Route path="/login"> |
||||||
|
<LogIn /> |
||||||
|
</Route> |
||||||
|
<Route path="/rule"> |
||||||
|
<Rule /> |
||||||
|
</Route> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RoutPage; |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { ArrowRight } from "react-iconly"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import "./Footer.scss"; |
||||||
|
|
||||||
|
const Footer = () => { |
||||||
|
const [active, setActive] = useState(1); |
||||||
|
const [numCounter, setNumCounter] = useState(1); |
||||||
|
localStorage.setItem("pathNum", numCounter); |
||||||
|
|
||||||
|
const counterHandler = () => { |
||||||
|
setNumCounter(numCounter + 1); |
||||||
|
}; |
||||||
|
let I = localStorage.getItem("pathNum") |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (window.location.href === "http://localhost:3001/1") { |
||||||
|
setActive(1); |
||||||
|
} |
||||||
|
if (window.location.href === "http://localhost:3001/2") { |
||||||
|
setActive(2); |
||||||
|
} |
||||||
|
if (window.location.href === "http://localhost:3001/3") { |
||||||
|
setActive(3); |
||||||
|
} |
||||||
|
if (window.location.href === "http://localhost:3001/4") { |
||||||
|
setActive(4); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<footer className="navFooterItem container"> |
||||||
|
<nav className="navCircles"> |
||||||
|
<nav className={`circle ${active === 1 ? "active" : ""}`}></nav> |
||||||
|
<nav className={`circle ${active === 2 ? "active" : ""}`}></nav> |
||||||
|
<nav className={`circle ${active === 3 ? "active" : ""}`}></nav> |
||||||
|
<nav className={`circle ${active === 4 ? "active" : ""}`}></nav> |
||||||
|
</nav> |
||||||
|
<nav onClick={counterHandler}> |
||||||
|
<Link to={`/${I}`}> |
||||||
|
<button className="btn nextBtn"> |
||||||
|
<ArrowRight set="curved" /> |
||||||
|
</button> |
||||||
|
</Link> |
||||||
|
{/* <button onClick={()=>setCount(count +1)}>counter</button> */} |
||||||
|
</nav> |
||||||
|
</footer> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Footer; |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
.navFooterItem { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 1rem; |
||||||
|
|
||||||
|
.nextBtn { |
||||||
|
padding: 2px 0 0 0; |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 5rem; |
||||||
|
background-color: #2e81e8; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.navCircles { |
||||||
|
display: flex; |
||||||
|
.circle { |
||||||
|
background-color: #a2b4cb; |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
border-radius: 1rem; |
||||||
|
margin-left: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.active{ |
||||||
|
background-color: #2e81e8 !important; |
||||||
|
width: 30px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import "./Header.scss"; |
||||||
|
import rectangle from '../../../assets/rectangle.svg' |
||||||
|
|
||||||
|
const Header = () => { |
||||||
|
return ( |
||||||
|
<header className="fixedBlueNav"> |
||||||
|
<nav className="navLink"> |
||||||
|
<a> |
||||||
|
<Link to="/login">رد شدن</Link> |
||||||
|
</a> |
||||||
|
</nav> |
||||||
|
{/* <img className='rectanlgleImg' src={rectangle}/> */} |
||||||
|
{/* <nav className="rectangleNavWhite"> |
||||||
|
<nav className='rectangleCenterGray'></nav> |
||||||
|
<nav className='NavRectangleGray d-flex'> |
||||||
|
<nav className='rectangleGray me-3'></nav> |
||||||
|
<nav className='rectangleGray'></nav> |
||||||
|
</nav> |
||||||
|
</nav> |
||||||
|
|
||||||
|
<nav className='rectangleNavLightBlue'> |
||||||
|
<nav className='rectangleCenterBlue'></nav> |
||||||
|
<nav className='NavRectangleBlue d-flex'> |
||||||
|
<nav className='rectangleBlue me-3'></nav> |
||||||
|
<nav className='rectangleBlue'></nav> |
||||||
|
</nav> |
||||||
|
</nav> */} |
||||||
|
</header> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Header; |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
.fixedBlueNav { |
||||||
|
width: 100%; |
||||||
|
height: 45vh; |
||||||
|
background: rgb(0, 80, 179); |
||||||
|
background: linear-gradient( |
||||||
|
180deg, |
||||||
|
rgba(0, 80, 179, 1) 0%, |
||||||
|
#0252b1e7 46%, |
||||||
|
rgba(0, 137, 255, 1) 100% |
||||||
|
); |
||||||
|
|
||||||
|
.navLink { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
padding: 2.5rem 1.5rem; |
||||||
|
a { |
||||||
|
color: #fff; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rectanlgleImg{ |
||||||
|
left: -30px; |
||||||
|
width: 17rem; |
||||||
|
} |
||||||
|
|
||||||
|
// .rectangleNavWhite { |
||||||
|
// left: -30px; |
||||||
|
// background-color: #fff; |
||||||
|
// border-top-right-radius: 15px; |
||||||
|
// width: 290px; |
||||||
|
// height: 235px; |
||||||
|
// position: relative; |
||||||
|
// padding: 1rem; |
||||||
|
// z-index: 20; |
||||||
|
|
||||||
|
|
||||||
|
// .rectangleCenterGray { |
||||||
|
// position: relative; |
||||||
|
// left: -30px; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 290px; |
||||||
|
// height: 120px; |
||||||
|
// margin-bottom: 20px; |
||||||
|
// } |
||||||
|
|
||||||
|
// .rectangleGray { |
||||||
|
// position: relative; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 250px; |
||||||
|
// height: 80px; |
||||||
|
// } |
||||||
|
// } |
||||||
|
|
||||||
|
|
||||||
|
// .rectangleNavLightBlue { |
||||||
|
// top: -231px; |
||||||
|
// left: 12rem; |
||||||
|
// background-color: blue; |
||||||
|
// border-top-right-radius: 15px; |
||||||
|
// width: 180px; |
||||||
|
// height: 231px; |
||||||
|
// position: relative; |
||||||
|
// padding: 1rem; |
||||||
|
|
||||||
|
// .rectangleCenterBlue { |
||||||
|
// position: relative; |
||||||
|
// top: 2rem; |
||||||
|
// left: -30px; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 180px; |
||||||
|
// height: 120px; |
||||||
|
// margin-bottom: 20px; |
||||||
|
// } |
||||||
|
|
||||||
|
// .rectangleBlue { |
||||||
|
// position: relative; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 250px; |
||||||
|
// height: 80px; |
||||||
|
// } |
||||||
|
// } |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import "./HeaderSplash4.scss"; |
||||||
|
import rectangle from '../../../assets/rectangle.svg' |
||||||
|
|
||||||
|
const HeaderSplash4 = () => { |
||||||
|
return ( |
||||||
|
<header className="fixedgreenNav"> |
||||||
|
</header> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default HeaderSplash4; |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
.fixedgreenNav { |
||||||
|
width: 100%; |
||||||
|
height: 45vh; |
||||||
|
background: rgb(2, 255, 103); |
||||||
|
background: linear-gradient( |
||||||
|
180deg, |
||||||
|
rgba(2, 255, 103, 1) 0%, |
||||||
|
rgba(120, 255, 111, 1) 46%, |
||||||
|
rgba(158, 255, 49, 1) 100% |
||||||
|
); |
||||||
|
|
||||||
|
.navLink { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
padding: 2.5rem 1.5rem; |
||||||
|
a { |
||||||
|
color: #fff; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rectanlgleImg { |
||||||
|
left: -30px; |
||||||
|
width: 17rem; |
||||||
|
} |
||||||
|
|
||||||
|
// .rectangleNavWhite { |
||||||
|
// left: -30px; |
||||||
|
// background-color: #fff; |
||||||
|
// border-top-right-radius: 15px; |
||||||
|
// width: 290px; |
||||||
|
// height: 235px; |
||||||
|
// position: relative; |
||||||
|
// padding: 1rem; |
||||||
|
// z-index: 20; |
||||||
|
|
||||||
|
// .rectangleCenterGray { |
||||||
|
// position: relative; |
||||||
|
// left: -30px; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 290px; |
||||||
|
// height: 120px; |
||||||
|
// margin-bottom: 20px; |
||||||
|
// } |
||||||
|
|
||||||
|
// .rectangleGray { |
||||||
|
// position: relative; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 250px; |
||||||
|
// height: 80px; |
||||||
|
// } |
||||||
|
// } |
||||||
|
|
||||||
|
// .rectangleNavLightBlue { |
||||||
|
// top: -231px; |
||||||
|
// left: 12rem; |
||||||
|
// background-color: blue; |
||||||
|
// border-top-right-radius: 15px; |
||||||
|
// width: 180px; |
||||||
|
// height: 231px; |
||||||
|
// position: relative; |
||||||
|
// padding: 1rem; |
||||||
|
|
||||||
|
// .rectangleCenterBlue { |
||||||
|
// position: relative; |
||||||
|
// top: 2rem; |
||||||
|
// left: -30px; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 180px; |
||||||
|
// height: 120px; |
||||||
|
// margin-bottom: 20px; |
||||||
|
// } |
||||||
|
|
||||||
|
// .rectangleBlue { |
||||||
|
// position: relative; |
||||||
|
// background-color: #e0e0e040; |
||||||
|
// border-radius: 14px; |
||||||
|
// width: 250px; |
||||||
|
// height: 80px; |
||||||
|
// } |
||||||
|
// } |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
const LogIn = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
log in |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default LogIn |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { ChevronLeft } from "react-iconly"; |
||||||
|
import "./Rule.scss"; |
||||||
|
import { Tab, Nav } from "react-bootstrap"; |
||||||
|
import Panel1 from "./Rules/Panel1"; |
||||||
|
import Panel2 from "./Rules/Panel2"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
const Rule = () => { |
||||||
|
return ( |
||||||
|
<div className="container mainCon "> |
||||||
|
<header |
||||||
|
style={{ |
||||||
|
display: "flex", |
||||||
|
justifyContent: "space-between", |
||||||
|
alignItems: "center", |
||||||
|
}} |
||||||
|
> |
||||||
|
<h4 style={{ fontSize: "18px" }}>شرایط استفاده و حریم خصوصی</h4> |
||||||
|
<Link to="/4"> |
||||||
|
<nav className="navBack"> |
||||||
|
<ChevronLeft set="curved" /> |
||||||
|
</nav> |
||||||
|
</Link> |
||||||
|
</header> |
||||||
|
<Tab.Container |
||||||
|
defaultActiveKey="first" |
||||||
|
style={{ justifyContent: "center" }} |
||||||
|
> |
||||||
|
<Nav |
||||||
|
variant="pills" |
||||||
|
style={{ width: "100%", justifyContent: "center", marginTop: "1rem" }} |
||||||
|
> |
||||||
|
<nav |
||||||
|
style={{ |
||||||
|
border: "#2E81E8 solid 1.5px", |
||||||
|
display: "flex", |
||||||
|
borderRadius: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
<Nav.Item> |
||||||
|
<Nav.Link eventKey="first">شرایط استفاده</Nav.Link> |
||||||
|
</Nav.Item> |
||||||
|
<Nav.Item> |
||||||
|
<Nav.Link eventKey="second">حریم خصوصی</Nav.Link> |
||||||
|
</Nav.Item> |
||||||
|
</nav> |
||||||
|
</Nav> |
||||||
|
<Tab.Content> |
||||||
|
<Tab.Pane eventKey="first"> |
||||||
|
<Panel1 /> |
||||||
|
</Tab.Pane> |
||||||
|
<Tab.Pane eventKey="second"> |
||||||
|
<Panel2 /> |
||||||
|
</Tab.Pane> |
||||||
|
</Tab.Content> |
||||||
|
</Tab.Container> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Rule; |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
.mainCon { |
||||||
|
direction: rtl; |
||||||
|
margin-top: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.navBack { |
||||||
|
background-color: #2787ff20; |
||||||
|
border-radius: 15px; |
||||||
|
width: 45px; |
||||||
|
height: 45px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: #2E81E8; |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const Panel1 = () => { |
||||||
|
return ( |
||||||
|
<div className="mt-3"> |
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Panel1; |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const Panel1 = () => { |
||||||
|
return ( |
||||||
|
<div className='mt-3'> |
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
padding: '5px', |
||||||
|
fontSize: '18px', |
||||||
|
|
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{fontSize:'13px'}}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
|
||||||
|
<h4 |
||||||
|
style={{ |
||||||
|
backgroundColor: "#2E81E820", |
||||||
|
with: "100%", |
||||||
|
color: "#2E81E8", |
||||||
|
borderRadius: "5px", |
||||||
|
fontSize: "18px", |
||||||
|
padding: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
نحوه استفاده از محصولات |
||||||
|
</h4> |
||||||
|
<p style={{ fontSize: "13px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده |
||||||
|
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||||
|
سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای |
||||||
|
متنوع با هدف بهبود ابزارهای کاربردی می باشد |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Panel1; |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Header from "../Header/Header"; |
||||||
|
import Footer from "../Footer/Footer"; |
||||||
|
import "./Splashes.scss"; |
||||||
|
|
||||||
|
const Splash1 = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Header /> |
||||||
|
<nav className="container navParagraph"> |
||||||
|
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}> |
||||||
|
دنیای از فناوری های جدیدپیش روی شماست |
||||||
|
<br /> |
||||||
|
همین حالا امتحان کنید |
||||||
|
</h4> |
||||||
|
|
||||||
|
<p style={{ fontSize: "12px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با |
||||||
|
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در |
||||||
|
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و |
||||||
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، |
||||||
|
1 |
||||||
|
</p> |
||||||
|
</nav> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Splash1; |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Header from "../Header/Header"; |
||||||
|
import Footer from "../Footer/Footer"; |
||||||
|
|
||||||
|
const Splash2 = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Header /> |
||||||
|
<nav className="container navParagraph"> |
||||||
|
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}> |
||||||
|
دنیای از فناوری های جدیدپیش روی شماست |
||||||
|
<br /> |
||||||
|
همین حالا امتحان کنید |
||||||
|
</h4> |
||||||
|
|
||||||
|
<p style={{ fontSize: "12px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با |
||||||
|
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در |
||||||
|
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و |
||||||
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، |
||||||
|
2 |
||||||
|
</p> |
||||||
|
</nav> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Splash2; |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from 'react' |
||||||
|
import Header from "../Header/Header"; |
||||||
|
import Footer from "../Footer/Footer"; |
||||||
|
|
||||||
|
const Splash3 = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Header /> |
||||||
|
<nav className="container navParagraph"> |
||||||
|
<h4 style={{ fontSize: "18px", marginBottom: "1rem" }}> |
||||||
|
دنیای از فناوری های جدیدپیش روی شماست |
||||||
|
<br /> |
||||||
|
همین حالا امتحان کنید |
||||||
|
</h4> |
||||||
|
|
||||||
|
<p style={{ fontSize: "12px" }}> |
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با |
||||||
|
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در |
||||||
|
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و |
||||||
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، |
||||||
|
3 |
||||||
|
</p> |
||||||
|
</nav> |
||||||
|
<Footer />
|
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Splash3 |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
.navParagraph{ |
||||||
|
margin-top: 2rem; |
||||||
|
direction: rtl; |
||||||
|
} |
||||||
|
|
||||||
|
.logInBtn{ |
||||||
|
width: 100%; |
||||||
|
background-color: #2E81E8 ; |
||||||
|
border-radius: 8px; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
color: #fff; |
||||||
|
padding: 0.75rem 1rem ; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.signInBtn{ |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 8px; |
||||||
|
border: #2E81E8 solid 1.5px ; |
||||||
|
outline: none; |
||||||
|
color: #2E81E8; |
||||||
|
padding: 0.75rem 1rem ; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.link{ |
||||||
|
font-weight: bold; |
||||||
|
text-decoration: none; |
||||||
|
color: #000; |
||||||
|
} |
||||||
@ -1,13 +0,0 @@ |
|||||||
body { |
|
||||||
margin: 0; |
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', |
|
||||||
sans-serif; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
code { |
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', |
|
||||||
monospace; |
|
||||||
} |
|
||||||
@ -1,17 +1,7 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import ReactDOM from 'react-dom'; |
import ReactDOM from "react-dom"; |
||||||
import './index.css'; |
import App from "./App"; |
||||||
import App from './App'; |
import "bootstrap/dist/css/bootstrap.css"; |
||||||
import reportWebVitals from './reportWebVitals'; |
import "./index.scss"; |
||||||
|
|
||||||
ReactDOM.render( |
ReactDOM.render(<App />, document.getElementById("root")); |
||||||
<React.StrictMode> |
|
||||||
<App /> |
|
||||||
</React.StrictMode>, |
|
||||||
document.getElementById('root') |
|
||||||
); |
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
||||||
reportWebVitals(); |
|
||||||
|
|||||||
@ -0,0 +1,5 @@ |
|||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-family: "IranSans"; |
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,13 +0,0 @@ |
|||||||
const reportWebVitals = onPerfEntry => { |
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) { |
|
||||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { |
|
||||||
getCLS(onPerfEntry); |
|
||||||
getFID(onPerfEntry); |
|
||||||
getFCP(onPerfEntry); |
|
||||||
getLCP(onPerfEntry); |
|
||||||
getTTFB(onPerfEntry); |
|
||||||
}); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
export default reportWebVitals; |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import '@testing-library/jest-dom'; |
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue