---
name: inkreach-official-website
description: Work with the InkReach Nuxt website homepage and API-backed product center.
---

# InkReach Website

## Homepage

- Route: `/`
- Page: `apps/website/app/pages/index.vue`
- Sections: `apps/website/app/components/`
- Reference: `docs/references/homepage.md`

Keep homepage sections componentized. The desktop Figma baseline is 1440px wide; preserve the documented section boundaries while allowing existing mobile styles to remain responsive.

Homepage CTAs navigate in the current page to `https://inkpod.vip/user/login`. Keep the step process and feature showcase rotating every two seconds; customer cases continuously scroll at the same per-item cadence with reduced-motion support. Keep `/主视觉.png` as a capped `800 x 400` image rather than a CSS background. Recommendation and solution navigation are intentionally hidden until their content is ready.

## Product Center

- Route: `/product-center`
- Page: `apps/website/app/pages/product-center.vue`
- Query state: `apps/website/app/composables/useProductCenter.ts`
- UI components: `apps/website/app/components/product/`
- Reference: `docs/references/product-center.md`

Default to all products and countries with no logistics or craft selection. Never hard-code backend IDs. Keep props down and typed events up. Verify changes with the website Vitest suite, Nuxt production build, and browser screenshots.

Countries, categories, tags, tag groups, and icons are backend-owned. Preserve relative backend asset paths in the database and resolve them through `runtimeConfig.public.backendUrl` in `useProductCenter.ts`. Do not add country-name flag fallbacks or infer tag groups from numeric sort positions. Versioned Figma icon assets live under `apps/api/public/product-center/`; run `pnpm --filter @inkreach/api configure:product-center-icons` to apply them to matching existing records.

The public goods API exposes `originGood.sdsGoodId` as the product `id`. Use that value for InkPOD detail links; never build an InkPOD URL from the local `goods.good_id` primary key.

A good may merge multiple origin goods (same-name variants across factories/warehouses): any associated origin's `sdsGoodId` resolves to the same detail via `/public/goods/:id`, and the detail's variants/media are the union of the primary and secondary origins. Price and detail content come from the primary origin.
