From 47170c98698558458aa65c6f6d814ae2684ca91c Mon Sep 17 00:00:00 2001 From: Gabriel Chioquetta Date: Thu, 25 Jun 2026 12:58:49 -0300 Subject: [PATCH 1/9] feat: UI/UX improvements for better UX and responsiveness --- app/globals.css | 141 +++++++++++++- src/components/CalculatorLayout.tsx | 27 ++- src/components/Dashboard/index.tsx | 183 +++++++++++------- src/components/FeatureCard.tsx | 65 ++++--- .../calculator/MobileComponents.tsx | 181 +++++++++++++++++ src/components/calculator/ResultCard.tsx | 128 ++++++++++-- .../calculator/SliderInputField.tsx | 87 +++++++-- src/components/error-boundary.tsx | 98 ++++++++++ src/components/index.ts | 25 ++- src/components/theme-toggle.tsx | 20 +- src/components/ui/accordion.tsx | 56 ++++++ src/components/ui/button.tsx | 44 +++-- src/components/ui/card.tsx | 14 +- src/components/ui/input.tsx | 11 +- src/components/ui/skeleton.tsx | 78 ++++++++ 15 files changed, 973 insertions(+), 185 deletions(-) create mode 100644 src/components/calculator/MobileComponents.tsx create mode 100644 src/components/error-boundary.tsx create mode 100644 src/components/ui/accordion.tsx create mode 100644 src/components/ui/skeleton.tsx diff --git a/app/globals.css b/app/globals.css index 11321c8..6905698 100644 --- a/app/globals.css +++ b/app/globals.css @@ -22,6 +22,10 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 160 84% 39%; + --success: 142 76% 36%; + --success-foreground: 0 0% 100%; + --warning: 38 92% 50%; + --warning-foreground: 0 0% 100%; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); @@ -71,6 +75,10 @@ --color-popover: hsl(var(--popover)); --color-card-foreground: hsl(var(--card-foreground)); --color-card: hsl(var(--card)); + --color-success: hsl(var(--success)); + --color-success-foreground: hsl(var(--success-foreground)); + --color-warning: hsl(var(--warning)); + --color-warning-foreground: hsl(var(--warning-foreground)); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); @@ -84,6 +92,8 @@ body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .dark { @@ -93,18 +103,20 @@ body { --card-foreground: 0 0% 98%; --popover: 240 10% 8%; --popover-foreground: 0 0% 98%; - --primary: 160 84% 39%; + --primary: 160 84% 45%; --primary-foreground: 0 0% 100%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; - --accent: 142 76% 36%; + --accent: 142 76% 45%; --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; + --destructive: 0 62.8% 40.6%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; - --ring: 160 84% 39%; + --ring: 160 84% 45%; + --success: 142 76% 45%; + --warning: 38 92% 55%; --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); @@ -140,11 +152,92 @@ body { @apply bg-linear-to-br from-blue-500 to-cyan-600; } .gradient-hero { - @apply bg-linear-to-br from-emerald-100 via-teal-50 to-green-100; + @apply bg-linear-to-br from-emerald-50 via-teal-50 to-green-50; + } + + .safe-area-inset-bottom { + padding-bottom: env(safe-area-inset-bottom); + } + + .safe-area-inset-top { + padding-top: env(safe-area-inset-top); + } +} + +@keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} + +.animate-accordion-down { + animation: accordion-down 0.2s ease-out; +} + +.animate-accordion-up { + animation: accordion-up 0.2s ease-out; +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +.animate-shimmer { + animation: shimmer 2s infinite; + background: linear-gradient( + 90deg, + hsl(var(--muted)) 25%, + hsl(var(--muted-foreground) / 0.3) 50%, + hsl(var(--muted)) 75% + ); + background-size: 200% 100%; +} + +@keyframes pulse-glow { + 0%, 100% { + box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); + } + 50% { + box-shadow: 0 0 0 8px hsl(var(--primary) / 0); } } -/* Remove spinners from number inputs */ +.animate-pulse-glow { + animation: pulse-glow 2s infinite; +} + +@keyframes number-roll { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.animate-number-roll { + animation: number-roll 0.4s ease-out; +} + input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; @@ -155,3 +248,39 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +html { + scroll-behavior: smooth; +} + +::selection { + background-color: hsl(var(--primary) / 0.2); +} + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: hsl(var(--muted)); +} + +::-webkit-scrollbar-thumb { + background: hsl(var(--muted-foreground) / 0.3); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: hsl(var(--muted-foreground) / 0.5); +} diff --git a/src/components/CalculatorLayout.tsx b/src/components/CalculatorLayout.tsx index 5b81540..fe48678 100644 --- a/src/components/CalculatorLayout.tsx +++ b/src/components/CalculatorLayout.tsx @@ -20,39 +20,46 @@ export function CalculatorLayout({ }: Readonly) { return (
-
-
+
+
-
+
- +
+ +
-
+
-
+
{icon}
-

{title}

+
+

{title}

+

+ {description} +

+
-

{description}

+

{description}

( + + + {value} + +
+ {label} +
+
+); + export function Dashboard() { return (
- {/* Hero Section */}
- {/* Background decoration */} -
-
-
+
+
+
-
- {/* Logo & Nav */} +
-
- - - Ferramentas de precisão financeira - +
+
+ + Precisão financeira +
- {/* Hero Content */} -
- + +

Forje seu futuro{" "} - + financeiro - +

- +

Calculadoras de alta precisão para planejamento de independência financeira. Simule investimentos, calcule juros e descubra quando você pode se aposentar. - +

- {/* Stats */} - {[ - { value: "5", label: "Calculadoras" }, - { value: "∞", label: "Precisão Decimal" }, - { value: "100%", label: "Gratuito" }, - ].map((stat, index) => ( -
-
- {stat.value} -
-
- {stat.label} -
-
+ {stats.map((stat) => ( + ))}
-
-
-
+ - {/* Features Grid */} -
- - Ferramentas Disponíveis - + +
+

+ Ferramentas Disponíveis +

+ +
+
-
- {features.map((feature, index) => ( - - ))} + + {features.map((feature, index) => ( + + ))} +
- {/* Footer */} -