start homepage design, add languages and themes

src/app.module.css

@@ -1,6 +1,6 @@
 .app {
   background: var(--background-color) var(--background-fade) top center repeat-x;
-  font: 13px arial, helvetica, sans-serif;
+  font: 13px/1.231 arial, helvetica, sans-serif;
   z-index: 1;
   min-height: 100%;
   overflow-y: hidden;

src/themes.css

@@ -1,11 +1,21 @@
 :root .yotsuba {
   --background-color: #ffe;
   --background-fade: url("/public/assets/background-fade.png");
-  --color: #800;
+  --color-primary: #800;
+  --text-primary: #fff;
+  --text-black: #000;
+  --text-white: #fff;
+  --text-background: #fff;
+  --text-link: #00f;
 }
 
 :root .yotsuba-b {
   --background-color: #eef2ff;
   --background-fade: url("/public/assets/background-fade-blue.png");
-  --color: #000;
+  --color-primary: #98e;
+  --text-primary: #000;
+  --text-black: #000;
+  --text-white: #fff;
+  --text-background: #fff;
+  --text-link: #00f;
 }

src/views/home/home.module.css

@@ -1,13 +1,24 @@
 .content {
-  color: var(--color);
-  font-size: 20px;
+  color: var(--color-primary);
   width: 100%;
   height: 100%;
+  margin: auto;
   text-align: left;
   width: 57.69em;
   min-width: 750px;
 }
 
+.debug {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 0.5em;
+}
+
+.debug select {
+  margin: 2px;
+}
+
 .logo img {
   width: 300px;
   height: 120px;
@@ -15,6 +26,67 @@
 
 .logo {
   margin: 0px auto;
+  text-align: center;
+}
+
+.box {
+  background: var(--text-background);
+  color: var(--text-black);
+  border: 1px solid;
+  margin-bottom: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.boxBar {
+  background: var(--color-primary);
+  color: var(--text-primary);
+  padding-left: 0.5em;
+  line-height: 2em;
+}
+
+.boxBar h2 {
+  font-size: 131%;
+  font-weight: 700;
+}
+
+.boxContent {
+  line-height: 1.5em;
+  font-size: 93%;
+  padding: 0.5em;
+  padding-top: 0.25em;
+  padding-bottom: 0;
+}
+
+.boxContent a, .boxContent a:visited{
+  color: var(--text-link);
+}
+
+.searchBar {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.searchBar input, .searchBar button {
+  font-size: 18px;
+  height: 30px;
+  box-sizing: border-box;
+  appearance: none;
+  border-radius: 0px;
+  border: 1px solid rgb(170, 170, 170);
+  outline: none;
+}
+
+.searchBar input {
+  width: 400px;
+  padding: 3px 10px;
+}
+
+.searchBar button {
+  font-size: 15px;
+  margin-left: 4px;
+  padding: 3px 10px;
+  background-color: rgb(239, 239, 239);
+  position: absolute;
 }
 
 @media (max-width: 768px) {

src/views/home/home.tsx

@@ -1,8 +1,9 @@
 import styles from './home.module.css';
 import useTheme from '../../hooks/use-theme';
 import { Link } from 'react-router-dom';
+import { Trans, useTranslation } from 'react-i18next';
 
-// TODO: remove theme selector for debugging
+// TODO: remove theme and languages selectors for debugging
 const ThemeSettings = () => {
   const [theme, setTheme] = useTheme();
 
@@ -14,21 +15,64 @@ const ThemeSettings = () => {
   );
 };
 
+// prettier-ignore
+const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
+
+const LanguageSettings = () => {
+  const { t, i18n } = useTranslation();
+  const { changeLanguage, language } = i18n;
+
+  const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    changeLanguage(e.target.value);
+    window.location.reload();
+  };
+
+  return (
+    <div className={styles.languageSettings}>
+      <select value={language} onChange={onSelectLanguage}>
+        {availableLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
 const Home = () => {
+  const { t } = useTranslation();
+
   return (
     <div className={styles.content}>
+      <div className={styles.debug}>
+        <LanguageSettings />
+        <ThemeSettings />
+      </div>
       <Link to='/'>
         <div className={styles.logo}>
           <img alt='plebchan' src='/assets/logo/logo-transparent.png' />
         </div>
       </Link>
       <div className={styles.searchBar}>
-        <input type='text' placeholder='Search' />
-        <button>Search</button>
+        <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
+        <button>{t('go')}</button>
       </div>
-      <ThemeSettings />
       <div className={styles.box}>
-        <div className={styles.boxBar}>What is plebchan?</div>
+        <div className={styles.boxBar}>
+          <h2>{t('what_is_plebchan')}</h2>
+        </div>
+        <div className={styles.boxContent}>
+          Plebchan is a serverless, adminless, decentralized 4chan alternative where any pleb can create and own unlimited boards. All data comes from the{' '}
+          <a href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
+            plebbit
+          </a>{' '}
+          protocol, it's all text including links from which media is embedded, shared peer-to-peer. Users do not need to register an account before participating in the
+          community. Feel free to click on a board below that interests you and jump right in!
+          <br />
+          <br />
+          There are no global rules, each board is completely independent and its owner decides how/if to moderate it.
+        </div>
       </div>
     </div>
   );