fix(footer): issues with order and spacing

Author: dineshpinto

docusaurus.config.ts

@@ -162,7 +162,7 @@ const config: Config = {
           ],
         },
         {
-          title: "Developers",
+          title: "Explore",
           items: [
             {
               label: "Flarescan",
@@ -172,6 +172,10 @@ const config: Config = {
               label: "Systems Explorer",
               href: "https://flare-systems-explorer.flare.network",
             },
+            {
+              label: "P-Chain Explorer",
+              href: "https://flare.space/dapp/p-chain-explorer/",
+            },
             {
               label: "Grants Program",
               href: "https://flare.network/grants",
@@ -196,7 +200,7 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `Copyright © Flare Network ${new Date().getFullYear()}`,
+      copyright: `Copyright © Flare ${new Date().getFullYear()}`,
     },
     prism: {
       additionalLanguages: ["solidity", "bash", "json", "toml", "diff"],

src/theme/Footer/CustomFooter/customFooter.module.css

@@ -17,14 +17,10 @@
 .brandSection {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
   align-items: center;
 }
 
-.logoWrapper {
-  margin-bottom: 10px;
-}
-
 .copyrightWrapper {
   color: var(--ifm-navbar-link-color);
   font-size: 14px;

src/theme/Footer/CustomFooter/customFooter.tsx

@@ -21,7 +21,7 @@ export default function CustomFooter({
 }: CustomFooterProps) {
   const flareLinks = links.find((link) => link.title == "Flare");
   const resourcesLinks = links.find((link) => link.title == "Resources");
-  const developersLinks = links.find((link) => link.title == "Developers");
+  const exploreLinks = links.find((link) => link.title == "Explore");
   const governanceLinks = links.find((link) => link.title == "Governance");
 
   return (
@@ -31,11 +31,6 @@ export default function CustomFooter({
           {/* Logo first */}
           <div className={classes.logoWrapper}>{logo}</div>
 
-          {/* Tagline text would typically be part of the logo component */}
-
-          {/* Social icons */}
-          <SocialLinks />
-
           {/* Navigation links */}
           {flareLinks && (
             <div className={classes.horizontalLinks}>
@@ -55,6 +50,9 @@ export default function CustomFooter({
             </div>
           )}
 
+          {/* Social icons */}
+          <SocialLinks />
+
           {/* Copyright at the bottom */}
           <div className={classes.copyrightWrapper}>{copyright}</div>
         </div>
@@ -98,13 +96,13 @@ export default function CustomFooter({
             </div>
           )}
 
-          {developersLinks && (
+          {exploreLinks && (
             <div className={classes.footerColumn}>
               <div className={classes.columnTitle}>
-                {developersLinks.title.toUpperCase()}
+                {exploreLinks.title.toUpperCase()}
               </div>
               <div className={classes.columnLinks}>
-                {developersLinks.items.map(({ label, to, href }) => (
+                {exploreLinks.items.map(({ label, to, href }) => (
                   <Link
                     className={classes.columnLink}
                     key={label}

src/theme/Footer/index.tsx

@@ -18,7 +18,7 @@ function Footer(): JSX.Element | null {
     <>
       {links.find((link) => link.title == "Flare") &&
       links.find((link) => link.title == "Resources") &&
-      links.find((link) => link.title == "Developers") &&
+      links.find((link) => link.title == "Explore") &&
       links.find((link) => link.title == "Governance") ? (
         <CustomFooter
           // @ts-expect-error: We are sure the footer links have the expected structure