adminandClaude Opus 4.8
86fc1574c5
16-file refinement (mono system intact): oversized tight headlines + giant faint mono indices as texture, single shared hairline grids over boxes, wider 8px vertical rhythm, restrained hairline-draw hover micro-interactions, red kept to <=1 per screen. Copy cut to terse, confident Swedish across landing + app screens. Logic/props/ids/contracts preserved; tsc clean, next build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
93 lines
4.6 KiB
TypeScript
93 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useReveal } from "@/hooks/use-reveal";
|
|
|
|
const CHAIN = [
|
|
["01", "Officiella API:er", "GLEIF · Brreg · Companies House", "var(--prov-3)"],
|
|
["02", "Auktoriserad webb", "robots.txt. Rate limits.", "var(--prov-1)"],
|
|
["03", "Licensierad partnerdata", "Avtalad åtkomst.", "var(--prov-2)"],
|
|
["04", "Annars: tomt", "Vi gissar aldrig.", "transparent"],
|
|
];
|
|
|
|
const PIPELINE = ["Källracing", "Extraktion", "Strukturering", "Berikning", "QA"];
|
|
|
|
export function TechnologySection() {
|
|
const ref = useReveal<HTMLElement>();
|
|
return (
|
|
<section ref={ref} id="motorn" className="dark grain-overlay relative overflow-hidden border-b border-[#262626] bg-[#0a0a0a] text-[#fafafa]">
|
|
{/* graph-paper hairline texture */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0 opacity-[0.5]"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, #161616 1px, transparent 1px), linear-gradient(to bottom, #161616 1px, transparent 1px)",
|
|
backgroundSize: "64px 64px",
|
|
maskImage: "radial-gradient(120% 80% at 80% 0%, #000 0%, transparent 75%)",
|
|
WebkitMaskImage: "radial-gradient(120% 80% at 80% 0%, #000 0%, transparent 75%)",
|
|
}}
|
|
/>
|
|
{/* oversized faint section numeral */}
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute -right-2 top-2 select-none font-mono text-[clamp(7rem,22vw,16rem)] font-medium leading-none tracking-[-0.04em] text-[#141414]"
|
|
>
|
|
03
|
|
</span>
|
|
|
|
<div className="relative mx-auto max-w-[80rem] px-6 py-28 lg:py-40">
|
|
<div className="reveal flex items-center gap-3">
|
|
<span aria-hidden className="animate-float inline-block h-2 w-2" style={{ backgroundColor: "var(--accent-red)" }} />
|
|
<p className="font-mono text-[11px] uppercase tracking-[0.16em] text-[#a3a3a3]">Motorn</p>
|
|
</div>
|
|
<h2 className="reveal delay-1 mt-6 max-w-3xl text-[clamp(2.2rem,5vw,4rem)] font-medium leading-[0.98] tracking-[-0.03em]">
|
|
Lagligt insamlat.
|
|
<br />
|
|
Spårbart varje steg.
|
|
</h2>
|
|
|
|
{/* sourcing chain */}
|
|
<p className="reveal delay-2 mt-20 font-mono text-[11px] uppercase tracking-[0.16em] text-[#737373]">Källkedjan — i prioritet</p>
|
|
<div className="reveal-scale delay-2 mt-6 grid grid-cols-1 border-t border-[#262626] sm:grid-cols-2 lg:grid-cols-4">
|
|
{CHAIN.map(([n, title, sub, color], i) => (
|
|
<div
|
|
key={n}
|
|
className={`reveal delay-${i + 1} group relative border-b border-l border-[#262626] p-6 transition-[background-color] duration-300 hover:bg-[#121212] sm:[&:nth-child(2n)]:border-r lg:[&:nth-child(2n)]:border-r-0 lg:[&:last-child]:border-r`}
|
|
>
|
|
{/* hairline draw on hover */}
|
|
<span aria-hidden className="absolute left-0 top-0 h-px w-0 bg-[#525252] transition-[width] duration-300 ease-out group-hover:w-full" />
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-mono text-[11px] tracking-[0.08em] text-[#737373]">{n}</span>
|
|
<span
|
|
className="inline-block h-2.5 w-2.5"
|
|
style={{
|
|
backgroundColor: color === "transparent" ? "transparent" : color,
|
|
border: color === "transparent" ? "1px solid #525252" : "none",
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="mt-16 text-[1.0625rem] font-medium leading-tight tracking-[-0.01em]">{title}</p>
|
|
<p className="mt-2 font-mono text-[11px] leading-relaxed text-[#a3a3a3]">{sub}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* pipeline */}
|
|
<p className="reveal delay-3 mt-24 font-mono text-[11px] uppercase tracking-[0.16em] text-[#737373]">Pipelinen</p>
|
|
<div className="reveal delay-3 mt-6 flex flex-wrap items-center gap-x-3 gap-y-4">
|
|
{PIPELINE.map((s, i) => (
|
|
<div key={s} className="flex items-center gap-3">
|
|
<span className="font-mono text-[11px] tracking-[0.06em] text-[#525252]">{String(i + 1).padStart(2, "0")}</span>
|
|
<span className="font-mono text-[13px] uppercase tracking-[0.06em] text-[#fafafa]">{s}</span>
|
|
{i < PIPELINE.length - 1 ? <span aria-hidden className="text-[#404040]">/</span> : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="reveal delay-4 mt-8 max-w-md font-mono text-[11px] uppercase leading-relaxed tracking-[0.06em] text-[#737373]">
|
|
QA körs i pipelinen. Inte vid sidan om.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|