fix banner button

src/client/Banner.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Link from './Link';
 
 interface Link {
-	to: string;
+	status: string;
 	text: string;
 }
 
@@ -10,14 +10,15 @@ interface BannerProps {
     title: string;
     description: string;
     links: Array<Link>;
-    image: string;
+	image: string;
+	setStatus: any;
 }
 
 /**
  * @return {jsx} The root component
  */
 export default function Banner(
-	{title, description, links, image}: BannerProps) {
+	{setStatus, title, description, links, image}: BannerProps) {
 	let imgUrl;
 	if (image.startsWith('/static/images/')) {
 		imgUrl = image;
@@ -61,11 +62,11 @@ export default function Banner(
 						<br />
 						{links.map((elem, index) =>
 							<p key={index} className='lead mt-2'>
-								<Link
+								<button
 									className='btn btn-info btn-lg
 										font-weight-bold'
-									to={elem.to}
-									text={elem.text} />
+									onClick={() => setStatus(elem.status)}>
+									{elem.text}</button>
 							</p>)}
 					</div>
 				</div>

src/client/Blog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Banner from './Banner';
+import Footer from './Footer';
 
 /**
  * @return {jsx} The homepage component
@@ -7,20 +7,48 @@ import Banner from './Banner';
 export default function Blog() {
 	return (
 		<React.Fragment>
-			<Banner
-				title={`Un voyage à travers l'Europe`}
-				description={`
-				On vous raconte nos aventures à travers l'Europe.\n
-				Nous voyageons en stop et sans argent.\n
-				On loge chez l'habitant ou dehors dans des hamacs.`}
-				links={[
+			<Footer
+				elements={[
 					{
-						to: '/blog',
-						text: 'Notre carnet de voyage',
+						title: 'À propos',
+						description: `Nous sommes deux jeunes de 23 ans à la 
+						recherche d'aventures et de réponses à travers 
+						l'Europe`,
+						links: [
+							{
+								to: '/about',
+								text: 'Plus de détails',
+							},
+						],
+					}, {
+						title: 'Nous contacter',
+						description:
+						<ul>
+							<li>curious.roamers@gmail.com</li>
+							<li>06 37 11 28 22</li>
+						</ul>,
+						links: [
+							{
+								to: '/contact',
+								text: `Autres façons de nous contacter`,
+							},
+						],
+					}, {
+						title: 'Donation',
+						description: `Si vous voulez contribuer à financer nos 
+						futurs voyages ou simplement nous aider financièrement 
+						:)`,
+						links: [
+							{
+								to: 'https://paypal.me/ygarrot',
+								text: 'Paypal',
+							}, {
+								to: 'https://tipeee.com/curious-roamers',
+								text: 'Tipeee',
+							},
+						],
 					},
-				]}
-				image={'map.jpeg'}
-			/>
+				]}/>
 		</React.Fragment>
 	);
 }

src/client/Home.tsx

@@ -4,13 +4,18 @@ import Quote from './Quote';
 import Footer from './Footer';
 import ImagesWithDescription from './ImagesWithDescription';
 
+interface HomeProps {
+	setStatus: any;
+}
+
 /**
  * @return {jsx} The homepage component
  */
-export default function Home() {
+export default function Home({setStatus}: HomeProps) {
 	return (
 		<React.Fragment>
 			<Banner
+				setStatus={setStatus}
 				title={`Un voyage à travers l'Europe`}
 				description={`
 				On vous raconte nos aventures à travers l'Europe.\n
@@ -18,7 +23,7 @@ export default function Home() {
 				On loge chez l'habitant ou dehors dans des hamacs.`}
 				links={[
 					{
-						to: '/blog',
+						status: 'Blog',
 						text: 'Notre carnet de voyage',
 					},
 				]}

src/client/Root.tsx

@@ -9,12 +9,12 @@ import Contact from './Contact';
  * @return {jsx} The root component
  */
 export default function Root() {
-	const [page, setPage] = useState(<Home />);
 	const [navbarStatus, setNavbarStatus] = useState('Home');
+	const [page, setPage] = useState(<Home setStatus={setNavbarStatus} />);
 
 	useEffect(() => {
 		if (navbarStatus == 'Home') {
-			setPage(<Home />);
+			setPage(<Home setStatus={setNavbarStatus} />);
 		} else if (navbarStatus == 'Blog') {
 			setPage(<Blog />);
 		} else if (navbarStatus == 'About') {