Rediseño de las tarjetas en testing.

projecte-final/testing/index.html

@@ -36,47 +36,47 @@
 
     <main class="content">
       
-      <section class="top-sales-section">
-        <h2 class="section-title">Top 3 Vendes</h2>
+<section class="top-sales-section ranking-style">
+        <h2 class="section-title">Top 3 Vendes <span class="highlight-neon">Setmanal</span></h2>
         
-        <div class="cards-container">
-          <article class="game-card">
-            <div class="card-image">
-              <img src="assets/img/elden_ring.jpg" alt="Videojuego Top 1">
-            </div>
-            <div class="card-info">
-              <h3>Elden Ring</h3>
-              <p>"Una obra mestra de món obert que desafia i recompensa a parts iguals."</p>
+        <div class="ranking-container">
+          
+          <article class="rank-card rank-1">
+            <div class="card-bg" style="background-image: url('https://i.pinimg.com/736x/5f/6b/0e/5f6b0e7c680757b59566510900a04008.jpg');"></div>
+            <div class="rank-badge">#1</div>
+            <div class="card-overlay">
+              <div class="card-details">
+                <h3>Elden Ring</h3>
+                <p class="short-desc">Obra mestra de món obert.</p>
+                <p class="full-desc">Desafia i recompensa a parts iguals en un món vast i perillós creat per Hidetaka Miyazaki i George R. R. Martin.</p>
+              </div>
             </div>
           </article>
 
-          <article class="game-card">
-            <div class="card-image">
-              <img src="https://via.placeholder.com/400x250/0f172a/00c3ff?text=Juego+2" alt="Videojuego Top 2">
-            </div>
-            <div class="card-info">
-              <h3>FIFA 24</h3>
-              <p>"El simulador de futbol definitiu, ara amb gràfics més realistes que mai."</p>
+          <article class="rank-card rank-2">
+            <div class="card-bg" style="background-image: url('https://m.media-amazon.com/images/I/81+H-hP6W4L._AC_UF1000,1000_QL80_.jpg');"></div>
+            <div class="rank-badge">#2</div>
+            <div class="card-overlay">
+               <div class="card-details">
+                <h3>EA FC 24</h3>
+                <p class="short-desc">El simulador definitiu.</p>
+                <p class="full-desc">Experimenta el realisme amb HyperMotionV i gaudeix del futbol amb equips masculins i femenins.</p>
+              </div>
             </div>
           </article>
 
-          <article class="game-card">
-            <div class="card-image">
-              <img src="https://via.placeholder.com/400x250/0f172a/00c3ff?text=Juego+3" alt="Videojuego Top 3">
-            </div>
-            <div class="card-info">
-              <h3>Zelda: TOTK</h3>
-              <p>"Creativitat sense límits en una aventura que redefineix el gènere."</p>
+          <article class="rank-card rank-3">
+            <div class="card-bg" style="background-image: url('https://assets.nintendo.com/image/upload/c_fill,w_1200/q_auto:best/f_auto/dpr_2.0/ncom/software/switch/70010000063714/desc/2b130de74a9964903c4c94be96724377e352879b12c25bc480fe5f133389f271');"></div>
+            <div class="rank-badge">#3</div>
+            <div class="card-overlay">
+               <div class="card-details">
+                <h3>Zelda: TOTK</h3>
+                <p class="short-desc">Creativitat sense límits.</p>
+                <p class="full-desc">Una aventura que redefineix el gènere, on la teva imaginació és l'única eina necessària per explorar Hyrule.</p>
+              </div>
             </div>
           </article>
-        </div>
-      </section>
 
-      <section class="cta-section">
-        <div class="cta-content">
-          <i class="fa-solid fa-rocket cta-icon"></i>
-          <p>Si vols conèixer tots els videojocs disponibles ...</p>
-          <a href="videojocs.html" class="cta-button">Veure catàleg complet</a>
         </div>
       </section>