Skip to content

Commit 65d9bcd

Browse files
tomihqtomihq
committed
diseño
1 parent a3050ad commit 65d9bcd

File tree

1 file changed

+32
-23
lines changed

1 file changed

+32
-23
lines changed

‎components/wrapped/wrapped-slideshow.tsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -451,24 +451,26 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
451451
<div className="grid grid-cols-2 gap-2">
452452
<div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
453453
<div className="flex items-center justify-between mb-1">
454-
<Target className="w-5 h-5 text-emerald-600" />
454+
<Target className="w-5 h-5 text-emerald-600 dark:text-emerald-500" />
455455
{userData.stats.tasksImprovementPercentage > 0 && (
456456
<div className="flex items-center bg-emerald-500 text-white px-2 py-1 rounded-full text-xs">
457457
<ArrowUp className="w-3 h-3 mr-1" />
458458
<span className="font-semibold">+{userData.stats.tasksImprovementPercentage}%</span>
459459
</div>
460460
)}
461461
</div>
462-
<p className="text-3xl font-bold text-emerald-600">{userData.stats.tasksCompleted}</p>
462+
<p className="text-3xl font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.tasksCompleted}</p>
463463
<p className="text-xs text-gray-500 dark:text-gray-400">Tareas Completadas</p>
464464
</div>
465465

466-
466+
{/* 2️⃣ Días con hábitos cumplidos */}
467467
<div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
468-
<p className="text-3xl font-bold text-emerald-600">69%</p>
469-
<p className="text-xs text-gray-500">Días con hábitos cumplidos</p>
470-
471-
+18% vs año anterior
468+
<div className="flex items-center justify-between mb-1">
469+
<Calendar className="w-5 h-5 text-emerald-600 dark:text-emerald-500" />
470+
{/* TODO: Add delta calculation when data is available */}
471+
</div>
472+
<p className="text-3xl font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.activeDaysPercentage}%</p>
473+
<p className="text-xs text-gray-500 dark:text-gray-400">Días con hábitos cumplidos</p>
472474
</div>
473475

474476
{/* 3️⃣ Consistencia - Racha más larga */}
@@ -512,8 +514,8 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
512514
<p className="font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.activeDays}</p>
513515
</div>
514516
<div>
515-
<p className="text-gray-500">Hábitos sostenidos</p>
516-
<p className="font-bold">{userData.stats.habitsMade}</p>
517+
<p className="text-gray-500 dark:text-gray-400 text-xs">Hábitos sostenidos</p>
518+
<p className="font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.habitsMade}</p>
517519
</div>
518520
<div>
519521
<p className="text-gray-500 dark:text-gray-400 text-xs">Días con hábitos cumplidos</p>
@@ -533,23 +535,24 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
533535
<h3 className="font-bold text-gray-900 dark:text-white text-sm">Patrones</h3>
534536
</div>
535537
<div className="space-y-2.5 text-sm">
536-
<div className="flex justify-between items-center">
537-
<p className="text-gray-500 dark:text-gray-400 text-xs">Tu mejor día de la semana
538-
</p>
539-
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs text-right max-w-[60%]">{userData.stats.mostProductiveDay} (+23%) </p>
540-
<span className="text-[10px] text-gray-400">
541-
más hábitos que tu promedio
542-
</span>
538+
<div className="flex justify-between items-start">
539+
<p className="text-gray-500 dark:text-gray-400 text-xs">Tu mejor día de la semana</p>
540+
<div className="text-right max-w-[60%]">
541+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs">{userData.stats.mostProductiveDay}</p>
542+
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">+23% más hábitos que tu promedio</p>
543+
</div>
543544
</div>
544545
<div className="flex justify-between items-center border-t border-gray-100 dark:border-gray-700 pt-2.5">
545-
<p className="text-gray-500 dark:text-gray-400 text-xs">Mes de mayor consistencia
546-
</p>
546+
<p className="text-gray-500 dark:text-gray-400 text-xs">Mes de mayor consistencia</p>
547547
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs">{userData.stats.mostProductiveMonth}</p>
548548
</div>
549549
{userData.stats.mostConsistentHabit && userData.stats.mostConsistentHabit !== "Ninguno" && (
550-
<div className="flex justify-between items-center border-t border-gray-100 dark:border-gray-700 pt-2.5">
550+
<div className="flex justify-between items-start border-t border-gray-100 dark:border-gray-700 pt-2.5">
551551
<p className="text-gray-500 dark:text-gray-400 text-xs">Tu hábito más consistente</p>
552-
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs text-right max-w-[60%]">{userData.stats.mostConsistentHabit} (92% de cumplimiento) </p>
552+
<div className="text-right max-w-[60%]">
553+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs">{userData.stats.mostConsistentHabit}</p>
554+
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">92% de cumplimiento</p>
555+
</div>
553556
</div>
554557
)}
555558
{userData.stats.bestMoodDay && (
@@ -558,7 +561,6 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
558561
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs text-right max-w-[60%]">{userData.stats.bestMoodDay}</p>
559562
</div>
560563
)}
561-
562564
</div>
563565
</div>
564566

@@ -615,11 +617,18 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
615617
)}
616618
</div>
617619
<p className="text-xs leading-relaxed opacity-90">
618-
Cuando fuiste constante, te sentiste mejor.
619-
620+
Cuando fuiste constante, te sentiste mejor.
620621
</p>
621622
</div>
622623

624+
{/* 🔚 Cierre */}
625+
<div className="text-center pt-3 space-y-2">
626+
<p className="text-2xl font-bold text-gray-900 dark:text-white">Mejorar 1% todos los días funciona.</p>
627+
<p className="text-base text-gray-600 dark:text-gray-300 leading-relaxed">
628+
Kyzen te ayuda a planear hábitos que te acerquen a las metas que hoy parecen lejanas.
629+
</p>
630+
<p className="text-xs text-gray-400 dark:text-gray-500 opacity-50 pt-2">kyzen.app</p>
631+
</div>
623632
</div>
624633
)
625634
}

0 commit comments

Comments
 (0)