From e31ed36a9408f5da03dd0c18cb72f6c9c0d2b7a7 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 26 May 2023 21:02:41 +0900
Subject: [PATCH] update footer

---
 .../src/client/css/custom.scss                |   3 +
 .../src/client/theme/Footer/Layout/index.tsx  | 106 ++++++++++++++++--
 .../theme/Footer/Layout/style.module.css      |  25 +++++
 3 files changed, 125 insertions(+), 9 deletions(-)
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css

diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index ff15cef..359d88a 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -310,6 +310,9 @@ small {
 
 .footer {
   border-top: 1px solid rgb(var(--lsd-text-primary));
+  width: 100vw;
+  margin-left: -32px;
+  padding: 24px 32px;
 }
 
 .footer__logo {
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx
index 65977d5..e79829a 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx
@@ -1,22 +1,110 @@
 import React from 'react'
 import clsx from 'clsx'
+import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
+import { Typography } from '@acid-info/lsd-react'
+import styles from './style.module.css'
 
-export default function FooterLayout({ style, links, logo, copyright }) {
+export default function FooterLayout({ style, copyright }) {
   return (
     <footer
       className={clsx('footer', {
         'footer--dark': style === 'dark',
       })}
     >
-      <div className="container container-fluid">
-        {links}
-        {(logo || copyright) && (
-          <div className="footer__bottom text--center">
-            {logo && <div className="margin-bottom--sm">{logo}</div>}
-            {copyright}
+      <Grid>
+        <GridItem className="w-6">
+          <Typography component="div" variant="body2">
+            Copyright © 2023 Logos
+          </Typography>
+          <Typography component="div" variant="body2">
+            Built with Docusaurus.
+          </Typography>
+        </GridItem>
+        <GridItem className="w-1" />
+        <GridItem className="w-6">
+          <div className={styles.section}>
+            <div>
+              <Typography component="div" variant="body2">
+                Learn
+              </Typography>
+              <div className={styles.flexRow}>
+                <Typography component="a" href="/" variant="body2">
+                  Introduction
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Installation
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Migrate from v1 to v2
+                </Typography>
+              </div>
+            </div>
+            <div>
+              <Typography component="div" variant="body2">
+                Community
+              </Typography>
+              <div className={styles.flexRow}>
+                <Typography component="a" href="/" variant="body2">
+                  Stack Overflow
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Feature Requests
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Discord
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Help
+                </Typography>
+              </div>
+            </div>
           </div>
-        )}
-      </div>
+        </GridItem>
+        <GridItem className="w-1" />
+        <GridItem className="w-6">
+          <div className={styles.section}>
+            <div>
+              <Typography component="div" variant="body2">
+                More
+              </Typography>
+              <div className={styles.flexRow}>
+                <Typography component="a" href="/" variant="body2">
+                  Blog
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Changelog
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Github
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Twitter
+                </Typography>
+              </div>
+            </div>
+            <div>
+              <Typography component="div" variant="body2">
+                Legal
+              </Typography>
+              <div className={styles.flexRow}>
+                <Typography component="a" href="/" variant="body2">
+                  Privacy
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Terms
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Data policy
+                </Typography>
+                <Typography component="a" href="/" variant="body2">
+                  Cookie policy
+                </Typography>
+              </div>
+            </div>
+          </div>
+        </GridItem>
+        <GridItem className="w-4" />
+      </Grid>
     </footer>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css
new file mode 100644
index 0000000..6f82a7b
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css
@@ -0,0 +1,25 @@
+.flexRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.flexRow a:not(:last-child) {
+  &:after {
+    content: '•';
+    margin-left: 8px;
+    text-decoration: none;
+    display: inline-block;
+  }
+}
+
+.flexRow a {
+  text-decoration: underline;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}