Coalition of Young Women for Climate Justice — Website

A premium, editorial, accessibility-first website for the Coalition of Young Women for Climate Justice, built with Next.js (App Router), React, and Tailwind CSS v4. All 19 pages from the content specification are implemented with the approved copy and the coalition's brand system.

Run locally

npm install      # if node_modules is missing or you're on a new machine
npm run dev      # http://localhost:3000
npm run build    # production build
npm run start    # serve the production build
npm run lint     # eslint

Note: this repo was scaffolded on Windows. If you build on Linux/macOS, run npm install once so the correct @next/swc-* native binary and fonts are fetched for your platform.

What's here

• app/ — one route per page (Home is app/page.tsx), plus not-found.tsx (404), sitemap.ts, and robots.ts.
• components/ — Header, Footer, forms, Reveal (reduced-motion-safe scroll animation), ImageSlot, Breadcrumbs, and shared UI primitives.
• lib/site.ts — navigation, footer, regions, and the shared-agenda data.
• app/globals.css — the brand design system (Tailwind v4 @theme tokens: evergreen, plum, gold, ivory, sage, charcoal, stone), typography, focus states, and motion.

Pages

Home, About, Our Shared Agenda, How We Work, Join the Coalition, Campaigns, Road to COP31, Events, Resources, News and Perspectives, Partners and Allies, Governance, Contact, Support the Coalition, Accessibility, Privacy, Terms of Use, Search, and 404.

Brand system

• Colours: Deep Evergreen #1F4D3D, Midnight Plum #4A2E5E, Burnished Gold #C59A3D (restrained), Warm Ivory #FAF8F3, Soft Sage #F2F5F1, Charcoal #2A2A2A, Soft Stone #E1DED7.
• Type: Playfair Display for headlines, Inter for body — loaded via next/font.
• Accessibility: skip link, visible gold focus rings, keyboard-navigable menus and language selector, semantic breadcrumbs, prefers-reduced-motion support, labelled forms with confirmation states, and descriptive alt text on every image slot. Target: WCAG 2.2 AA.
• GEO: per-page titles/descriptions, Organization + Breadcrumb + Campaign JSON-LD, sitemap, robots, question-based headings, and plain-language summaries near the top of each page.

Two things to swap in before launch

1. Logo — public/logo.svg is an on-brand emblem interpretation (crescent + rising sun + botanical) used in the header and footer. Replace it with the official coalition artwork (keep the filename, or update the <Image> src in components/Header.tsx and components/Footer.tsx).
2. Photography — every photo region is a labelled ImageSlot carrying the intended alt text and a caption (marked data-cms-image). Per the content rules, no stock or fabricated imagery is used. Drop in authentic documentary photography through your CMS / by replacing the slots.

No invented statistics, member counts, partner logos, testimonials, or quotes are published — placeholders are clearly marked until verified content exists.

Forms

Membership, contact, partnership, newsletter, and accessibility-feedback forms are implemented with accessible markup and client-side confirmation states. They are not yet wired to a backend — connect them to your CMS, email service, or form endpoint in components/forms.tsx.

Editing photos (Supabase)

Signed-in coalition editors can change the photo in any image section from the live site, with no developer involved. A hidden login lives at /studio; once signed in, an Edit button appears on each image section to upload a new photo or reuse an existing one. Photos and a small manifest/images.json mapping live in the public ccj-project Supabase Storage bucket (no database table).

Full setup, environment variables, editor account creation, and the recommended storage security policy are in SUPABASE-SETUP.md. Run npm install first so @supabase/supabase-js is available.

Legal

The Privacy and Terms pages provide the required section structure and are clearly marked as drafts pending legal review. Do not publish them without review by qualified counsel.