feat: implement footer

src/components/Article/Article.tsx

@@ -230,7 +230,7 @@ const ArticleContainer = styled.article`
   gap: 16px;
   max-width: 700px;
   margin-inline: 5%;
-  padding-bottom: 50px;
+  padding-bottom: 80px;
 
   // temporary breakpoint
   @media (max-width: 1024px) {

src/components/Footer/Footer.tsx

@@ -0,0 +1,256 @@
+import { Button, Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+
+const FIRST_LINK_GRUOP = [
+  { label: 'Twitter', href: '#' },
+  { label: 'Privacy Policy', href: '#' },
+  { label: 'Terms & Conditions', href: '#' },
+  { label: 'Contact us', href: '#' },
+  { label: 'Work with us', href: '#' },
+]
+
+const SECOND_LINK_GROUP = [
+  {
+    title: 'Research',
+    links: [
+      { label: 'VacP2P', href: '#' },
+      { label: 'AFAIK', href: '#' },
+      { label: 'Institute', href: '#' },
+    ],
+  },
+  {
+    title: 'Infrastructure',
+    links: [
+      { label: 'Waku', href: '#' },
+      { label: 'Nimbus', href: '#' },
+      { label: 'Codex', href: '#' },
+      { label: 'Nomos', href: '#' },
+    ],
+  },
+  {
+    title: 'Creative Studio',
+    links: [{ label: 'Acid.info', href: '#' }],
+  },
+]
+
+const THIRD_LINKS_GROUP = [
+  {
+    title: 'Movement',
+    links: [{ label: 'Logos', href: '#' }],
+  },
+  {
+    title: 'User-facing / Products',
+    links: [
+      { label: 'Status', href: '#' },
+      { label: 'Keycard', href: '#' },
+    ],
+  },
+]
+
+export default function Footer() {
+  const handleScrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <Container>
+      <Wrapper>
+        <OrgInfo>
+          <Typography
+            component="div"
+            genericFontFamily="sans-serif"
+            variant="body2"
+          >
+            Logos Press Engine ©{new Date().getFullYear()}
+          </Typography>
+          <Typography
+            component="div"
+            genericFontFamily="sans-serif"
+            variant="body2"
+          >
+            All rights reserved.
+          </Typography>
+        </OrgInfo>
+        <Links>
+          {FIRST_LINK_GRUOP.map(({ label, href }, idx) => (
+            <Link
+              key={'first-grouop' + idx}
+              component="a"
+              href={href}
+              genericFontFamily="sans-serif"
+              variant="body2"
+            >
+              {label}
+            </Link>
+          ))}
+        </Links>
+      </Wrapper>
+      <BusinessUnits>
+        <Wrapper>
+          <OrgInfo>
+            <Typography
+              component="div"
+              genericFontFamily="sans-serif"
+              variant="body2"
+            >
+              Logos
+            </Typography>
+            <Typography
+              component="div"
+              genericFontFamily="sans-serif"
+              variant="body2"
+            >
+              Business Units:
+            </Typography>
+          </OrgInfo>
+          <SecondLinksContainer>
+            {SECOND_LINK_GROUP.map(({ title, links }, idx) => (
+              <LinkGroup key={'second-group' + idx}>
+                <div>
+                  <Typography
+                    component="div"
+                    genericFontFamily="sans-serif"
+                    variant="body2"
+                  >
+                    {title}:
+                  </Typography>
+                </div>
+                <div>
+                  {links.map(({ label, href }, idx) => (
+                    <Link
+                      key={'second-group-link' + idx}
+                      component="a"
+                      href={href}
+                      genericFontFamily="sans-serif"
+                      variant="body2"
+                    >
+                      {label}
+                    </Link>
+                  ))}
+                </div>
+              </LinkGroup>
+            ))}
+          </SecondLinksContainer>
+          <ThirdLinksContainer>
+            {THIRD_LINKS_GROUP.map(({ title, links }, idx) => (
+              <LinkGroup key={'third-group' + idx}>
+                <div>
+                  <Typography
+                    component="div"
+                    genericFontFamily="sans-serif"
+                    variant="body2"
+                  >
+                    {title}:
+                  </Typography>
+                </div>
+                <div>
+                  {links.map(({ label, href }, idx) => (
+                    <Link
+                      key={'third-group-link' + idx}
+                      component="a"
+                      href={href}
+                      genericFontFamily="sans-serif"
+                      variant="body2"
+                    >
+                      {label}
+                    </Link>
+                  ))}
+                </div>
+              </LinkGroup>
+            ))}
+          </ThirdLinksContainer>
+        </Wrapper>
+      </BusinessUnits>
+      <ScrollToTop size="small" onClick={handleScrollToTop}>
+        Back to up ↑
+      </ScrollToTop>
+    </Container>
+  )
+}
+
+const SECTION_MARGIN = 60
+
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding: 16px;
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+`
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 50%;
+
+  /* temporary breakpoint */
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`
+
+const OrgInfo = styled(Section)`
+  /* temporary breakpoint */
+  @media (max-width: 768px) {
+    margin-bottom: ${SECTION_MARGIN}px;
+  }
+`
+
+const Links = styled(Section)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+const Link = styled(Typography)`
+  width: fit-content;
+  &:not(:last-child) {
+    &:after {
+      content: '•';
+      margin: 0 8px;
+      text-decoration: none;
+      display: inline-block;
+    }
+  }
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: baseline;
+
+  /* temporary breakpoint */
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`
+
+const BusinessUnits = styled(Container)`
+  margin-top: ${SECTION_MARGIN}px;
+  padding: 16px 0 0 0;
+`
+
+const SecondLinksContainer = styled.div`
+  flex: 2;
+`
+
+const ThirdLinksContainer = styled.div`
+  flex: 1;
+  margin-bottom: ${SECTION_MARGIN}px;
+`
+
+const LinkGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 34px;
+`
+
+const ScrollToTop = styled(Button)`
+  width: fit-content;
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+`

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer'

src/components/Post/PostsDemo.tsx

@@ -11,7 +11,7 @@ const PostsDemo = (props: Props) => {
   const [posts, setPosts] = useState<PostDataProps[]>(props.posts)
 
   return (
-    <div style={{ marginTop: '78px' }}>
+    <div style={{ marginBlock: '78px' }}>
       {/* For Demo purposes only. Use inline CSS and styled components temporarily */}
       {/*@TODO @jinho, wht PostContainer should recive an array of postData instead of only One?*/}
       <PostContainer

src/components/TableOfContents/TableOfContents.tsx

@@ -67,11 +67,7 @@ const Container = styled.aside<{ dy: number; height: number }>`
   position: sticky;
   top: ${(p) => `${p.dy}px`};
   margin-left: 16px;
-
-  &.sticky {
-    top: ${uiConfigs.navbarRenderedHeight + 78 + 1}px;
-    z-index: 100;
-  }
+  padding-bottom: 72px;
 
   // temporary breakpoint
   @media (max-width: 1024px) {

src/layouts/ArticleLayout/Article.layout.tsx

@@ -5,6 +5,7 @@ import { NavbarFiller } from '@/components/Navbar/NavbarFiller'
 import { Searchbar } from '@/components/Searchbar'
 import { ESearchScope } from '@/types/ui.types'
 import styles from './Article.layout.module.css'
+import { Footer } from '@/components/Footer'
 
 export default function ArticleLayout(props: PropsWithChildren<any>) {
   const isDarkState = useIsDarkState()
@@ -16,6 +17,7 @@ export default function ArticleLayout(props: PropsWithChildren<any>) {
         <Searchbar searchScope={ESearchScope.ARTICLE} />
       </header>
       <main>{props.children}</main>
+      <Footer />
     </>
   )
 }

src/layouts/DefaultLayout/Default.layout.tsx

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react'
 import { Hero } from '@/components/Hero'
 import { NavbarFiller } from '@/components/Navbar/NavbarFiller'
 import { Searchbar } from '@/components/Searchbar'
+import { Footer } from '@/components/Footer'
 
 export default function DefaultLayout(props: PropsWithChildren<any>) {
   const isDarkState = useIsDarkState()
@@ -17,6 +18,7 @@ export default function DefaultLayout(props: PropsWithChildren<any>) {
         <Searchbar />
       </header>
       <main>{props.children}</main>
+      <Footer />
     </>
   )
 }

src/pages/article/[remoteId].tsx

@@ -30,7 +30,7 @@ export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
 
 // @jinho lets handle the error directly in thew page component
 const ArticlePage = (props: ArticleProps) => {
-  if (!props.data) return <div />
+  if (!props.data) return <div style={{ height: '100vh' }} />
 
   return <ArticleContainer data={props.data} error={props.error} />
 }