Denis Krylov
e406c55c89
All checks were successful
Deploy monie-landing (kaniko) / build-and-deploy (push) Successful in 14m15s
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import { Badge, Button, Card, Heading, Text } from "denjs-ui";
|
|
import { getHeroMetrics } from "#/entities/landing";
|
|
import { scrollToSection } from "#/shared/lib/dom";
|
|
import { useMessages } from "#/shared/lib/i18n";
|
|
|
|
export function HeroSection() {
|
|
const m = useMessages();
|
|
|
|
return (
|
|
<section className="island-shell rise-in relative overflow-hidden rounded-[2.2rem] px-6 py-10 sm:px-10 sm:py-14">
|
|
<div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
|
|
<div className="pointer-events-none absolute -bottom-24 -right-16 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(230,128,97,0.2),transparent_66%)]" />
|
|
|
|
<Badge
|
|
color="teal"
|
|
rounded="full"
|
|
bordered
|
|
className="w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
|
|
>
|
|
{m.hero_badge()}
|
|
</Badge>
|
|
|
|
<Heading
|
|
level={1}
|
|
className="mt-4 max-w-4xl text-4xl leading-[0.98] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl"
|
|
>
|
|
{m.hero_title()}
|
|
</Heading>
|
|
|
|
<Text
|
|
size="lg"
|
|
tone="muted"
|
|
className="mt-5 max-w-3xl text-base leading-7 text-[var(--sea-ink-soft)] sm:text-lg"
|
|
>
|
|
{m.hero_subtitle()}
|
|
</Text>
|
|
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<Button
|
|
size="large"
|
|
className="rounded-full"
|
|
onClick={() => scrollToSection("demo")}
|
|
>
|
|
{m.hero_cta_primary()}
|
|
</Button>
|
|
<Button
|
|
tone="secondary"
|
|
size="large"
|
|
className="rounded-full"
|
|
onClick={() => scrollToSection("how")}
|
|
>
|
|
{m.hero_cta_secondary()}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-3 sm:grid-cols-3">
|
|
{getHeroMetrics(m).map((item, index) => (
|
|
<Card
|
|
key={item.label}
|
|
padding="md"
|
|
className="metric-card rise-in rounded-2xl"
|
|
style={{ animationDelay: `${index * 100 + 80}ms` }}
|
|
>
|
|
<Text
|
|
as="p"
|
|
weight="semibold"
|
|
className="m-0 text-2xl font-extrabold text-[var(--sea-ink)]"
|
|
>
|
|
{item.value}
|
|
</Text>
|
|
<Text
|
|
as="p"
|
|
size="sm"
|
|
tone="muted"
|
|
className="mt-1 text-[var(--sea-ink-soft)]"
|
|
>
|
|
{item.label}
|
|
</Text>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|