* fix(builders-hub): align ideas page details to Figma Match exact Figma specs for the Builder Ideas page (desktop 121:11657, mobile 121:11581): - idea-row: desktop index weight Regular (was medium); mobile title width 179px; mobile Apply CTA square corners (drop rounded-[4px]) and left-aligned at x=298 (right-[22px]) - bottom CTA: heading H3 (36px desktop / 30px mobile) instead of H2 (56px); restore text-h3-serif line-height 1 / -0.03em; gap 24px * fix(builders-hub): align RFP page details to Figma Match exact Figma specs for the Builder RFPs page (desktop 121:11577, mobile 121:11489): - rfp-card: title letter-spacing -0.01em (H4 Sans) instead of tracking-tight (-0.025em) - rfp-list-row: apply the same Row-entry corrections as the ideas row — desktop index weight Regular (was medium), mobile title width 179px, Learn More CTA square corners (drop rounded-[4px]) and left-aligned at x=298 (right-[22px]) - listing grid (RFP branch only): desktop top margin 138px so the first card lands at Figma y=374 (was 160px -> 396px, 22px too low); ideas and list-view branches untouched Text copy verified against Figma (titles/taglines match, British spelling kept where Figma used American). Grid layout, card geometry (345x317 desktop / 369x317 mobile), colours, borders, 96px images and CTA positions confirmed matching. * fix(get-started): align spacing, colours, and copy with Figma - Correct 04 heading copy to "What you can build today" - Swap community row alternating backgrounds (row 0 = grey-01) - Restyle community row labels to 14px (sans-medium number + serif name) - Underline community row "Learn more" CTA (border-b) - Build card body: Public Sans 14px instead of mono 10px - Fix install/docs section top padding (install pt-24, docs pt-40 on desktop) - Add 6px gap between install card image and text panel * fix(basecamp): align spacing, padding, and text gaps with Figma design - Fixed HowItWorksSection: md:py-3 → md:py-10 (was reducing padding on desktop) - Fixed LocalFirstSection: py-3 → py-10 for proper vertical spacing - Increased gap spacing from 3 to 4 across card components and sections - Added uppercase styling to LocalFirstSection eyebrow - Added opacity-0 to footerLabel for layout consistency - Adjusted ModularSection vertical padding: py-10 → py-12 mobile, py-10 desktop - Added flex flex-col gap-4 to ModularSection body text - CapabilitiesSection: py-6 → py-10 mobile for consistent spacing - ResourcesSection: py-10 → py-12 mobile for alignment with other sections - Improved internal spacing in ResourceCard (gap-3 → gap-4, mt-3 → mt-4) All changes verified against Figma desktop design at node-id=146-15527 * refine(basecamp): fine-tune section spacing and padding alignment - HeroSection: pb-12 mobile, pb-10 desktop (better spacing at section break) - HowItWorks title gap: mb-6 → mb-8 (increased spacing to content) - ModularSection: removed inconsistent py-12, standardized to py-10 - CapabilitiesSection heading: mb-10 → mb-12 (better visual hierarchy) - ResourcesSection: removed inconsistent py-12, standardized to py-10 All sections now maintain consistent padding pattern: py-10 with device-specific overrides where needed * fix(lambda-prize): align spacing, padding, and gap with design - HowItWorks: gap-3 → gap-4 mobile, gap-6 desktop, added md:px-3 md:py-10 - HowItWorks titles: mb-6 → mb-8 for both sections - FeaturedPrizes: mt-6 → mt-10 mobile, mt-12 desktop, gap-3 → gap-4, moved px-3 to section level - AboutProgramme: gap-3 → gap-4 mobile, gap-6 desktop, added md:px-3 md:py-10 - Support: pt-10 → py-10 mobile, py-12 desktop, added px-3, removed redundant px-3 from grid All sections now have consistent spacing patterns aligned with Figma design specifications * fix(lambda-prize): precision spacing refinements - standardize padding and margins - DataRows: increase py-1.5 → py-3 for better vertical spacing - FeaturedPrizes: reduce excessive padding pt-[100px] → pt-10, md:pt-[200px] → md:pt-12 - Hero: standardize margins mb-[60px] → mb-12, mt-[60px] → mt-12 - Support: standardize margin-top mt-[35px] → mt-6, md:mt-[91px] → md:mt-8 * fix(research): align section heights with Figma design - Change hero section from min-h-[447px] to h-[447px] (fixed height) - Change overview section from min-h-[670px] to h-[670px] (desktop) - Change resource rows from min-h-[50px] to h-[50px] (fixed height) - Change contribute section from min-h-[262px] to h-[262px] (desktop) These fixed heights match the Figma design specifications for precise layout control across all breakpoints. * fix(research): revert to min-h for responsive design Responsive design requires minimum heights (min-h) instead of fixed heights (h) to accommodate content overflow on various screen sizes. Maintains Figma design intent while ensuring proper mobile/tablet layout behavior. * fix(press): align PressHero padding with Figma design Change PressHero section padding from pt-6 (24px) to pt-10 (40px) to match Figma design specifications where section starts at y=40. All other spacing, margins, colors, and image ratios already aligned with Figma design. Press page now 100% design-compliant. * fix(podcast): add wrapper padding for consistent page layout spacing * fix(podcast): align top padding with Figma design (pt-20/80px) * fix(broadcast-network): align padding with Figma design specs * fix(technology-stack): align hero padding with design specifications * fix(technology-stack): center hero section on desktop to fix left alignment * fix(technology-stack): make architecture image responsive and prevent clipping * fix(technology-stack): constrain all sections to 1440px max-width on desktop * refactor: centralize max-width layout at page level to eliminate duplication - Add SectionLayout wrapper to all technology-stack pages (main, blockchain, networking, storage, messaging) - Move 1440px max-width constraint from individual section components to page-level layout - Remove mx-auto max-w-360/max-w-[1440px] from tech-stack sections and shared components - Reduces code duplication and centralizes layout management * refactor: simplify layout by inlining max-width constraint - Remove SectionLayout function definitions from each page - Use simple div wrapper at page return level - Reduces code duplication and improves maintainability * refactor: revert page-level layout constraint, keep section-level management - Remove max-width wrapper from page returns - Each section maintains full-width background - Section components manage internal 1440px constraint - Preserves visual hierarchy from Figma design * refactor: centralize content width constraints with ContentWidth component - Create ContentWidth component for 1440px max-width constraint - Remove layout-level max-width from main element to allow full-width sections - Apply ContentWidth to all home page sections for consistent layout - Convert absolute positioning to flex/grid layouts in: * Parallel Society (gallery display) * Tech Stack (title and metadata centering) * Feature Cards (3-column grid) * Circles CTA (vertical layout) * Press Section (flex grid) * Social Proof (4-column grid) * Start Building (2-column layout) * About Section (centered closing text) - Implement responsive sizing with Tailwind classes - Update technology-stack page section for proper centering This enables full-width background colors while constraining content to 1440px max-width, improving design system consistency across all pages. * refactor: make social proof section full-width without 1440px constraint Remove ContentWidth wrapper from the stat cards section to allow it to span full screen width while maintaining proper padding. * fix: add line break in 'The Logos Technology Stack' title Match Figma design by breaking 'The Logos' and 'Technology Stack' onto separate lines. * fix: add line break in Basecamp title Match Figma design by breaking 'Basecamp is our' and 'Exit Guide.' onto separate lines. * fix: add line break to tech stack title on mobile view Use <br /> instead of literal newline for proper HTML rendering of 'The ... Technology Stack' title. * fix: add width constraints to AppInstall paragraph text Match container width (260px mobile, 464px desktop) to ensure text wrapping aligns with Figma design. * Revert "fix: add width constraints to AppInstall paragraph text" This reverts commit 184efed9421b0b8c006d5121f26da72b7d015491. * fix(tech-stack): constrain desktop title to 464px to match Figma Desktop h2 used w-full, so 'The Logos Technology Stack' stayed on one line at wide/4K viewports. Figma node 121:6875 sets it to 464px, which wraps it to two lines. Parent is items-center so the fixed width centers. * refacor: refactor layout components to use ContentWidth for consistent styling - Updated various sections across the application to wrap content in the ContentWidth component for improved layout consistency. - Adjusted padding and margin values in several sections to enhance visual alignment. - Modified text content in the About section to reflect updated messaging. - Improved accessibility and responsiveness by ensuring all sections utilize the ContentWidth component. * feat: integrate ContentWidth component for layout consistency across various sections * feat: update StorageAccess component with new card data and CTA buttons for improved user interaction * feat: update MessagingIntro and related tests for improved layout and responsiveness based on Figma specifications * Refactor code structure for improved readability and maintainability * Refactor code structure for improved readability and maintainability * Refactor technology stack detail layout and hero components - Introduced `TechStackDetailPage` and `TechStackDetailSection` components for consistent layout across technology stack pages. - Updated individual technology stack pages (blockchain, messaging, networking, storage) to utilize the new layout components. - Refactored hero components (BlockchainHero, MessagingHero, NetworkingHero, StorageHero) to use `TechStackDetailHero` for improved structure and reusability. - Adjusted spacing and margin classes to align with design specifications, removing redundant margin classes. - Added `imageFit` property to builders hub settings schema to control image display behavior. - Updated tests to ensure layout consistency and adherence to design specifications. * feat: enhance layout and responsiveness of articles and podcasts sections based on Figma specifications * fix: prevent messaging delivery image clipping * feat: update article and podcast layouts for improved responsiveness and alignment with Figma designs * test: remove ui implementation contracts
8.7 KiB
AGENTS.md
Operating guide for AI coding agents working in this repo. Keep changes minimal, match the conventions below, and prefer reading the linked docs over inferring intent.
Repo shape
pnpm + Turborepo monorepo. Node 24, pnpm 11.1.
| Path | Role |
|---|---|
apps/web |
Public Next.js 16 site. Tailwind v4, next-intl, static export. Port 3000. |
apps/cms |
Payload CMS 3.x admin app (Next.js 16 + Postgres). Port 3001, admin at /admin. |
apps/civi-crm |
CiviCRM internal web layer (Next.js 16). Keycloak-protected. Port 3002. See docs/civi-crm/architecture.md. |
packages/content |
Content schemas, loaders for content/**, GitHub mutation helpers, locale registry. |
packages/ui |
Shared React primitives + SVG icon components. |
packages/tokens |
Design tokens. |
packages/types |
Shared types incl. Payload-generated (generate-types). |
packages/config |
Shared ESLint / TypeScript / Prettier config. |
content/** |
Production source of truth for page copy and structured data (pages, press, circles, builders-hub, site). |
docs/** |
Deployment, plan, page/component specs. Read before designing. |
Apps are entrypoints only. New shared logic goes in a package, not duplicated across apps.
Commands
Run from repo root unless noted.
pnpm install
pnpm dev # turbo: web on :3000, cms on :3001, civi-crm on :3002
pnpm build # web static export + cms next build
pnpm test # vitest in apps/web
pnpm lint # eslint --max-warnings 0 across workspaces
pnpm check-types # next typegen + tsc --noEmit
pnpm generate-types # cms only — regenerates packages/types/src/payload.ts
apps/web/start is python3 -m http.server over the static out/ build, not next start. Treat the web app as static.
Architecture rules
apps/webdoes not call the GitHub API at request time. It readscontent/**at build. Preview deploys build per PR; production deploys frommaster.- CMS edits are PRs, not DB writes. Payload's Postgres only stores users, sessions, drafts, and PR cache. All published content changes go through
developvia GitHub PR (seeapps/cms/src/services/content-workflow/). - Branch model:
developis the default + staging branch.masteris production (created when production deploys spin up). Direct commits to either are blocked by branch protection. CMS-generated PRs targetdevelop. - Env access is typed. Use
apps/web/lib/env.ts; never reach intoprocess.envfrom feature code. Add new vars toenv.ts. - The CMS refuses to boot in production-like envs without
NEXT_PUBLIC_SERVER_URL/NEXT_PUBLIC_WEB_URL— silent localhost fallback breaks CORS/cookies. Don't "fix" this by removing the assertion.
i18n
- Active locales come from
apps/web/i18n/routing.ts(today:['en']).Languagetype is pre-declared as'en' | 'fr' | 'ko'so adding a locale is a routing change, not a schema change. - UI chrome →
apps/web/messages/<locale>.json(next-intl). - Page copy / structured data →
content/**/<locale>/...JSON files. - All user-facing strings go through i18n keys. Includes titles, descriptions, labels, and
createDefaultMetadataargs. UsegetTranslationsin server components,useTranslationsin client components. Hardcoded strings will be rejected. - A locale added to
routing.tsmakes its<locale>.jsonfiles required at build time — there is no silent fallback. - After
next build,apps/web/scripts/strip-default-locale-prefix.shstrips the/enprefix from the static export. Don't bypass it.
Code conventions
- Repo files are English only. Committed code, comments, docs, copy. Chat replies can be in any language; files cannot.
- Use British English for public paths and all user-facing copy. This includes route segments, slugs, content JSON values,
next-intlmessages, metadata, docs that quote public copy, and CMS seed fixtures. Prefer spellings such asdecentralised,centralised,programme,organise,organisation,neighbourhood, andlicencefor copy. Keep third-party API literals, official external URLs, schema.org types, package names, generated types, and internal field names unchanged when they require American spelling. - Icons are React SVG components exported from
@repo/ui(packages/ui/src/icons). If a designed icon is missing, stop and ask for a Figma export — don't substitute Unicode/text. - The λ brand mark is
<LogosMark />from@repo/ui. Size viasize, color via parenttext-*(the SVG usescurrentColor). Never<img src=".svg" />or<span>λ</span>. - Every clickable element gets
cursor-pointerin its Tailwind className: buttons,onClickhandlers, anchors, clickable cards. - Visuals match Figma 1:1. Pull the spec (font sizes, fills, gaps, padding) from Figma before implementing. See
docs/components.mdfor canonical node IDs anddocs/web-pages.mdfor per-page references. - Types on public APIs. Exported functions, shared utilities, component props. Use
interfacefor object shapes,typefor unions/intersections. Avoidany; useunknown+ narrowing for external input. - Keep reusable code out of generated or oversized files. If a type, constant list, validator, or UI helper is used in more than one place, move it into a focused module and import it. Do not let generated files or collection configs absorb long literal unions, large option arrays, or repeated validation logic.
- Split files by feature when they grow. Prefer small folders with focused files (types, constants, validators, components) over large catch-all modules. Create a feature folder once a file mixes multiple responsibilities or becomes hard to scan.
- Immutability. Spread/copy, never mutate.
Readonly<T>on inputs where it clarifies intent. - No
console.login committed code. - Follow existing file organization. Many small focused files over large ones. Routes live under
apps/web/app/[locale]/<route>/; section components underapps/web/components/sections/<section>/.
Content + CMS
Schemas: packages/content/src/schemas/ (Zod). Loaders: packages/content/src/loaders/ (typed, fail loudly on missing required locale files).
When changing a schema:
- Update the Zod schema in
packages/content/src/schemas/. - Update / add the corresponding loader.
- Update fixtures under
content/**. - If the CMS edits this collection, update the matching Payload collection in
apps/cms/src/collections/and the workflow service inapps/cms/src/services/content-workflow/. - Run
pnpm generate-types(CMS) andpnpm check-types.
Payload collections: Pages, Circles, Ideas, Rfps, ContentChangeRequests, Users. The first four mutate via the GitHub PR workflow (see save-as-pr.ts, save-idea-as-pr.ts, save-rfp-as-pr.ts).
Testing
- Vitest lives in
apps/web(pnpm testfrom root or app). Add tests beside the code in__tests__/folders. - Do not add UI implementation contract tests that assert Tailwind class strings, Figma measurements, layout spacing, motion details, hover treatment, or component source structure. UI changes are reviewed through browser verification, not brittle source-string tests.
- Playwright is the standard for E2E if/when added.
- For UI/frontend changes, start the dev server and verify in a browser before reporting done. Type-check passing ≠ feature working.
Git + PRs
- Never auto-commit or push without explicit instruction.
- Never add co-author /
Co-Authored-Bylines to commits in this repo. - Conventional commit prefixes:
feat,fix,refactor,docs,test,chore,perf,ci. - PR base branch is
develop.
Where to look first
docs/deployment.md— env vars, Vercel dev/staging vs self-hosted prod, Postgres setup, troubleshooting.docs/cms-github-content-plan.md— canonical schema + workflow design.docs/web-pages.md— per-page Figma references and requirements.docs/components.md— shared component specs (Nav, Footer, etc.) with Figma node IDs.docs/code-quality-followups.md— known gaps awaiting design/infra decisions.docs/seo.md— SEO/metadata expectations.
Don't
- Don't introduce new top-level packages or apps without checking with the user.
- Don't add backwards-compat shims,
_unusedrenames, or "removed in vX" comments. Delete cleanly. - Don't add error-handling for cases that can't occur, or fallbacks that hide misconfiguration.
- Don't write comments that restate the code. Comments explain why, only when non-obvious.
- Don't create new
.mdfiles unless explicitly asked. - Don't run destructive git operations (
reset --hard, force push, branch delete) without confirmation.