53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { m, useReducedMotion } from "motion/react";
|
|
|
|
import { manifesto } from "@/lib/portfolio";
|
|
|
|
const SURVIVE_PHRASE = "survive contact";
|
|
|
|
function splitAccentPhrase(statement: string) {
|
|
const phraseIndex = statement.indexOf(SURVIVE_PHRASE);
|
|
|
|
if (phraseIndex < 0) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
before: statement.slice(0, phraseIndex),
|
|
after: statement.slice(phraseIndex + SURVIVE_PHRASE.length),
|
|
};
|
|
}
|
|
|
|
export function Manifesto() {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const accentSplit = splitAccentPhrase(manifesto);
|
|
|
|
return (
|
|
<m.section
|
|
aria-labelledby="manifesto-heading"
|
|
className="mx-auto max-w-7xl px-6 py-28 text-blacksite-muted sm:px-8 sm:py-36 lg:px-12"
|
|
initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-15%" }}
|
|
transition={{ duration: shouldReduceMotion ? 0 : 0.6, ease: "easeOut" }}
|
|
>
|
|
<p className="section-label mb-12">PRINCIPLE /.03</p>
|
|
<h2
|
|
id="manifesto-heading"
|
|
className="max-w-5xl font-display text-[clamp(2.25rem,6vw,4.5rem)] font-semibold leading-[1.05] tracking-[-0.06em] text-blacksite-muted"
|
|
>
|
|
{accentSplit ? (
|
|
<>
|
|
{accentSplit.before}
|
|
<span className="text-signal-cyan">{SURVIVE_PHRASE}</span>
|
|
{accentSplit.after}
|
|
</>
|
|
) : (
|
|
manifesto
|
|
)}
|
|
</h2>
|
|
</m.section>
|
|
);
|
|
}
|