mirror of
https://github.com/Xahau/xahau-web.git
synced 2026-08-03 20:20:54 +00:00
96 lines
2.4 KiB
Plaintext
96 lines
2.4 KiB
Plaintext
---
|
|
import '../styles/main.css'
|
|
import { getRelativeLocaleUrl } from 'astro:i18n'
|
|
import worldmap from '../assets/worldmap.svg'
|
|
import XahauHome from '../components/XahauHome.astro'
|
|
import { indexTranslations } from '../i18n/indexTranslations'
|
|
import { defaultLocale, type Locale } from '../i18n/locales'
|
|
import BaseLayout from '../layouts/BaseLayout.astro'
|
|
|
|
const _frontmatter = Astro.props.frontmatter
|
|
|
|
const locale = (Astro.currentLocale ?? defaultLocale) as Locale
|
|
const i = indexTranslations[locale]
|
|
---
|
|
|
|
<BaseLayout frontmatter={_frontmatter}>
|
|
<div
|
|
class="relative flex flex-col items-center justify-center min-h-[80vh] py-40"
|
|
>
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center pointer-events-none select-none"
|
|
>
|
|
<div class="w-full h-full mx-auto">
|
|
<img
|
|
src={worldmap.src}
|
|
alt="World map"
|
|
class="w-full h-full object-contain"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="flex-none container mx-auto py-12 text-left max-w-7xl p-6 z-10">
|
|
<div class="flex flex-col items-center text-center">
|
|
<h1
|
|
class="text-4xl md:text-5xl font-extrabold text-black mb-4 max-w-2/3"
|
|
>
|
|
{i.hero_title}
|
|
</h1>
|
|
<p class="text-2xl md:text-2xl font-semibold text-black mb-8 max-w-2/3">
|
|
{i.hero_subtitle}
|
|
</p>
|
|
<div class="flex gap-4">
|
|
<a
|
|
href={getRelativeLocaleUrl(locale, '/about')}
|
|
class="hero-btn hero-btn-primary"
|
|
>
|
|
{i.hero_learn}
|
|
</a>
|
|
<a
|
|
href={getRelativeLocaleUrl(locale, '/docs')}
|
|
class="hero-btn hero-btn-secondary"
|
|
>
|
|
{i.hero_docs}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-none container mx-auto max-w-7xl p-6 pb-12">
|
|
<XahauHome />
|
|
</div>
|
|
<slot />
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.hero-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 48px;
|
|
padding: 0 36px;
|
|
border-radius: 6px;
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s;
|
|
}
|
|
.hero-btn-primary {
|
|
background: #007a28;
|
|
color: #ffffff;
|
|
}
|
|
.hero-btn-primary:hover {
|
|
background: #005a1e;
|
|
color: #ffffff;
|
|
}
|
|
.hero-btn-secondary {
|
|
background: #e4edef;
|
|
color: #0f2328;
|
|
}
|
|
.hero-btn-secondary:hover {
|
|
background: #cdd7dc;
|
|
color: #0f2328;
|
|
}
|
|
</style>
|