Nice animation for logo link

js/components/Footer.js

@@ -9,7 +9,7 @@ export default function Footer({ items, pageName }) {
 
   return (
     <Branding
-      logoContent={<img src="/assets/logo.svg"/>}
+      logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
     >
       <span className="footnote">
         AOE is a leading provider of Enterprise Open Source web solutions.

js/components/Header.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import Branding from './Branding';
 import Link from './Link';
+import LogoLink from './LogoLink';
+import { getItemPageNames } from '../../common/config';
+
+export default function Header({ pageName }) {
+
+  const smallLogo = pageName !== 'index';
 
-export default function Header() {
   return (
     <Branding
-      logoContent={<Link pageName="index"><img src="/assets/logo.svg"/></Link>}
+      logoContent={<LogoLink small={smallLogo} />}
     >
       <div className="nav">
         <div className="nav__item">

js/components/LogoLink.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import Link from './Link';
+
+export default function LogoLink({ small=false }) {
+  return (
+    <Link pageName="index" className={classNames('logo-link', { 'logo-link--small': small })}>
+      <span className="logo-link__icon icon icon--back"></span>
+      <span className="logo-link__slide">
+        <img className="logo-link__img" src="/assets/logo.svg" width="150px" height="60px" />
+        <span className="logo-link__text">
+          Technology Radar
+        </span>
+      </span>
+    </Link>
+  );
+}