feat: add Leaderboard component and integrate it into Prices dropdown menu

Author: María Paz Arrieta Landazuri

frontend/src/app/components/Header.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 
 const Header = () => {
   const [isAprendeOpen, setIsAprendeOpen] = useState(false);
+  const [isPreciosOpen, setIsPreciosOpen] = useState(false);
 
   return (
     <header className="w-full bg-white shadow-sm">
@@ -15,7 +16,41 @@ const Header = () => {
         {/* Secciones */}
         <div className="flex space-x-8 items-center">
           <a href="#acerca" className="text-gray-700 hover:text-orange-400 font-medium transition-colors">Acerca de</a>
-          <a href="#precios" className="text-gray-700 hover:text-orange-400 font-medium transition-colors">Precios</a>
+          
+          {/* Precios Dropdown */}
+          <div className="relative">
+            <button
+              onClick={() => setIsPreciosOpen(!isPreciosOpen)}
+              className="text-gray-700 hover:text-orange-400 font-medium transition-colors flex items-center"
+            >
+              Precios
+              <svg
+                className={`ml-1 w-4 h-4 transition-transform ${isPreciosOpen ? 'rotate-180' : ''}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            
+            {isPreciosOpen && (
+              <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 border border-gray-100">
+                <a
+                  href="#precios"
+                  className="block px-4 py-2 text-gray-700 hover:bg-orange-50 hover:text-orange-400 transition-colors"
+                >
+                  Planes y Precios
+                </a>
+                <Link
+                  href="/leaderboard"
+                  className="block px-4 py-2 text-gray-700 hover:bg-orange-50 hover:text-orange-400 transition-colors"
+                >
+                  Leaderboard
+                </Link>
+              </div>
+            )}
+          </div>
 
           {/* Aprende Dropdown */}
           <div className="relative">

frontend/src/app/components/Leaderboard.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+interface LeaderboardUser {
+  username: string;
+  afpBalance: number;
+  afpFund: string;
+  profit: number;
+}
+
+interface LeaderboardProps {
+  users: LeaderboardUser[];
+}
+
+const Leaderboard: React.FC<LeaderboardProps> = ({ users }) => {
+  // Sort users by profit in descending order
+  const sortedUsers = [...users].sort((a, b) => b.profit - a.profit);
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('es-CL', {
+      style: 'currency',
+      currency: 'CLP',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  return (
+    <div className="bg-white rounded-2xl p-8 shadow-xl">
+      <h2 className="text-3xl font-bold text-gray-900 mb-6">Leaderboard</h2>
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b-2 border-gray-200">
+              <th className="text-left py-4 px-4 text-gray-600 font-semibold">Usuario</th>
+              <th className="text-right py-4 px-4 text-gray-600 font-semibold">Saldo AFP</th>
+              <th className="text-center py-4 px-4 text-gray-600 font-semibold">Fondo AFP</th>
+              <th className="text-right py-4 px-4 text-gray-600 font-semibold">Ganancia</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sortedUsers.map((user, index) => (
+              <tr 
+                key={user.username}
+                className={`border-b border-gray-100 hover:bg-gray-50 transition-colors ${
+                  index === 0 ? 'bg-yellow-50' : 
+                  index === 1 ? 'bg-gray-100' : 
+                  index === 2 ? 'bg-amber-50' : ''
+                }`}
+              >
+                <td className="py-4 px-4">
+                  <div className="flex items-center">
+                    {index < 3 && (
+                      <span className="mr-2 text-lg">
+                        {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'}
+                      </span>
+                    )}
+                    <span className="font-medium text-gray-900">{user.username}</span>
+                  </div>
+                </td>
+                <td className="text-right py-4 px-4 text-gray-900">
+                  {formatCurrency(user.afpBalance)}
+                </td>
+                <td className="text-center py-4 px-4">
+                  <span className="px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                    {user.afpFund}
+                  </span>
+                </td>
+                <td className="text-right py-4 px-4">
+                  <span className={`font-medium ${
+                    user.profit >= 0 ? 'text-green-600' : 'text-red-600'
+                  }`}>
+                    {formatCurrency(user.profit)}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Leaderboard; 

frontend/src/app/leaderboard/page.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import Leaderboard from '../components/Leaderboard';
+
+// Sample data - In a real application, this would come from an API
+const sampleUsers = [
+  {
+    username: "Juan Pérez",
+    afpBalance: 45000000,
+    afpFund: "Capital",
+    profit: 2500000
+  },
+  {
+    username: "María González",
+    afpBalance: 38000000,
+    afpFund: "Habitat",
+    profit: 1800000
+  },
+  {
+    username: "Carlos Rodríguez",
+    afpBalance: 42000000,
+    afpFund: "Cuprum",
+    profit: 2100000
+  },
+  {
+    username: "Ana Martínez",
+    afpBalance: 35000000,
+    afpFund: "ProVida",
+    profit: 1500000
+  },
+  {
+    username: "Pedro Sánchez",
+    afpBalance: 40000000,
+    afpFund: "PlanVital",
+    profit: 1900000
+  }
+];
+
+export default function LeaderboardPage() {
+  return (
+    <div className="min-h-screen w-full bg-cover bg-center flex flex-col items-center justify-center" style={{ backgroundImage: 'url(/bg-hero.png)' }}>
+      <div className="mt-8 bg-white rounded-3xl shadow-2xl px-8 py-10 max-w-4xl w-full flex flex-col items-center border-2 border-gray-200">
+        <h1 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-8">
+          <span className="text-orange-400">Leaderboard</span>
+        </h1>
+        
+        <div className="w-full">
+          <Leaderboard users={sampleUsers} />
+        </div>
+
+        <div className="mt-8 text-gray-600 text-sm text-center">
+          <p>* Los datos mostrados son actualizados diariamente</p>
+          <p>* Las ganancias son calculadas en base al rendimiento anual</p>
+        </div>
+      </div>
+    </div>
+  );
+}