This repository contains a multilingual Next.js tool gallery. Follow the existing implementation patterns in src/app/[lang]/tools, keep edits scoped, and prefer local browser-side processing for user files.
When creating or updating tool cover images for project.js, keep the visual style consistent with the existing PDF and utility tool covers:
- Use a 1600 x 900 canvas with a light neutral background, one soft outer frame, and one white inner surface.
- Keep the layout as a product cover, not a poster. The composition should read clearly at small card sizes.
- Reserve the top-left area for:
- a compact blue badge strip
- one small accent dot
- the tool title
- one short subtitle line
- Build the main visual from 2-3 large panels or objects that explain the tool action at a glance. Prefer document, image, spreadsheet, or UI-card metaphors over decorative illustration.
- Use the same restrained palette family as existing covers:
- base neutrals:
#F8FAFC,#E2E8F0,#FFFFFF - primary blue accents:
#2563EB,#DBEAFE,#93C5FD - optional success green or warning red only when the tool meaning needs it
- base neutrals:
- Avoid dense paragraphs, marketing copy, and tiny labels. Any visible text inside the artwork should be very short and survive thumbnail scaling.
- Prefer rounded rectangles, simple icon-like shapes, and strong visual comparison states such as before/after, input/output, or source/result.
- The artwork should feel calm, utilitarian, and consistent across English and Chinese versions. Change only the visible language text, not the layout system.
- Save new source assets in
public/and wire CDN URLs fromsrc/app/config/project.js.
For PDF-family tools specifically, use this default structure unless the tool needs a better metaphor:
- Left panel: source document or problem state.
- Center panel or symbol: transformation action.
- Right panel: fixed/exported result.
- Keep document shapes upright, large, and centered within each panel.
- Make the transformation obvious from shape, rotation, layering, watermark, signature, numbering, or protection cues instead of long explanations.