Recommendations Hub

The /[locale]/recommendations route showcases curated tools/books/courses with affiliate disclosures. This page explains the data flow, components, and analytics so the feature stays consistent.

Page Overview

Layer	File	Responsibility
Route	`src/app/[locale]/(pages)/recommendations/page.tsx`	Sets locale, SEO metadata, tracks Mixpanel `page_view`, loads categories/products via `fetchRecommendationsData()` and `fetchRecommendationsByCategory()`.
Disclaimer	`components/recommendations/affiliate-disclaimer.tsx`	Renders disclosure + CTA.
Category Section	`components/recommendations/category-section.tsx`	Displays icon, description, and a grid of `ProductCard`s.
Product Card	`components/recommendations/product-card.tsx`	Shows title, description, features, price, CTA buttons (demo/buy).
Data Fetchers	`src/app/lib/data-fetchers.ts`	Reads `public/data/recommendations.json` (generated by `scripts/convert-data-to-json.ts`).

Data Model

src/app/types/recommendation.ts defines Recommendation objects:

id, category, title, description
price, priceDisplay
features[]
links.demoUrl, links.buyUrl
affiliate metadata (boolean + disclaimer)

Categories live alongside data (categories: CategoryData[]) specifying icon names (mapped in category-section.tsx) and translation keys (Recommendations.categories.{id}.title).

Data Generation

Run:


npm run data:convert

This invokes scripts/convert-data-to-json.ts, writing public/data/recommendations.json (categories + recommendation entries). During SSR, data-fetchers.ts reads the JSON via fs; in the browser it fetches /data/recommendations.json.

Styling & Layout

Sections use ScrollReveal, glass-panel, and the liquid-glass design tokens documented in /components/liquid-glass.
Icons come from lucide-react; categorySection.icon must match one of the mapped components (BookOpen, Laptop, etc.).
CTA buttons use branded classes (bg-accent-orange, bg-content-primary) defined in Tailwind config.

Translations

All copy is translated via src/i18n/messages/{locale}.json under the Recommendations.* namespace:

Recommendations.hero.title, .subtitle, .tagline
Recommendations.categories.{id}.title / .description
Recommendations.cta.* if you add extra callouts.

Whenever you add a category:

Update recommendations.json data (category + products).
Add translation entries for the new category.
Provide an icon (iconMap in category-section.tsx).

Analytics & SEO

Mixpanel trackServerEvent('page_view', { page: 'recommendations' }) is emitted when the page loads.
Breadcrumb JSON-LD is injected for better indexing.
CTA clicks should emit recommendations_cta_click via useClickTracking (if not already). Use consistent GA4 parameters for outbound affiliate clicks.

Extending the Feature

Add a Category – Update data JSON, translation keys, icon map, and ensure CategorySection renders products (even if only one at launch).
Localize Prices – Provide priceDisplay (string) per entry (e.g., “R$ 149”); keep raw price for sorting.
Affiliate Tracking – Add utm_source=ignitionstack to buyUrl. For deeper tracking, route clicks through /api/recommendations/track before redirecting.
Search/Filters – If needed, create a client component similar to TemplatesGrid filters (search by title, filter by category).

Testing

Unit: src/app/test/unit/components/recommendations/* (if missing, add tests for CategorySection and ProductCard).
Integration: add tests around fetchRecommendationsData/fetchRecommendationsByCategory to ensure JSON structure hasn’t changed.
E2E: include a Playwright scenario verifying affiliate links and translation toggles (/pt/indicacoes).

Storefront Module
Pricing Strategy
Tailwind & Liquid Glass, [/components/liquid-glass]
Analytics Events

Keep this page updated when new recommendation categories launch or when the underlying data pipeline changes (e.g., moving from static JSON to Supabase tables).