Files
inkreach-official-website/plans/feature/homepage-navigation-carousel-feature.md
yeuimu 6c61a4e871 feat(deploy): production deployment setup and fixes
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix
2026-08-26 14:23:09 +08:00

1.8 KiB

Homepage Navigation and Carousel Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Make homepage CTAs navigate in the current page, automate homepage carousels, preserve the hero visual as a capped image, add product-center gutters, and temporarily hide two navigation menus.

Architecture: Keep behavior local to the existing Vue components. Use native current-page navigation for CTAs, lifecycle-managed timers for the step carousel, a duplicated CSS marquee for customer cases, and responsive CSS custom properties for product-center gutters.

Tech Stack: Nuxt 4, Vue 3 Composition API, Tailwind CSS, Vitest, Vue Test Utils


Task 1: Lock navigation behavior

  • Add failing tests for current-page CTA and product-card navigation.
  • Replace new-tab links and inert CTA buttons with immediate current-page navigation.
  • Hide recommendation and solution navigation entries while retaining implementation code.

Task 2: Automate homepage rotating content

  • Add failing timer tests for the four-step carousel.
  • Add a lifecycle-managed automatic step interval.
  • Animate the duplicated customer-case track continuously and add reduced-motion behavior.

Task 3: Improve desktop layout

  • Keep /主视觉.png as an <img> with intrinsic aspect ratio and a capped rendered size.
  • Add responsive left and right gutters to the product center.

Task 4: Verify and document

  • Update homepage, product-center, structure, and Agent reference docs.
  • Run website tests and production build.
  • Skip browser automation per the user's request; cover navigation, timing, hero image, country alignment, and bottom action behavior with Vitest.