Merge pull request #206 from openid/interop/website-update

updated interop website homepage

Author: ogazitt

interop/authzen-interop-website/src/components/HomepageFeatures/index.js

@@ -1,64 +1,70 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
 const FeatureList = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/openid.png').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/openid.png').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/openid.png').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
+    title: 'Architecture',
+    image: '/img/architecture.png',
+    link: '/docs/intro'
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({image, title, link}) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx('col col--12')}>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h1">{title}</Heading>
+      </div>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <Link to={link}>
+          <img src={image} alt={title} />
+        </Link>
       </div>
+    </div>
+  );
+}
+
+function Video({title}) {
+  return (
+    <div className={clsx('col col--12')}>
       <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+        <Heading as="h1">{title}</Heading>
+      </div>
+      <div className={`text--center ${styles.lg}`}>
+        <iframe width="800px" height="450px" src="https://www.youtube.com/embed/OtwEUeYDwBo?si=rDcpicU6m9QpAjD9" title="AuthZEN video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      </div>
+      <div className={`text--center ${styles.md}`}>
+        <iframe width="560px" height="315px" src="https://www.youtube.com/embed/OtwEUeYDwBo?si=rDcpicU6m9QpAjD9" title="AuthZEN video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      </div>
+      <div className={`text--center ${styles.sm}`}>
+        <iframe src="https://www.youtube.com/embed/OtwEUeYDwBo?si=rDcpicU6m9QpAjD9" title="AuthZEN video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
       </div>
     </div>
   );
 }
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
+    <>
+      <section className={styles.features}>
+        <div className="container">
+          <div className="row">
+            {FeatureList.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+
+      <section className={styles.features}>
+        <div className="container">
+          <div className="row">
+            <Video title="Intro video" />
+          </div>
+        </div>
+      </section>
+    </>
   );
 }

interop/authzen-interop-website/src/components/HomepageFeatures/styles.module.css

@@ -9,3 +9,39 @@
   height: 200px;
   width: 200px;
 }
+
+@media screen and (min-width: 1024px) {
+  .lg {
+    display: block;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  .lg {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .md {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 1024px), (max-width: 767px) {
+  .md {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .sm {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .sm {
+    display: none;
+  }
+}

interop/authzen-interop-website/src/pages/index.js

@@ -36,7 +36,7 @@ export default function Home() {
       description={siteConfig.tagline}>
       <HomepageHeader />
       <main>
-        {/* <HomepageFeatures /> */}
+        <HomepageFeatures />
       </main>
     </Layout>
   );