add new style

src/app.rs

@@ -11,15 +11,11 @@ pub fn App() -> impl IntoView {
     view! {
         <Stylesheet href="/pkg/rust_leptos.css"/>
 
-        <Title text="Welcome to Leptos"/>
+        <Title text="Bienvenue à la maison"/>
 
-        <div class="dark:bg-black dark:text-lime-500 dark:hover:text-lime-400 h-screen flex flex-col">
+        <div class="dark:bg-prim dark:text-second h-screen flex flex-col">
             <Router>
-                <nav class="flex gap-5 px-2 py-1 ">
-                    <a href="/">Home</a>
-                    <A href="/liens">Liens</A>
-                    <a href="/formulaire">Formulaire</a>
-                </nav>
+                <Navigation />
                 <main class="flex-1">
                     <Routes>
                         <Route path="/" view=move || view! { <Home/> }/>
@@ -34,10 +30,21 @@ pub fn App() -> impl IntoView {
     }
 }
 
+#[component]
+pub fn Navigation() -> impl IntoView {
+    view! {
+        <nav class="flex gap-5 px-2 py-1 text-lg">
+            <A href="/" class="hover:text-third border-b border-transparent hover:border-third inline-block transition-colors">Home</A>
+            <A href="/liens" class="hover:text-third hover:border-b border-third inline-block transition-colors">Liens</A>
+            <A href="/formulaire" class="hover:text-third hover:border-b border-third inline-block transition-colors">Formulaire</A>
+        </nav>
+    }
+}
+
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
-        <h1>Home</h1>
+        <h1 class="m-2">Home</h1>
     }
 }