danovin/src/views/About/index.js

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 aboutLg from "../../assets/images/about-lg.png";
import aboutMd from "../../assets/images/about-md.png";
import aboutXs1 from "../../assets/images/about-xs1.png";
import aboutXs2 from "../../assets/images/about-xs2.png";

import "./index.scss";

const maxDesktopSize = 1250;
const maxMobileSize = 650;

const fontSize = {
  desktop: {
    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
    h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
    li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
  },
  mobile: {
    h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
    p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
    h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23,
    li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28,
  },
};

export default class About extends Component {
  state = {
    first: {
      title: "درباره ما",
      text: "ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید محتوایی جذاب بصورت کتاب با کمک پلتفرم دانوین، قصد تغییراتی بنیادین در نظام آموزش و پرورش کشور داریم. دانوین پلتفرمی شامل کتاب، محتوای الکترونیکی، رویه های آموزشی، پشتیبانی علمی و نرم افزار ارائه خدمات با رویکرد مخاطب محور است.",
    },
    fury: {
      title: "	ماموریت ما در  دانوین چیست ؟",
      text: "ارتقای سطح کیفیت و جذابیت آموزش در مدارس بصورت سازگار با نظام رسمی و کنونی آ.پ در راستای نیل به اهداف سند تحول",
    },

    keywords: {
      title: "کیفیت آموزش را بالا میبریم",
      list: [
        "شایستگی در ایجاد فهم علمی در موضوع هدف و در موضوعات وابسته به آن",
        "شایستگی در ایجاد زمینه ی معرفتی- ارزشی موثر برای محتواهای آموزشی",
      ],
    },
    keywords2: {
      title: "جذابیت کلید بهبود یادگیری",
      list: [
        "بکارگیری عوامل متنوع سازگار با ارزشها برای علاقمندی دانش آموز و معلم به استفاده از محتوای دانوین",
        "سازگار با نظام آ.پ : بطوریکه بتواند در مدارس فعلی مورد استفاده قرار گرفته و با نظام رسمی فعلی در تضاد نباشد",
        "در راستای نیل به سند تحول : تلاش برای نزدیکی گام به گام به آرمانها و اهداف سند تحول",
      ],
    },
    advantages: {
      title: "	مزیت رقابتی دانوین",
      list: [
        "•	بکارگیری بروز ترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
        "•	دارای رویکرد آموزش سرگرم کننده ",
        "•	بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
        "•	رویکرد معرفتی-ارزشی",
        "•	ویدئو های منحصر بفرد",
        "•	متن گفتگو محور ، روایی ، قابل فهم ،جذاب و سرگرم کننده",
      ],
    },
  };
  render() {
    const { fury, advantages, keywords, keywords2, first } = this.state;
    return (
      <>
        {window.innerWidth > 1000 ? (
          <>
            <div className="about d-flex flex-column align-items-center">
              <Navbar page={"about"} />
              <div className="about__first d-flex">
                <div className="top align-self-start">
                  <h1 style={{ fontSize: fontSize.desktop.h1 }}>
                    {first.title}
                  </h1>
                  <p style={{ fontSize: fontSize.desktop.p + 2 }}>
                    {first.text}
                  </p>
                </div>
              </div>
              <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 style={{ fontSize: fontSize.desktop.h1 }}>
                      {fury.title}
                    </h1>
                    <p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
                  </div>
                  <div className="right-bottom ">
                    <h2 style={{ fontSize: fontSize.desktop.h2 }}>
                      {keywords.title}
                    </h2>
                    <ul>
                      {keywords.list.map((item, i) => (
                        <Fragment key={i}>
                          <li style={{ fontSize: fontSize.desktop.li }}>
                            {item}
                          </li>
                          <br />
                        </Fragment>
                      ))}
                    </ul>
                  </div>
                  <div className="right-bottom align-self-end">
                    <h2 style={{ fontSize: fontSize.desktop.h2 }}>
                      {keywords2.title}
                    </h2>
                    <ul>
                      {keywords2.list.map((item, i) => (
                        <Fragment key={i}>
                          <li style={{ fontSize: fontSize.desktop.li }}>
                            {item}
                          </li>
                          <br />
                        </Fragment>
                      ))}
                    </ul>
                  </div>
                </div>
                <div className="about__fury--left d-flex align-items-center">
                  <img
                    className="about__fury--left__1"
                    src={aboutLg}
                    alt="عکس"
                  />
                  {/* {this.props.absoluteImages.map((item, i) => (
                    <img src={item.imageUrl} className={item.class} alt="عکس" />
                  ))} */}
                </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 style={{ fontSize: fontSize.desktop.h1 }}>
                    {advantages.title}
                  </h1>
                  <ul>
                    {advantages.list.map((item, i) => (
                      <Fragment key={i}>
                        <li style={{ fontSize: fontSize.desktop.li }}>
                          {item}
                        </li>
                        <br />
                      </Fragment>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
            <Footer />
          </>
        ) : null}
        {window.innerWidth < 1000 ? (
          <div className="mobile-about d-flex flex-column">
            <Navbar page={"about"} />
            <div className="mobile-about__fury d-flex flex-column">
              <div>
                <h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1>
              </div>
              <p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p>
            </div>
            <div className="mobile-about__images d-flex">
              {this.props.absoluteImages.map((item, i) => (
                <img src={item.imageUrl} className={item.class} alt="عکس" />
              ))}
            </div>
            <div className="mobile-about__keys align-self-end">
              <div>
                <h2 style={{ fontSize: fontSize.mobile.h2 }}>
                  {keywords.title}
                </h2>
              </div>
              <ul>
                {keywords.list.map((item, i) => (
                  <Fragment key={i}>
                    <li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
                    <br />
                  </Fragment>
                ))}
              </ul>
            </div>
            <div className="mobile-about__video d-flex">
              <img src={pic} alt={"عکس"} />
            </div>
            <div className="mobile-about__advantages d-flex flex-column">
              <div>
                <h1 style={{ fontSize: fontSize.mobile.h1 }}>
                  {advantages.title}
                </h1>
              </div>
              <ul>
                {advantages.list.map((item, i) => (
                  <Fragment key={i}>
                    <li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
                    <br />
                  </Fragment>
                ))}
              </ul>
            </div>
          </div>
        ) : null}
      </>
    );
  }
}

About.defaultProps = {
  absoluteImages: [
    {
      class:
        window.innerWidth > 1000
          ? "about__fury--left__1"
          : "mobile-about__images--1",
      imageUrl: aboutLg,
    },
    {
      class:
        window.innerWidth > 1000
          ? "about__fury--left__2"
          : "mobile-about__images--2",
      imageUrl: aboutMd,
    },
    {
      class:
        window.innerWidth > 1000
          ? "about__fury--left__3"
          : "mobile-about__images--3",
      imageUrl: aboutXs1,
    },
    {
      class:
        window.innerWidth > 1000
          ? "about__fury--left__4"
          : "mobile-about__images--4",
      imageUrl: aboutXs2,
    },
  ],
};