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 "./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 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>{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 />
      </>
    );
  }
}