Init

frontend/src/App.tsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const languages = [
+  { code: "de", label: "Deutsch" },
+  { code: "en", label: "English" }
+];
+
+export default function App() {
+  const { t, i18n } = useTranslation();
+  const [activeLang, setActiveLang] = useState(i18n.language);
+
+  const switchLanguage = (code: string) => {
+    i18n.changeLanguage(code);
+    setActiveLang(code);
+  };
+
+  return (
+    <div className="app">
+      <header className="topbar">
+        <div>
+          <p className="badge">v0.1</p>
+          <h1>{t("appName")}</h1>
+          <p className="tagline">{t("tagline")}</p>
+        </div>
+        <div className="lang">
+          <span>{t("language")}</span>
+          <div className="lang-buttons">
+            {languages.map((lang) => (
+              <button
+                key={lang.code}
+                type="button"
+                className={activeLang === lang.code ? "active" : ""}
+                onClick={() => switchLanguage(lang.code)}
+              >
+                {lang.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <section className="hero">
+          <div>
+            <h2>{t("welcome")}</h2>
+            <p className="description">{t("description")}</p>
+            <div className="actions">
+              <button className="primary" type="button">
+                {t("start")}
+              </button>
+              <button className="ghost" type="button">
+                {t("overview")}
+              </button>
+            </div>
+          </div>
+          <div className="status-card">
+            <div className="status-header">
+              <span>{t("progress")}</span>
+              <strong>0%</strong>
+            </div>
+            <div className="progress-bar">
+              <div className="progress" style={{ width: "8%" }} />
+            </div>
+            <div className="status-grid">
+              <div>
+                <p>{t("mailboxes")}</p>
+                <h3>1</h3>
+              </div>
+              <div>
+                <p>{t("jobs")}</p>
+                <h3>0</h3>
+              </div>
+              <div>
+                <p>{t("rules")}</p>
+                <h3>0</h3>
+              </div>
+            </div>
+            <p className="status-note">{t("progressNote")}</p>
+          </div>
+        </section>
+
+        <section className="grid">
+          <article className="card">
+            <h3>{t("featureOne")}</h3>
+            <p>{t("featureOneText")}</p>
+          </article>
+          <article className="card">
+            <h3>{t("featureTwo")}</h3>
+            <p>{t("featureTwoText")}</p>
+          </article>
+          <article className="card">
+            <h3>{t("featureThree")}</h3>
+            <p>{t("featureThreeText")}</p>
+          </article>
+        </section>
+
+        <section className="split">
+          <div>
+            <h3>{t("queue")}</h3>
+            <p>{t("queueText")}</p>
+          </div>
+          <div>
+            <h3>{t("security")}</h3>
+            <p>{t("securityText")}</p>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}