add learn more section

src/components/HomepageCards/index.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { useColorMode } from '@docusaurus/theme-common';
+
+function getImage(theme, imageName) {
+  return require(`@site/static/img/cards/${imageName}-${theme}.png`).default;
+}
 
 const FeatureList = [
   {
@@ -116,15 +121,85 @@ const GetStartedList = [
   },
 ];
 
+const LearnMoreList = [
+  {
+    title: 'Ask a question on Slack',
+    Img: require('@site/static/img/cards/aerie-learn-slack.png').default,
+    size: 'col--4',
+    link: '/aerie-docs/category/planning/',
+    linkTitle: 'Planning docs',
+    description: (
+      <>Say hi or get help by joining our Slack conversations or posting a question in our GitHub discussions.</>
+    ),
+  },
+  {
+    title: 'Discuss or contribute on Github',
+    Img: require('@site/static/img/cards/aerie-learn-github.png').default,
+    size: 'col--4',
+    link: '/aerie-docs/category/planning/',
+    linkTitle: 'Planning docs',
+    description: (
+      <>Post a question in GitHub discussions, or contribute back and help make Aerie even better than it is today.</>
+    ),
+  },
+  {
+    title: 'Sign up for news and updates',
+    // Svg: require('@site/static/img/cards/undraw_docusaurus_react.svg').default,
+    Img: require('@site/static/img/cards/aerie-learn-googlegroup.png').default,
+    size: 'col--4',
+    link: '/aerie-docs/category/planning/',
+    linkTitle: 'Planning docs',
+    description: <>Stay up-to-date on the latest news and releases by joining the Aerie Users Google Group.</>,
+  },
+  {
+    title: 'Dive into the docs',
+    // Svg: require('@site/static/img/cards/undraw_docusaurus_react.svg').default,
+    Img: require('@site/static/img/cards/aerie-getstarted-opensource-light.png').default,
+    size: 'col--4',
+    link: 'https://opensource.org/license/mit/',
+    linkTitle: 'MIT License',
+    description: <>See the details of how different components work in Aerie.</>,
+  },
+  {
+    title: 'Explore a universe of extensions',
+    // Svg: require('@site/static/img/cards/undraw_docusaurus_react.svg').default,
+    Img: require('@site/static/img/cards/aerie-learn-extensions.png').default,
+    size: 'col--4',
+    link: '/aerie-docs/introduction/#fast-track',
+    linkTitle: 'Coming soon',
+    description: (
+      <>
+        Project and community members have begun to build a marketplace of extensions you can use to jump start your
+        modeling and ground system integration efforts.
+      </>
+    ),
+  },
+  {
+    title: 'Something else?',
+    // Svg: require('@site/static/img/cards/undraw_docusaurus_react.svg').default,
+    Img: require('@site/static/img/cards/aerie-getstarted-customize-light.png').default,
+    size: 'col--4',
+    link: '[email protected]',
+    linkTitle: '[email protected]',
+    description: <>...</>,
+  },
+];
+
 function Feature({ Img, title, description, size, link, linkTitle }) {
+  const { colorMode, setColorMode } = useColorMode();
+
+  console.log(colorMode);
+
   return (
     <div className={clsx(`col ${styles.featureSection}`, size)}>
       <div className={styles.card}>
         <div className="card__header">
           <h3>{title}</h3>
         </div>
         <div className={clsx(`card__body ${styles.cardBody}`)}>
-          <p classname={styles.description}>{description}</p>
+          <div className={styles.cardDescription}>
+            <p>{description}</p>
+          </div>
           <img src={Img} className={styles.cardImg} alt={title} />
           {link && (
             <div className={styles.cardFooter}>
@@ -167,3 +242,17 @@ export function HomepageGetStarted() {
     </section>
   );
 }
+
+export function HomepageLearnMore() {
+  return (
+    <section className={styles.cardSection}>
+      <div className="container">
+        <div className="row">
+          {LearnMoreList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageCards/styles.module.css

@@ -46,7 +46,7 @@
   /* overflow: visible; */
   /* background-color: lightpink; */
   max-width: none;
-  min-height: 320px;
+  min-height: 300px;
 }
 
 .cardFooter {
@@ -63,3 +63,7 @@
   z-index: 10;
   /* background-color: lightblue; */
 }
+
+.cardDescription {
+  max-width: 32rem;
+}

src/pages/index.js

@@ -5,7 +5,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import styles from './index.module.css';
 
-import { HomepageFeatures, HomepageGetStarted } from '@site/src/components/HomepageCards';
+import { HomepageFeatures, HomepageGetStarted, HomepageLearnMore } from '@site/src/components/HomepageCards';
 import HomepageTestimonials from '@site/src/components/HomepageTestimonials';
 import { HomepageMissionPartners } from '@site/src/components/HomepageLogos';
 import { HomepageVideo } from '@site/src/components/HomepageVideo';
@@ -43,14 +43,16 @@ export default function Home() {
   return (
     <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
       <HomepageHeader />
-      <main>
+      <main className={styles.siteBackground}>
         <HomepageMissionPartners />
         <HomepageVideo />
         <h2 className={styles.sectionHeader}>Features</h2>
         <HomepageFeatures />
         <HomepageTestimonials />
         <h2 className={styles.sectionHeader}>Get Started</h2>
         <HomepageGetStarted />
+        <h2 className={styles.sectionHeader}>Learn More</h2>
+        <HomepageLearnMore />
       </main>
     </Layout>
   );

src/pages/index.module.css

@@ -2,6 +2,10 @@
   background: var(--ifm-color-secondary-light);
 } */
 
+.siteBackground {
+  background: var(--ifm-color-secondary-lighter);
+}
+
 .hero {
   align-items: left;
 }