mmintelandClaude Opus 5.5
90120b60db
The page was a row of sections to scroll past, and a film in one of them did not change that. It now follows the questions a visitor has, in the order they come up: who is this, can he do what I need, what does it look like, what else, how does it go, has he done it, what is open, how do I start. Each chapter ends by asking the next question as a large link that leads on, and the next chapter answers it. A rail at the edge shows every chapter as a station with a dot travelling along it (on phones: a pill with the current chapter and one tap to the next), and the header names the current question. Where the visitor is, is pure logic in src/domain/chapters.ts. The scroll film section and the bridge sentences are removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import * as React from "react";
|
|
import { Reveal } from "@/src/components/Reveal";
|
|
import { EmailLink } from "@/src/components/EmailLink";
|
|
import { BitAura } from "@/src/components/bits/BitAura";
|
|
import { BitSeam } from "@/src/components/bits/BitSeam";
|
|
import type { Content } from "@/src/content/types";
|
|
import { BitHeadline } from "./BitHeadline";
|
|
import { ContactComposer } from "./ContactComposer";
|
|
|
|
/** ClosingCta: the contact section. One address and a message starter, no form to submit. */
|
|
export const ClosingCta: React.FC<{ contact: Content["contact"] }> = ({
|
|
contact,
|
|
}) => (
|
|
<section
|
|
id="contact"
|
|
data-chapter="contact"
|
|
data-glow
|
|
className="relative overflow-clip border-t border-slate-200 bg-slate-900 text-white"
|
|
>
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-70"
|
|
style={{
|
|
backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
|
|
backgroundSize: "20px 20px",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="bit-glow bit-glow-dots" aria-hidden="true" />
|
|
<BitSeam />
|
|
<div className="relative mx-auto grid w-full max-w-[1400px] grid-cols-1 gap-12 px-5 py-16 md:px-12 md:py-40 lg:grid-cols-12 lg:items-center lg:gap-12">
|
|
<Reveal className="lg:col-span-6">
|
|
<BitHeadline
|
|
as="h2"
|
|
invert
|
|
lines={contact.headline}
|
|
className="font-sans text-[19vw] font-black leading-[0.86] tracking-tighter md:text-[13vw] lg:text-[8.5vw] xl:text-[9.5rem]"
|
|
/>
|
|
<p className="m-0 mt-10 max-w-xl font-sans text-xl leading-snug text-slate-300 md:text-3xl">
|
|
{contact.lead}
|
|
</p>
|
|
<div className="mt-8">
|
|
<EmailLink className="bit-mail font-sans text-3xl font-bold tracking-tight no-underline md:text-5xl" />
|
|
</div>
|
|
</Reveal>
|
|
<Reveal delay={0.15} className="lg:col-span-6">
|
|
<BitAura source="around" tone="dark">
|
|
<ContactComposer />
|
|
</BitAura>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|