Quote and Footer

package.json

@@ -23,7 +23,7 @@
     "dev:client:js": "webpack --config config/webpack.client.dev.js",
     "dev:client": "concurrently \"npm:dev:client:types\" \"npm:dev:client:js\"",
     "dev:start": "mkdir -p dist/server && touch dist/server/bundle.js && nodemon dist/server/bundle.js",
-    "dev": "rm -rf dist && concurrently \"npm:dev:server\" \"npm:dev:client\" \"npm:dev:start\"",
+    "dev": "concurrently \"npm:dev:server\" \"npm:dev:client\" \"npm:dev:start\"",
     "start": "node dist/server/bundle.js"
   },
   "author": "gbrochar",

src/client/Footer.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface Link {
+	to: string;
+	text: string;
+}
+
+interface Card {
+	title: string;
+	description: string;
+	links: Array<Link>;
+}
+
+interface FooterProps {
+    elements: Array<Card>;
+}
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Footer(
+	{elements}: FooterProps) {
+	return (
+		<React.Fragment>
+			<div className='container w-50 py-5 d-flex justify-content-between'>
+				{elements.map((elem, index) =>
+					<div
+						key={index}
+						id='imagewithdescription'
+						className='align-top'>
+						<h3 className='font-weight-bold'>
+							{elem.title}
+						</h3>
+						<p
+							dangerouslySetInnerHTML=
+								{{__html: elem.description}}></p>
+						{elem.links.map((link, i) =>
+							<div key={i}>
+								<a href={link.to}>
+									{link.text}
+								</a>
+								<br/>
+							</div>)}
+					</div>)}
+			</div>
+		</React.Fragment>
+	);
+}

src/client/ImagesWithDescription.tsx

@@ -17,7 +17,7 @@ export default function ImagesWithDescription(
 	{images}: imagesWithDescriptionProps) {
 	return (
 		<React.Fragment>
-			<div className='container w-50 d-flex justify-content-between'>
+			<div className='container w-50 py-5 d-flex justify-content-between'>
 				{images.map((elem, index) =>
 					<div
 						key={index}

src/client/Quote.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface QuoteProps {
+	quote: string;
+	author: string;
+	description: string;
+}
+
+/**
+ * @return {jsx} The root component
+ */
+export default function Quote(
+	{quote, author, description}: QuoteProps) {
+	const containerStyle = {
+		backgroundColor: '#f7f7f7',
+	};
+
+	return (
+		<React.Fragment>
+			<div
+				className='container-fluid p-5'
+				style={containerStyle}>
+				<div
+					className='container
+						w-75 d-flex justify-content-center align-items-center'>
+					<blockquote className="blockquote mx-5">
+						<p className="mb-0">{quote}</p>
+						<footer className="blockquote-footer">{author}</footer>
+					</blockquote>
+					<div className='lead w-25 mx-5'>{description}</div>
+				</div>
+			</div>
+		</React.Fragment>
+	);
+}

src/client/Root.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Navbar from './Navbar';
 import Banner from './Banner';
+import Quote from './Quote';
+import Footer from './Footer';
 import ImagesWithDescription from './ImagesWithDescription';
 
 /**
@@ -64,8 +66,7 @@ export default function Root() {
 							ce voyage aurait peu de sens.`,
 					},
 				]}/>
-			{/* eslint-disable */}
+			<Quote
-			{/* <Quote
 				quote={'Not all those who wander are lost.'}
 				author={'J. R. R. Tolkien'}
 				description={`
@@ -94,7 +95,7 @@ export default function Root() {
 						</ul>`,
 						links: [
 							{
-								to: '/contant',
+								to: '/contact',
 								text: `Autres façons de nous contacter`,
 							},
 						],
@@ -105,16 +106,15 @@ export default function Root() {
 						:)`,
 						links: [
 							{
-								to: 'paypal.me/ygarrot',
+								to: 'https://paypal.me/ygarrot',
 								text: 'Paypal',
 							}, {
-								to: 'tipeee.com/curious-roamers',
+								to: 'https://tipeee.com/curious-roamers',
 								text: 'Tipeee',
 							},
 						],
 					},
-				]}/> */}
+				]}/>
-				{/* eslint-enable */}
 		</React.Fragment>
 	);
 }