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; |
||||
} |
||||
} |
||||
@ -1,55 +1,60 @@ |
||||
.slider-blog{ |
||||
margin : 10px; |
||||
.slider-blog { |
||||
margin: 10px; |
||||
padding: 10px 15px; |
||||
box-shadow: 0px 0px 5px rgb(200, 200, 200); |
||||
border-radius: 15px; |
||||
a{ |
||||
width : 100%; |
||||
width: 100%; |
||||
text-decoration: none; |
||||
color: green; |
||||
&:hover{ |
||||
color: green; |
||||
} |
||||
img{ |
||||
position: relative; |
||||
img { |
||||
width: 100%; |
||||
height: 300px; |
||||
height: 200px; |
||||
border-radius: 10px; |
||||
} |
||||
h1{ |
||||
h1 { |
||||
font-family: numeralBold; |
||||
margin-top: 15px; |
||||
font-size: calc(100vw / 80); |
||||
color: #6f7074; |
||||
} |
||||
h2{ |
||||
margin-top: 10px; |
||||
font-size: calc(100vw / 95); |
||||
color: #afafaf; |
||||
h2 { |
||||
font-family: numeralLight; |
||||
margin-top: 5px; |
||||
font-size: calc(100vw / 100); |
||||
color: #a5a5a5; |
||||
} |
||||
&__category{ |
||||
font-family: numeralMedium; |
||||
position: absolute; |
||||
top: 20px; |
||||
left: 23px; |
||||
color: white; |
||||
padding: 5px 7px; |
||||
border-radius: 5px; |
||||
font-size: calc(100vw / 120); |
||||
} |
||||
|
||||
&__footer { |
||||
width: 100%; |
||||
align-items:center; |
||||
justify-content:space-between; |
||||
a { |
||||
font-family: numeralMedium; |
||||
padding: 6px 12px; |
||||
background-color: #e6e6e6; |
||||
color: #02733c; |
||||
text-decoration: none; |
||||
border-radius: 5px; |
||||
font-size: calc(100vw / 120); |
||||
&:hover{ |
||||
color: #02733c; |
||||
} |
||||
&__notAvailabe{ |
||||
font-size: calc(100vw / 85); |
||||
width : 100%; |
||||
text-align: center; |
||||
color: #afafaf; |
||||
margin-top: 15px; |
||||
} |
||||
&__price{ |
||||
font-size: calc(100vw / 85); |
||||
width : 100%; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
&--old{ |
||||
color: #afafaf; |
||||
position: relative; |
||||
margin-left: 10px; |
||||
align-items:center; |
||||
span{ |
||||
position: absolute; |
||||
left: 0px; |
||||
width : 100%; |
||||
height: 2px; |
||||
background-color: #afafafa3; |
||||
transform: rotate(-14deg); |
||||
} |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 120); |
||||
color: #a5a5a5; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
} |
||||
@ -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