app-template/app/web/src/views/home.astro

56 lines
1.9 KiB
Plaintext

---
import { alternatePath, type Locale, t } from "@app/i18n";
import AppLayout from "~/layouts/AppLayout.astro";
export interface Props {
locale: Locale;
}
const { locale } = Astro.props;
const tr = (key: Parameters<typeof t>[1]) => t(locale, key);
const otherLocale: Locale = locale === "zh-CN" ? "en" : "zh-CN";
const switchHref = alternatePath(Astro.url.pathname, otherLocale);
const dashHref = locale === "zh-CN" ? "/zh-CN/dashboard" : "/en/dashboard";
const loginHref = locale === "zh-CN" ? "/zh-CN/auth/login" : "/en/auth/login";
---
<AppLayout
title={tr("home.title")}
locale={locale}
nav={[]}
switchHref={switchHref}
switchLabel={t(otherLocale, `locale.${otherLocale}` as never)}
>
<section class="space-y-10 py-10">
<div class="u-reveal">
<p class="u-label u-label-edge">{tr("meta.tagline")}</p>
<h1 class="mt-3 text-[40px] font-black tracking-tight leading-[1.05]">
{tr("home.heroLine1")}<br />{tr("home.heroLine2")}
</h1>
<span class="u-edge-bar mt-5"></span>
<p class="mt-5 max-w-xl text-[14px] leading-relaxed" style="color: var(--ink-2);">
{tr("home.subtitle")}
</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href={dashHref} class="u-btn u-btn--edge">{tr("home.ctaDashboard")}</a>
<a href={loginHref} class="u-btn u-btn--ghost">{tr("home.ctaLogin")}</a>
</div>
</div>
<div class="grid gap-6 md:grid-cols-2">
<section class="u-card p-6 u-reveal">
<p class="u-label">{tr("home.stackTitle")}</p>
<p class="mt-3 text-[14px] leading-relaxed" style="color: var(--ink-2);">
{tr("home.stackBody")}
</p>
</section>
<section class="u-card p-6 u-reveal">
<p class="u-label">{tr("home.layerTitle")}</p>
<p class="mt-3 text-[14px] leading-relaxed" style="color: var(--ink-2);">
{tr("home.layerBody")}
</p>
</section>
</div>
</section>
</AppLayout>