1weiho--open-slide
wehub-resource-sync
39 行
1.5 KiB
TypeScript
39 行
1.5 KiB
TypeScript
import { HeroSetup } from './hero-setup';
|
||
|
||
export function Hero() {
|
||
return (
|
||
<section className="relative overflow-hidden">
|
||
<div aria-hidden className="hair absolute inset-x-0 top-0" />
|
||
|
||
<div className="relative mx-auto max-w-[1360px] px-5 sm:px-8 lg:px-12 pt-20 sm:pt-32 lg:pt-44 pb-20 sm:pb-32">
|
||
<div className="flex flex-col gap-10 sm:gap-14 max-w-[920px]">
|
||
<h1
|
||
className="text-[44px] sm:text-[72px] lg:text-[100px] leading-[1.05] sm:leading-[0.98] tracking-[-0.035em] rise"
|
||
style={{ animationDelay: '80ms' }}
|
||
>
|
||
<span className="font-[family-name:var(--font-sans)] font-medium text-[color:var(--color-text)]">
|
||
The slide framework
|
||
</span>
|
||
<br />
|
||
<span className="font-[family-name:var(--font-display)] italic text-[color:var(--color-paper)]">
|
||
built for <span className="text-[color:var(--color-accent)]">agents</span>.
|
||
</span>
|
||
</h1>
|
||
|
||
<p
|
||
className="max-w-[600px] text-[18px] sm:text-[20px] leading-[1.6] text-[color:var(--color-text-soft)] rise"
|
||
style={{ animationDelay: '200ms' }}
|
||
>
|
||
A React-first slide framework. Every page is arbitrary code on a 1920×1080 canvas. No
|
||
layout to fight. Design anything you can imagine.
|
||
</p>
|
||
|
||
<div className="w-full rise" style={{ animationDelay: '320ms' }}>
|
||
<HeroSetup />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|