added links to marvel for work in progress parts (#297)

src/authentication/AuthenticationSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
+import { WorkInProgress } from "../components/work-in-progress/WorkInProgress";
 
-export const AuthenticationSection = () => {
+export const AuthenticationSection = () => (
-  return <>The Authentication Page</>;
+  <WorkInProgress marvelLink="https://marvelapp.com/prototype/bh91013/screen/75647039" />
-};
+);

src/components/work-in-progress/WorkInProgress.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./work-in-progress.css";
+
+type WorkInProgressProps = {
+  marvelLink: string;
+};
+
+export const WorkInProgress = ({ marvelLink }: WorkInProgressProps) => (
+  <div>
+    This page is not completed yet, but this is what it's going to look like:
+    <div className="container">
+      <iframe className="responsive-iframe" src={marvelLink}></iframe>
+    </div>
+  </div>
+);

src/components/work-in-progress/work-in-progress.css

@@ -0,0 +1,18 @@
+
+.container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+/* Then style the iframe to fit in the container div with full height and width */
+.responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}

src/identity-providers/IdentityProvidersSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
+import { WorkInProgress } from "../components/work-in-progress/WorkInProgress";
 
-export const IdentityProvidersSection = () => {
+export const IdentityProvidersSection = () => (
-  return <>The Identity Providers Page</>;
+  <WorkInProgress marvelLink="https://marvelapp.com/prototype/55c2d8f/screen/75697040" />
-};
+);