start homepage design, add languages and themes

public/translations/ar/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "ما هو بليبتشان؟",
+  "go": "اذهب",
+  "or": "أو"
+}

public/translations/bn/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "প্লেবচ্যান কি?",
+  "go": "যাও",
+  "or": "অথবা"
+}

public/translations/cs/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Co je Plebchan?",
+  "go": "jít",
+  "or": "nebo"
+}

public/translations/da/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Hvad er Plebchan?",
+  "go": "gå",
+  "or": "eller"
+}

public/translations/de/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Was ist Plebchan?",
+  "go": "gehen",
+  "or": "oder"
+}

public/translations/el/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Τι είναι το plebchan;",
+  "go": "πήγαινε",
+  "or": "ή"
+}

public/translations/en/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "What is plebchan?",
+  "go": "go",
+  "or": "or"
+}

public/translations/es/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "¿Qué es Plebchan?",
+  "go": "ir",
+  "or": "o"
+}

public/translations/fa/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "پلبچن چیست؟",
+  "go": "برو",
+  "or": "یا"
+}

public/translations/fi/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Mikä on Plebchan?",
+  "go": "mennä",
+  "or": "tai"
+}

public/translations/fil/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Ano ang plebchan?",
+  "go": "pumunta",
+  "or": "o"
+}

public/translations/fr/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Qu'est-ce que Plebchan?",
+  "go": "aller",
+  "or": "ou"
+}

public/translations/he/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "מה זה פלבצ׳ן?",
+  "go": "לך",
+  "or": "או"
+}

public/translations/hi/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "प्लेबचैन क्या है?",
+  "go": "जाओ",
+  "or": "या"
+}

public/translations/hu/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Mi az a Plebchan?",
+  "go": "menni",
+  "or": "vagy"
+}

public/translations/id/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Apa itu plebchan?",
+  "go": "pergi",
+  "or": "atau"
+}

public/translations/it/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Cos'è plebchan?",
+  "go": "vai",
+  "or": "oppure"
+}

public/translations/ja/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "プレブチャンとは何ですか？",
+  "go": "行く",
+  "or": "または"
+}

public/translations/ko/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "플레브찬이란 무엇인가요?",
+  "go": "가기",
+  "or": "또는"
+}

public/translations/mr/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "प्लेबचॅन काय आहे?",
+  "go": "जा",
+  "or": "किव्हा"
+}

public/translations/nl/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Wat is plebchan?",
+  "go": "gaan",
+  "or": "of"
+}

public/translations/no/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Hva er plebchan?",
+  "go": "gå",
+  "or": "eller"
+}

public/translations/pl/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Co to jest plebchan?",
+  "go": "iść",
+  "or": "lub"
+}

public/translations/pt/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "O que é Plebchan?",
+  "go": "vai",
+  "or": "ou"
+}

public/translations/ro/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Ce este Plebchan?",
+  "go": "du-te",
+  "or": "sau"
+}

public/translations/ru/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Что такое плебчан?",
+  "go": "идти",
+  "or": "или"
+}

public/translations/sq/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Çfarë është Plebchan?",
+  "go": "shko",
+  "or": "ose"
+}

public/translations/sv/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Vad är Plebchan?",
+  "go": "gå",
+  "or": "eller"
+}

public/translations/te/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "ప్లెబ్‌చాన్ ఏమిటి?",
+  "go": "వెళ్లు",
+  "or": "లేదా"
+}

public/translations/th/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "พล็อกไซต์คืออะไร?",
+  "go": "ไป",
+  "or": "หรือ"
+}

public/translations/tr/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Plebchan nedir?",
+  "go": "git",
+  "or": "veya"
+}

public/translations/uk/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Що таке Плебчан?",
+  "go": "йди",
+  "or": "або"
+}

public/translations/ur/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "پلیبچان کیا ہے؟",
+  "go": "جا",
+  "or": "یا"
+}

public/translations/vi/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Plebchan là gì?",
+  "go": "đi",
+  "or": "hoặc"
+}

public/translations/zh/default.json

@@ -0,0 +1,5 @@
+{
+  "what_is_plebchan": "Plebchan是什么？",
+  "go": "去",
+  "or": "或者"
+}

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);
+  color: var(--color-primary);
-  font-size: 20px;
   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' />
+        <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
-        <button>Search</button>
+        <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>
   );