initial commit

apps/web/src/app/[locale]/dashboard/layout.tsx

@@ -0,0 +1,41 @@
+import { getTranslations, setRequestLocale } from "next-intl/server";
+import type { ReactNode } from "react";
+import { Link } from "@/i18n/navigation";
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export default async function DashboardLayout({
+  children,
+  params,
+}: DashboardLayoutProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("common");
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
+      <div className="mb-6 flex flex-col gap-4 border-b border-zinc-200 pb-6 dark:border-zinc-800 sm:flex-row sm:items-center sm:justify-between">
+        <nav aria-label="Dashboard navigation">
+          <ul className="flex gap-4 text-sm">
+            <li>
+              <Link
+                href="/dashboard"
+                className="font-medium text-zinc-900 dark:text-zinc-50"
+                aria-current="page"
+              >
+                {t("dashboard")}
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <p className="font-mono text-xs text-zinc-500">
+          auth: pending · session: none
+        </p>
+      </div>
+      {children}
+    </div>
+  );
+}

apps/web/src/app/[locale]/dashboard/page.tsx

@@ -0,0 +1,13 @@
+import { setRequestLocale } from "next-intl/server";
+import { DashboardContent } from "@/components/dashboard/dashboard-content";
+
+interface DashboardPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function DashboardPage({ params }: DashboardPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <DashboardContent />;
+}

apps/web/src/app/[locale]/layout.tsx

@@ -0,0 +1,38 @@
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, setRequestLocale } from "next-intl/server";
+import { notFound } from "next/navigation";
+import type { ReactNode } from "react";
+import { SiteLayout } from "@/components/layout/site-layout";
+import { QueryProvider } from "@/components/providers/query-provider";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { routing, type Locale } from "@/i18n/routing";
+
+interface LocaleLayoutProps {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({ children, params }: LocaleLayoutProps) {
+  const { locale } = await params;
+
+  if (!routing.locales.includes(locale as Locale)) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <NextIntlClientProvider messages={messages}>
+      <ThemeProvider>
+        <QueryProvider>
+          <SiteLayout>{children}</SiteLayout>
+        </QueryProvider>
+      </ThemeProvider>
+    </NextIntlClientProvider>
+  );
+}

apps/web/src/app/[locale]/login/page.tsx

@@ -0,0 +1,17 @@
+import { setRequestLocale } from "next-intl/server";
+import { LoginForm } from "@/components/auth/login-form";
+
+interface LoginPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function LoginPage({ params }: LoginPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return (
+    <div className="mx-auto flex min-h-[calc(100vh-8rem)] max-w-6xl items-center justify-center px-4 py-12 sm:px-6">
+      <LoginForm />
+    </div>
+  );
+}

apps/web/src/app/[locale]/page.tsx

@@ -0,0 +1,64 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
+import { getTranslations, setRequestLocale } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
+import { getAppName } from "@/lib/env";
+
+interface HomePageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function HomePage({ params }: HomePageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  const t = await getTranslations("landing");
+  const appName = getAppName();
+
+  const features = [
+    { key: "control" as const, title: t("features.control.title"), description: t("features.control.description") },
+    { key: "nodes" as const, title: t("features.nodes.title"), description: t("features.nodes.description") },
+    { key: "security" as const, title: t("features.security.title"), description: t("features.security.description") },
+  ];
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
+      <section className="mx-auto max-w-3xl text-center">
+        <p className="mb-4 inline-flex rounded-full border border-zinc-200 bg-white px-3 py-1 font-mono text-xs text-zinc-600 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
+          {t("badge")}
+        </p>
+        <h1 className="text-4xl font-semibold tracking-tight text-zinc-900 sm:text-5xl dark:text-zinc-50">
+          {appName}
+        </h1>
+        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
+        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <Link
+            href="/register"
+            className="inline-flex h-10 items-center rounded-md bg-sky-600 px-6 text-sm font-medium text-white transition-colors hover:bg-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400"
+          >
+            {t("ctaPrimary")}
+          </Link>
+          <Link
+            href="/login"
+            className="inline-flex h-10 items-center rounded-md border border-zinc-300 bg-white px-6 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800"
+          >
+            {t("ctaSecondary")}
+          </Link>
+        </div>
+      </section>
+
+      <section className="mt-20 grid gap-6 md:grid-cols-3">
+        {features.map((feature) => (
+          <Card key={feature.key}>
+            <CardHeader>
+              <CardTitle>{feature.title}</CardTitle>
+              <CardDescription>{feature.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="h-1 w-12 rounded-full bg-sky-600 dark:bg-sky-500" aria-hidden="true" />
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+    </div>
+  );
+}

apps/web/src/app/[locale]/register/page.tsx

@@ -0,0 +1,17 @@
+import { setRequestLocale } from "next-intl/server";
+import { RegisterForm } from "@/components/auth/register-form";
+
+interface RegisterPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function RegisterPage({ params }: RegisterPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return (
+    <div className="mx-auto flex min-h-[calc(100vh-8rem)] max-w-6xl items-center justify-center px-4 py-12 sm:px-6">
+      <RegisterForm />
+    </div>
+  );
+}

apps/web/src/app/globals.css

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --surface: 250 250 250;
+  --surface-muted: 244 244 245;
+  --border: 228 228 231;
+}
+
+.dark {
+  --surface: 9 9 11;
+  --surface-muted: 24 24 27;
+  --border: 39 39 42;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-50;
+  }
+}
+
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}

apps/web/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: process.env.NEXT_PUBLIC_APP_NAME ?? "HexaHost GameCloud",
+    template: `%s · ${process.env.NEXT_PUBLIC_APP_NAME ?? "HexaHost GameCloud"}`,
+  },
+  description: "Self-hosted Minecraft server platform control plane.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans`}>
+        {children}
+      </body>
+    </html>
+  );
+}