homepage redesign, white-surface refactor, UXD application form

  Visual system
  - swap cream/sand palette for white surface + phase-tint accents
    (--color-surface, --color-surface-dim); buttons + cards lose rounding
  - new gradient utilities: gradient-rule[-vertical], gradient-underline
    (form inputs), gradient-frame (2px gradient border on cards)
  - brackets refactor: link-brackets → brackets base + brackets-text /
    brackets-box variants with tunable --bracket-stroke / --bracket-leg
  - new Eyebrow.tsx atom; new SectionTitle.astro atom unifying
    Fraunces+brackets headings across all section components

  Homepage
  - new section order: skillsCloud → latestUpdates (broadsheet wire on
    phase-gradient banner) → howWeWork (phases timeline + modalities row)
    → projectsRoll (4 featured, 2-col, no images) → organisationsRoll →
    uxdCta
  - ProjectsRollSection: new hideImages + wide flags (schema + pagesCMS);
    wide locks card titles at text-3xl across breakpoints
  - ProjectCard: pulsing green active dot (matches /projects/[slug]);
    drop the featured ring border

  Pro bono UXD application form
  - new UxdApplicationForm.tsx with Brevo submission + Altcha challenge
  - api/altcha/* + api/apply.ts endpoints; .env.example, Brevo/Altcha deps
  - new applyForUxd + uxdCta section types (Sections.astro,
    content.config.ts, .pages.yml); wired to /get-in-touch#apply + homepage

  Misc
  - project detail page polish (status colophon, corner-bracket hero frame)
  - atom + organism updates to clear cream/sand tokens and rounded utilities

Author: tingeber

.env.example

@@ -0,0 +1,21 @@
+# UXD application form (src/pages/api/apply.ts + /api/altcha/challenge.ts)
+
+# Altcha — privacy-friendly spam check.
+# Generate a 256-bit hex string. Same key used by both endpoints.
+#   openssl rand -hex 32
+ALTCHA_HMAC_KEY=
+
+# Brevo — transactional email + (optional) contact list.
+# Required: API key with permission to send transactional email.
+BREVO_API_KEY=
+
+# Where the application notification is delivered.
+BREVO_NOTIFY_TO=hello@draftlab.org
+
+# Verified sender in Brevo. Must be authenticated for the sending domain.
+BREVO_NOTIFY_FROM=apply@draftlab.org
+BREVO_NOTIFY_FROM_NAME=Draftlab
+
+# Optional. If set (and >0), the applicant's email + name + project
+# are upserted into this Brevo contact list. Leave blank to skip.
+BREVO_APPLICATIONS_LIST_ID=

.pages.yml

@@ -420,6 +420,16 @@ components:
         label: Featured Only
         type: boolean
         default: false
+      - name: hideImages
+        label: Hide Images
+        type: boolean
+        default: false
+        description: Suppress card images so all blocks stay the same size.
+      - name: wide
+        label: Wide Cards
+        type: boolean
+        default: false
+        description: Two cards per row in a landscape (wider-than-tall) aspect ratio.
 
   phases_overview_section:
     type: object

package-lock.json

@@ -13,12 +13,15 @@
     "@astrojs/netlify": "^7.0.8",
     "@astrojs/react": "^5.0.4",
     "@astrojs/sitemap": "^3.7.2",
+    "@getbrevo/brevo": "^5.0.4",
     "@headlessui/react": "^2.2.9",
     "@stefanprobst/rehype-extract-toc": "^3.0.0",
     "@tailwindcss/vite": "^4.1.18",
     "@types/canvas-confetti": "^1.9.0",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
+    "altcha": "^3.0.4",
+    "altcha-lib": "^2.0.3",
     "astro": "^6.2.1",
     "astro-expressive-code": "^0.41.6",
     "canvas-confetti": "^1.9.4",

package.json

@@ -1,7 +1,7 @@
 ---
-import IconInformationCircle from '~icons/heroicons/information-circle-20-solid';
-import IconExclamationTriangle from '~icons/heroicons/exclamation-triangle-20-solid';
 import IconCheckCircle from '~icons/heroicons/check-circle-20-solid';
+import IconExclamationTriangle from '~icons/heroicons/exclamation-triangle-20-solid';
+import IconInformationCircle from '~icons/heroicons/information-circle-20-solid';
 import IconXCircle from '~icons/heroicons/x-circle-20-solid';
 import IconXMark from '~icons/heroicons/x-mark-20-solid';
 

src/components/atoms/Banner.astro

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+type Tag = 'span' | 'p' | 'div' | 'legend' | 'header' | 'aside';
+type Tone = 'muted' | 'subtle' | 'ink' | 'white';
+
+interface Props {
+	rule?: boolean;
+	tone?: Tone;
+	as?: Tag;
+	className?: string;
+	children: ReactNode;
+}
+
+const TONE_CLASS: Record<Tone, string> = {
+	muted: 'text-ink-muted',
+	subtle: 'text-ink-muted/70',
+	ink: 'text-ink',
+	white: 'text-white',
+};
+
+const TEXT_CLASS = 'font-mono text-[0.6rem] tracking-[0.32em] uppercase';
+
+export function Eyebrow({
+	rule = false,
+	tone = 'muted',
+	as,
+	className = '',
+	children,
+}: Props) {
+	const textClass = `${TEXT_CLASS} ${TONE_CLASS[tone]}`;
+
+	if (rule) {
+		const Wrapper = as ?? 'div';
+		return (
+			<Wrapper className={`flex items-center gap-3 ${className}`.trim()}>
+				<span className="block w-8 gradient-rule" aria-hidden="true" />
+				<span className={textClass}>{children}</span>
+			</Wrapper>
+		);
+	}
+
+	const Tag = as ?? 'span';
+	return <Tag className={`${textClass} ${className}`.trim()}>{children}</Tag>;
+}
+
+export default Eyebrow;

src/components/atoms/Eyebrow.tsx

@@ -20,7 +20,7 @@ const variants = {
   nav: 'text-xl',
   footer: 'text-white text-sm hover:underline underline-offset-4 transition',
   unstyled: '',
-  brackets: 'link-brackets'
+  brackets: 'brackets-text'
 };
 
 const classes = `${variants[variant]} ${className}`;

src/components/atoms/Link.astro

@@ -12,7 +12,7 @@ const { title, as: Tag = 'h2', class: className = '', id } = Astro.props;
 <Tag
 	id={id}
 	class:list={[
-		'link-brackets is-active inline-block w-fit font-serif text-xl font-bold tracking-tight md:text-2xl',
+		'brackets-text is-active inline-block w-fit font-serif text-xl font-bold tracking-tight md:text-2xl',
 		className,
 	]}
 >

src/components/atoms/SectionTitle.astro

@@ -86,7 +86,7 @@ if (iconData) {
 			{title && (
 				<span
 					aria-hidden="true"
-					class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-1.5 -translate-x-1/2 translate-y-1 border border-ink/20 bg-cream px-2 py-1 pb-[0.22rem] font-mono text-[0.65rem] leading-none font-medium tracking-[0.14em] whitespace-nowrap text-ink uppercase opacity-0 shadow-[2px_2px_0_color-mix(in_srgb,var(--color-ink)_10%,transparent)] transition duration-150 ease-out group-focus-within/skill-tooltip:translate-y-0 group-focus-within/skill-tooltip:opacity-100 group-hover/skill-tooltip:translate-y-0 group-hover/skill-tooltip:opacity-100 motion-reduce:translate-y-0 motion-reduce:transition-none"
+					class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-1.5 -translate-x-1/2 translate-y-1 border border-ink/20 bg-white px-2 py-1 pb-[0.22rem] font-mono text-[0.65rem] leading-none font-medium tracking-[0.14em] whitespace-nowrap text-ink uppercase opacity-0 shadow-[2px_2px_0_color-mix(in_srgb,var(--color-ink)_10%,transparent)] transition duration-150 ease-out group-focus-within/skill-tooltip:translate-y-0 group-focus-within/skill-tooltip:opacity-100 group-hover/skill-tooltip:translate-y-0 group-hover/skill-tooltip:opacity-100 motion-reduce:translate-y-0 motion-reduce:transition-none"
 				>
 					{title}
 				</span>

src/components/atoms/SkillIcon.astro

@@ -4,8 +4,8 @@ import {
   ListboxOption,
   ListboxOptions,
 } from '@headlessui/react';
-import IconChevronDown from '~icons/heroicons/chevron-down-20-solid';
 import IconCheck from '~icons/heroicons/check-20-solid';
+import IconChevronDown from '~icons/heroicons/chevron-down-20-solid';
 
 export interface FilterOption {
   value: string;
@@ -59,9 +59,9 @@ export default function FilterDropdown({
 
   return (
     <div className={`relative ${className}`}>
-      <label className="mb-1 block text-sm font-medium text-gray-700">
+      <span className="mb-1 block text-sm font-medium text-gray-700">
         {label}
-      </label>
+      </span>
       <Listbox value={selected || ''} onChange={handleChange}>
         {({ open }) => (
           <>