Rewrite styles to scss and use i respective components

src/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import Branding from '../Branding/Branding';
+import FooterEnd from '../FooterEnd/FooterEnd';
+import { assetUrl, getItemPageNames, isMobileViewport } from '../../config';
+import { Item } from '../../model';
+import './footer.scss';
+export default function Footer({ items, pageName }: { items: Item[]; pageName: string }) {
+  return (
+    <div className={classNames('footer', { 'is-hidden': !isMobileViewport() && getItemPageNames(items).includes(pageName) })}>
+      <Branding modifier='footer' logoContent={<img src={assetUrl('logo.svg')} width='150px' height='60px' alt='' />}>
+        <span className='footnote'>
+          AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise
+          Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting,
+          strategic partnerships with our customers.
+        </span>
+      </Branding>
+      <FooterEnd />
+    </div>
+  );
+}

src/components/Footer/footer.scss

@@ -0,0 +1,11 @@
+.footer {
+  border-top: 1px solid var(--color-gray-normal);
+  transition: opacity 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 1500ms;
+  opacity: 1;
+  backface-visibility: hidden;
+
+  &.is-hidden {
+    opacity: 0;
+    transition-delay: 0s;
+  }
+}