Cayden Website 2.0: Rewrite with t3code & hand

components/ui/reveal.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import {
+	useEffect,
+	useRef,
+	useState,
+	type CSSProperties,
+	type ReactNode,
+} from 'react';
+
+type Props = {
+	children: ReactNode;
+	delay?: number;
+};
+
+// Fades content up as it scrolls into view.
+const Reveal = ({ children, delay = 0 }: Props) => {
+	const ref = useRef<HTMLDivElement>(null);
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry.isIntersecting) {
+					setVisible(true);
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0.12 },
+		);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			data-visible={visible}
+			className="reveal"
+			style={{ '--reveal-delay': `${delay}ms` } as CSSProperties}
+		>
+			{children}
+		</div>
+	);
+};
+
+export default Reveal;

components/ui/section-heading.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+type Props = {
+	title: string;
+	children?: ReactNode;
+};
+
+const SectionHeading = ({ title, children }: Props) => (
+	<div className="mb-6 flex flex-col justify-between gap-2 border-b border-white/15 pb-4 sm:flex-row sm:items-end">
+		<div className="flex items-center gap-3">
+			<span aria-hidden className="h-px w-5 bg-aurora" />
+			<h2 className="font-display text-2xl font-medium tracking-tight text-ink md:text-3xl">
+				{title}
+			</h2>
+		</div>
+		{children && <p className="text-sm text-ink/70">{children}</p>}
+	</div>
+);
+
+export default SectionHeading;