Restructure repository (#426)

organized repository 

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Philip Molares <git@molar.es>

src/components/intro-page/cover-buttons/cover-buttons.scss

@@ -0,0 +1,3 @@
+.cover-button {
+  min-width: 200px;
+}

src/components/intro-page/cover-buttons/cover-buttons.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { ApplicationState } from '../../../redux'
+import { ShowIf } from '../../common/show-if/show-if'
+import './cover-buttons.scss'
+import { SignInButton } from '../../landing-layout/navigation/sign-in-button'
+
+export const CoverButtons: React.FC = () => {
+  useTranslation()
+  const user = useSelector((state: ApplicationState) => state.user)
+  const authProviders = useSelector((state: ApplicationState) => state.config.authProviders)
+
+  if (user) {
+    return null
+  }
+
+  return (
+    <div className="mb-5">
+      <SignInButton
+        className="cover-button"
+        variant="success"
+        size="lg"
+      />
+      <ShowIf condition={Object.values(authProviders).includes(true)}>
+        <span className="m-2">
+          <Trans i18nKey="common.or"/>
+        </span>
+      </ShowIf>
+      <Link to="/n/features">
+        <Button
+          className="cover-button"
+          variant="primary"
+          size="lg"
+        >
+          <Trans i18nKey="landing.intro.exploreFeatures"/>
+        </Button>
+      </Link>
+    </div>
+  )
+}

src/components/intro-page/feature-links.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
+
+export const FeatureLinks: React.FC = () => {
+  useTranslation()
+  return (
+    <Row className="mb-5">
+      <Col md={4}>
+        <Link to={'/n/features#Share-Notes'} className="text-light">
+          <ForkAwesomeIcon icon="bolt" size="3x"/>
+          <h5>
+            <Trans i18nKey="landing.intro.features.collaboration"/>
+          </h5>
+        </Link>
+      </Col>
+      <Col md={4}>
+        <Link to={'/n/features#MathJax'} className="text-light">
+          <ForkAwesomeIcon icon="bar-chart" size="3x"/>
+          <h5>
+            <Trans i18nKey="landing.intro.features.mathJax"/>
+          </h5>
+        </Link>
+      </Col>
+      <Col md={4}>
+        <Link to={'/n/features#Slide-Mode'} className="text-light">
+          <ForkAwesomeIcon icon="television" size="3x"/>
+          <h5>
+            <Trans i18nKey="landing.intro.features.slides"/>
+          </h5>
+        </Link>
+      </Col>
+    </Row>
+  )
+}

src/components/intro-page/intro-page.tsx

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Branding } from '../common/branding/branding'
+import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
+import { CoverButtons } from './cover-buttons/cover-buttons'
+import { FeatureLinks } from './feature-links'
+import screenshot from './img/screenshot.png'
+
+const IntroPage: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Fragment>
+      <h1 dir='auto' className={'align-items-center d-flex justify-content-center'}>
+        <ForkAwesomeIcon icon="file-text" className={'mr-2'}/>
+        <span>CodiMD</span>
+        <Branding/>
+      </h1>
+      <p className="lead mb-5">
+        <Trans i18nKey="app.slogan"/>
+      </p>
+
+      <CoverButtons/>
+
+      <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
+      <FeatureLinks/>
+    </Fragment>
+  )
+}
+
+export { IntroPage }