chore(branding): update logos on all application

__test__/app/sidebarNav.test.tsx

@@ -44,7 +44,9 @@ describe('<SidebarNav />', () => {
 		const sidebar = screen.getByRole('region', {
 			name: 'sidebar',
 		});
-		const logo = screen.getByTitle('Shortvid.io Logo').parentNode;
+		const logo = screen.getByRole('img', {
+			name: 'Shortvid.io logo',
+		});
 		const contributingLink = screen.getByRole('link', {
 			name: 'Contributing',
 		});

app/layout.tsx

@@ -9,7 +9,7 @@ export const metadata = {
 	description:
 		'This application is developed and maintained by the volunteer organizers of the Lyon JS Meetup. It aims to facilitate the generation of video for the social networks of the association.',
 	icons: {
-		icon: '/branding/monogram-white.svg',
+		icon: '/branding/monogram.svg',
 	},
 	openGraph: {
 		type: 'website',

src/app/components/landingPage/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import Image from 'next/image';
 
-import {Logo} from '../../Logo';
 import {PoweredByVercel} from '../../PoweredByVercel';
 import {SwitchThemeButtons} from '../../SwitchThemeButtons';
 
@@ -9,7 +9,13 @@ import styles from '../../../../styles/app/layout/footer.module.css';
 export const Footer = () => {
 	return (
 		<footer className={styles.footer}>
-			<Logo className={styles.footerLogo} />
+			<Image
+				src="/branding/monogram.svg"
+				alt="Logo"
+				width={70}
+				height={70}
+				className={styles.footerLogo}
+			/>
 			<div className={styles.bottomBar}>
 				<a
 					href="https://vercel.com?utm_source=lyonjs&utm_campaign=oss"

src/app/components/landingPage/Hero.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 
 import buttonStyles from '../../../../styles/app/common/buttons.module.css';
@@ -6,6 +7,12 @@ import styles from '../../../../styles/app/layout/landing/hero.module.css';
 export const Hero = () => {
 	return (
 		<section className={styles.hero}>
+			<Image
+				src="/branding/full-logo-with-mono-vertical.svg"
+				alt="Shortvid.io"
+				width={200}
+				height={150}
+			/>
 			<h1>Simplify your social media communications</h1>
 			<h2>
 				Choose among various templates to customise with your assets and

src/app/components/sidebar/navigation/Header.tsx

@@ -1,16 +1,9 @@
 import {ReactNode} from 'react';
-import {MuseoModerno} from 'next/font/google';
+import Image from 'next/image';
 import Link from 'next/link';
 
-import {Logo} from '../../../Logo';
-
 import styles from '../../../../../styles/app/components/sidebar/sidebar.module.css';
 
-const wordmarkFont = MuseoModerno({
-	weight: '900',
-	subsets: ['latin'],
-});
-
 export const Header: React.FC<{
 	expanded: boolean;
 	className?: string;
@@ -20,8 +13,21 @@ export const Header: React.FC<{
 		<header className={className}>
 			<nav>
 				<Link href="/" className={styles.logoLink}>
-					<Logo />
-					{expanded && <h2 className={wordmarkFont.className}>Shortvid.io</h2>}
+					{expanded ? (
+						<Image
+							src="/branding/full-logo.svg"
+							alt="Shortvid.io logo"
+							width={170}
+							height={150}
+						/>
+					) : (
+						<Image
+							src="/branding/monogram.svg"
+							alt="Shortvid.io monogram"
+							width={70}
+							height={70}
+						/>
+					)}
 				</Link>
 				{children}
 			</nav>

styles/app/layout/footer.module.css

@@ -21,7 +21,7 @@
 		top: -20px;
 		background: var(--color-background);
 		padding-inline: 20px;
-		width: 60px;
+		width: 80px;
 	}
 
 	.vercelLight {

styles/app/layout/landing/hero.module.css

@@ -1,16 +1,23 @@
 .hero {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	text-align: center;
 	padding: 80px 10px;
 
-	h1 {
+	& img {
+		padding-bottom: 5rem;
+	}
+
+	& h1 {
 		max-width: 700px;
 		font-size: 3.5rem;
-		font-weight: 700;
+		font-weight: 900;
 		line-height: 1.2;
 		margin: 0 auto 40px;
 	}
 
-	h2 {
+	& h2 {
 		font-size: 1.3rem;
 		font-weight: 300;
 		margin-bottom: 80px;
@@ -32,11 +39,11 @@
 
 @media screen and (max-width: 570px) {
 	.hero {
-		h1 {
+		& h1 {
 			font-size: 2.5rem;
 		}
 
-		h2 {
+		& h2 {
 			font-size: 1rem;
 		}
 	}