site/src/pages/index.js

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"

import head from "../images/index/head.png"
import "../styles/main.css"
import "../styles/bootstrap.min.css"
import {Jumbotron, Button} from "react-bootstrap"

const IndexPage = ({data}) => (
    <Layout>
    {/* --------------------------------- */}
      <Jumbotron>
        <img src={head} width="90%" class="center-block" alt="head" />
        <hr/>
        <h3 style = {{color: `rgb(18,64,171)`}}>Лаборатория методов ядерно-физических экспериментов</h3>
        <p class="lead">
            Особенности нашего подхода к решению научных задач сегодняшнего времени:
        </p>
          <ul>
            <li>Лаборатория была создана на базе МФТИ, что позволяет привлекать большое количество заинтересованных лиц из числа
                студентов.
            </li>
            <li>Благодаря совмещению научной работы с образовательным процессом мы обеспечиваем преемственность научного
                опыта.
            </li>
            <li>Структура нашей лаборитории позволяет принимать участие в экспериментах мирового уровня даже студентам младших
                курсов.
            </li>
            <li>Мы применяем самые современные методы в работе на физических экспериментах.</li>
          </ul>
        <p/>
        <Button variant="success" id="jt"><Link to="./about">О нашей лаборатории</Link></Button>
    </Jumbotron> 
    {/* ------------------------------ */}
    <div class="row">
      <div class="col-lg-4">
          <h2>Ядерная физика</h2>
          <p> Лаборатория принимает участие в нескольких международных экспериментах в области физики частиц, таких как
              эксперимент по безнейтринному двойному бета-распаду GERDA, эксперимент по поиску массы нейтрино Троицк
              ню-масс и так далее. </p>
          <Button variant="primary" id="more"><Link to="./projects/physics">Подробнее »</Link></Button>
      </div>
      <div class="col-lg-4">
          <h2> Образование </h2>
          <p> В задачи лаборатории входит разработка новых образовательных программ по физике и методике проведения физического
              эксперимента, а также совершенствование существующей методической и информационной базы в МФТИ и
              академических институтах.
          </p>
          <Button variant="primary" id="more"><Link to="./projects/education">Подробнее »</Link></Button>
      </div>
      <div class="col-lg-4">
          <h2> Компьютерные методы </h2>
          <p>
              Одним из основных направлений деятельности является разработка вычислительных методов и открытого
              программного обеспечения для использования в образовании и научной деятельности.
          </p> 
          <Button variant="primary" id="more"><Link to="./projects/software">Подробнее »</Link></Button>
      </div>
    </div>
    <hr style={{marginBottom: `50px`}}/>
    {/* --------------------------------- */}
    <h1 style={{textAlign: `center`}}>Последние новости</h1>
      { data.posts.nodes.map(post => {
          const title = post.frontmatter.title;
          const date = post.frontmatter.date;
          return (
            <div class = "card" style={{marginBottom: `15px`, borderRadius: `0px`, boxShadow: `0 2px 2px #A2A2A2`}}>
            <div class = "card-body">
              <h2 class = "title">
              {title}<span id="date">{date}</span>
              </h2>
                <p
                  dangerouslySetInnerHTML = {{
                    __html: post.frontmatter.description || post.html,
                  }}
                />
            </div>
            </div>
          )
        })}
    </Layout>
)

export default IndexPage

export const query = graphql`
  query {
    posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
                      sort: {fields: [frontmatter___date], order: DESC},
                      limit: 3) {
      nodes{
            html
            frontmatter {
              date(formatString: "DD.MM.YYYY")
              title
            }
          }
        }
      }`