72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import BurgerBtnContainer from '../AppMenu/BurgerBtnContainer';
|
|
import reduxLang from '../../middleware/lang';
|
|
import ImageWithLegend from './ImageWithLegend';
|
|
import Newsletter from './Newsletter';
|
|
import Sponsors from './Sponsors';
|
|
import InfoViewFooter from './InfoViewFooter';
|
|
import animateScrollTo from 'animated-scroll-to';
|
|
|
|
class InfoView extends Component {
|
|
constructor() {
|
|
super();
|
|
animateScrollTo(document.getElementById('root'), { speed: 1 });
|
|
}
|
|
|
|
render() {
|
|
const { t } = this.props;
|
|
return (
|
|
<div className='AppContent'>
|
|
<div className='InfoView'>
|
|
<BurgerBtnContainer />
|
|
<h1 style={{ paddingTop: 0 }} className='big-text'>
|
|
{t('welcome_title')}
|
|
</h1>
|
|
<div className='InfoContent'>
|
|
<p className='medium-text'>{t('exhibition_date')}</p>
|
|
<br />
|
|
<br />
|
|
<div className='embedded-youtube-container'>
|
|
<iframe
|
|
width='100%'
|
|
height='100%'
|
|
src='https://www.youtube.com/embed/kjpw4LunEEA'
|
|
frameBorder='0'
|
|
allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
<p
|
|
className='medium-text'
|
|
dangerouslySetInnerHTML={{ __html: t('welcome_text') }}
|
|
></p>
|
|
</div>
|
|
<div className='ImagesList'>
|
|
<ImageWithLegend image='/static/gfx/Fundbueuro_Sliderbild_1.jpg' />
|
|
<ImageWithLegend image='/static/gfx/Fundbueuro_Sliderbild_2.jpg' />
|
|
<ImageWithLegend image='/static/gfx/Fundbueuro_Sliderbild_3.jpg' />
|
|
<ImageWithLegend image='/static/gfx/Fundbueuro_Sliderbild_4.jpg' />
|
|
</div>
|
|
|
|
<h1 className='big-text'>{t('about_title')}</h1>
|
|
<div className='InfoContent'>
|
|
<p
|
|
className='medium-text'
|
|
dangerouslySetInnerHTML={{ __html: t('about_text') }}
|
|
></p>
|
|
<a href='http://www.alpinesmuseum.ch' target='_blank'>
|
|
<img src='/static/gfx/alsp_logo.svg' alt='alpines museum logo' />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<Newsletter />
|
|
<Sponsors />
|
|
<InfoViewFooter />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default reduxLang('InfoView')(InfoView);
|