54 lines
2.5 KiB
TypeScript
54 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "@/app/digital/i18n/navigation";
|
|
import DigitalThemeIcon from "./DigitalThemeIcon";
|
|
|
|
export default function Hero() {
|
|
const { t } = useTranslation("hero");
|
|
return (
|
|
<section className="dn-hero relative overflow-hidden pt-10 pb-16 sm:pt-14 sm:pb-20">
|
|
<div className="dn-hero-bg pointer-events-none absolute inset-0" />
|
|
<div className="dn-hero-glow pointer-events-none absolute top-0 left-1/2 h-[600px] w-[800px] -translate-x-1/2 rounded-full blur-3xl" />
|
|
|
|
<div className="dn-container relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<div className="dn-badge mb-6 inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium">
|
|
<DigitalThemeIcon name="briefcase" emoji="🎒" className="h-4 w-4" />
|
|
<span>{t("badge")}</span>
|
|
</div>
|
|
|
|
<h1 className="dn-hero-title mx-auto max-w-4xl text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl lg:text-7xl">
|
|
<span className="gradient-text">{t("title")}</span>
|
|
<br className="sm:hidden" />
|
|
{t("titleSuffix")}
|
|
</h1>
|
|
|
|
<p className="dn-hero-copy mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 dark:text-slate-400 sm:text-xl">
|
|
{t("subtitle")}
|
|
<br className="hidden sm:block" />
|
|
<span className="text-slate-400 dark:text-slate-500 sm:text-slate-600">
|
|
{t("subtitleEn")}
|
|
</span>
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
|
|
<a
|
|
href="#roadmap"
|
|
className="dn-button-primary inline-flex w-full items-center justify-center gap-2 rounded-full px-8 py-3.5 text-base font-semibold text-white sm:w-auto"
|
|
>
|
|
{t("ctaStart")}
|
|
<span>→</span>
|
|
</a>
|
|
<a
|
|
href="#community"
|
|
className="dn-button-secondary inline-flex w-full items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-8 py-3.5 text-base font-semibold text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700 sm:w-auto"
|
|
>
|
|
{t("ctaResources")}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|