--- baseline/src/App.tsx +++ candidate/src/App.tsx @@ -1,42 +1,53 @@ -import { content } from './content' +import { useCallback, useRef, useState } from 'react' +import { content, Service } from './content' +import { useDisciplineFilter } from './hooks/useDisciplineFilter' +import { Header } from './components/Header' +import { Hero } from './components/Hero' +import { ServiceExplorer } from './components/ServiceExplorer' +import { ApproachStrip } from './components/ApproachStrip' +import { CloseSection } from './components/CloseSection' +import { Footer } from './components/Footer' +import { ScopeReviewDialog } from './components/ScopeReviewDialog' function App() { + const { discipline, set: setDiscipline } = useDisciplineFilter() + const [dialogOpen, setDialogOpen] = useState(false) + const [selectedService, setSelectedService] = useState(content.services[0]) + const returnFocusRef = useRef(null) + + const handleOpenDialog = useCallback((event?: React.MouseEvent) => { + if (event?.currentTarget instanceof HTMLElement) { + returnFocusRef.current = event.currentTarget + } + setDialogOpen(true) + }, []) + + const handleCloseDialog = useCallback(() => { + setDialogOpen(false) + const target = returnFocusRef.current + if (target && target.isConnected) { + requestAnimationFrame(() => target.focus()) + } + }, []) + return (
-
- - {content.brand} - {content.descriptor} - - - -
+
-
-

{content.hero.eyebrow}

-

{content.hero.title}

-

{content.hero.body}

- {content.hero.secondaryAction} -
- -
-

{content.servicesIntro.eyebrow}

-

{content.servicesIntro.title}

-

{content.servicesIntro.body}

-
- {content.services.map((service) => ( -
-

{service.discipline}

-

{service.title}

-

{service.summary}

-
- ))} -
-
+ + + +
+ +
+
) } --- baseline/src/components/ApproachStrip.tsx +++ candidate/src/components/ApproachStrip.tsx @@ -0,0 +1,21 @@ +import { content } from '../content' + +export function ApproachStrip() { + return ( +
+
+

{content.approach.eyebrow}

+

{content.approach.title}

+
+
    + {content.approach.principles.map((p) => ( +
  1. + {p.number} +

    {p.title}

    +

    {p.body}

    +
    2. + ))} +
+
+ ) +} --- baseline/src/components/CloseSection.tsx +++ candidate/src/components/CloseSection.tsx @@ -0,0 +1,21 @@ +import { content } from '../content' + +export function CloseSection({ onOpenDialog }: { onOpenDialog: () => void }) { + return ( +
+
+

{content.close.eyebrow}

+

{content.close.title}

+

{content.close.body}

+ +
+
+ ) +} --- baseline/src/components/Footer.tsx +++ candidate/src/components/Footer.tsx @@ -0,0 +1,11 @@ +import { content } from '../content' + +export function Footer() { + return ( +
+

{content.footer.line}

+

{content.footer.region}

+

{content.footer.note}

+
+ ) +} --- baseline/src/components/Header.tsx +++ candidate/src/components/Header.tsx @@ -0,0 +1,88 @@ +import { useId, useState } from 'react' +import { motion, AnimatePresence } from 'motion/react' +import { content } from '../content' + +export function Header({ onOpenDialog }: { onOpenDialog: () => void }) { + const [open, setOpen] = useState(false) + const menuId = useId() + + return ( +
+
+ + {content.brand} + {content.descriptor} + + + + +
+ + +
+
+ + + {open && ( + + + + )} + +
+ ) +} --- baseline/src/components/Hero.tsx +++ candidate/src/components/Hero.tsx @@ -0,0 +1,33 @@ +import { content } from '../content' + +export function Hero() { + return ( +
+
+

{content.hero.eyebrow}

+

{content.hero.title}

+

{content.hero.body}

+
+ + {content.hero.secondaryAction} + +

{content.hero.availability}

+
+
+ +
+ ) +} --- baseline/src/components/ScopeReviewDialog.tsx +++ candidate/src/components/ScopeReviewDialog.tsx @@ -0,0 +1,260 @@ +import { useEffect, useId, useRef, useState } from 'react' +import { motion, AnimatePresence } from 'motion/react' +import { content } from '../content' +import { useFocusTrap } from '../hooks/useFocusTrap' + +interface FormErrors { + name?: string + email?: string + projectType?: string + summary?: string +} + +interface ScopeReviewDialogProps { + isOpen: boolean + onClose: () => void +} + +function validateEmail(value: string): boolean { + // Practical, forgiving RFC-ish check. + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()) +} + +function validateSummary(value: string): boolean { + return value.replace(/\s/g, '').length >= 20 +} + +export function ScopeReviewDialog({ isOpen, onClose }: ScopeReviewDialogProps) { + const dialogRef = useFocusTrap(isOpen) + const titleId = useId() + const descId = useId() + const formRef = useRef(null) + + const [name, setName] = useState('') + const [email, setEmail] = useState('') + const [projectType, setProjectType] = useState('') + const [summary, setSummary] = useState('') + const [touched, setTouched] = useState>({}) + const [errors, setErrors] = useState({}) + const [success, setSuccess] = useState(false) + + useEffect(() => { + if (!isOpen) return + setSuccess(false) + setTouched({}) + setName('') + setEmail('') + setProjectType('') + setSummary('') + }, [isOpen]) + + useEffect(() => { + const original = document.body.style.overflow + if (isOpen) { + document.body.style.overflow = 'hidden' + } + return () => { + document.body.style.overflow = original + } + }, [isOpen]) + + useEffect(() => { + function handleEscape(event: KeyboardEvent) { + if (event.key === 'Escape' && isOpen) { + onClose() + } + } + document.addEventListener('keydown', handleEscape) + return () => document.removeEventListener('keydown', handleEscape) + }, [isOpen, onClose]) + + function validate(values: { name: string; email: string; projectType: string; summary: string }): FormErrors { + const next: FormErrors = {} + if (!values.name.trim()) next.name = 'Name is required' + if (!values.email.trim()) { + next.email = 'Work email is required' + } else if (!validateEmail(values.email)) { + next.email = 'Enter a valid email address' + } + if (!values.projectType) next.projectType = 'Project type is required' + if (!values.summary.trim()) { + next.summary = 'Project summary is required' + } else if (!validateSummary(values.summary)) { + next.summary = 'Project summary must be at least 20 characters' + } + return next + } + + function handleSubmit(event: React.FormEvent) { + event.preventDefault() + const values = { name, email, projectType, summary } + const nextErrors = validate(values) + setErrors(nextErrors) + setTouched({ name: true, email: true, projectType: true, summary: true }) + + if (Object.keys(nextErrors).length === 0) { + setSuccess(true) + } + } + + function handleBlur(field: string) { + setTouched((prev) => ({ ...prev, [field]: true })) + const values = { name, email, projectType, summary } + setErrors(validate(values)) + } + + const fieldError = (field: keyof FormErrors): string | undefined => { + return touched[field] ? errors[field] : undefined + } + + return ( + + {isOpen && ( +
{ + if (e.target === e.currentTarget) onClose() + }} + > + +
+
+

{content.form.title}

+

+ {content.form.intro} +

+
+ +
+ + {success ? ( +
+ {content.form.success} +
+ ) : ( +
+
+ + setName(e.target.value)} + onBlur={() => handleBlur('name')} + aria-invalid={fieldError('name') ? 'true' : undefined} + aria-describedby={fieldError('name') ? 'error-name' : undefined} + /> + {fieldError('name') && ( + + {fieldError('name')} + + )} +
+ +
+ + setEmail(e.target.value)} + onBlur={() => handleBlur('email')} + aria-invalid={fieldError('email') ? 'true' : undefined} + aria-describedby={fieldError('email') ? 'error-email' : undefined} + /> + {fieldError('email') && ( + + {fieldError('email')} + + )} +
+ +
+ + + {fieldError('projectType') && ( + + {fieldError('projectType')} + + )} +
+ +
+ +