3 files changed, 57 insertions, 0 deletions
diff --git a/src/frontend/components/Footer/Footer.styled.ts b/src/frontend/components/Footer/Footer.styled.ts
new file mode 100644
index 0000000..513039b
--- /dev/null
+++ b/src/frontend/components/Footer/Footer.styled.ts
@@ -0,0 +1,16 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Footer = styled.footer`
+  position: relative;
+  padding: 65px 9%;
+  background-color: ${({ theme }) => theme.colors.otelGray};
+
+  * {
+    color: ${({ theme }) => theme.colors.white};
+    font-size: ${({ theme }) => theme.sizes.dSmall};
+    font-weight: ${({ theme }) => theme.fonts.regular};
+  }
+`;
diff --git a/src/frontend/components/Footer/Footer.tsx b/src/frontend/components/Footer/Footer.tsx
new file mode 100644
index 0000000..8831271
--- /dev/null
+++ b/src/frontend/components/Footer/Footer.tsx
@@ -0,0 +1,37 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useState } from 'react';
+import * as S from './Footer.styled';
+import SessionGateway from '../../gateways/Session.gateway';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import PlatformFlag from '../PlatformFlag';
+
+const currentYear = new Date().getFullYear();
+
+const { userId } = SessionGateway.getSession();
+
+const Footer = () => {
+  const [sessionId, setSessionId] = useState('');
+
+  useEffect(() => {
+    setSessionId(userId);
+  }, []);
+
+  return (
+    <S.Footer>
+      <div>
+        <p>This website is hosted for demo purpose only. It is not an actual shop.</p>
+        <p>
+          <span data-cy={CypressFields.SessionId}>session-id: {sessionId}</span>
+        </p>
+      </div>
+      <p>
+        @ {currentYear} OpenTelemetry (<a href="https://github.com/open-telemetry/opentelemetry-demo">Source Code</a>)
+      </p>
+      <PlatformFlag />
+    </S.Footer>
+  );
+};
+
+export default Footer;
diff --git a/src/frontend/components/Footer/index.ts b/src/frontend/components/Footer/index.ts
new file mode 100644
index 0000000..0961dac
--- /dev/null
+++ b/src/frontend/components/Footer/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Footer';