Add new logo

components/Nav.tsx

@@ -70,7 +70,13 @@ const Nav: FC = () => {
 	return (
 		<Bar>
 			<div className='logo' onClick={() => router.push('/')}>
-				<Image className='logo-image' src='/logo.jpg' alt='Logo Image' width={48} height={48} />
+				<Image
+					className='logo-image'
+					src={dark ? '/light-logo.svg' : '/dark-logo.svg'}
+					alt='Logo Image'
+					width={48}
+					height={48}
+				/>
 				<h1>Hazem Krimi</h1>
 			</div>
 			<div className='buttons'>

public/dark-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1010.51 567.82"><defs><style>.cls-1{fill:#262626;}</style></defs><title>dark-logo</title><polygon points="478.54 0 221.41 0 0 283.91 257.13 283.91 478.54 0"/><polygon class="cls-1" points="0 283.91 257.13 283.91 477.86 567.82 220.74 567.82 0 283.91"/><polygon class="cls-1" points="531.97 0 789.09 0 1010.51 283.91 753.38 283.91 531.97 0"/><polygon points="1010.51 283.91 753.38 283.91 532.64 567.82 789.77 567.82 1010.51 283.91"/></svg>

public/light-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 872.54 490.3"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ccc;}</style></defs><title>light-logo</title><g id="Hazem_logo" data-name="Hazem logo"><polygon class="cls-1" points="413.2 0 191.18 0 0 245.15 222.02 245.15 413.2 0"/><polygon class="cls-2" points="0 245.15 222.02 245.15 412.62 490.3 190.6 490.3 0 245.15"/><polygon class="cls-2" points="459.34 0 681.36 0 872.54 245.15 650.52 245.15 459.34 0"/><polygon class="cls-1" points="872.54 245.15 650.52 245.15 459.92 490.3 681.94 490.3 872.54 245.15"/></g></svg>