Skip to content

Commit b5d8b92

Browse files
tomihqtomihq
committed
diseño final
1 parent 0a09102 commit b5d8b92

File tree

1 file changed

+29
-29
lines changed

1 file changed

+29
-29
lines changed

‎components/wrapped/wrapped-slideshow.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -506,24 +506,24 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
506506
<div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
507507
<div className="flex items-center space-x-2 mb-3">
508508
<Calendar className="w-5 h-5 text-emerald-600 dark:text-emerald-500" />
509-
<h3 className="font-bold text-gray-900 dark:text-white text-sm">Actividad</h3>
509+
<h3 className="font-bold text-gray-900 dark:text-white text-lg">Actividad</h3>
510510
</div>
511-
<div className="grid grid-cols-2 gap-3 text-sm">
511+
<div className="grid grid-cols-2 gap-3 text-base">
512512
<div>
513-
<p className="text-gray-500 dark:text-gray-400 text-xs">Días activos</p>
514-
<p className="font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.activeDays}</p>
513+
<p className="text-gray-500 dark:text-gray-400 text-base">Días activos</p>
514+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xl">{userData.stats.activeDays}</p>
515515
</div>
516516
<div>
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>
517+
<p className="text-gray-500 dark:text-gray-400 text-base">Hábitos sostenidos</p>
518+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xl">{userData.stats.habitsMade}</p>
519519
</div>
520520
<div>
521-
<p className="text-gray-500 dark:text-gray-400 text-xs">Días con hábitos cumplidos</p>
522-
<p className="font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.activeDaysPercentage}% de los días del año</p>
521+
<p className="text-gray-500 dark:text-gray-400 text-base">Días con hábitos cumplidos</p>
522+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-lg">{userData.stats.activeDaysPercentage}% de los días del año</p>
523523
</div>
524524
<div>
525-
<p className="text-gray-500 dark:text-gray-400 text-xs">Acciones cumplidas por día</p>
526-
<p className="font-bold text-emerald-600 dark:text-emerald-500">{userData.stats.avgTasksPerDay} acciones por día activo</p>
525+
<p className="text-gray-500 dark:text-gray-400 text-base">Acciones cumplidas por día</p>
526+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-lg">{userData.stats.avgTasksPerDay} acciones por día activo</p>
527527
</div>
528528
</div>
529529
</div>
@@ -532,33 +532,33 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
532532
<div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
533533
<div className="flex items-center space-x-2 mb-3">
534534
<TrendingUp className="w-5 h-5 text-emerald-600 dark:text-emerald-500" />
535-
<h3 className="font-bold text-gray-900 dark:text-white text-sm">Patrones</h3>
535+
<h3 className="font-bold text-gray-900 dark:text-white text-lg">Patrones</h3>
536536
</div>
537-
<div className="space-y-2.5 text-sm">
537+
<div className="space-y-2.5 text-base">
538538
<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>
539+
<p className="text-gray-500 dark:text-gray-400 text-base">Tu mejor día de la semana</p>
540540
<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>
541+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-base">{userData.stats.mostProductiveDay}</p>
542+
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">+23% más hábitos que tu promedio</p>
543543
</div>
544544
</div>
545545
<div className="flex justify-between items-center border-t border-gray-100 dark:border-gray-700 pt-2.5">
546-
<p className="text-gray-500 dark:text-gray-400 text-xs">Mes de mayor consistencia</p>
547-
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs">{userData.stats.mostProductiveMonth}</p>
546+
<p className="text-gray-500 dark:text-gray-400 text-base">Mes de mayor consistencia</p>
547+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-base">{userData.stats.mostProductiveMonth}</p>
548548
</div>
549549
{userData.stats.mostConsistentHabit && userData.stats.mostConsistentHabit !== "Ninguno" && (
550550
<div className="flex justify-between items-start border-t border-gray-100 dark:border-gray-700 pt-2.5">
551-
<p className="text-gray-500 dark:text-gray-400 text-xs">Tu hábito más consistente</p>
551+
<p className="text-gray-500 dark:text-gray-400 text-base">Tu hábito más consistente</p>
552552
<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>
553+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-base">{userData.stats.mostConsistentHabit}</p>
554+
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">92% de cumplimiento</p>
555555
</div>
556556
</div>
557557
)}
558558
{userData.stats.bestMoodDay && (
559559
<div className="flex justify-between items-center border-t border-gray-100 dark:border-gray-700 pt-2.5">
560-
<p className="text-gray-500 dark:text-gray-400 text-xs">Tu mejor día</p>
561-
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-xs text-right max-w-[60%]">{userData.stats.bestMoodDay}</p>
560+
<p className="text-gray-500 dark:text-gray-400 text-base">Tu mejor día</p>
561+
<p className="font-bold text-emerald-600 dark:text-emerald-500 text-base text-right max-w-[60%]">{userData.stats.bestMoodDay}</p>
562562
</div>
563563
)}
564564
</div>
@@ -568,34 +568,34 @@ export function WrappedSlideshow({ userData }: WrappedSlideshowProps) {
568568
<div className="bg-emerald-500 text-white rounded-2xl p-4 shadow-sm">
569569
<div className="flex items-center space-x-2 mb-2">
570570
<CheckCircle2 className="w-5 h-5" />
571-
<h3 className="font-bold text-sm">Los hábitos que sostuvieron mi año</h3>
571+
<h3 className="font-bold text-lg">Los hábitos que sostuvieron mi año</h3>
572572
</div>
573-
<div className="grid grid-cols-2 gap-2 text-xs">
573+
<div className="grid grid-cols-2 gap-2 text-sm">
574574
{userData.habitsFormed.slice(0, 6).map((habit, i) => (
575575
<div key={i} className="flex items-center space-x-1">
576-
<div className="w-1 h-1 bg-white rounded-full flex-shrink-0" />
576+
<div className="w-1.5 h-1.5 bg-white rounded-full flex-shrink-0" />
577577
<span className="truncate">{habit}</span>
578578
</div>
579579
))}
580580
</div>
581-
<p className="text-xs opacity-75 mt-2">Total: {userData.habitsFormed.length} hábitos formados</p>
581+
<p className="text-sm opacity-75 mt-2">Total: {userData.habitsFormed.length} hábitos formados</p>
582582
</div>
583583

584584
{/* 8️⃣ Logros alcanzados */}
585585
<div className="bg-gradient-to-br from-emerald-500 to-emerald-600 text-white rounded-2xl p-4 shadow-sm">
586586
<div className="flex items-center space-x-2 mb-2">
587587
<Trophy className="w-5 h-5" />
588-
<h3 className="font-bold text-sm">Logros del {userData.year}</h3>
588+
<h3 className="font-bold text-lg">Logros del {userData.year}</h3>
589589
</div>
590-
<div className="space-y-1.5 text-xs">
590+
<div className="space-y-1.5 text-sm">
591591
{userData.goalsAchieved.slice(0, 5).map((goal, i) => (
592592
<div key={i} className="flex items-start space-x-2">
593593
<span className="font-bold flex-shrink-0">{i + 1}.</span>
594594
<span className="leading-tight">{goal}</span>
595595
</div>
596596
))}
597597
</div>
598-
<p className="text-xs opacity-75 mt-2">Total: {userData.goalsAchieved.length} logros alcanzados</p>
598+
<p className="text-sm opacity-75 mt-2">Total: {userData.goalsAchieved.length} logros alcanzados</p>
599599
</div>
600600

601601
{/* 9️⃣ El insight central - Correlación */}

0 commit comments

Comments
 (0)