style/some more style (#8)

* feature: add release notes dialog

* feature: parse release note date

* feat: switch to dayjs

* feat(locales): add release notes in English and French with new entries for UI improvements and release notes dialog
refactor(release-notes): update ReleaseNote model to use title and content keys for localization
feat(release-notes-dialog): implement localized rendering of release notes with date formatting
feat(date-utils): create date utility functions to handle locale-specific date formatting and parsing

* style(layout): update text color to gray-700 for better visibility in Footer and Header components and clean up unnecessary code in Header component

* style(Header.tsx): update header layout and styles for improved aesthetics and user experience

---------

Co-authored-by: lucasnevespereira <pereiraneveslucas@gmail.com>

src/features/layout/Footer.tsx

@@ -39,7 +39,7 @@ export const Footer = async () => {
           {SOCIAL_LINKS.map(({ href, icon: Icon, label }) => (
             <a
               aria-label={label}
-              className="btn btn-ghost btn-sm btn-circle"
+              className="btn btn-ghost btn-sm btn-circle text-gray-700"
               href={href}
               key={label}
               rel="noopener noreferrer"
@@ -51,7 +51,7 @@ export const Footer = async () => {
         </div>
 
         {/* Navigation Links */}
-        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-center">
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-center text-gray-700">
           {NAVIGATION(t).map(({ name, href }) => (
             <Link
               href={href}

src/features/layout/Header.tsx

@@ -5,11 +5,10 @@ import { LogIn, UserPlus, LogOut, User } from "lucide-react";
 
 import { useI18n } from "locales/client";
 import Logo from "@public/logo.png";
+import { ReleaseNotesDialog } from "@/features/release-notes";
 import { useLogout } from "@/features/auth/model/useLogout";
 import { useSession } from "@/features/auth/lib/auth-client";
 import { Link } from "@/components/ui/link";
-import { ReleaseNotesDialog } from "@/features/release-notes";
-
 
 export const Header = () => {
   const session = useSession();
@@ -24,24 +23,32 @@ export const Header = () => {
   };
 
   return (
-    <div className="navbar bg-base-100 px-0">
+    <div className="navbar bg-base-100 px-4">
       {/* Logo and Title */}
       <div className="navbar-start">
-        <Link className="btn btn-ghost text-xl" href="/">
-          <Image alt="workout cool logo" className="w-8" height={32} src={Logo} width={32} />
-          <span className="font-semibold hidden sm:inline">Workout.cool</span>
+        <Link className="group flex items-center space-x-3 rounded-xl bg-gradient-to-r px-4 py-2 transition-all duration-200 " href="/">
+          <div className="relative">
+            <Image
+              alt="workout cool logo"
+              className="h-8 w-8 transition-transform duration-200 group-hover:rotate-[20deg] group-hover:scale-110"
+              height={32}
+              src={Logo}
+              width={32}
+            />
+            <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
+          </div>
+          <div className="flex flex-col">
+            <span className="font-bold transition-colors duration-200 group-hover:text-blue-400">Workout.cool</span>
+          </div>
         </Link>
-
-        <div className="badge badge-secondary badge-sm ml-2">Beta</div>
       </div>
 
       {/* User Menu */}
       <div className="navbar-end">
         <ReleaseNotesDialog />
-        
         <div className="dropdown dropdown-end">
           <div className="btn btn-ghost btn-circle avatar" role="button" tabIndex={0}>
-            <div className="w-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-medium">
+            <div className="w-8 rounded-full bg-primary text-primary-content !flex items-center justify-center text-sm font-medium">
               {userAvatar || <User className="w-4 h-4" />}
             </div>
           </div>
@@ -52,9 +59,8 @@ export const Header = () => {
                 {t("commons.profile")}
               </Link>
             </li>
-            <li>
-              <hr className="my-1" />
-            </li>
+
+            <hr className="my-1" />
 
             {!session.data ? (
               <>