diff --git a/docs/superpowers/plans/2026-10-30-aplicativos-portfolio.md b/docs/superpowers/plans/2026-10-30-aplicativos-portfolio.md new file mode 100644 index 0000000..e7bf21c --- /dev/null +++ b/docs/superpowers/plans/2026-10-30-aplicativos-portfolio.md @@ -0,0 +1,77 @@ +# Aplicativos Help DEV Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Add a Portuguese portfolio page with six separate Google Play app cards and a CuidaZ “Em Breve” card. + +**Architecture:** Keep app content in a static typed data module, render it with a focused portfolio card component, and use local image assets for every card. Add the `/apps` route to the existing navigation, footer, metadata, and static sitemap. + +**Tech Stack:** Next.js 15 App Router, React 19, TypeScript, Tailwind CSS, static export. + +**Spec:** `docs/superpowers/specs/2026-10-30-aplicativos-portfolio-design.md` + +## Global Constraints + +- Keep the page in Portuguese and maintain the site's current responsive Tailwind styling. +- Show seven cards: six published apps and one CuidaZ preview. +- Keep each Cronômetro listing separate, with a distinct Google Play link. +- Every card must display a description. +- Do not show a Google Play CTA on CuidaZ; display an “Em Breve” ribbon and its existing horizontal logo. +- Preserve the existing static export configuration and the untracked CuidaZ privacy-policy source file. +- Do not add a test framework or test files; the repository has no tests configured. + +## Review Focus + +- App-to-store mapping: check every published card points to its matching package ID from the spec. +- Card copy: check that all seven descriptions are rendered in full and remain readable. +- Coming-soon behavior: check that CuidaZ shows “Em Breve” and does not become a dead or misleading store link. +- Local imagery: check each image file exists, displays correctly, and uses the CuidaZ horizontal logo on its card. +- Responsive access: check the new navigation link appears beside Projetos in desktop and mobile menus and the grid fits narrow screens. + +--- + +### Task 1: Prepare local app imagery + +**Files:** +- Create: `public/images/apps/` +- Create: one Play Store promotional image and app icon per published listing, plus `cuidaz-logo.png`. + +**Interfaces:** +- Produces the local image paths consumed by `src/data/apps.ts` in Task 2. + +- [x] Download the promotional image from the developer profile and the app icon for each package listed in the spec. Save them under stable, readable filenames in `public/images/apps/`, keeping the correct file extensions. +- [x] Copy `/Volumes/gbz-ext/repositories/helpdev/cuidaz/assets/marca/logos/cuidaz-horizontal-transparente.png` to `public/images/apps/cuidaz-logo.png`. +- [x] Check all 13 files exist and are valid images; visually inspect the CuidaZ logo and one promotional image from each listing. + +### Task 2: Build the app catalog and portfolio cards + +**Files:** +- Create: `src/data/apps.ts` +- Create: `src/app/components/AppCard/index.tsx` +- Create: `src/app/apps/page.tsx` + +**Interfaces:** +- `src/data/apps.ts` exports a `PortfolioApp` discriminated union and a `portfolioApps: PortfolioApp[]` in display order. +- A published app has its name, full short description, promotional image path, icon path, and exact Play Store URL. CuidaZ has its name, description, local logo path, and `kind: 'coming-soon'` with no store URL. +- `AppCard` accepts one `PortfolioApp` and renders the appropriate published or coming-soon treatment. + +- [x] Add all six Play Store listings from the spec to `portfolioApps`, preserving their exact names and descriptions, with one unique store URL per listing. +- [x] Add CuidaZ with the description “Organize pacientes, agenda, atendimentos, evoluções clínicas e recebimentos.” and no store link. +- [x] Render published cards with a promotional image, app icon, full description, and “Ver na Play Store” external link; render CuidaZ with its horizontal logo and an “Em Breve” ribbon. +- [x] Build `/apps` with one H1, short introduction, and a responsive grid that shows all seven cards without truncating descriptions. +- [x] Define page metadata, canonical `/apps`, and Open Graph information in `src/app/apps/page.tsx` so it cannot affect nested privacy-policy metadata. + +### Task 3: Add navigation and validate the static page + +**Files:** +- Modify: `src/app/components/Navbar/index.tsx` +- Modify: `src/app/components/Footer/index.tsx` +- Modify: `src/app/sitemap.ts` + +**Interfaces:** +- The existing Navbar uses `usePathname()` and `isActive()` for route state; reuse that behavior for `/apps`. + +- [x] Add an “Aplicativos” link immediately after “Projetos” in both desktop and mobile navigation, with active styling on `/apps` and mobile menu close behavior. +- [x] Add an “Aplicativos” link to the footer and `/apps` to the sitemap route list. +- [x] Run `git diff --check` and `npm run build`; confirm a generated `/apps` static page is present under `out/` and all local image paths are emitted. +- [x] Review the final diff to confirm only the approved portfolio scope changed and the pre-existing untracked CuidaZ privacy-policy file is untouched. diff --git a/docs/superpowers/specs/2026-10-30-aplicativos-portfolio-design.md b/docs/superpowers/specs/2026-10-30-aplicativos-portfolio-design.md new file mode 100644 index 0000000..afbbed8 --- /dev/null +++ b/docs/superpowers/specs/2026-10-30-aplicativos-portfolio-design.md @@ -0,0 +1,61 @@ +# Aplicativos Help DEV — Design + +## Intent + +Create a portfolio page that makes Help DEV's Google Play apps easy to discover and open. Add an “Aplicativos” item beside “Projetos” in the site navigation. + +## Goals + +- Publish a responsive `/apps` page with seven portfolio cards: one for each of the six current Help DEV listings on Google Play, plus CuidaZ marked “Em Breve”. +- Put a description on every card. Published apps also get their store icon, the promotional image shown on the Play Store developer profile, and a clear link to that exact listing. +- Use the CuidaZ brand logo from its app repository for the upcoming card. +- Match the existing Next.js, Tailwind, and static-export setup. +- Include the page in the sitemap and give it page-specific metadata. + +## Non-goals and anti-goals + +- Do not group the three LapsCounter listings; running, cycling, and swimming each get their own card and store link. +- Do not imply that CuidaZ is already published or provide a Play Store link for it. +- Do not add app detail pages, install flows, ratings, reviews, or data that is not needed for this portfolio. +- Do not change the existing privacy-policy pages, including the untracked CuidaZ policy already in the worktree. + +## Confirmed listings + +The developer profile currently returns these six listings. Titles and short descriptions are from their Play Store pages. + +| App | Play Store package | Short description | +| --- | --- | --- | +| Minha Obra | `br.com.helpdev.minhareforma` | Organize orçamento, gastos e pagamentos da sua obra ou reforma. | +| AtendFlow | `com.helpdev.atendflow` | Organize clientes, agendamentos e cobranças em um só lugar. | +| Velocímetro Alerta | `br.com.helpdev.velocimetroalerta.v2` | Alertas de velocidade por voz por tempo ou distância, sem olhar para a tela. | +| Cronômetro de corrida | `br.com.helpdev.lapscounter.running` | Marque trechos e acompanhe ritmo, distância e tempo total. | +| Cronômetro de ciclismo | `br.com.helpdev.lapscounter.cycling` | Marque trechos e acompanhe distância, tempo e velocidade média. | +| Cronômetro de Natação | `br.com.helpdev.lapscounter.swimming` | Marque voltas e acompanhe distância e ritmo na natação. | +| CuidaZ (Em Breve) | Ainda sem listagem pública | Organize pacientes, agenda, atendimentos, evoluções clínicas e recebimentos. | + +## Approaches + +1. **Six independent published-app cards plus a CuidaZ preview (chosen).** Each Play Store listing has its own card, promotional image, app icon, description, and Google Play CTA. CuidaZ has a separate card with its repository logo, description, and an “Em Breve” ribbon, without a store CTA. This follows the user's preference to keep all three Cronômetro apps separate and gives every listing equal visibility. +2. **Group the three Cronômetro listings under LapsCounter.** This would reduce repetition, but it does not match the user's preference to present each app separately. +3. **Compact list of store links.** This is the smallest change, but it would not give the page the requested portfolio presentation. + +## Design and implementation calls + +- The new route is `/apps`, matching the existing English route segments and the existing `src/app/apps/` privacy-policy routes. +- Add the navigation link in desktop and mobile menus, next to “Projetos”. Mark it active on `/apps`. +- Present a short page heading and introduction, followed by a responsive grid of seven cards. Each published-app card uses the promotional image from its Play Store developer-profile listing, the app icon alongside the name, the store description, and a “Ver na Play Store” link that opens the exact listing in a new tab. +- Give CuidaZ a separate “Em Breve” ribbon and use `cuidaz/assets/marca/logos/cuidaz-horizontal-transparente.png` from the CuidaZ repository. Its description is “Organize pacientes, agenda, atendimentos, evoluções clínicas e recebimentos.” Do not make the card clickable or show an unavailable store link. +- Copy the Play Store promotional images and icons, and the CuidaZ logo, into `public/images/apps/` so the static site does not depend on external image URLs at runtime. +- Add `/apps` to `src/app/sitemap.ts` and define metadata in `src/app/apps/page.tsx` so portfolio metadata does not propagate to nested privacy-policy routes. +- The existing footer lists primary site pages; add “Aplicativos” there to keep site navigation consistent. + +## Constraints and success criteria + +- Preserve the existing static export configuration and the user's current untracked CuidaZ privacy-policy file. +- Keep the page in Portuguese and maintain the site's current responsive Tailwind styling. +- Success means the page shows six cards with correct local imagery, descriptions, and exact Google Play targets, plus the CuidaZ logo, description, and “Em Breve” ribbon; the desktop and mobile navigation both reach `/apps`; the page is present in the sitemap and static production build. + +## Remaining implementation choices + +- The builder may choose the exact card spacing, color accents, and image crop to fit the existing site components. +- Prefer semantic links, descriptive image alt text, and a responsive layout with no horizontal overflow. diff --git a/public/images/apps/atendflow-icon.png b/public/images/apps/atendflow-icon.png new file mode 100644 index 0000000..3d0eb20 Binary files /dev/null and b/public/images/apps/atendflow-icon.png differ diff --git a/public/images/apps/atendflow-promotional.png b/public/images/apps/atendflow-promotional.png new file mode 100644 index 0000000..8a09266 Binary files /dev/null and b/public/images/apps/atendflow-promotional.png differ diff --git a/public/images/apps/cronometro-ciclismo-icon.png b/public/images/apps/cronometro-ciclismo-icon.png new file mode 100644 index 0000000..ea72e1c Binary files /dev/null and b/public/images/apps/cronometro-ciclismo-icon.png differ diff --git a/public/images/apps/cronometro-ciclismo-promotional.png b/public/images/apps/cronometro-ciclismo-promotional.png new file mode 100644 index 0000000..3053004 Binary files /dev/null and b/public/images/apps/cronometro-ciclismo-promotional.png differ diff --git a/public/images/apps/cronometro-corrida-icon.png b/public/images/apps/cronometro-corrida-icon.png new file mode 100644 index 0000000..d48e5e7 Binary files /dev/null and b/public/images/apps/cronometro-corrida-icon.png differ diff --git a/public/images/apps/cronometro-corrida-promotional.png b/public/images/apps/cronometro-corrida-promotional.png new file mode 100644 index 0000000..1b936a1 Binary files /dev/null and b/public/images/apps/cronometro-corrida-promotional.png differ diff --git a/public/images/apps/cronometro-natacao-icon.png b/public/images/apps/cronometro-natacao-icon.png new file mode 100644 index 0000000..70a05d0 Binary files /dev/null and b/public/images/apps/cronometro-natacao-icon.png differ diff --git a/public/images/apps/cronometro-natacao-promotional.png b/public/images/apps/cronometro-natacao-promotional.png new file mode 100644 index 0000000..04a94bc Binary files /dev/null and b/public/images/apps/cronometro-natacao-promotional.png differ diff --git a/public/images/apps/cuidaz-logo.png b/public/images/apps/cuidaz-logo.png new file mode 100644 index 0000000..56695c5 Binary files /dev/null and b/public/images/apps/cuidaz-logo.png differ diff --git a/public/images/apps/minha-obra-icon.png b/public/images/apps/minha-obra-icon.png new file mode 100644 index 0000000..f2ab879 Binary files /dev/null and b/public/images/apps/minha-obra-icon.png differ diff --git a/public/images/apps/minha-obra-promotional.png b/public/images/apps/minha-obra-promotional.png new file mode 100644 index 0000000..9944489 Binary files /dev/null and b/public/images/apps/minha-obra-promotional.png differ diff --git a/public/images/apps/velocimetro-alerta-icon.png b/public/images/apps/velocimetro-alerta-icon.png new file mode 100644 index 0000000..9fc5117 Binary files /dev/null and b/public/images/apps/velocimetro-alerta-icon.png differ diff --git a/public/images/apps/velocimetro-alerta-promotional.png b/public/images/apps/velocimetro-alerta-promotional.png new file mode 100644 index 0000000..7d1fafe Binary files /dev/null and b/public/images/apps/velocimetro-alerta-promotional.png differ diff --git a/src/app/apps/page.tsx b/src/app/apps/page.tsx new file mode 100644 index 0000000..272001f --- /dev/null +++ b/src/app/apps/page.tsx @@ -0,0 +1,57 @@ +import type { Metadata } from 'next'; +import { Navbar } from '../components/Navbar'; +import { AppCard } from '../components/AppCard'; +import { portfolioApps } from '@/data/apps'; + +export const metadata: Metadata = { + title: 'Aplicativos', + description: 'Conheça os aplicativos da Help DEV para organização, mobilidade e esporte, além do próximo lançamento CuidaZ.', + keywords: ['aplicativos', 'Google Play', 'Help DEV', 'Minha Obra', 'AtendFlow', 'Velocímetro Alerta', 'CuidaZ'], + authors: [{ name: 'Guilherme Biff Zarelli' }], + alternates: { canonical: '/apps' }, + openGraph: { + url: '/apps', + title: 'Aplicativos | HelpDev', + description: 'Aplicativos da Help DEV para organização, mobilidade e esporte, além do próximo lançamento CuidaZ.', + type: 'website', + images: [{ + url: 'https://helpdev.com.br/images/logo.png', + width: 1200, + height: 630, + alt: 'Aplicativos HelpDev', + }], + }, + twitter: { + card: 'summary_large_image', + title: 'Aplicativos | HelpDev', + description: 'Aplicativos da Help DEV para organização, mobilidade e esporte, além do próximo lançamento CuidaZ.', + images: ['https://helpdev.com.br/images/logo.png'], + creator: '@gbzarelli', + site: '@_helpdev', + }, +}; + +export default function AppsPage() { + return ( +
+ +
+
+

Aplicativos

+

+ Aplicativos da Help DEV para organização, mobilidade e esporte — e o próximo lançamento CuidaZ. +

+
+ +
+ {portfolioApps.map((app) => ( + + ))} +
+
+
+ ); +} diff --git a/src/app/components/AppCard/index.tsx b/src/app/components/AppCard/index.tsx new file mode 100644 index 0000000..f56265b --- /dev/null +++ b/src/app/components/AppCard/index.tsx @@ -0,0 +1,70 @@ +import Image from 'next/image'; +import type { PortfolioApp } from '@/data/apps'; + +interface AppCardProps { + app: PortfolioApp; +} + +export function AppCard({ app }: AppCardProps) { + return ( +
+ {app.kind === 'published' ? ( +
+ {`Imagem +
+ ) : ( +
+ + {app.statusLabel} + + Logo do CuidaZ +
+ )} + +
+
+ {app.kind === 'published' && ( + {`Ícone + )} +

+ {app.name} +

+
+ +

+ {app.description} +

+ + {app.kind === 'published' && ( + + Ver na Play Store + + )} +
+
+ ); +} diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx index 01a4897..51dae2b 100644 --- a/src/app/components/Footer/index.tsx +++ b/src/app/components/Footer/index.tsx @@ -24,6 +24,7 @@ export const Footer: React.FC = () => {
  • Sobre
  • Artigos
  • Projetos
    • +
  • Aplicativos
  • Blog
  • Contato
  • Privacidade
    • diff --git a/src/app/components/Navbar/index.tsx b/src/app/components/Navbar/index.tsx index e37cb70..ceab568 100644 --- a/src/app/components/Navbar/index.tsx +++ b/src/app/components/Navbar/index.tsx @@ -37,7 +37,7 @@ export const Navbar = React.memo(() => { /> {/* Desktop Menu */} -
    +
    { > Projetos + + Aplicativos + {
    {/* Mobile menu button */} -
    +
    {/* Mobile menu */} -
    +
    { > Projetos + + Aplicativos +