parent
a8b5d34d4d
commit
d815b36ec6
54 changed files with 1206 additions and 304 deletions
|
After Width: | Height: | Size: 854 B |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 608 B |
|
After Width: | Height: | Size: 452 B |
|
After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 665 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 287 KiB |
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 256 KiB |
|
After Width: | Height: | Size: 227 KiB |
|
After Width: | Height: | Size: 671 KiB |
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 487 KiB |
@ -0,0 +1,83 @@ |
|||||||
|
import React, { Component, Fragment } from "react"; |
||||||
|
import Navbar from "../Home/Navbar/index"; |
||||||
|
import Footer from "../Home/Footer/index"; |
||||||
|
|
||||||
|
import pic from "../../assets/images/pic.png"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
export default class About extends Component { |
||||||
|
state = { |
||||||
|
fury: { |
||||||
|
title: "ماموریت ما در دانوین", |
||||||
|
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت", |
||||||
|
}, |
||||||
|
|
||||||
|
keywords: { |
||||||
|
title: "کلمات کلیدی ماموریت", |
||||||
|
list: [ |
||||||
|
"کیفیت آموزش", |
||||||
|
"جذابیت", |
||||||
|
"سازگار با نظام آموزش و پرورش", |
||||||
|
"در راستای نیل به سند تحول", |
||||||
|
], |
||||||
|
}, |
||||||
|
advantages: { |
||||||
|
title: "مزیت رقابت اصلی", |
||||||
|
list: [ |
||||||
|
"بکارگیری بروزترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)", |
||||||
|
"دارای رویکرد آموزش سرگرم کننده", |
||||||
|
"بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی", |
||||||
|
"رویکرد معرفتی - ارزشی", |
||||||
|
"ویدیوهای منحصر بفرد", |
||||||
|
"متن گفتگو محور - روایی- قابل فهم - جذاب و سرگرم کننده", |
||||||
|
], |
||||||
|
}, |
||||||
|
}; |
||||||
|
render() { |
||||||
|
const { fury, advantages, keywords } = this.state; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="about d-flex flex-column align-items-center"> |
||||||
|
<Navbar /> |
||||||
|
<div className="about__fury d-flex"> |
||||||
|
<div className="about__fury--right d-flex flex-column justify-content-center"> |
||||||
|
<div className="right-top align-self-start"> |
||||||
|
<h1>{fury.title}</h1> |
||||||
|
<p>{fury.text}</p> |
||||||
|
</div> |
||||||
|
<div className="right-bottom align-self-end"> |
||||||
|
<h1>{keywords.title}</h1> |
||||||
|
<ul> |
||||||
|
{keywords.list.map((item, i) => ( |
||||||
|
<Fragment key={i}> |
||||||
|
<li>{item}</li><br/> |
||||||
|
</Fragment> |
||||||
|
|
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="about__fury--left d-flex align-items-center"></div> |
||||||
|
</div> |
||||||
|
<div className="about__advantages d-flex"> |
||||||
|
<div className="about__advantages--right d-flex"> |
||||||
|
<img src={pic} alt={'عکس'} /> |
||||||
|
</div> |
||||||
|
<div className="about__advantages--left"> |
||||||
|
<h1>{advantages.title}</h1> |
||||||
|
<ul> |
||||||
|
{advantages.list.map((item, i) => ( |
||||||
|
<Fragment key={i}> |
||||||
|
<li>{item}</li><br/> |
||||||
|
</Fragment> |
||||||
|
|
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
.about { |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
min-height: calc(100vh - 288px); |
||||||
|
&__fury { |
||||||
|
margin-top: 30px; |
||||||
|
width: 100%; |
||||||
|
height: 400px; |
||||||
|
justify-content: space-between; |
||||||
|
&--right { |
||||||
|
align-items: center; |
||||||
|
width: 35%; |
||||||
|
.right-top { |
||||||
|
h1 { |
||||||
|
display: inline; |
||||||
|
letter-spacing: -2px; |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 55); |
||||||
|
background-color: #7dc241; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
p { |
||||||
|
margin-top: 10px; |
||||||
|
text-align: justify; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
color: #6d6d6d; |
||||||
|
} |
||||||
|
} |
||||||
|
.right-bottom { |
||||||
|
margin-top: 20px; |
||||||
|
h1 { |
||||||
|
display: inline; |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 85); |
||||||
|
background-color: #7dc241; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
ul { |
||||||
|
margin: 0px; |
||||||
|
list-style: none; |
||||||
|
padding: 0px; |
||||||
|
margin-top: 5px; |
||||||
|
li { |
||||||
|
display: inline; |
||||||
|
border-bottom: 2px solid #7dc241; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
color: #6d6d6d; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--left { |
||||||
|
width: 60%; |
||||||
|
background-color: #eee; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
&__advantages { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
margin-top: 50px; |
||||||
|
margin-bottom: 50px; |
||||||
|
justify-content: space-around; |
||||||
|
&--right { |
||||||
|
width: 48%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
&--left { |
||||||
|
padding-top: 80px; |
||||||
|
width: 48%; |
||||||
|
height: 100%; |
||||||
|
align-items: flex-end; |
||||||
|
margin-top: 20px; |
||||||
|
h1 { |
||||||
|
display: inline; |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 55); |
||||||
|
background-color: #7dc241; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
ul { |
||||||
|
margin: 0px; |
||||||
|
list-style: none; |
||||||
|
padding: 0px; |
||||||
|
margin-top: 5px; |
||||||
|
li { |
||||||
|
display: inline; |
||||||
|
text-align: justify; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
color: #6d6d6d; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import TextField from '@material-ui/core/TextField'; |
||||||
|
import { makeStyles } from '@material-ui/core/styles'; |
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({ |
||||||
|
root: { |
||||||
|
'& .MuiTextField-root': { |
||||||
|
|
||||||
|
width: '350px', |
||||||
|
position : 'relative', |
||||||
|
marginTop : 20, |
||||||
|
}, |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
export default function FormPropsTextFields(props) { |
||||||
|
const classes = useStyles(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<form className={classes.root} noValidate autoComplete="off"> |
||||||
|
<div> |
||||||
|
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" /> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { makeStyles, withStyles } from '@material-ui/core/styles'; |
||||||
|
import FormControl from '@material-ui/core/FormControl'; |
||||||
|
import NativeSelect from '@material-ui/core/NativeSelect'; |
||||||
|
import InputBase from '@material-ui/core/InputBase'; |
||||||
|
|
||||||
|
const BootstrapInput = withStyles((theme) => ({ |
||||||
|
root: { |
||||||
|
'label + &': { |
||||||
|
marginTop: theme.spacing(3), |
||||||
|
}, |
||||||
|
}, |
||||||
|
input: { |
||||||
|
width : 350, |
||||||
|
borderRadius: 4, |
||||||
|
position: 'relative', |
||||||
|
backgroundColor: theme.palette.background.paper, |
||||||
|
border: '0px solid #cecece', |
||||||
|
fontSize: 16, |
||||||
|
padding: '10px 26px 10px 12px', |
||||||
|
transition: theme.transitions.create(['border-color', 'box-shadow']), |
||||||
|
// Use the system font instead of the default Roboto font.
|
||||||
|
fontFamily: [ |
||||||
|
'-apple-system', |
||||||
|
'BlinkMacSystemFont', |
||||||
|
'"Segoe UI"', |
||||||
|
'Roboto', |
||||||
|
'"Helvetica Neue"', |
||||||
|
'Arial', |
||||||
|
'sans-serif', |
||||||
|
'"Apple Color Emoji"', |
||||||
|
'"Segoe UI Emoji"', |
||||||
|
'"Segoe UI Symbol"', |
||||||
|
].join(','), |
||||||
|
'&:focus': { |
||||||
|
borderRadius: 4, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}))(InputBase); |
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({ |
||||||
|
margin: { |
||||||
|
// margin: theme.spacing(1),
|
||||||
|
marginTop: 20, |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
export default function CustomizedSelects(props) { |
||||||
|
const classes = useStyles(); |
||||||
|
const [age, setAge] = React.useState(''); |
||||||
|
const handleChange = (event) => { |
||||||
|
setAge(event.target.value); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="home-search__select mr-2"> |
||||||
|
<FormControl className={classes.margin}> |
||||||
|
<NativeSelect |
||||||
|
id="demo-customized-select-native" |
||||||
|
value={age} |
||||||
|
onChange={handleChange} |
||||||
|
input={<BootstrapInput />} |
||||||
|
> |
||||||
|
{ |
||||||
|
props.options.map(item => ( |
||||||
|
<option value={item}>{item}</option> |
||||||
|
)) |
||||||
|
} |
||||||
|
</NativeSelect> |
||||||
|
</FormControl> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,156 @@ |
|||||||
|
.contact { |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding: 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
min-height: calc(100vh - 288px); |
||||||
|
&__forms { |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 30px; |
||||||
|
margin-bottom: 80px; |
||||||
|
&--right { |
||||||
|
width: 45%; |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
top: 0px !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border-color: #cecece !important; |
||||||
|
border-width: 1px !important; |
||||||
|
color: green !important; |
||||||
|
font-size: calc(100vw / 85) !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 20px 14px !important; |
||||||
|
font-size: calc(100vw / 85) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-outlined { |
||||||
|
font-family: numeralLight !important; |
||||||
|
display: inline !important; |
||||||
|
position: absolute; |
||||||
|
text-align: right !important; |
||||||
|
right: 10px; |
||||||
|
top: 12px; |
||||||
|
padding: 0px !important; |
||||||
|
transform: translate(0px, 0px) scale(1) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-shrink { |
||||||
|
text-align: right !important; |
||||||
|
display: inline; |
||||||
|
position: absolute; |
||||||
|
right: -5px; |
||||||
|
top: -8px; |
||||||
|
transform: translate(0px, 0px) scale(0.75) !important; |
||||||
|
padding-right: 15px !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: white; |
||||||
|
max-width: 120px; |
||||||
|
text-align: center; |
||||||
|
font-size: calc(100vw / 85) !important; |
||||||
|
color: #797979 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 0.54) !important; |
||||||
|
border-color: #c4c4c5 !important; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
letter-spacing: -2px; |
||||||
|
color: #6cbe44; |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
color: #6f7074; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
align-self: flex-start; |
||||||
|
margin-top: 30px; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
color: white; |
||||||
|
background-color: #6cbe44; |
||||||
|
border-radius: 6px; |
||||||
|
padding: 5px 25px; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
max-width: 110px; |
||||||
|
border: 0px; |
||||||
|
&:hover { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
textarea { |
||||||
|
width: 350px; |
||||||
|
font-family: numeralLight; |
||||||
|
border-radius: 10px; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
margin-top: 20px; |
||||||
|
border: 1px solid #c4c4c5; |
||||||
|
padding: 10px 8px; |
||||||
|
color: #6f7074; |
||||||
|
&::placeholder { |
||||||
|
color: #797979; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
outline: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiFormControl-root { |
||||||
|
select { |
||||||
|
font-family: numeralLight; |
||||||
|
height: 100%; |
||||||
|
direction: rtl; |
||||||
|
border: 1px solid #cecece !important; |
||||||
|
text-align: center !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
font-size: calc(100vw / 85); |
||||||
|
color: #76797e !important; |
||||||
|
&:focus { |
||||||
|
background-color: white !important; |
||||||
|
} |
||||||
|
option { |
||||||
|
font-size: calc(100vw / 80) !important; |
||||||
|
padding: 5px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiNativeSelect-icon { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiNativeSelect-select { |
||||||
|
padding: 8px 10px 8px 100px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&--left { |
||||||
|
width: 45%; |
||||||
|
height: 100%; |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
margin-bottom: 0px; |
||||||
|
color: #6f7074; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
margin-bottom: 0px; |
||||||
|
color: #6f7074; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.contact__map { |
||||||
|
width: 100%; |
||||||
|
height: 430px; |
||||||
|
background-color: #eee; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; |
||||||
|
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
export default class Collapse extends Component { |
||||||
|
render() { |
||||||
|
const { message, setMessageActive } = this.props; |
||||||
|
return ( |
||||||
|
<div className="collapse d-flex flex-column"> |
||||||
|
<div |
||||||
|
className={`collapse__header d-flex ${ |
||||||
|
message.active ? "collapse-header-border" : null |
||||||
|
}`}
|
||||||
|
style={{ borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderBottom: message.active ? 0 : '1px solid rgb(223, 223, 223)' }} |
||||||
|
onClick={() => setMessageActive(message.id, message.active)} |
||||||
|
> |
||||||
|
<h2 style={message.active ? { color: "#7dc241" } : { color: "#666" }}> |
||||||
|
{message.title} |
||||||
|
</h2> |
||||||
|
{message.active ? ( |
||||||
|
<KeyboardArrowUpIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} /> |
||||||
|
) : ( |
||||||
|
<KeyboardArrowDownIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{message.active ? ( |
||||||
|
<div |
||||||
|
className="collapse__body" |
||||||
|
style={{ borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderTop: 0}} |
||||||
|
> |
||||||
|
{message.description} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
.collapse{ |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 6px; |
||||||
|
margin-top: 6px; |
||||||
|
font-family: numeralMedium; |
||||||
|
&__header{ |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
background-color: white; |
||||||
|
border: 1px solid rgb(223, 223, 223); |
||||||
|
border-radius: 6px; |
||||||
|
padding : 0px 15px 0px; |
||||||
|
cursor: pointer; |
||||||
|
& h2{ |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
margin-bottom: 0px; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
& img{ |
||||||
|
width: 22px; |
||||||
|
height: 22px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__body{ |
||||||
|
font-family: numeralLight; |
||||||
|
text-align: justify; |
||||||
|
direction: rtl; |
||||||
|
width: 100%; |
||||||
|
padding : 10px 10px; |
||||||
|
font-size: calc(100vw / 95); |
||||||
|
color : #a5a5a5; |
||||||
|
background-color: white; |
||||||
|
border: 1px solid grey; |
||||||
|
border-bottom-left-radius: 10px; |
||||||
|
border-bottom-right-radius: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.collapse-header-border{ |
||||||
|
border-radius: 0px !important; |
||||||
|
border-top-right-radius: 6px !important; |
||||||
|
border-top-left-radius: 6px !important; |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import Navbar from "../Home/Navbar/index"; |
||||||
|
import Footer from "../Home/Footer/index"; |
||||||
|
import Collapse from './Collapse/index'; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
export default class Faq extends Component { |
||||||
|
state = { |
||||||
|
messages: [ |
||||||
|
{id: 0, title : 'چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
||||||
|
{id: 1, title : 'نحوه سفارش برای خارج از کشور چگونه است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
||||||
|
{id: 2, title : 'آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
||||||
|
{id: 3, title : 'در صورت فراموشی رمزعبور باید چکار کنیم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
||||||
|
{id: 4, title : 'امکان بازگشت وجه تا چند روز ممکن است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
||||||
|
], |
||||||
|
} |
||||||
|
|
||||||
|
setMessageActive = (id, status) => { |
||||||
|
if(status){ |
||||||
|
this.setState(prevState => ({ |
||||||
|
messages: prevState.messages.map(item => item.id === id ? {...item, active: false}: item) |
||||||
|
})); |
||||||
|
}else{ |
||||||
|
this.setState(prevState => ({ |
||||||
|
messages: prevState.messages.map(item => item.id === id ? {...item, active: true}: {...item, active: false}) |
||||||
|
})); |
||||||
|
} |
||||||
|
} |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="faq d-flex flex-column align-items-center"> |
||||||
|
<Navbar /> |
||||||
|
<header className="faq__header d-flex flex-column align-items-center"> |
||||||
|
<h1>سلام چطوری میتونم کمکتون کنم؟</h1> |
||||||
|
<div className="faq__header--search d-flex align-items-center"> |
||||||
|
<input type="search" placeholder="دنبال چه چیزی برات باشیم؟" /> |
||||||
|
<button type="submit">جستجو</button> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div className="faq__list d-flex flex-column"> |
||||||
|
{ |
||||||
|
this.state.messages.map((item,i) => ( |
||||||
|
<Collapse setMessageActive={this.setMessageActive} message={item} key={i} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
.faq{ |
||||||
|
width: 100vw; |
||||||
|
max-width: 1250px; |
||||||
|
margin: 0px auto; |
||||||
|
padding : 0px 10px; |
||||||
|
direction: rtl; |
||||||
|
min-height: calc(100vh - 288px); |
||||||
|
&__header{ |
||||||
|
margin-top: 30px; |
||||||
|
h1{ |
||||||
|
letter-spacing: -2px; |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 25); |
||||||
|
color: #424246; |
||||||
|
} |
||||||
|
&--search{ |
||||||
|
margin-top: 20px; |
||||||
|
width: 100%; |
||||||
|
border: 2px solid rgb(197, 197, 197); |
||||||
|
border-radius: 10px; |
||||||
|
padding: 5px; |
||||||
|
justify-content:space-between; |
||||||
|
input { |
||||||
|
border: 0px; |
||||||
|
flex: 1; |
||||||
|
border: 0px; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
color: green; |
||||||
|
padding: 0px 10px 0px; |
||||||
|
font-size: 16px; |
||||||
|
font-family: numeralMedium; |
||||||
|
&::placeholder { |
||||||
|
color: #d8dce5; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
outline: 0px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
button{ |
||||||
|
font-family: numeralMedium; |
||||||
|
border: 0px; |
||||||
|
background-color: #7dc241; |
||||||
|
color: white; |
||||||
|
border-radius: 10px; |
||||||
|
padding : 7px 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__list{ |
||||||
|
width: 100%; |
||||||
|
max-width: 1000px; |
||||||
|
margin: 30px 0px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import {Link} from 'react-router-dom'; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
export default class SingleBlog extends Component { |
||||||
|
render() { |
||||||
|
const { height, data, direction } = this.props; |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ height: height }} |
||||||
|
className="single-blog d-flex" |
||||||
|
> |
||||||
|
<div className="single-blog__right d-flex flex-column justify-content-center"> |
||||||
|
<h1>{data.title}</h1> |
||||||
|
<p>{data.subTitle}</p> |
||||||
|
<Link to={data.link}> |
||||||
|
{data.buttonText} |
||||||
|
</Link> |
||||||
|
</div> |
||||||
|
<div className="single-blog__left d-flex"> |
||||||
|
{ |
||||||
|
data.image ?
|
||||||
|
<img src={data.image} alt={data.title} /> : null |
||||||
|
} |
||||||
|
{ |
||||||
|
data.video ?
|
||||||
|
<video sourcce={data.video} /> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.single-blog{ |
||||||
|
width: 100%; |
||||||
|
&__right{ |
||||||
|
width: 50%; |
||||||
|
height: 100%; |
||||||
|
align-items: flex-start; |
||||||
|
padding-left: 15%; |
||||||
|
h1{ |
||||||
|
font-family: numeralBold; |
||||||
|
color: #1bbc6e; |
||||||
|
font-size: calc(100vw / 45); |
||||||
|
text-align: justify; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
text-align: justify; |
||||||
|
margin-top: 15px; |
||||||
|
color: #a5a5a5; |
||||||
|
} |
||||||
|
a{ |
||||||
|
font-family: numeralMedium; |
||||||
|
align-self: flex-end; |
||||||
|
padding: 8px 12px; |
||||||
|
color: #1bbc6e; |
||||||
|
text-decoration: none; |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid #1bbc6e; |
||||||
|
margin-top: 20px; |
||||||
|
&:hover{ |
||||||
|
color: #1bbc6e; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__left{ |
||||||
|
width: 50%; |
||||||
|
height: 100%; |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue