27 lines
1.2 KiB
TypeScript
27 lines
1.2 KiB
TypeScript
export function Hero() {
|
|
return (
|
|
<section className="relative pt-24 sm:pt-32 pb-12 sm:pb-16 px-4 sm:px-6 overflow-hidden">
|
|
{/* Subtle background gradient */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" />
|
|
{/* Grid pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage:
|
|
'linear-gradient(rgba(249,249,247,1) 1px, transparent 1px), linear-gradient(90deg, rgba(249,249,247,1) 1px, transparent 1px)',
|
|
backgroundSize: '64px 64px',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative mx-auto max-w-4xl text-center">
|
|
<h1 className="font-serif text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1] mb-6">
|
|
<em className="italic text-primary">Greywall</em> your <span className="text-red-400/90">agent</span> & let it cook.
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto font-serif">
|
|
Agents inherit your full permissions and decide what to access at runtime. Here's what that looks like...
|
|
</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|