adminandClaude Opus 4.8
f4beca3f76
Converts every last bare-Swedish const array across landing sections
(STATS, TILES, CHAIN, PIPELINE, MODELS, DATASETS, PRINCIPLES, COLUMNS)
and shared components (data-artifact, provenance-badge) to {en,sv} Loc
objects consumed via useT(). Verified by per-file verify agent: 10/10
clean, zero remaining bare-Swedish display text. tsc 0 + build green.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
61 lines
3.4 KiB
TypeScript
61 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useReveal } from "@/hooks/use-reveal";
|
|
import { useT } from "@/components/locale-provider";
|
|
import { DataArtifact } from "@/components/data-artifact";
|
|
|
|
const TILES: { variant: "table" | "map" | "schema" | "chart" | "grid"; index: string; title: { en: string; sv: string }; line: { en: string; sv: string } }[] = [
|
|
{ variant: "table", index: "01", title: { en: "Table", sv: "Tabell" }, line: { en: "Source per cell.", sv: "Källa per cell." } },
|
|
{ variant: "map", index: "02", title: { en: "Coverage", sv: "Täckning" }, line: { en: "Share confirmed.", sv: "Andel bekräftat." } },
|
|
{ variant: "schema", index: "03", title: { en: "Schema", sv: "Schema" }, line: { en: "Delivered model.", sv: "Levererad modell." } },
|
|
{ variant: "chart", index: "04", title: { en: "Dashboard", sv: "Dashboard" }, line: { en: "One series.", sv: "En serie." } },
|
|
{ variant: "grid", index: "05", title: { en: "Export", sv: "Export" }, line: { en: "Any format.", sv: "Valfritt format." } },
|
|
];
|
|
|
|
export function GallerySection() {
|
|
const ref = useReveal<HTMLElement>();
|
|
const tr = useT();
|
|
return (
|
|
<section ref={ref} className="border-b border-border bg-background">
|
|
<div className="mx-auto max-w-[80rem] px-6 py-32 lg:py-40">
|
|
<header className="flex items-end justify-between gap-8 border-b border-border pb-8">
|
|
<div>
|
|
<p className="reveal font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">{tr({ en: "— Visualizations", sv: "— Visualiseringar" })}</p>
|
|
<h2 className="reveal delay-1 mt-4 text-[clamp(2.4rem,5.5vw,4.5rem)] font-medium leading-[0.95] tracking-[-0.03em]">
|
|
{tr({ en: "See it.", sv: "Se den." })}
|
|
</h2>
|
|
</div>
|
|
<p className="reveal-right delay-2 hidden max-w-[16rem] text-sm leading-relaxed text-muted-foreground md:block">
|
|
{tr({ en: "Table. Map. Schema. Chart. Your call.", sv: "Tabell. Karta. Schema. Graf. Du väljer." })}
|
|
</p>
|
|
</header>
|
|
|
|
<div className="mt-16 grid grid-cols-1 gap-px border border-border bg-border md:grid-cols-2 lg:grid-cols-3">
|
|
{TILES.map((t, i) => (
|
|
<article
|
|
key={t.index}
|
|
className={`group reveal-scale delay-${i + 1} flex flex-col bg-background p-8 transition-opacity duration-300 hover:opacity-[0.92] ${i === 0 ? "md:col-span-2" : ""}`}
|
|
>
|
|
<div className="flex items-baseline justify-between">
|
|
<span className="font-mono text-[clamp(2rem,4vw,3.5rem)] font-medium leading-none tracking-[-0.04em] text-border transition-colors duration-300 group-hover:text-muted-foreground">
|
|
{t.index}
|
|
</span>
|
|
<span className="h-px w-12 origin-right scale-x-50 bg-border transition-transform duration-300 group-hover:scale-x-100" />
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<DataArtifact variant={t.variant} />
|
|
</div>
|
|
|
|
<div className="mt-6 flex items-baseline justify-between border-t border-border pt-4">
|
|
<span className="text-base font-medium tracking-[-0.01em]">{tr(t.title)}</span>
|
|
<span className="font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground">{tr(t.line)}</span>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|