From b8bcb00e741ce39fdfd92082a439c33dea120eea Mon Sep 17 00:00:00 2001
From: guilherme <guilherme@agapesistemas.com.br>
Date: Thu, 11 Dec 2025 14:06:23 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20refatorar=20slides=20de=20retrospectiva?=
 =?UTF-8?q?=20para=20melhorar=20a=20apresenta=C3=A7=C3=A3o=20e=20a=20estru?=
 =?UTF-8?q?tura=20do=20c=C3=B3digo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/retrospective-slides.tsx | 218 +++++++++---------
 1 file changed, 106 insertions(+), 112 deletions(-)

diff --git a/src/views/components/retrospective-slides.tsx b/src/views/components/retrospective-slides.tsx
index 777aa30..30af17e 100644
--- a/src/views/components/retrospective-slides.tsx
+++ b/src/views/components/retrospective-slides.tsx
@@ -4,11 +4,7 @@ import {
 } from '@/app/hooks/useMetrics';
 import logoAImg from '@/assets/images/a-agape.png';
 import logoImg from '@/assets/images/agape-logo.png';
-import {
-  BuildingIcon,
-  ChartLineUpIcon,
-  SpinnerIcon,
-} from '@phosphor-icons/react';
+import { ChartLineUpIcon, SpinnerIcon } from '@phosphor-icons/react';
 import { motion } from 'framer-motion';
 import { useSearchParams } from 'react-router-dom';
 import ProfileCard from './ProfileCard';
@@ -143,123 +139,117 @@ export function RetrospectiveSlides() {
             </StorySlide>
 
             {metricsPortal && metricsPortal.length > 0 && (
-              <StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white overflow-hidden">
-                <div className="flex flex-col md:flex-row items-center justify-between h-full px-6 py-8 md:py-12 md:px-8">
-                  <motion.div
-                    className="md:w-2/5 flex flex-col items-center md:items-start mb-8 md:mb-0 md:pr-8"
-                    initial={{ opacity: 0, x: -30 }}
-                    whileInView={{ opacity: 1, x: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.6 }}>
+              <>
+                {/* Slide 1: Acessos no AgPortal */}
+                <StorySlide className="bg-white text-gray-900 overflow-hidden relative">
+                  {/* Decoração de fundo sutil */}
+                  <div className="absolute inset-0 overflow-hidden">
+                    <div className="absolute -top-24 -right-24 w-96 h-96 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-full opacity-70"></div>
+                    <div className="absolute -bottom-32 -left-32 w-80 h-80 bg-gradient-to-tr from-blue-50 to-cyan-50 rounded-full opacity-60"></div>
+                  </div>
+
+                  <div className="flex flex-col lg:flex-row items-center justify-between h-full px-6 py-8 md:py-16 md:px-12 relative z-10">
                     <motion.div
-                      initial={{ scale: 0 }}
-                      whileInView={{ scale: 1 }}
+                      className="lg:w-1/2 flex flex-col items-start mb-10 lg:mb-0 space-y-8 lg:pr-12"
+                      initial={{ opacity: 0, x: -30 }}
+                      whileInView={{ opacity: 1, x: 0 }}
                       viewport={{ once: true }}
-                      transition={{ type: 'spring', duration: 0.6 }}
-                      className="mb-6 md:mb-8">
-                      <div className="relative">
-                        <div className="absolute inset-0 bg-white/20 rounded-full blur-lg animate-pulse"></div>
-                        <BuildingIcon className="h-14 w-14 md:h-16 md:w-16 text-white drop-shadow-lg relative z-10" />
-                      </div>
-                    </motion.div>
-
-                    <motion.h2
-                      className="text-2xl md:text-3xl lg:text-4xl font-bold text-center md:text-left mb-4"
-                      initial={{ opacity: 0, y: -20 }}
-                      whileInView={{ opacity: 1, y: 0 }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.6, delay: 0.1 }}>
-                      Acessos no AgPortal
-                    </motion.h2>
-
-                    <motion.p
-                      className="text-base md:text-lg text-white/80 text-center md:text-left mb-6"
-                      initial={{ opacity: 0 }}
-                      whileInView={{ opacity: 1 }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.6, delay: 0.2 }}>
-                      A porta de entrada para todas as aplicações
-                    </motion.p>
-
-                    <motion.div
-                      className="space-y-3 mb-6"
-                      initial={{ opacity: 0, scale: 0.8 }}
-                      whileInView={{ opacity: 1, scale: 1 }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.8, delay: 0.4 }}>
-                      <div className="text-5xl md:text-6xl lg:text-7xl font-black text-white tracking-tighter">
-                        {metricsPortal
-                          .reduce((acc, p) => acc + p.totalAcessos, 0)
-                          .toLocaleString('pt-BR')}
-                      </div>
-                      <p className="text-xl md:text-2xl font-semibold text-blue-200">
-                        acessos em {ano}
-                      </p>
-                    </motion.div>
-
-                    <motion.div
-                      className="mt-4 md:mt-auto w-full"
-                      initial={{ opacity: 0 }}
-                      whileInView={{ opacity: 1 }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.6, delay: 0.6 }}>
-                      <div className="grid grid-cols-3 gap-3">
-                        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20 text-center">
-                          <div className="text-lg font-bold text-white mb-1">
-                            {Math.round(
-                              metricsPortal.reduce(
-                                (acc, p) => acc + p.totalAcessos,
-                                0,
-                              ) / 365,
-                            )}
-                          </div>
-                          <div className="text-xs text-blue-100 opacity-90">
-                            Por dia
-                          </div>
-                        </div>
-
-                        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20 text-center">
-                          <div className="text-lg font-bold text-white mb-1">
-                            {Math.round(
-                              metricsPortal.reduce(
-                                (acc, p) => acc + p.totalAcessos,
-                                0,
-                              ) / 12,
-                            ).toLocaleString('pt-BR')}
-                          </div>
-                          <div className="text-xs text-blue-100 opacity-90">
-                            Por mês
-                          </div>
-                        </div>
-                      </div>
-                    </motion.div>
-                  </motion.div>
-
-                  <div className="md:w-3/5 h-full flex items-center">
-                    <div className="w-full">
+                      transition={{ duration: 0.6 }}>
                       <motion.div
-                        className="mb-6 text-center md:text-left"
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
+                        initial={{ scale: 0 }}
+                        whileInView={{ scale: 1 }}
                         viewport={{ once: true }}
-                        transition={{ duration: 0.6 }}>
-                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-2">
-                          <ChartLineUpIcon className="h-4 w-4 text-yellow-300" />
-                          <span className="text-sm font-semibold text-white">
-                            Aplicativos Mais Acessados
-                          </span>
-                        </div>
+                        transition={{ type: 'spring', duration: 0.6 }}>
+                        <img src={logoAImg} className="w-10" />
                       </motion.div>
 
+                      <motion.h2
+                        className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4"
+                        initial={{ opacity: 0, y: -20 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.6, delay: 0.1 }}>
+                        <span className="text-[#0e233d mt-2">
+                          AgPortal <br />
+                          Sua Porta de Entrada Digital
+                        </span>
+                      </motion.h2>
+
+                      {/* Descrição */}
+                      <motion.p
+                        className="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl"
+                        initial={{ opacity: 0 }}
+                        whileInView={{ opacity: 1 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.6, delay: 0.2 }}>
+                        O AgPortal é o hub central que conecta todos os
+                        colaboradores às ferramentas, sistemas e informações
+                        necessárias para o dia a dia de trabalho.
+                      </motion.p>
+                    </motion.div>
+
+                    <div className="lg:w-1/2 h-full flex flex-col items-center justify-center">
+                      <motion.div
+                        className="space-y-4 mb-8"
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.8, delay: 0.3 }}>
+                        <div className="flex flex-col items-center justify-center gap-3">
+                          <div className="text-9xl font-black text-gray-900 tracking-tight">
+                            {metricsPortal
+                              .reduce((acc, p) => acc + p.totalAcessos, 0)
+                              .toLocaleString('pt-BR')}
+                          </div>
+
+                          <div className="flex flex-col">
+                            <span className="text-lg md:text-xl text-muted-foreground">
+                              Acessos em {ano}
+                            </span>
+                          </div>
+                        </div>
+                      </motion.div>
+                    </div>
+                  </div>
+                </StorySlide>
+
+                {/* Slide 2: Top 5 Aplicativos com Horas */}
+                <StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white overflow-hidden">
+                  <div className="flex flex-col md:flex-row items-start md:items-center justify-between h-full px-6 py-8 md:py-12 md:px-8">
+                    <div className="space-y-8 w-full md:w-1/2 text-center md:text-left">
+                      <motion.div
+                        className="space-y-8"
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        whileInView={{ scale: 1, opacity: 1 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.6 }}>
+                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-4">
+                          <ChartLineUpIcon className="h-4 w-4 text-yellow-300" />
+                          <span className="text-sm font-semibold text-white">
+                            Top 5 Aplicativos
+                          </span>
+                        </div>
+
+                        <h2 className="text-4xl md:text-5xl font-bold text-white/80">
+                          Aplicativos mais acessados
+                        </h2>
+
+                        <p className="text-xl text-white/80 max-w-xl">
+                          Aqui estão as 5 aplicações com mais acessos e o total
+                          de horas registradas nelas durante o ano.
+                        </p>
+                      </motion.div>
+                    </div>
+
+                    <div className="md:w-3/5 w-full">
                       <div className="w-full grid grid-cols-1 gap-3 md:gap-4 max-h-full">
-                        {topItems.slice(0, 6).map((item, index) => {
+                        {topItems.slice(0, 5).map((item, index) => {
                           const medalColors = [
                             'bg-yellow-400 text-yellow-900',
                             'bg-gray-300 text-gray-900',
                             'bg-orange-400 text-orange-900',
                             'bg-blue-400/20 text-blue-300',
                             'bg-purple-400/20 text-purple-300',
-                            'bg-green-400/20 text-green-300',
                           ];
                           const isMedal = index < 3;
                           const medalColor =
@@ -294,7 +284,11 @@ export function RetrospectiveSlides() {
                                 </p>
                                 <p className="text-sm text-white/70">
                                   {item.totalAcessos.toLocaleString('pt-BR')}{' '}
-                                  acessos
+                                  acessos •{' '}
+                                  {Math.round(
+                                    item.horasLogadas || 0,
+                                  ).toLocaleString('pt-BR')}{' '}
+                                  h
                                 </p>
                               </div>
 
@@ -339,8 +333,8 @@ export function RetrospectiveSlides() {
                       </div>
                     </div>
                   </div>
-                </div>
-              </StorySlide>
+                </StorySlide>
+              </>
             )}
 
             <StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">