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 './App.css'; |
||||
import React from "react"; |
||||
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 ( |
||||
<div className="App"> |
||||
<header className="App-header"> |
||||
<img src={logo} className="App-logo" alt="logo" /> |
||||
<p> |
||||
Edit <code>src/App.js</code> and save to reload. |
||||
</p> |
||||
<a |
||||
className="App-link" |
||||
href="https://reactjs.org" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
Learn React |
||||
</a> |
||||
</header> |
||||
</div> |
||||
<> |
||||
<Router> |
||||
<Links /> |
||||
<Switch> |
||||
<RoutPage /> |
||||
</Switch> |
||||
</Router> |
||||
</> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
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 ReactDOM from 'react-dom'; |
||||
import './index.css'; |
||||
import App from './App'; |
||||
import reportWebVitals from './reportWebVitals'; |
||||
import React from "react"; |
||||
import ReactDOM from "react-dom"; |
||||
import App from "./App"; |
||||
import "bootstrap/dist/css/bootstrap.css"; |
||||
import "./index.scss"; |
||||
|
||||
ReactDOM.render( |
||||
<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(); |
||||
ReactDOM.render(<App />, document.getElementById("root")); |
||||
|
||||
@ -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