#3 Defined footer layout

src/components/Footer.module.css

@@ -0,0 +1,37 @@
+.content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.sections {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+    row-gap: 1rem;
+}
+
+.company {
+
+}
+
+.companyLogo img {
+    width: 5rem;
+}
+
+.socials {
+    display: flex;
+}
+
+.socials .social {
+    height: 2rem;
+    width: 2rem;
+}
+
+.copyright {
+    @apply text-center;
+}

src/components/Footer.tsx

@@ -1,12 +1,47 @@
 import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faDiscord, faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons'
+
+import styles from "./Footer.module.css"
+
+const EinStackLogo = () => {
+    return (
+        <div className={styles.companyLogo}>
+            <img
+                src={"/images/logo/einstack.png"}
+                alt="EinStack Logo"
+            />
+        </div>
+    )
+}
 
 export const Footer = () => {
     return (
-        <span>
-            Apache 2.0 {new Date().getFullYear()} ©{' '}
-            <a href="https://nextra.site" target="_blank">
-              EinStack
-            </a>
-        </span>
+        <div className={styles.content}>
+            <div className={styles.sections}>
+                <div className={styles.company}>
+                    <EinStackLogo/>
+                    <span>Reliable infrastructure <br/> for GenAI revolution</span>
+                </div>
+                <div>
+                    Links
+                </div>
+                <div className={styles.socials}>
+                    <FontAwesomeIcon className={styles.social} icon={faGithub}/>
+                    <FontAwesomeIcon className={styles.social} icon={faDiscord}/>
+                    <FontAwesomeIcon className={styles.social} icon={faLinkedin}/>
+                    <div>
+                        <a href="https://www.netlify.com">
+                            {/*<img src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify"/>*/}
+                            <img src="https://www.netlify.com/v3/img/components/netlify-dark.svg"
+                                 alt="Deploys by Netlify"/>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.copyright}>
+                © 2023–Present, EinStack Community. <br/> Documentation distributed under <a href="">CC-BY-4.0</a>.
+            </div>
+        </div>
     )
 }

src/components/Logo.module.css

@@ -0,0 +1,9 @@
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo img {
+    width: 40px;
+    margin-right: 5px;
+}

src/components/Logo.tsx

@@ -1,12 +1,13 @@
-import LogoImg from '../../images/glide_bird_in_circle.png';
+import React from "react";
+
+import styles from "./Logo.module.css"
 
 export function Logo() {
     return (
-        <div style={{display: 'flex', alignItems: 'center'}}>
+        <div className={styles.logo}>
             <img
-                src={LogoImg.src}
+                src={"/images/logo/glide.png"}
                 alt="Glide Logo"
-                style={{width: '40px', marginRight: '5px'}}
             />
             <span>Glide</span>
         </div>