Fluxograma de Atividades
import React from ‘react’;
import { motion } from ‘framer-motion’;
import { BookOpen, Calendar, Megaphone, Printer, Eye, Utensils, Mic } from ‘lucide-react’;
import WorkStream from ‘../components/flowchart/WorkStream’;
import TimelineBar from ‘../components/flowchart/TimelineBar’;
import FileAttachment from ‘../components/flowchart/FileAttachment’;
const catalogTasks = [
{
title: ‘Catálogo Família’,
description: ‘Prioridade máxima. NF deve ser emitida até dia 30.’,
status: ‘in_progress’,
badge: ‘⚠ NF até dia 30’,
details: [
‘Ajuste: retirar Genesis do catálogo’,
‘Gramatura 180g’,
‘Orçamento inicial recebido por Navarros’,
‘NF emitida até dia 30 → pedir demais folders em 01/04’,
],
},
{
title: ‘Catálogo SERT’,
description: ‘Trocar logo e ajustar detalhes antes da impressão.’,
status: ‘in_progress’,
badge: ‘Ajustes’,
details: [
‘Substituir logo atualizado’,
‘Revisar detalhes de conteúdo’,
‘Gramatura 180g’,
‘Orçamento inicial recebido por Navarros’,
‘Pedido a partir de 01/04 (após NF Família)’,
],
},
{
title: ‘Catálogo Xtense (Lançamento 2026)’,
description: ‘Confeccionar, traduzir e revisar. Acabamento premium aprovado.’,
status: ‘pending’,
badge: ‘Novo’,
details: [
‘Receber projeto completo’,
‘Confeccionar layout e diagramação’,
‘Tradução do conteúdo’,
‘Revisão final’,
‘Gramatura 180g + verniz (especificado por Debora)’,
‘Orçamento inicial recebido por Navarros’,
‘Pedido a partir de 01/04 (após NF Família)’,
],
},
{
title: ‘Catálogo Biotech Ortopedia’,
description: ‘Lombada Canoa — Capa + 4 páginas. Formato fechado 210x210mm. Couchê Fosco 170g/m² — 4×4 cores.’,
status: ‘in_progress’,
badge: ‘Orçado’,
details: [
‘Formato aberto: 420 x 210mm | Fechado: 210 x 210mm’,
‘2 lâminas em Couchê Fosco 170g/m² — 4×4 cores’,
‘Acabamento: intercalados, refilados, dobrados, grampeados | CTP incluído’,
‘— Opção 04: 2.000 un. → Unit. R$1,96 | Total R$3.920,00 (Ref. 337475)’,
‘— Opção 05: 1.000 un. → Unit. R$2,69 | Total R$2.690,00 (Ref. 337476 — mesmo valor último pedido)’,
‘Aguardando aprovação de tiragem e budget’,
],
},
{
title: ‘Orçamentos Gráfica — Status’,
description: ‘Orçamentos iniciais já enviados por Navarros para os 3 catálogos.’,
status: ‘in_progress’,
badge: ‘Em análise’,
details: [
‘Família: orçamento recebido’,
‘SERT: orçamento recebido’,
‘Xtense: orçamento recebido — aguarda aprovação final de budget’,
‘Debora definiu valores de budget — validar com proposta da gráfica’,
],
},
];
const userMeetingTasks = [
{
title: ‘Trio de Cordas — Apresentação Musical’,
description: ‘Proposta recebida de Ricardo via Navarros. Aguardando especificação das cordas.’,
status: ‘in_progress’,
badge: ‘Pendente Debora’,
details: [
‘Proposta enviada por Ricardo’,
‘Navarros encaminhou para Debora’,
‘Debora solicitou: especificar quais são as cordas da proposta’,
‘Aguardando retorno de Navarros com a especificação’,
],
},
{
title: ‘Acrílico / Troféu’,
description: ‘Produção de peça em acrílico para o User Meeting.’,
status: ‘pending’,
badge: ‘Produção’,
details: [
‘Definir design e especificações do troféu’,
‘Orçar produção da peça em acrílico’,
],
},
{
title: ‘Inspeção Técnica do Local’,
description: ‘Casa de eventos no Alto de Pinheiros.’,
status: ‘in_progress’,
badge: ’11/03 às 10h’,
details: [
‘Local: Av. Diogenes Ribeiro de Lima, 272’,
‘Confirmar data: 11/03 às 10h’,
],
},
{
title: ‘Backdrop e Comunicação Visual’,
description: ‘Criar backdrop e materiais de comunicação por etapas do evento.’,
status: ‘pending’,
details: [
‘Evento dividido em etapas’,
‘Desenvolver backdrop para o espaço’,
],
},
{
title: ‘Comunicação e Convite do Evento’,
description: ‘Criar identidade visual com tom subliminar — sem revelar o que acontecerá.’,
status: ‘pending’,
badge: ‘Estratégico’,
details: [
‘Público-alvo: médicos’,
‘Experiência: sentir sensações de baixa visão / cegueira’,
‘Aula científica + jantar às cegas’,
‘Convite deve ser subliminar e intrigante’,
‘Alinhar com Mariana Pelozio (organizadora)’,
],
contact: ‘Mariana Pelozio — 11 96987-8703’,
},
{
title: ‘Treinamento do Time de Convites’,
description: ‘Mariana vai treinar o time sobre como convidar e atrair médicos sem revelar detalhes.’,
status: ‘pending’,
details: [
‘Mariana tem sugestões de comunicação’,
‘Fazer ponte entre Mariana e a equipe criativa’,
],
contact: ‘Mariana Pelozio — 11 96987-8703’,
},
];
const parallelTasks = [
{
title: ‘BRASCRS 2026 — Stand Biotech’,
description: ‘Orç. 0163/2026 — Evento: 13 a 16 Mai/2026. Stand modelo 03 com ajustes aprovados.’,
status: ‘in_progress’,
badge: ’13–16 Mai’,
details: [
‘Stand modelo 03 aprovado com ajustes’,
’01 – Trocar testeira lateral pelo modelo frontal (proposta 02)’,
’02 – Retirar depósito para ganhar mais espaço’,
’03 – Retirar logo Biotech do ripado (já está na testeira)’,
’04 – Balcão: tomadas 220v (cafeteira) + 110v + extensão p/ celulares’,
’05 – Lona frontal Xtense: colar em madeira + LED em volta (efeito backlight)’,
’06 – Experience Lab: substituir imagem por TV para microscópio’,
’07 – Incluir porta-catálogo’,
’08 – 2 lixeiras’,
’09 – Verificar se cabem 3 cadeiras em cada bistro (ganho de espaço)’,
‘⚠ Navarros: enviar logos e imagens ao Rafael até 13/04’,
‘💰 Pagamentos previstos: 08/04 e 08/05 (Driele programar no fluxo)’,
],
contact: ‘Rafael — projetostands.com.br | Driele (pagamentos)’,
},
{
title: ‘Reunião Científica — EyEcryl Phakic’,
description: ‘Evento científico com Dr. Gustavo Nery. Coco Bambu Anchieta, Belo Horizonte-MG.’,
status: ‘in_progress’,
badge: ’25/03 · 19h30′,
details: [
‘📅 Data: 25/03/2026 às 19h30’,
‘👨⚕️ Palestrante: Dr. Gustavo Nery’,
‘📍 Coco Bambu Anchieta — Anchieta Garden Shopping’,
‘R. Francisco Deslandes, 900 — Anchieta, Belo Horizonte – MG’,
‘✉️ Convite: “Prezado doutor, você é nosso convidado para esse momento especial.”‘,
‘📢 “Venha participar, não perca essa oportunidade!”‘,
‘Representante Biotech Minas: Michel’,
],
contact: ‘Representante Biotech Minas: Michel’,
},
{
title: ‘Evento Internacional (Abril)’,
description: ‘Podcast em sala da Biotech + gravação de aula.’,
status: ‘pending’,
badge: ‘Abril’,
details: [
‘Definir formato do podcast’,
‘Reservar sala na Biotech’,
‘Gravar a aula’,
],
},
{
title: ‘BRASCRS’,
description: ‘Na próxima semana definir as artes necessárias.’,
status: ‘in_progress’,
badge: ‘Próx. Semana’,
details: [
‘Reunião para definir artes’,
‘Produção dos materiais’,
],
},
{
title: ‘Hospedagem — 20º CBCJ (9–11/Abr)’,
description: ‘Reserva de hospedagem para o evento em Campinas. Royal Palm Hall, Campinas-SP.’,
status: ‘pending’,
badge: ‘Pendente’,
details: [
‘Evento: 20º CBCJ — 9 a 11 de Abril de 2026’,
‘Local: Royal Palm Hall — Campinas, SP’,
‘Responsável: Alexandre’,
‘Verificar disponibilidade e proximidade ao Royal Palm Hall’,
‘Confirmar check-in/check-out conforme agenda do evento’,
],
contact: ‘Responsável: Alexandre’,
},
{
title: ‘Estande CBCJ 2026 — Comunicação Visual (Adesivagem)’,
description: ‘Preparar artes para adesivar o estande Biotech no 20º CBCJ (sbcj.org.br). Evento: 09–11/Abr/2026 • Royal Palm Hall, Campinas-SP.’,
status: ‘in_progress’,
badge: ‘⚠ Urgente’,
details: [
‘Área: 12m² (Nº28) — Ponta de ILHA — 3x4m’,
‘Altura do estande: 2,50m’,
‘Itens para adesivar: paredes (napa branca), testeira frontal e lateral, balcão de atendimento (parte frontal)’,
’01 logo em spumapack aplicado na parede’,
‘Logotipia e imagens em formato plano 3D com relevo sobreposto’,
‘Produção gráfica em alta resolução — dimensões conforme layout de projeto’,
‘⚠ Arquivos devem ser enviados até 15 dias antes da montagem (prazo crítico)’,
‘⚠ Taxa de R$800 se enviado fora do prazo’,
‘Contato: Rafael de Paiva — (11) 4447-4468 | comercial@grupodeeventos.com.br’,
‘Orç. Grupo de Eventos: R$16.680,00 | Pgto: 20/03’,
],
contact: ‘Rafael de Paiva — (11) 4447-4468 | grupodeeventos.com.br’,
},
{
title: ‘Vídeo Institucional Biotech — Evento Zero Grau’,
description: ‘Produção com Alex Sá. Gravação realizada nos dias 14 e 15 de Março.’,
status: ‘done’,
badge: ‘✓ Entregue’,
details: [
‘Gravação: 14 e 15/03/2026’,
‘Direção: Alex Sá’,
‘Atividade concluída e entregue’,
],
},
{
title: ‘Lançamento Xtense’,
description: ‘Planejar etapas do lançamento do novo produto.’,
status: ‘pending’,
badge: ‘2026’,
details: [
‘Definir cronograma de etapas’,
‘Alinhar com catálogo premium’,
‘Estratégia de comunicação’,
],
},
];
export default function Flowchart() {
return (
<div classname="”min-h-screen”" style="{{" backgroundcolor: ‘#29274c’ }}>
{/* Header */}
<div classname="”border-b" border-white10″ style="{{" backgroundcolor: ‘#0c1831’ }}>
<div classname="”max-w-6xl" mx-auto px-4 sm:px-6 py-6″>
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className=”flex items-center gap-5″
>
<img
src=”https://media.base44.com/images/public/69b803ff2ce0a20d8c59ba38/b0efaecb8_sssssssssssssss.png”
alt=”Logo”
className=”w-16 h-16 object-contain flex-shrink-0″
/>
<div>
<p classname="”text-xs" font-semibold uppercase tracking-widest mb-1″ style="{{" color: ‘#ea00ff’ }}>Planejamento 2026</p>
<h1 classname="”text-2xl" sm:text-3xl font-extrabold tracking-tight text-white”>
Fluxograma de Atividades
</h1>
<p classname="”text-sm" font-semibold mt-1″ style="{{" color: ‘#ea00ff’, opacity: 0.7 }}>Navarrostudio</p>
</div>
</motion.div>
</div>
</div>
{/* Content */}
<div classname="”max-w-6xl" mx-auto px-4 sm:px-6 py-8 space-y-6″>
{/* Timeline */}
<TimelineBar />
{/* Work Streams Grid */}
<div classname="”grid" grid-cols-1 lg:grid-cols-2 gap-6″>
<WorkStream
icon={Printer}
title=”Catálogos & Gráfica”
subtitle=”Impressão e produção”
colorClass=”bg-primary”
accentColor=”border-primary/30 text-primary”
tasks={catalogTasks}
delay={0.1}
/>
<WorkStream
icon={Eye}
title=”User Meeting”
subtitle=”13 de Abril • São Paulo — Experiência sensorial para médicos”
colorClass=”bg-accent”
accentColor=”border-accent/30 text-accent”
tasks={userMeetingTasks}
delay={0.2}
/>
</div>
<WorkStream
icon={Megaphone}
title=”Eventos Paralelos”
subtitle=”Internacional, BRASCRS e Lançamento Xtense”
colorClass=”bg-chart-5″
accentColor=”border-chart-5/30 text-chart-5″
tasks={parallelTasks}
delay={0.3}
/>
{/* File Attachments */}
<FileAttachment />
{/* Summary footer */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.7 }}
className=”bg-card rounded-2xl border border-border p-5″
>
<h3 classname="”text-sm" font-bold text-foreground mb-3 uppercase tracking-wider”>Próximos Passos Imediatos</h3>
<div classname="”grid" grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3″>
{[
{ num: ’01’, text: ‘Emitir NF catálogo Família até dia 30 (prioridade máxima)’ },
{ num: ’02’, text: ‘Navarros especificar quais cordas para Debora (Trio de Cordas)’ },
{ num: ’03’, text: ‘Definir e orçar acrílico/troféu para o User Meeting’ },
{ num: ’04’, text: ‘Confirmar inspeção técnica 11/03 às 10h — Av. Diogenes Ribeiro de Lima, 272’ },
{ num: ’05’, text: ‘Pedir catálogos SERT e Xtense a partir de 01/04’ },
{ num: ’06’, text: ‘Desenhar comunicação subliminar do evento + contato Mariana Pelozio’ },
{ num: ’07’, text: ‘BRASCRS: enviar logos e imagens ao Rafael até 13/04 (Navarros)’ },
{ num: ’09’, text: ‘BRASCRS: confirmar ajustes do stand 03 com Rafael (testeira, backlight, TV, bistros)’ },
{ num: ’08’, text: ‘Ajuste catálogo Família: retirar Genesis antes da impressão’ },
].map((step, i) => (
<div key="{i}" classname="”flex" items-start gap-3 p-3 rounded-xl bg-muted50 border border-border50″>
<span classname="”text-xs" font-extrabold text-primary”>{step.num}</span>
<span classname="”text-xs" text-foreground leading-relaxed”>{step.text}</span>
</div>
))}
</div>
</motion.div>
</div>
</div>
);
}
