Added dev team credits and dev team logo to footer under REACH US AT (#870)

* Fix: added dev team credits and dev team logo to footer under REACH US AT

* Changed footer credits to 'Website Made By' and moved styling from FooterLinkElement to Footer SCSS. Fixed placeholder link width issue when initiative image is missing.

* added new line at end of footer.module.scss file

Author: daanniill

components/Footer.js

@@ -98,6 +98,36 @@ function Footer() {
             <a className={styles['link-footer']} href="mailto: acm@ucla.edu">
               <span className="footer-text">acm@ucla.edu</span>
             </a>
+            <h3 className={styles['footer-header']}>Website Made By</h3>
+            <FooterLinkElement
+              path={footerInitiativeLinks[0].path}
+              title={
+                footerInitiativeLinks[0].useImage ? (
+                  <div className={styles['footer-image-container']}>
+                    <img
+                      className="committee-sidebar-image"
+                      src={footerInitiativeLinks[0].wordmark_dark}
+                      alt={`ACM ${footerInitiativeLinks[0].name}`}
+                      style={{
+                        margin: '0 auto',
+                        transform: 'translateX(-3px) scale(0.85)',
+                      }}
+                      onError={(e) => {
+                        e.target.onerror = null;
+                        e.target.style.display = 'none';
+                        const parentNode = e.target.parentNode;
+                        parentNode.textContent = `ACM ${footerInitiativeLinks[0].name}`;
+                        parentNode.style.textAlign = 'center';
+                        parentNode.style.display = 'block';
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <span className="footer-text">ACM {footerInitiativeLinks[0].name}</span>
+                )
+              }
+              ext={false}
+            />
           </div>
           <div>
             <h3 className={styles['footer-header']}>About ACM at UCLA</h3>
@@ -119,7 +149,7 @@ function Footer() {
                     path={initiative.path}
                     title={
                       initiative.useImage ? (
-                        <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
+                        <div className={styles['footer-image-container']}>
                           <img
                             className="committee-sidebar-image"
                             src={initiative.wordmark_dark}
@@ -140,7 +170,7 @@ function Footer() {
                           />
                         </div>
                       ) : (
-                        <span style={{ display: 'block', textAlign: 'center' }}>ACM {initiative.name}</span>
+                        <span className="footer-text">ACM {initiative.name}</span>
                       )
                     }
                     ext={false}

styles/components/Footer.module.scss

@@ -41,3 +41,9 @@
 .display-inline {
   display: inline;
 }
+
+.footer-image-container {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}