```markdown # Tools Feature Implementation Plan ## Requirements Summary ### Navigation Changes - Add "Tools" menu to header (mega-menu with grouped cards by category: Image Tools, Video Tools) - Add "Tools" section to footer ### Tools Listing Page - Route: `/[locale]/tools` - Grid of tool cards grouped by category - Each tool card shows: icon, name, description, preview image ### Individual Tool Landing Pages - Route: `/[locale]/tools/[tool-slug]` - Complete landing page with sections: Hero, Generator, Features, How to Use, Why Use Us, Compare, Use Cases, Who Should Use, Testimonials, Pricing Cards, FAQ, CTA ### Tools to Implement (10 total) | Category | Tools | |----------|-------| | Image Tools | image-to-prompt, remove-background, image-upscaler, photo-restoration, photo-face-swap, background-changer | | Video Tools | video-upscaler, video-face-swap, sora-watermark-removal, nano-banana-watermark-removal | --- ## Implementation Phases ### Phase 1: Foundation #### 1.1 Create Types (`/types/tools.ts`) ```typescript interface ToolCategory { id, slug, name, description, icon, color } interface ToolItem { id, slug, name, shortDescription, category, icon, color, previewImage, featured? } ``` #### 1.2 Create Config (`/config/tools-data.ts`) - Define `TOOL_CATEGORIES` (image-tools, video-tools) - Define `TOOLS` array with 10 tools - Helper functions: `getToolBySlug()`, `getToolsByCategory()`, `getFeaturedTools()`, `getAllToolSlugs()` #### 1.3 Create Base Translations (`/i18n/messages/en/Tools.json`) - Listing page translations (meta, hero, categories, actions) - Placeholder structure for individual tool sections #### 1.4 Register i18n Namespace (`/i18n/request.ts`) Add: `Tools: (await import(\`./messages/${locale}/Tools.json\`)).default,` #### 1.5 Update Breadcrumb (`/i18n/messages/en/Breadcrumb.json`) Add entries for "tools" and all 10 tool slugs --- ### Phase 2: Tools Listing Page #### 2.1 Create ToolCard Component (`/components/tools/ToolCard.tsx`) - Based on `CategoryCard.tsx` pattern from prompts - Props: `tool: ToolItem`, `locale: string`, `index?: number` - Features: gradient background, icon, hover effects, animation delay #### 2.2 Create Page Route (`/app/[locale]/(basic-layout)/tools/page.tsx`) - Server component with `generateMetadata()` and `generateStaticParams()` - Import tools from config, pass to client component #### 2.3 Create Client Component (`/app/[locale]/(basic-layout)/tools/ToolsClient.tsx`) - Hero section with badge, title, description - Image Tools section (grid of ToolCards) - Video Tools section (grid of ToolCards) - CTA section --- ### Phase 3: Navigation Updates #### 3.1 Update Header (`/i18n/messages/en/common.json`) Add to `Header.links`: ```json { "name": "Tools", "href": "/tools", "items": [ { "name": "Image to Prompt", "href": "/tools/image-to-prompt", "description": "Convert images to AI prompts" }, { "name": "Remove Background", "href": "/tools/remove-background", "description": "Remove backgrounds instantly" }, { "name": "Image Upscaler", "href": "/tools/image-upscaler", "description": "Upscale to 4K/8K quality" }, { "name": "Video Upscaler", "href": "/tools/video-upscaler", "description": "Upscale videos to 4K" }, { "name": "View All Tools", "href": "/tools", "description": "Browse all AI tools" } ] } ``` #### 3.2 Update Footer (`/i18n/messages/en/common.json`) Add new group to `Footer.Links.groups`: ```json { "title": "Tools", "links": [ { "href": "/tools", "name": "All Tools" }, { "href": "/tools/image-to-prompt", "name": "Image to Prompt" }, { "href": "/tools/remove-background", "name": "Remove Background" }, { "href": "/tools/image-upscaler", "name": "Image Upscaler" }, { "href": "/tools/video-upscaler", "name": "Video Upscaler" } ]} ``` #### 3.3 Copy to Other Locales - `/i18n/messages/zh/common.json` - `/i18n/messages/ja/common.json` --- ### Phase 4: Landing Page Section Components Create in `/components/tools/`: | Component | Based On | Purpose | |-----------|----------|---------| | `ToolHero.tsx` | HeroSection | Hero with tool icon, badge, title, CTA | | `ToolGenerator.tsx` | New | Placeholder generator section (upload area) | | `ToolFeatures.tsx` | Features | 6-item feature grid with icons | | `ToolHowToUse.tsx` | HowItWorks | 3-step process with numbered cards | | `ToolWhyUs.tsx` | WhyChoose | Tabbed reasons with images | | `ToolComparison.tsx` | ComparisonTable | Our tool vs competitors table | | `ToolUseCases.tsx` | StickyFeatures | Use case cards with images | | `ToolWhoShouldUse.tsx` | New | Target audience grid (4 personas) | | `ToolTestimonials.tsx` | Testimonials | Scrolling testimonial cards | | `ToolPricing.tsx` | PricingByGroup | Reuse existing pricing component | | `ToolFAQ.tsx` | FAQ | Accordion with Plus/X animation | | `ToolCTA.tsx` | CTA | Final call-to-action section | Create `index.ts` barrel export for all components. --- ### Phase 5: Individual Tool Landing Pages #### 5.1 Create Dynamic Route (`/app/[locale]/(basic-layout)/tools/[tool-slug]/page.tsx`) - Server component with `generateMetadata()` and `generateStaticParams()` - Uses `getToolBySlug()` to fetch tool config - Returns 404 if tool not found #### 5.2 Create Client Component (`/app/[locale]/(basic-layout)/tools/[tool-slug]/ToolLandingClient.tsx`) Compose all sections: ```tsx ``` #### 5.3 Add Tool Translations (`/i18n/messages/en/Tools.json`) Add full translation structure for each tool: - `image-to-prompt`: { meta, hero, generator, features, howToUse, whyUs, comparison, useCases, whoShouldUse, testimonials, faq, cta } - (Repeat for all 10 tools) --- ### Phase 6: i18n Completion - Translate to Chinese (`/i18n/messages/zh/Tools.json`) - Translate to Japanese (`/i18n/messages/ja/Tools.json`) - Update Breadcrumb for all locales --- ### Phase 7: Documentation Updates Update L2 docs: - `/components/tools/CLAUDE.md` (new) - `/config/CLAUDE.md` - `/types/CLAUDE.md` - `/i18n/CLAUDE.md` - `/app/CLAUDE.md` --- ## Critical Files | File | Purpose | |------|---------| | `/types/tools.ts` | Type definitions (create first) | | `/config/tools-data.ts` | Tool configuration (depends on types) | | `/i18n/request.ts` | Register namespace (must add import) | | `/i18n/messages/en/Tools.json` | Translation file | | `/components/tools/ToolCard.tsx` | Reusable card component | | `/app/[locale]/(basic-layout)/tools/page.tsx` | Listing page | | `/app/[locale]/(basic-layout)/tools/[tool-slug]/page.tsx` | Landing page route | --- ## Styling Rules - **NO hardcoded colors** - use theme variables only - Use: `bg-background`, `bg-card`, `bg-muted`, `text-foreground`, `text-muted-foreground` - Gradients: Tailwind gradient classes (e.g., `from-blue-500 to-cyan-500`) - Follow existing component patterns from `/components/prompts/` --- ## Verification Steps 1. **After Phase 1**: Run `pnpm build` - no type errors 2. **After Phase 2**: Navigate to `/tools` - listing page renders with tool cards 3. **After Phase 3**: Check header dropdown - Tools menu shows with grouped items 4. **After Phase 5**: Navigate to `/tools/image-to-prompt` - full landing page renders 5. **Final**: Test dark/light mode toggle on all pages - no broken colors 6. **i18n**: Switch locale to `/zh/tools` and `/ja/tools` - translations work --- ## File Structure Preview ``` /types/ tools.ts # Type definitions /config/ tools-data.ts # Tool categories and items configuration /i18n/messages/ en/Tools.json # English translations zh/Tools.json # Chinese translations ja/Tools.json # Japanese translations /app/[locale]/(basic-layout)/tools/ page.tsx # Tools listing page (Server) ToolsClient.tsx # Client component for listing /app/[locale]/(basic-layout)/tools/[tool-slug]/ page.tsx # Individual tool landing page (Server) ToolLandingClient.tsx # Client component for landing page /components/tools/ index.ts # Export barrel ToolCard.tsx # Card component for tools grid ToolHero.tsx # Hero section ToolGenerator.tsx # Generator/demo section ToolFeatures.tsx # Features grid section ToolHowToUse.tsx # How to use steps section ToolWhyUs.tsx # Why choose us section ToolComparison.tsx # Comparison table section ToolUseCases.tsx # Use cases section ToolWhoShouldUse.tsx # Target audience section ToolTestimonials.tsx # Testimonials section ToolPricing.tsx # Pricing cards section ToolFAQ.tsx # FAQ accordion section ToolCTA.tsx # Call-to-action section CLAUDE.md # L2 documentation ``` ```

Ready to Create Your Masterpiece?

Ready to Create Your Masterpiece?