Improving main page.

src/App.scss

@@ -1,15 +1 @@
 @import 'antd/dist/antd.variable.min.css';
-@import './colors.scss';
-
-.App {
-  text-align: center;
-}
-
-.App .App-content {
-  display: flex;
-  justify-content: center;
-}
-
-article {
-  margin: 2em;
-}

src/App.tsx

@@ -1,39 +1,32 @@
-import "./App.scss";
+import './App.scss';
-import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
+
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { currentLanguage } from './atoms/language';
 import { Main } from './pages/Main';
 import { Registration } from './pages/Registration';
 import { IntlProvider } from 'react-intl';
 import { localization } from './constants/localization';
-import { Header } from './components/Header';
 import { ConfigProvider } from 'antd';
-import { LanguagePicker } from './components/LanguagePicker';
 
 export default function App() {
-  const language = useRecoilValue(currentLanguage)
+  const language = useRecoilValue(currentLanguage);
 
   ConfigProvider.config({
     theme: {
       primaryColor: '#a7ab81',
-    }
+    },
   });
 
   return (
     <IntlProvider locale={language} messages={localization[language]}>
-      <Header />
-      <LanguagePicker />
       <Router>
         <Switch>
-          <Route exact path="/:page">
+          <Route path='/' exact component={Main} />
-            <div className="App">
+          <Route path='/:page' exact component={Main} />
-              <Main />
+          <Route path='/registration/:id' component={Registration} />
-            </div>
-          </Route>
-          <Route path="/registration/:id" component={Registration} />
-          <Redirect from="/" to="/program" />
         </Switch>
-      </Router >
+      </Router>
     </IntlProvider>
   );
 }

src/components/Menu.tsx

@@ -1,56 +1,42 @@
-import "./Menu.scss";
+import './Menu.scss';
 
 export const Menu = () => {
-    return (
+  return (
-        <article>
+    <section>
-            <h1>Menu</h1>
+      <h1>Menu</h1>
-            <table>
+      <article>
-                <tr>
+        <h2>Starters</h2>
-                    <th></th>
+
-                    <th>Starters</th>
+        <h3>Chrumky</h3>
-                    <th></th>
+        <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
-                </tr>
+        <p>Nuts</p>
-                <tr>
+
-                    <td>Chrumky</td>
+        <h3>Halusky</h3>
-                    <td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
+        <p>Fatty fat stuff.</p>
-                    <td>Nuts</td>
+        <p>Meat, fat</p>
-                </tr>
+      </article>
-                <tr>
+      <article>
-                    <td>Halusky</td>
+        <h2>Main dish</h2>
-                    <td>Fatty fat stuff.</td>
+
-                    <td>Meat, fat</td>
+        <h3>Chrumky</h3>
-                </tr>
+        <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
-                <tr>
+        <p>Nuts</p>
-                    <th></th>
+
-                    <th>Main dish</th>
+        <h3>Halusky</h3>
-                    <th></th>
+        <p>Fatty fat stuff.</p>
-                </tr>
+        <p>Meat, fat</p>
-                <tr>
+      </article>
-                    <td>Chrumky</td>
+      <article>
-                    <td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
+        <h2>Dessert</h2>
-                    <td>Nuts</td>
+
-                </tr>
+        <h3>Chrumky</h3>
-                <tr>
+        <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
-                    <td>Halusky</td>
+        <p>Nuts</p>
-                    <td>Fatty fat stuff.</td>
+
-                    <td>Meat, fat</td>
+        <h3>Halusky</h3>
-                </tr>
+        <p>Fatty fat stuff.</p>
-                <tr>
+        <p>Meat, fat</p>
-                    <th></th>
+      </article>
-                    <th>Dessert</th>
+    </section>
-                    <th></th>
+  );
-                </tr>
+};
-                <tr>
-                    <td>Chrumky</td>
-                    <td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
-                    <td>Nuts</td>
-                </tr>
-                <tr>
-                    <td>Halusky</td>
-                    <td>Fatty fat stuff.</td>
-                    <td>Meat, fat</td>
-                </tr>
-            </table>
-        </article>
-    )
-}

src/components/NavBar.scss

@@ -1,5 +1,12 @@
 .NavBar {
   display: flex;
   justify-content: space-around;
+  align-items: center;
   margin-bottom: 1em;
+  font-size: 2rem;
+
+  .Diamond {
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
 }

src/components/NavBar.tsx

@@ -1,18 +1,17 @@
-import "./NavBar.scss";
+import './NavBar.scss';
 import { Link } from 'react-router-dom';
 import { LanguagePicker } from './LanguagePicker';
 import { Button, Menu } from 'antd';
+import { Diamond } from './Diamond';
 
 export const NavBar = () => {
-    return (
+  return (
-        <Menu className="NavBar" mode="horizontal">
+    <div className='NavBar'>
-            <Menu.Item><Link to="/menu">Menu</Link></Menu.Item>
+      <Link to='/menu'>Menu</Link>
-            <Menu.Item><Link to="/program">Program</Link></Menu.Item>
+      <Diamond />
-            <Menu.Item><Link to="/program">Info</Link></Menu.Item>
+      <Link to='/program'>Program</Link>
-            <Menu.Item><Button type="primary">asd</Button></Menu.Item>
+      <Diamond />
-            <Menu.Item>
+      <Link to='/program'>Info</Link>
-                <LanguagePicker />
+    </div>
-            </Menu.Item>
+  );
-        </Menu>
+};
-    )
-}

src/pages/Main.scss

@@ -1,5 +1,46 @@
+@import '../colors.scss';
+
 .Main {
+  text-align: center;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
+
+  .Main-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 2px solid;
+    border-color: $brown-text;
+    border-radius: 300px;
+    width: 48rem;
+
+    .logo-container {
+      margin-top: 3rem;
+    }
+
+    h1 {
+      line-height: 4rem;
+      font-family: 'Montserrat-Light';
+      color: $green-text !important;
+      font-size: 5rem;
+      text-transform: uppercase;
+      margin-bottom: 0px;
+    }
+
+    h2 {
+      color: $brown-text;
+      font-size: 3rem;
+      margin-top: 0em;
+      margin-bottom: 0em;
+    }
+  }
+
+  .extraText {
+    color: $brown-text;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+    letter-spacing: 2px;
+  }
 }

src/pages/Main.tsx

@@ -1,22 +1,59 @@
-import "./Main.scss";
+import './Main.scss';
 
-import { useParams } from "react-router-dom";
+import { Link, useParams } from 'react-router-dom';
 import { Menu } from '../components/Menu';
 import { NavBar } from '../components/NavBar';
 import { Program } from '../components/Program';
 import { NotFound } from '../components/NotFound';
+import { LanguagePicker } from '../components/LanguagePicker';
+import { FormattedMessage } from 'react-intl';
+import { DateAndPlace } from '../components/DateAndPlace';
 
 interface MainParams {
-    page: string
+  page: string;
 }
 
 export const Main = () => {
-    const { page } = useParams<MainParams>()
+  const { page } = useParams<MainParams>();
 
-    return (
+  return (
-        <section className="Main">
+    <div className='Main'>
-            <NavBar />
+      <LanguagePicker />
-            {page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
+      <p className='extraText'>Save the link</p>
-        </section>
+      <section className='Main-container'>
-    )
+        <article className='logo-container'>
-}
+          <Link to='/'>
+            <h1>
+              <FormattedMessage id='common.lintu' />
+            </h1>
+            <h2>
+              <span> &amp; </span>
+            </h2>
+            <h1>
+              <FormattedMessage id='common.maslo' />
+            </h1>
+          </Link>
+        </article>
+        <article>
+          <NavBar />
+        </article>
+        {page ? (
+          <article className='content'>
+            {page === 'menu' ? (
+              <Menu />
+            ) : page === 'program' ? (
+              <Program />
+            ) : (
+              <NotFound />
+            )}
+          </article>
+        ) : (
+          <article>
+            <DateAndPlace />
+          </article>
+        )}
+      </section>
+      <p className='extraText'>Attend the party</p>
+    </div>
+  );
+};

src/pages/Registration.tsx

@@ -1,32 +1,44 @@
-import "./Registration.scss";
+import './Registration.scss';
 import { FormattedMessage } from 'react-intl';
 
-import { RegForm } from '../components/RegForm'
+import { RegForm } from '../components/RegForm';
+import { RegistrationHeader } from '../components/RegistrationHeader';
+import { LanguagePicker } from '../components/LanguagePicker';
 
 export const Registration = () => {
-    return (
+  return (
-        <main className="Registration">
+    <>
-            <div className="Registration-main">
+      <RegistrationHeader />
-                <h1><FormattedMessage id="registration.welcome" /><br /><FormattedMessage id="common.datetime" /></h1>
+      <LanguagePicker />
-                <h2><FormattedMessage id="common.place" /></h2>
+      <main className='Registration'>
-            </div>
+        <div className='Registration-main'>
-            <div className="Registration-desc">
+          <h1>
-                <h2>
+            <FormattedMessage id='registration.welcome' />
-                    <FormattedMessage id="registration.questions" />
+            <br />
-                </h2>
+            <FormattedMessage id='common.datetime' />
-                <h2>
+          </h1>
-                    <FormattedMessage id="registration.about" />
+          <h2>
-                </h2>
+            <FormattedMessage id='common.place' />
-                <h2>
+          </h2>
-                    <FormattedMessage id="registration.saveTheLink" />
+        </div>
-                </h2>
+        <div className='Registration-desc'>
-                <h2>
+          <h2>
-                    <FormattedMessage id="registration.fillInBefore" />
+            <FormattedMessage id='registration.questions' />
-                </h2>
+          </h2>
-            </div>
+          <h2>
-            <div className="Registration-form">
+            <FormattedMessage id='registration.about' />
-                <RegForm />
+          </h2>
-            </div>
+          <h2>
-        </main>
+            <FormattedMessage id='registration.saveTheLink' />
-    )
+          </h2>
-}
+          <h2>
+            <FormattedMessage id='registration.fillInBefore' />
+          </h2>
+        </div>
+        <div className='Registration-form'>
+          <RegForm />
+        </div>
+      </main>
+    </>
+  );
+};