Se agrega vista principaldel detalle del plan

src/components/plans/PlanCard.tsx

@@ -0,0 +1,26 @@
+import { StatusBadge } from "./StatusBadge";
+
+export function PlanCard({ plan }: any) {
+  return (
+    <div className="bg-[#eaf6fa] rounded-2xl p-6 border hover:shadow-md transition">
+      <div className="flex justify-between items-start mb-4">
+        <span className="text-sm text-gray-500">⚙ Ingeniería</span>
+        <StatusBadge status={plan.status} />
+      </div>
+
+      <h3 className="text-lg font-semibold text-gray-900">
+        {plan.title}
+      </h3>
+
+      <p className="text-sm text-gray-600 mb-6">
+        {plan.subtitle}
+      </p>
+
+      <div className="flex justify-between text-sm text-gray-500">
+        <span>{plan.cycles} ciclos</span>
+        <span>{plan.credits} créditos</span>
+        <span>➜</span>
+      </div>
+    </div>
+  )
+}

src/components/plans/PlanGrid.tsx

@@ -0,0 +1,38 @@
+import { PlanCard } from './PlanCard'
+
+const mockPlans = [
+  {
+    id: 1,
+    name: 'Ingeniería en Sistemas',
+    level: 'Licenciatura',
+    status: 'Activo',
+  },
+  {
+    id: 2,
+    name: 'Arquitectura',
+    level: 'Licenciatura',
+    status: 'Activo',
+  },
+  {
+    id: 3,
+    name: 'Maestría en Educación',
+    level: 'Maestría',
+    status: 'Inactivo',
+  },
+]
+
+export function PlanGrid() {
+  return (
+    <div>
+      <h2 className="text-lg font-semibold mb-4">
+        Planes disponibles
+      </h2>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {mockPlans.map(plan => (
+          <PlanCard key={plan.id} plan={plan} />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/plans/StatCard.tsx

@@ -0,0 +1,11 @@
+export function StatCard({ icon, value, label }: any) {
+  return (
+    <div className="bg-white rounded-xl border p-6">
+      <div className="flex items-center gap-3 mb-2">
+        <span className="text-xl">{icon}</span>
+        <span className="text-2xl font-semibold">{value}</span>
+      </div>
+      <p className="text-sm text-gray-500">{label}</p>
+    </div>
+  )
+}

src/components/plans/StatsGrid.tsx

@@ -0,0 +1,12 @@
+import { StatCard } from "./StatCard";
+
+export function StatsGrid() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+      <StatCard icon="📘" value="12" label="Planes Activos" />
+      <StatCard icon="🕒" value="4" label="En Revisión" />
+      <StatCard icon="✅" value="8" label="Aprobados" />
+      <StatCard icon="👥" value="6" label="Carreras" />
+    </div>
+  )
+}

src/components/plans/StatusBadge.tsx

@@ -0,0 +1,19 @@
+export function StatusBadge({ status }: { status: string }) {
+  const styles: any = {
+    revision: 'bg-blue-100 text-blue-700',
+    aprobado: 'bg-green-100 text-green-700',
+    borrador: 'bg-gray-200 text-gray-600',
+  }
+
+  return (
+    <span
+      className={`text-xs px-3 py-1 rounded-full font-medium ${styles[status]}`}
+    >
+      {status === 'revision'
+        ? 'En Revisión'
+        : status === 'aprobado'
+        ? 'Aprobado'
+        : 'Borrador'}
+    </span>
+  )
+}