reza fixed links

master
Reza_ashrafi 3 years ago
parent 7a3ffff850
commit 635a0c1416
  1. 2
      src/views/About/index.js
  2. 52
      src/views/Activation/History/index.js
  3. 67
      src/views/Activation/History/index.scss
  4. 147
      src/views/Activation/index.js
  5. 105
      src/views/Activation/index.scss
  6. 2
      src/views/Contact/index.js
  7. 53
      src/views/Faq/Collapse/index.js
  8. 3
      src/views/Faq/Collapse/index.scss
  9. 133
      src/views/Faq/index.js
  10. 75
      src/views/Faq/index.scss
  11. 2
      src/views/Home/HomeSlider/Simple/index.js
  12. 4
      src/views/Home/HomeSlider/index.js
  13. 35
      src/views/Home/Navbar/Laptop/index.js
  14. 4
      src/views/Home/Navbar/Laptop/index.scss
  15. 10
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  16. 2
      src/views/Home/Navbar/index.js
  17. 4
      src/views/Home/index.js
  18. 148
      src/views/Product/index.scss
  19. 4
      src/views/Products/index.js
  20. 1
      src/views/Products/index.scss

@ -38,7 +38,7 @@ export default class About extends Component {
return (
<>
<div className="about d-flex flex-column align-items-center">
<Navbar />
<Navbar page={'about'} />
<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">

@ -1,18 +1,38 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import './index.scss';
export default function History(props){
const {data} = props;
return(
<>
{
window.innerWidth > 1000 ?
<div className="last-qr">
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 90,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
},
};
</div> : null
}
{
window.innerWidth < 1000 ?
export default function History(props) {
const { data } = props;
return (
<>
{window.innerWidth > 1000 ? (
<div className="activation-history d-flex">
<div>
<img src={data.image} alt={data.title} />
<strong style={{ fontSize: fontSize.desktop.strong }}>
{data.title}
</strong>
</div>
<span style={{ fontSize: fontSize.desktop.span }}>
{data.subTitle}
</span>
<button style={{ fontSize: fontSize.desktop.button }}>
{data.status}
</button>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-activation-history d-flex">
<div className="mobile-activation-history__right d-flex">
<img src={data.image} alt={data.title} />
@ -24,8 +44,8 @@ export default function History(props){
<div className="mobile-activation-history__left d-flex">
<button>{data.status}</button>
</div>
</div> : null
}
</div>
) : null}
</>
);
}
}

@ -1,44 +1,83 @@
.mobile-activation-history{
.mobile-activation-history {
width: 100%;
padding: 15px 10px;
justify-content: space-between;
background-color:white;
align-items:center;
background-color: white;
align-items: center;
border-radius: 10px;
box-shadow: 0px 0px 10px rgb(226, 226, 226);
&__right{
align-items:center;
img{
&__right {
align-items: center;
img {
height: 100px;
border-radius: 10px;
margin-left: 15px;
}
strong{
strong {
font-family: numeralMedium;
font-size: calc(100vw / 30);
font-weight: 600;
letter-spacing: -1px;
}
span{
span {
font-family: numeralMedium;
font-size: calc(100vw / 35);
color: #00CC69;
color: #00cc69;
}
}
&__left{
button{
&__left {
button {
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
color: #00CC69;
color: #00cc69;
border-radius: 25px;
font-size: calc(100vw / 26);
border: 1px solid #00cc69;
background-color: white;
&:focus:enabled{
&:focus:enabled {
text-decoration: none;
}
}
}
}
}
.activation-history {
width: 100%;
padding: 10px 10px;
justify-content: space-between;
background-color: white;
align-items: center;
border-radius: 10px;
box-shadow: 0px 0px 10px rgb(226, 226, 226);
align-items: center;
img {
height: 100px;
border-radius: 10px;
margin-left: 15px;
}
strong {
font-family: numeralMedium;
font-weight: 600;
letter-spacing: -1px;
}
span {
font-family: numeralMedium;
color: #00cc69;
}
button {
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
color: #00cc69;
border-radius: 25px;
border: 1px solid #00cc69;
background-color: white;
&:focus:enabled {
text-decoration: none;
}
}
}

@ -1,50 +1,53 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import {Link} from 'react-router-dom';
import History from './History/index';
import { Link } from "react-router-dom";
import History from "./History/index";
import book1 from '../../assets/images/book1.png';
import analytics from '../../assets/icons/analytics.svg';
import danger from '../../assets/icons/danger.svg';
import book1 from "../../assets/images/book1.png";
import analytics from "../../assets/icons/analytics.svg";
import danger from "../../assets/icons/danger.svg";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 45,
h2: window.innerWidth > maxDesktopSize ? 21 : window.innerWidth / 65,
p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
},
};
import './index.scss';
export default class Activation extends Component {
state= {
state = {
value: null,
}
};
render() {
const { data } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="mobile-activation d-flex">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-activation d-flex flex-column align-items-center">
<div className="activation d-flex flex-column align-items-center">
<Navbar />
<div className="mobile-activation__back d-flex">
<Link to="/">بازگشت</Link>
</div>
<header className="mobile-activation__header d-flex flex-column align-items-center">
<header className="activation__header d-flex flex-column align-items-center">
<img src={analytics} alt="فعال سازی کتاب" />
<h1>فعال سازی کتاب الکترونیک</h1>
<h1 style={{fontSize: fontSize.desktop.h1 }}>فعال سازی کتاب الکترونیک</h1>
</header>
<div className="mobile-activation__description d-flex">
<div className="activation__description d-flex">
<span>.</span>
<p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p>
<p style={{ fontSize: fontSize.desktop.p }}>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div>
<form
className="mobile-activation__form d-flex flex-column"
onSubmit={() =>
console.log()
}
className="activation__form d-flex"
onSubmit={() => console.log()}
>
<input
id="code"
@ -52,24 +55,76 @@ export default class Activation extends Component {
maxLength={9}
autoComplete="off"
onChange={(e) => this.setState({ code: e.target.value })}
style={{fontSize: fontSize.desktop.form }}
/>
<button type="submit">ثبت کد فعال سازی</button>
<button style={{fontSize: fontSize.desktop.form }} type="submit">ثبت کد فعال سازی</button>
</form>
<div className="mobile-activation__support d-flex align-center">
<span><img src={danger} /></span>
<p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p>
<div className="activation__support d-flex align-center">
<span>
<img src={danger} />
</span>
<p style={{ fontSize: fontSize.desktop.p }}>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div>
<div className="mobile-activation__history d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{
data.map((item, i) => (
<History data={item} key={i} />
))
}
<div className="activation__history d-flex flex-column">
<h2 style={{fontSize: fontSize.desktop.h2 }}>آخرین مشاهدات</h2>
{data.map((item, i) => (
<History data={item} key={i} />
))}
</div>
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-activation d-flex flex-column align-items-center">
<Navbar />
<div className="mobile-activation__back d-flex">
<Link to="/">بازگشت</Link>
</div>
<header className="mobile-activation__header d-flex flex-column align-items-center">
<img src={analytics} alt="فعال سازی کتاب" />
<h1>فعال سازی کتاب الکترونیک</h1>
</header>
<div className="mobile-activation__description d-flex">
<span>.</span>
<p>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div>
<form
className="mobile-activation__form d-flex flex-column"
onSubmit={() => console.log()}
>
<input
id="code"
type="text"
maxLength={9}
autoComplete="off"
onChange={(e) => this.setState({ code: e.target.value })}
/>
<button type="submit">ثبت کد فعال سازی</button>
</form>
<div className="mobile-activation__support d-flex align-center">
<span>
<img src={danger} />
</span>
<p>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div>
<div className="mobile-activation__history d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{data.map((item, i) => (
<History data={item} key={i} />
))}
</div>
</div>
) : null}
</>
);
}
@ -78,10 +133,10 @@ export default class Activation extends Component {
Activation.defaultProps = {
data: [
{
title : 'ریاضیات گسسته خیلی پیشرفته',
subTitle: 'پایه هفتم ابتدایی',
status: 'انجام شد',
image : book1
}
]
}
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی",
status: "انجام شد",
image: book1,
},
],
};

@ -1,6 +1,6 @@
.mobile-activation{
width: 100vw;
max-width: 1250px;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
@ -108,4 +108,107 @@
margin-bottom: 20px;
}
}
}
.activation{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
overflow-x: hidden;
&__header{
max-width: 900px;
width: 100%;
margin-top: 30px;
img{
width: 200px;
}
h1{
font-family: numeralBold;
margin-top: 15px;
color: #00CC69;
letter-spacing: -2px;
}
}
&__description{
width: 100%;
margin-top: 30px;
max-width: 900px;
span{
font-size: 50px;
color: #00CC69;
margin-left: 10px;
position: relative;
bottom: 42px;
}
p{
font-size: calc(100vw / 30);
color: #6F7074;
font-family: numeralMedium;
}
}
&__form{
width: 100%;
max-width: 900px;
font-family: numeralMedium;
justify-content: space-between;
input{
width: 70%;
background-color: #F6F6F6;
color: #4D4D4F;
text-align: center;
direction: ltr;
border: 0px;
height: 60px;
border-radius: 10px;
&:focus{
outline: 0px;
}
}
button{
width : 25%;
height: 60px;
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 16px 20px 16px;
background-color: #00CC69;
border-radius: 10px;
color: white;
border: 0px;
letter-spacing: -1px;
&:focus:enabled{
text-decoration: none;
}
}
}
&__support{
width: 100%;
max-width: 900px;
margin-top: 30px;
align-items: center;
span{
color: #00CC69;
margin-left: 10px;
}
p{
color: #afafaf;
font-family: numeralMedium;
text-align: center;
margin-bottom: 0px;
}
}
&__history{
width: 100%;
max-width: 900px;
margin: 50px 0px;
h2{
font-family: numeralBold;
color: #02A255;
margin-bottom: 20px;
}
}
}

@ -13,7 +13,7 @@ export default class Contact extends Component {
return (
<>
<div className="contact d-flex flex-column align-items-center">
<Navbar />
<Navbar page={'contact'} />
<div className="contact__forms d-flex">
<div className="contact__forms--right d-flex flex-column">
<h1>تماس با ما</h1>

@ -4,6 +4,19 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 27,
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 30,
},
desktop: {
h2: window.innerWidth > maxMobileSize ? 22 : window.innerWidth / 80,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 95,
},
};
export default class Collapse extends Component {
render() {
const { message, setMessageActive } = this.props;
@ -13,22 +26,52 @@ export default class Collapse extends Component {
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)' }}
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" }}>
<h2
style={
{
color: message.active ? "#7dc241" : "#666",
fontSize:
window.innerWidth > 1000
? fontSize.desktop.h2
: fontSize.mobile.h2,
}
}
>
{message.title}
</h2>
{message.active ? (
<KeyboardArrowUpIcon style={{ fontSize: 30, color: message.active ? "#7dc241" : 'grey' }} />
<KeyboardArrowUpIcon
style={{
fontSize: 30,
color: message.active ? "#7dc241" : "grey",
}}
/>
) : (
<KeyboardArrowDownIcon 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}}
style={{
borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)",
borderTop: 0,
fontSize:
window.innerWidth > 1000
? fontSize.desktop.div
: fontSize.mobile.div,
}}
>
{message.description}
</div>

@ -15,7 +15,6 @@
padding : 0px 15px 0px;
cursor: pointer;
& h2{
font-size: calc(100vw / 80);
margin-bottom: 0px;
letter-spacing: -1px;
}
@ -30,12 +29,12 @@
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;
letter-spacing: -1px;
}
}

@ -1,52 +1,129 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Collapse from './Collapse/index';
import Collapse from "./Collapse/index";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 25,
p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 70,
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 75,
form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 70,
},
};
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},
{
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)
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})
} 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">
{window.innerWidth > 1000 ? (
<>
<div className="faq d-flex flex-column align-items-center">
<Navbar page={"faq"} />
<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" style={{fontSize: fontSize.mobile.button}}>جستجو</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 />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-faq d-flex flex-column align-items-center">
<Navbar page={"mobile-faq"} />
<header className="mobile-faq__header d-flex flex-column align-items-center">
<h1 style={{fontSize: fontSize.mobile.h1 }}>سلام چطوری میتونم کمکتون کنم؟</h1>
<input type="search" placeholder="دنبال چه چیزی برات باشیم؟" />
<button type="submit">جستجو</button>
</header>
<div className="mobile-faq__list d-flex flex-column">
{this.state.messages.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
message={item}
key={i}
/>
))}
</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 />
) : null}
</>
);
}

@ -1,25 +1,25 @@
.faq{
.faq {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px;
padding: 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
&__header{
&__header {
margin-top: 30px;
h1{
h1 {
letter-spacing: -2px;
font-family: numeralBold;
font-size: calc(100vw / 25);
color: #424246;
}
&--search{
&--search {
margin-top: 20px;
width: 100%;
border: 2px solid rgb(197, 197, 197);
border-radius: 10px;
padding: 5px;
justify-content:space-between;
justify-content: space-between;
input {
border: 0px;
flex: 1;
@ -38,19 +38,74 @@
}
}
button{
button {
font-family: numeralMedium;
border: 0px;
background-color: #7dc241;
color: white;
border-radius: 10px;
padding : 7px 50px;
padding: 7px 50px;
}
}
}
&__list{
&__list {
width: 100%;
max-width: 1000px;
margin: 30px 0px;
}
}
}
.mobile-faq {
width: 100vw;
max-width: 650px;
margin: 0px auto;
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 60px;
&__header {
margin-top: 30px;
width: 100%;
h1 {
letter-spacing: -2px;
font-family: numeralBold;
color: #424246;
}
input {
border: 0px;
flex: 1;
border: 0px;
color: green;
padding: 0px 10px 0px;
font-size: 16px;
font-family: numeralMedium;
border: 1px solid #afafaf;
border-radius: 10px;
width: 100%;
padding: 8px 5px;
margin: 15px 0px;
&::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;
}
}

@ -22,7 +22,7 @@ export default class Simple extends Component {
style={{
height: height,
}}>
<Link to={`/books/${data.id}`}>
<Link to={`/products/${data.id}`}>
<img src={data.image} alt={data.title} />
<h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>

@ -54,11 +54,11 @@ const TabHeader = (props) => {
{window.innerWidth > 1000 ? (
<div className="home-scroll__header d-flex">
<div className="home-scroll__header--right d-flex">
<h1>{props.title}</h1>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span>
</div>
<div className="home-scroll__header--more d-flex">
<span>ادامه لیست</span>
<span style={{ fontSize: fontSize.desktop.h1 }}>ادامه لیست</span>
<img src={dropdown} alt="فلش" />
</div>
</div>

@ -1,11 +1,10 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from '../../../../assets/icons/logo.png';
import logo from "../../../../assets/icons/logo.png";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
@ -22,19 +21,31 @@ export default class LaptopNavbar extends Component {
<nav className="laptop-navbar d-flex">
<div className="d-flex">
<div className="laptop-navbar__logo">
<img src={logo} alt="لوگو"/>
<img src={logo} alt="لوگو" />
</div>
<ul className="laptop-navbar__list d-flex">
{links.map((item, i) => (
<li style={{fontSize : fontSize.desktop.li }} key={i}>
<Link to={item.to}>{item.name}</Link>
<li style={{ fontSize: fontSize.desktop.li }} key={i}>
<Link to={item.to} style={{ color: this.props.page === item.page ? '#6cbe44' : '#6f7074' }}>{item.name}</Link>
</li>
))}
</ul>
</div>
<div className="d-flex">
<Link style={{fontSize : fontSize.desktop.a }} to={'/signin'} className="laptop-navbar__signin">ورود به حساب کاربری</Link>
<Link style={{fontSize : fontSize.desktop.a }} to={'/signup'} className="laptop-navbar__signup">ثبت نام</Link>
<Link
style={{ fontSize: fontSize.desktop.a }}
to={"/auth"}
className="laptop-navbar__signin"
>
ورود به حساب کاربری
</Link>
<Link
style={{ fontSize: fontSize.desktop.a }}
to={"/auth"}
className="laptop-navbar__signup"
>
ثبت نام
</Link>
</div>
</nav>
);
@ -43,10 +54,10 @@ export default class LaptopNavbar extends Component {
LaptopNavbar.defaultProps = {
links: [
{ name: "صفحه اصلی", to: "/" },
{ name: "فروشگاه ", to: "/store" },
{ name: "سوالات متداول", to: "/faq" },
{ name: "درباره ما", to: "/about" },
{ name: "تماس با ما", to: "/contact" },
{ name: "صفحه اصلی", to: "/", page: "home" },
{ name: "فروشگاه ", to: "/products", page: "products" },
{ name: "سوالات متداول", to: "/faq", page: "faq" },
{ name: "درباره ما", to: "/about", page: "about" },
{ name: "تماس با ما", to: "/contact", page: "contact" },
],
};

@ -22,10 +22,6 @@
text-decoration: none;
a{
text-decoration: none;
color: #6f7074;
&:focus{
color: #6f7074;
}
}
}
}

@ -137,6 +137,12 @@ NavbarDrawer.defaultProps = {
icon: <img src={qrcode} alt="بارکد خوان" />,
toast: "",
},
{
name: "کتاب الکترونیک",
link: "/activation",
icon: <img src={mobileBlog} alt="کتاب الکترونیک" />,
toast: "",
},
{
name: "فروشگاه",
link: "/products",
@ -145,13 +151,13 @@ NavbarDrawer.defaultProps = {
},
{
name: "بلاگ",
link: "/",
link: "/blog",
icon: <img src={mobileBlog} alt="بلاگ" />,
toast: "",
},
{
name: "پیام رسان",
link: "/",
link: "/chat",
icon: <img src={mobileMail} alt="بلاگ" />,
toast: "",
},

@ -10,7 +10,7 @@ export default class Navbar extends Component {
<div className="navbar d-flex">
{
window.innerWidth > 1000 ?
<LaptopNavbar /> : <MobileNavbar />
<LaptopNavbar page={this.props.page} /> : <MobileNavbar />
}
</div>
);

@ -489,7 +489,7 @@ export default class Home extends Component {
window.innerWidth > 1000 ?
<>
<div className="home d-flex flex-column">
<Navbar />
<Navbar page={'home'} />
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}
@ -501,7 +501,7 @@ export default class Home extends Component {
window.innerWidth < 1000 ?
<>
<div className="mobile-home d-flex flex-column">
<Navbar />
<Navbar page={'home'} />
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}

@ -1,6 +1,6 @@
.mobile-product{
width: 100vw;
max-width: 1250px;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
@ -142,3 +142,149 @@
}
}
}
.product{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
overflow-x: hidden;
min-height: calc(100vh - 288px);
&__header{
width: 100%;
img{
height: calc(100vh / 2.7);
}
h1{
margin-top: 10px;
font-family: numeralBold;
font-size: calc(100vw / 20);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralMedium;
font-size: calc(100vw / 28);
color: #6f7074;
}
a{
border: 0px;
font-family: numeralMedium;
font-size: calc(100vw / 25);
padding: 15px 0px;
width: 150px;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
}
&--purchase{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white !important;
}
&--sampleButton{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #efefef;
color: #6f7074 !important;
}
}
&__abstraction{
margin-top: 30px;
width: 100%;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__modules{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #baffdc2f;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
}
}
&__tips{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #074f8b;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #074f8b;
letter-spacing: -1px;
margin-bottom: 3px;
}
}
}
&__description{
width: 100%;
margin-top: 20px;
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__comments{
max-width: 100%;
margin-top: 30px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list{
width: 100vw;
overflow-x: scroll !important;
transform: translateX(10px);
}
}
}

@ -42,7 +42,7 @@ export default class Products extends Component {
{window.innerWidth > 1000 ? (
<>
<div className="products d-flex flex-column">
<Navbar />
<Navbar page={'products'} />
</div>
<Footer />
</>
@ -50,7 +50,7 @@ export default class Products extends Component {
{window.innerWidth < 1000 ? (
<>
<div className="mobile-products d-flex flex-column">
<Navbar />
<Navbar page={'products'} />
<div className="mobile-products__filters d-flex">
<div className="d-flex">
<Select name="first" options={firstFilters} parent={this} />

@ -4,6 +4,7 @@
margin: 0px auto;
padding : 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
}

Loading…
Cancel
Save