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 = {
    fury: {
      title: "ماموریت ما در دانوین",
      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت",
    },

    keywords: {
      title: "کلمات کلیدی ماموریت",
      list: [
        "کیفیت آموزش",
        "جذابیت",
        "سازگار با نظام آموزش و پرورش",
        "در راستای نیل به سند تحول",
      ],
    },
    advantages: {
      title: "مزیت رقابت اصلی",
      list: [
        "بکارگیری بروزترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
        "دارای رویکرد آموزش سرگرم کننده",
        "بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
        "رویکرد معرفتی - ارزشی",
        "ویدیوهای منحصر بفرد",
        "متن گفتگو محور - روایی- قابل فهم - جذاب و سرگرم کننده",
      ],
    },
  };
  render() {
    const { fury, advantages, keywords } = this.state;
    return (
      <>
        {window.innerWidth > 1000 ? (
          <>
            <div className="about d-flex flex-column align-items-center">
              <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">
                    <h1 style={{ fontSize: fontSize.desktop.h1 }}>
                      {fury.title}
                    </h1>
                    <p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
                  </div>
                  <div className="right-bottom align-self-end">
                    <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>
                <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,
    },
  ],
};