Cut-Paper Collective Site

Provide the name, one-line description and touchstone idea, plus three to five principles with a paragraph and practical example each. Gather projects/classes/products with enough detail for their own pages, team roles/bios/current work, two to four posts/news items, offers/prices and address/email/phone/hours. Draft ordinary missing copy in a warm, concrete voice and list it for confirmation. Never invent clients, awards, certifications, quotations or performance results.

Use the standalone HTML path when no project exists. Inspect an existing/requested project before porting, preserve unrelated files and follow its conventions; if a framework is explicitly wanted but unnamed, the package recommends Next.js App Router with TypeScript. Create components, typed collections and real routes rather than injecting the original HTML or placing it in an iframe. Resolve compatible current dependencies when implementing, not from an old template version.

Plan meaningful page coverage: Home, at least four other top-level pages, a validated enquiry/contact page, Privacy, Accessibility, Not found and a collection with linked detail pages/pagers. The shipped twenty routes are one example, not a mandatory count. Keep the homepage’s hero/touchstone/principles/quote/collage/studio/lead-person/collection/posts sequence; drop unverified partner notes or figures instead of fabricating proof.

Adapt the nouns and information together. A school can use Classes, Tutors, Events and Membership, with dates/level/price/tutor on detail pages and technique filters. An agency can use Projects and Notes. A shop needs product-specific images/prices and an explicitly implemented basket with add/remove/quantity/totals and empty state in the same paper style; the studio example itself does not include a production storefront or checkout.

Preserve the first-screen composition: 74px ink header, small eyebrow, two short roman Newsreader lines capped at 76px desktop, a short lead and one small lilac pill, then painted hills cut by a cream tear/fiber edge. Keep the 1240px content grid, 32px column gaps and 84–148px responsive section spacing. Use flat accents and 2–3px ink rules, not gradients/glass or rounded content cards. Keep screen-blended hills free of a new stacking context so their black ground does not become a visible box.

Make inner pages earn their links. Services need concrete formats/duration/group size and related cases; approach needs practical principles, timed steps and handover contents. Cases need a client question, what happened, distinct process image, specific outputs, approved results/quote if available and named team links. People pages explain actual work and expertise. Posts need subject-specific sections and related cases, not an expanded teaser repeated across every article.

Keep collection counts, routes and cross-links synchronized. Show two to four selected items on Home, linking to the index for more; the two-column index accepts additional entries. Update filter categories, search metadata, years/titles, item nouns and empty-state hints. Adding/removing a case, member or article also changes Home/index cards, detail page, footer, pagers and team/article references. The guide allows three to five principles and adjusted figure/team/format grids without preserving a misleading number in a heading.

Publish two rate columns only when standard/community prices are real. Otherwise remove the rate toggle and its section hook and show one rate. When present, check that keyboard and pointer changes update every format price and contact CTAs preselect the right offer. The toggle compares local display values; it does not calculate availability, charge money or establish eligibility for a community rate.

Plan art by role before generating: hero hills, touchstone hands, one portrait per person, a lead and distinct detail per collection item, each post cover, process scenes, contact place and team group. Use black-and-white photographic cut-outs on flat colored paper, white ground for portraits/hands, black for hills and cream for scenes. Match subject, aspect and crop at phone width; alternate crops of the same lead are not a substitute for a distinct process image.

Reuse shipped hills, hands, glossary-board and scissors art as neutral material. The three portraits and group image are generated stand-ins; disclose them and request real photos for actual team members, treated as matching cut-outs. Replace the four sample project lead/detail pairs, depot cover, process scenes and harborside contact building for another business. With limited image budget, prioritize collection leads, then the contact place, then details. Agent image generation may charge; do not promise a complete new image set without the needed tool or assets.

Rewrite every marked content slot and sample identity, including metadata, page titles, logo/menu labels, site URL used for sharing, collection noun, CTA/email copy target, footer stamp ring and social labels, legal text, contact box, filter/search hooks and sample names in comments. Preserve route and article hooks for shared CTA visibility and reading progress. Real clients, dates, figures, prices, names and locations need confirmation rather than being disguised by a new brand.

For React ports the package specifies actual ReUI controls for buttons, fields/selects, radio/toggle groups, accordions, navigation sheet and feedback, styled through mapped tokens and original classes; the torn artwork stays bespoke CSS/SVG. Verify support for non-React stacks rather than promising direct component compatibility or switching the project’s framework. Preserve keyboard behavior, focus trapping/restoration and visible focus while matching the paper design.

Build the offline result with Node.js 18+ and initial internet access for Newsreader roman/italic and Figtree font downloads. Embed local WebP images, targeting under 5 MB with an 8 MB cap. Repeated image copies rely on a small shared-image script, so only their first copy remains visible without JavaScript. Inspect exit status for missing assets before calling the file complete. The static validator checks structure, names and markers; local-files mode does not verify file existence, and framework ports need their own build/type/lint checks.

Walk every route at 1440, 1024, 768 and 390px, checking overflow down to 360px and a wider 1920px view for framework work. Test menu focus/Escape, back/forward and unknown paths, principles/FAQ, category/search/sort/reset, rates, format preselection and form invalid/loading/success/reset states. The default forms delay then show local notes; a newsletter toast may say “Subscribed” without any mailing-list request. Verify actual clipboard contents because fallback feedback can appear on failure. Check light paper seams, hills, crop focus, tilts removed below 600px and reduced-motion behavior. Report only checks actually run and remaining content/image/service gaps.