feat: refatorar slides de retrospectiva para melhorar a apresentação e a estrutura do código
parent
37e40616d8
commit
b8bcb00e74
|
|
@ -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,10 +139,18 @@ 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">
|
||||
<>
|
||||
{/* 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
|
||||
className="md:w-2/5 flex flex-col items-center md:items-start mb-8 md:mb-0 md:pr-8"
|
||||
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 }}
|
||||
|
|
@ -155,111 +159,97 @@ export function RetrospectiveSlides() {
|
|||
initial={{ scale: 0 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
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>
|
||||
transition={{ type: 'spring', duration: 0.6 }}>
|
||||
<img src={logoAImg} className="w-10" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
className="text-2xl md:text-3xl lg:text-4xl font-bold text-center md:text-left mb-4"
|
||||
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 }}>
|
||||
Acessos no AgPortal
|
||||
<span className="text-[#0e233d mt-2">
|
||||
AgPortal <br />
|
||||
Sua Porta de Entrada Digital
|
||||
</span>
|
||||
</motion.h2>
|
||||
|
||||
{/* Descrição */}
|
||||
<motion.p
|
||||
className="text-base md:text-lg text-white/80 text-center md:text-left mb-6"
|
||||
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 }}>
|
||||
A porta de entrada para todas as aplicações
|
||||
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-3 mb-6"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
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.4 }}>
|
||||
<div className="text-5xl md:text-6xl lg:text-7xl font-black text-white tracking-tighter">
|
||||
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>
|
||||
<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">
|
||||
<motion.div
|
||||
className="mb-6 text-center md:text-left"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
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
|
||||
<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 className="bg-linear-to-br from-slate-50 to-blue-50">
|
||||
|
|
|
|||
Loading…
Reference in New Issue