feat(*): responsive footer for small screens - I133

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { App as AntdApp, Layout, Row, Col, Collapse, Grid } from "antd";
+import { App as AntdApp, Layout, Row, Col, Collapse } from "antd";
 import { Routes, Route, useSearchParams } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
@@ -17,7 +17,7 @@ import LearnContent from "./components/Content";
 import FloatingFAB from "./components/FabButton";
 
 const { Content } = Layout;
-const { useBreakpoint } = Grid;
+
 
 const App = () => {
   const init = useAppStore((state) => state.init);
@@ -80,7 +80,7 @@ const App = () => {
     }
   }, [searchParams]);
 
-  const screens = useBreakpoint();
+
 
   const panels = [
     {
@@ -186,19 +186,7 @@ const App = () => {
           </Routes>
         </Content>
         <Footer />
-        {!screens.md && (
-          <div
-            style={{
-              textAlign: "center",
-              padding: "10px 0",
-              background: "#1b2540",
-              color: "white",
-              fontSize: "12px",
-            }}
-          >
-            Best viewed on desktop
-          </div>
-        )}
+
       </Layout>
     </AntdApp>
   );

src/components/Footer.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import { Layout, Row, Col, Typography, Space, Button, Image, Grid } from "antd";
 import {
   GithubOutlined,
   XOutlined,
   DiscordFilled,
   LinkedinFilled,
+  DownOutlined,
+  UpOutlined,
 } from "@ant-design/icons";
 import FOOTER_SECTION from "../constants/content/footer.json";
 
@@ -15,33 +17,30 @@ const { useBreakpoint } = Grid;
 const CustomFooter: React.FC = () => {
   const year = new Date().getFullYear();
   const screens = useBreakpoint();
-
-  if (!screens.md) {
-    return null;
-  }
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <Footer
       id="footer"
       style={{
         background: "#1b2540",
         color: "white",
-        padding: "80px 50px 20px 50px",
+        padding: "50px 50px 20px 50px",
       }}
     >
-      <Row justify="space-between" align="top">
-        <Col span={7}>
+      <Row justify="space-between" align="middle" gutter={[16, 16]}>
+        <Col xs={24} md={12}>
           <Space direction="vertical" size="middle">
             <Link href="https://www.accordproject.org" target="_blank">
               <Image
                 src="/logo.png"
                 alt="Template Playground"
                 preview={false}
-                style={{ paddingRight: "1.5em", height: "36px" }}
+                style={{ height: "36px", maxWidth: "100%" }}
               />
             </Link>
             <Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
-              The open source smart legal contract stack
+              The open-source smart legal contract stack
             </Text>
             <Link href="mailto:admin@accordproject.org">
               <Text strong style={{ color: "rgba(255, 255, 255, 0.65)" }}>
@@ -65,41 +64,59 @@ const CustomFooter: React.FC = () => {
             </Link>
           </Space>
         </Col>
-        {FOOTER_SECTION.sections.map((section: any) => (
-          <Col span={3} key={section.title}>
-            <Space direction="vertical" size="middle">
-              <Text
-                strong
-                style={{
-                  color: "rgba(255, 255, 255, 0.65)",
-                  fontSize: "11px",
-                  letterSpacing: "0.1em",
-                }}
-              >
-                {section.title}
-              </Text>
-              {section.links.map((link: any) => (
-                <Link
-                  href={link.href}
-                  key={link.title}
-                  style={{ color: "white", fontSize: "15px" }}
-                >
-                  {link.title}
-                </Link>
+
+        <Col xs={24} md={12}>
+          {!screens.md && (
+            <Button
+              type="text"
+              onClick={() => setExpanded(!expanded)}
+              style={{ color: "white", fontSize: "16px", marginBottom: "10px" }}
+            >
+              {expanded ? <UpOutlined /> : <DownOutlined />} Other Links
+            </Button>
+          )}
+
+          {(screens.md || expanded) && (
+            <Row justify="end" gutter={[16, 16]}>
+              {FOOTER_SECTION.sections.map((section: any) => (
+                <Col xs={24} sm={12} md={6} key={section.title}>
+                  <Space direction="vertical" size="middle">
+                    <Text
+                      strong
+                      style={{
+                        color: "rgba(255, 255, 255, 0.65)",
+                        fontSize: "11px",
+                        letterSpacing: "0.1em",
+                      }}
+                    >
+                      {section.title}
+                    </Text>
+                    {section.links.map((link: any) => (
+                      <Link
+                        href={link.href}
+                        key={link.title}
+                        style={{ color: "white", fontSize: "15px" }}
+                      >
+                        {link.title}
+                      </Link>
+                    ))}
+                  </Space>
+                </Col>
               ))}
-            </Space>
-          </Col>
-        ))}
+            </Row>
+          )}
+        </Col>
       </Row>
-      <Row justify="space-between" align="middle" style={{ marginTop: "80px" }}>
+
+      <Row justify="space-between" align="middle" style={{ marginTop: "40px" }}>
         <Col>
-          <Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
+          <Text style={{ color: "rgba(255, 255, 255, 0.85)" }}>
             copyright © {year} accord project &bull;{" "}
             <Link
               strong
               href="https://accordproject.org/privacy"
               target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              style={{ color: "rgba(255, 255, 255, 0.85)" }}
             >
               trademark policy
             </Link>{" "}
@@ -108,7 +125,7 @@ const CustomFooter: React.FC = () => {
               strong
               href="https://accordproject.org/brand-assets"
               target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              style={{ color: "rgba(255, 255, 255, 0.85)" }}
             >
               brand assets
             </Link>
@@ -117,32 +134,16 @@ const CustomFooter: React.FC = () => {
 
         <Col>
           <Space>
-            <Link
-              href="https://github.com/accordproject"
-              target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.65)" }}
-            >
+            <Link href="https://github.com/accordproject" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <GithubOutlined style={{ fontSize: "17px" }} />
             </Link>
-            <Link
-              href="https://twitter.com/AccordHQ"
-              target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.65)" }}
-            >
+            <Link href="https://twitter.com/AccordHQ" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <XOutlined style={{ fontSize: "17px" }} />
             </Link>
-            <Link
-              href="https://discord.com/invite/Zm99SKhhtA"
-              target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.65)" }}
-            >
+            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <DiscordFilled style={{ fontSize: "17px" }} />
             </Link>
-            <Link
-              href="https://www.linkedin.com/company/accordproject/"
-              target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.65)" }}
-            >
+            <Link href="https://www.linkedin.com/company/accordproject/" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
               <LinkedinFilled style={{ fontSize: "17px" }} />
             </Link>
           </Space>
@@ -152,4 +153,4 @@ const CustomFooter: React.FC = () => {
   );
 };
 
-export default CustomFooter;
+export default CustomFooter;