50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
import React from 'react';
|
||
import { Disclaimer } from './Disclaimer';
|
||
|
||
export const Hero: React.FC = () => {
|
||
return (
|
||
<section className="pt-14 pb-16 px-6 border-b hairline">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid lg:grid-cols-12 gap-10 items-start">
|
||
<div className="lg:col-span-7">
|
||
<div className="mono text-[11px] uppercase tracking-[0.18em] text-slate-500 mb-4">
|
||
Publication · Red Team Commentary · Verifiable Artifacts
|
||
</div>
|
||
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 leading-[1.05] mb-5">
|
||
Shadow Dossiers
|
||
</h1>
|
||
<p className="text-lg text-slate-700 leading-relaxed max-w-2xl mb-8">
|
||
Satirical, operator‑grade commentary on governance and compliance theater—published alongside an evidence index
|
||
so readers can verify what’s being referenced.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
<a
|
||
href="#dossiers"
|
||
className="inline-flex items-center justify-center rounded-md bg-slate-900 text-white px-5 py-3 text-sm font-semibold hover:bg-slate-800 transition-colors"
|
||
>
|
||
Browse dossiers
|
||
</a>
|
||
<a
|
||
href="#dossiers"
|
||
target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center rounded-md border hairline bg-white px-5 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-50 transition-colors"
|
||
>
|
||
Evidence index
|
||
</a>
|
||
<a
|
||
href="mailto:dave@infrafabric.io"
|
||
className="inline-flex items-center justify-center rounded-md border hairline bg-transparent px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-white transition-colors"
|
||
>
|
||
Contact
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-5">
|
||
<Disclaimer />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|