Refactor code structure for improved readability and maintainability

src/views/components/retrospective-slides.tsx

@@ -10,6 +10,11 @@ import { ChartLineUpIcon, SpinnerIcon } from '@phosphor-icons/react';
 import { motion } from 'framer-motion';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+
+import firstPlaceImg from '@/assets/images/first-place.png';
+import secondPlaceImg from '@/assets/images/second-place.png';
+import thirdPlaceImg from '@/assets/images/third-place.png';
+
 import ProfileCard from './ProfileCard';
 import { StorySlide } from './story-slide';
 
@@ -124,7 +129,7 @@ export function RetrospectiveSlides() {
                     />
                   </motion.div>
 
-                    <motion.h1
+                  <motion.h1
                     className="text-5xl md:text-6xl font-medium mb-4"
                     initial={{ y: 20, opacity: 0 }}
                     whileInView={{ y: 0, opacity: 1 }}
@@ -141,11 +146,9 @@ export function RetrospectiveSlides() {
                         Bem-vindo à sua Retrospectiva Ágape {year}
                       </>
                     ) : (
-                      <>
+                      <>Retrospectiva Ágape {year}</>
-                      Retrospectiva Ágape {year}
-                      </>
                     )}
-                    </motion.h1>
+                  </motion.h1>
 
                   <motion.p
                     className="text-xl md:text-2xl text-white/90 max-w-2xl mx-auto font-light"
@@ -273,16 +276,8 @@ export function RetrospectiveSlides() {
                       <div className="md:w-3/5 w-full mt-8 md:mt-0">
                         <div className="w-full grid grid-cols-1 gap-3 md:gap-4">
                           {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',
-                            ];
                             const isMedal = index < 3;
-                            const medalColor =
+                            const medalColor = 'bg-white/20';
-                              medalColors[index] || 'bg-white/20';
 
                             return (
                               <motion.div
@@ -301,9 +296,27 @@ export function RetrospectiveSlides() {
                                 }}>
                                 <div
                                   className={`w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center font-bold text-base md:text-lg mr-4 ${medalColor}`}>
-                                  {index === 0 && '🥇'}
+                                  {index === 0 && (
-                                  {index === 1 && '🥈'}
+                                    <img
-                                  {index === 2 && '🥉'}
+                                      src={firstPlaceImg}
+                                      alt="First Place"
+                                      className="w-10 h-10"
+                                    />
+                                  )}
+                                  {index === 1 && (
+                                    <img
+                                      src={secondPlaceImg}
+                                      alt="Second Place"
+                                      className="w-10 h-10"
+                                    />
+                                  )}
+                                  {index === 2 && (
+                                    <img
+                                      src={thirdPlaceImg}
+                                      alt="Third Place"
+                                      className="w-10 h-10"
+                                    />
+                                  )}
                                   {index >= 3 && `#${index + 1}`}
                                 </div>