diff --git a/src/App.css b/src/App.css index d814774..2c3f051 100644 --- a/src/App.css +++ b/src/App.css @@ -253,21 +253,71 @@ button[type="submit"]:disabled { animation: slideIn 0.5s ease-out 0.1s; } +.app-header { + display: flex; + justify-content: flex-end; + margin-bottom: 1.5rem; + animation: fadeIn 0.5s ease-out; +} + +.home-button { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.7rem 1.5rem; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + text-decoration: none; + border-radius: 12px; + font-weight: 600; + font-size: 0.95rem; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + letter-spacing: 0.3px; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.home-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); + background: linear-gradient(135deg, #5a67d8 0%, #6b3fa0 100%); +} + +.home-button:active { + transform: translateY(0); + box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4); +} + +.home-icon { + font-size: 1.1em; + display: inline-block; + transition: transform 0.3s ease; +} + +.home-button:hover .home-icon { + transform: scale(1.2); +} + @media (max-width: 640px) { #root { padding: 1rem; } - + .App { padding: 2rem 1.5rem; } - + .form-container, .amigos-list { padding: 1.75rem; } - + h1 { font-size: 2em; } + + .home-button { + padding: 0.6rem 1.2rem; + font-size: 0.9rem; + } } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 39d6c15..f7084f4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -88,6 +88,12 @@ function App() { return (