💄 Add logo and gradient background to navbar

components/website-frontend/src/components/login.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { ResolverResult, useForm } from 'react-hook-form';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { signIn } from 'next-auth/react';
@@ -83,9 +84,14 @@ export default function Login() {
       <CardHeader className='pb-0'>
         <Link
           href={pages.index}
-          className='flex self-center text-2xl font-semibold mb-2'
+          className='flex self-center mb-4'
         >
-          <span>Pfe Broker</span>
+          <Image
+            src='/name.svg'
+            alt='name'
+            width={150}
+            height={150}
+          />
         </Link>
         <CardTitle className='text-xl font-bold md:text-2xl'>Connectez-vous</CardTitle>
       </CardHeader>

components/website-frontend/src/components/navbar/navbar.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 import Link from 'next/link';
 
 import LoginButton from '@/components/navbar/login-button';
@@ -19,6 +20,14 @@ export default function Navbar(): React.JSX.Element {
   return (
     <header className='flex flex-col lg:flex-row'>
       <div className='flex justify-between items-center'>
+        <Link href={pages.index}>
+          <Image
+            src='/logo.svg'
+            alt='logo'
+            width={250}
+            height={150}
+          />
+        </Link>
         <button
           id='hamburger-menu'
           aria-label='hamburger-menu'

components/website-frontend/src/components/register.tsx

@@ -1,6 +1,7 @@
 import { FieldErrors, ResolverResult, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
@@ -103,9 +104,14 @@ export default function Register(props: Readonly<RegisterProps>): React.JSX.Elem
       <CardHeader className='pb-0'>
         <Link
           href={pages.index}
-          className='flex self-center text-2xl font-semibold mb-2'
+          className='flex self-center mb-4'
         >
-          <span>Pfe Broker</span>
+          <Image
+            src='/name.svg'
+            alt='name'
+            width={150}
+            height={150}
+          />
         </Link>
         <CardTitle className='text-xl font-bold md:text-2xl'>Création du compte</CardTitle>
       </CardHeader>