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 ? 18 : window.innerWidth / 80,
    h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
    li : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
  }
};


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 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="عکس" />
              <img className="about__fury--left__2" src={aboutMd} alt="عکس" />
              <img className="about__fury--left__3" src={aboutXs1} alt="عکس" />
              <img className="about__fury--left__4" src={aboutXs2} 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 />
      </>
    );
  }
}