add callout

app/about/page.module.css

@@ -0,0 +1,39 @@
+.container {
+    padding: 0 2rem;
+  }
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start; /* Change to flex-start to left-align items */
+    min-height: 100vh;
+    padding-top: 4rem; /* Add padding to avoid overlap with the navbar */
+  }
+
+  .title {
+    margin: 0;
+    line-height: 1.15;
+    font-size: 4rem;
+    text-align: left; /* Change to left-align */
+    color: var(--primary-teal);
+    font-family: 'Visuelt', sans-serif;
+    margin-bottom: 2rem; /* Add some space below the title */
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+    text-align: left; /* Change to left-align */
+    color: var(--primary-black);
+    font-family: 'Roboto', sans-serif;
+    margin-bottom: 1rem;
+  }
+
+  .paragraph {
+    font-size: 1rem;
+    text-align: left; /* Change to left-align */
+    color: var(--primary-black);
+    font-family: 'HK Nova', sans-serif;
+    margin-bottom: 1rem;
+  }
+

app/about/page.tsx

@@ -1,4 +1,4 @@
-import styles from '../../styles/Home.module.css';
+import styles from './page.module.css';
 
 export const metadata = {
   title: 'About - RogueApps',

app/components/Callout.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import styles from '../../styles/components/Callout.module.css';
+
+export default function Callout() {
+  return (
+    <div className={styles.callout}>
+      <h3 className={styles.calloutTitle}>Psst! RogueApps is new! We'd love for you to contribute!</h3>
+      <p className={styles.calloutText}>
+        Help us document emerging OAuth application tradecraft. If you've ever seen a RogueApp in the wild, please contribute to the project!
+      </p>
+      <Link href="/contribute" legacyBehavior>
+        <a className={styles.calloutButton}>Contribute</a>
+      </Link>
+    </div>
+  );
+}
+
+

app/components/Footer.tsx

@@ -1,9 +1,10 @@
 import styles from '../../styles/components/Footer.module.css';
 
 export default function Footer() {
+  const currentYear = new Date().getFullYear();
   return (
     <footer className={styles.footer}>
-      © 2024 Huntress. All Rights Reserved.
+    <p> © {currentYear} | <a href="https://huntress.com"> Huntress</a> | All Rights Reserved.</p>
     </footer>
   );
 }

app/contribute/page.module.css

@@ -0,0 +1,39 @@
+.container {
+    padding: 0 2rem;
+  }
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start; /* Change to flex-start to left-align items */
+    min-height: 100vh;
+    padding-top: 4rem; /* Add padding to avoid overlap with the navbar */
+  }
+
+  .title {
+    margin: 0;
+    line-height: 1.15;
+    font-size: 4rem;
+    text-align: left; /* Change to left-align */
+    color: var(--primary-teal);
+    font-family: 'Visuelt', sans-serif;
+    margin-bottom: 2rem; /* Add some space below the title */
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+    text-align: left; /* Change to left-align */
+    color: var(--primary-black);
+    font-family: 'Roboto', sans-serif;
+    margin-bottom: 1rem;
+  }
+
+  .paragraph {
+    font-size: 1rem;
+    text-align: left; /* Change to left-align */
+    color: var(--primary-black);
+    font-family: 'HK Nova', sans-serif;
+    margin-bottom: 1rem;
+  }
+

app/contribute/page.tsx

@@ -1,4 +1,4 @@
-import styles from '../../styles/Home.module.css';
+import styles from './page.module.css';
 
 export const metadata = {
   title: 'Contribute - RogueApps',

app/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { RogueApp } from '../lib/types';
 import styles from '../styles/Home.module.css';
+import Callout from './components/Callout';
 
 export default function Home() {
   const [rogueApps, setRogueApps] = useState<RogueApp[]>([]);
@@ -36,22 +37,18 @@ export default function Home() {
   return (
     <div className={styles.container}>
       <main className={styles.main}>
-        {expandedCard === null && (
-          <>
-            <h1 className={styles.title}>RogueApps</h1>
-            <h3 className={styles.poweredBy}>
-              When Good Apps Go Rogue | Powered by <a href="https://www.huntress.com" target="_blank" rel="noopener noreferrer">Huntress</a>.
-            </h3>
-            <input
-              type="text"
-              placeholder="Search..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className={styles.search}
-            />
-          </>
-        )}
-
+        <h1 className={styles.title}>RogueApps</h1>
+        <p className={styles.poweredBy}>
+          Powered by <a href="https://www.huntress.com" target="_blank" rel="noopener noreferrer">Huntress</a>
+        </p>
+        <input
+          type="text"
+          placeholder="Search..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className={styles.search}
+        />
+        <Callout />
         <div className={`${styles.grid} ${expandedCard !== null ? styles.hidden : ''}`}>
           {filteredApps.map((app, index) => (
             <div

public/rogueapps.json

@@ -13,7 +13,7 @@
         "https://www.huntress.com/blog/legitimate-apps-as-traitorware-for-persistent-microsoft-365-compromise",
         "https://cybercorner.tech/malicious-usage-of-em-client-in-business-email-compromise/"
       ],
-      "permissions": ["Microsoft Graph - EWS.AccessAsUser.All- Delegated,", "Microsoft Graph - offline_access - Delegated", "Microsoft Graph - email - Delegated", "Microsoft Graph - openid - Delegated" ]
+      "permissions": ["Microsoft Graph - EWS.AccessAsUser.All- Delegated", "Microsoft Graph - offline_access - Delegated", "Microsoft Graph - email - Delegated", "Microsoft Graph - openid - Delegated" ]
     }
   ]
 

styles/components/Callout.module.css

@@ -0,0 +1,38 @@
+.callout {
+    background-color: var(--primary-teal);
+    color: var(--primary-black);
+    padding: 2rem;
+    border-radius: 10px;
+    text-align: center;
+    margin: 2rem 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .calloutTitle {
+    margin: 0 0 1rem;
+    font-size: 2rem;
+    font-family: 'Visuelt', sans-serif;
+  }
+
+  .calloutText {
+    margin: 0 0 2rem;
+    font-size: 1.2rem;
+    font-family: 'HK Nova', sans-serif;
+  }
+
+  .calloutButton {
+    background-color: var(--primary-blue);
+    color: var(--white-2);
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 1rem;
+    font-family: 'Roboto', sans-serif;
+    cursor: pointer;
+  }
+
+  .calloutButton:hover {
+    background-color: var(--primary-blue);
+  }
+