Skip to content

Conversation

@jbatesuk
Copy link
Contributor

Summary

Updates the documentation site footer layout and styles to align with the main civo.com website footer.

  • Fix protocol and alignment issues with footer elements
  • Smooth out hover transitions on footer links
  • Remove unused legacy footer configuration in favour of the custom footer component

Footer component

The custom footer (src/theme/Footer/index.js) now manages all footer content — columns, social links, legal links, and copyright — directly via data arrays and extracted components:

const footerColumns = [
  {
    title: 'Company',
    links: [
      { label: 'About', href: 'https://www.civo.com/about' },
      { label: 'Pricing', href: 'https://www.civo.com/pricing' },
      // ...
    ],
  },
  // ...
];

const socialLinks = [
  { label: 'Instagram', href: 'https://www.instagram.com/civocloud/' },
  { label: 'LinkedIn', href: 'https://www.linkedin.com/company/civocloud' },
  // ...
];

const legalLinks = [
  { label: 'Legal', href: 'https://www.civo.com/legal' },
  { label: 'Terms and Conditions', href: 'https://www.civo.com/legal/terms' },
  // ...
];

Social icons are inlined SVGs using currentColor, rendered inside flex circles with hover transitions:

<div className="custom-footer__social">
  {socialLinks.map((social) => (
    <a key={social.label} href={social.href} aria-label={social.label}>
      <div className="footer-circle">
        {socialIcons[social.label]}
      </div>
    </a>
  ))}
</div>

The docusaurus.config.js footer config is now just footer: {} since the custom component handles everything.

Test plan

  • pnpm build passes with no errors
  • Footer visually matches the dotcom website footer
  • Hover transitions on footer links are smooth
  • Social icons and logo are correctly aligned

- Fix YouTube social link using http:// instead of https://
- Add opacity to footer link transition so hover fade is smooth
- Change align-items from baseline to center on footer header and
  social icons for reliable vertical centering with inline SVGs
- Override Infima navbar__logo height/margin in footer context to
  prevent logo overflow
- Remove dead footer.copyright config from docusaurus.config.js
  (custom footer renders its own copyright)
@jbatesuk jbatesuk requested review from civo-claire and fulviodenza and removed request for civo-claire February 10, 2026 14:58
@jbatesuk jbatesuk self-assigned this Feb 10, 2026
@fulviodenza
Copy link
Contributor

The footer is very large, I know it contains a lot of inofrmations but takes a whole page, are we sure this is what we want?
image

@civo-claire
Copy link
Contributor

Hey @fulviodenza - yes its to be consistent with our new sitewide footer - if you look at the site you'll see its the same ;)

@fulviodenza
Copy link
Contributor

ok @civo-claire , another issue i've found Is that some links are broken

@civo-claire
Copy link
Contributor

can't see any error on the code my side - will have to wait for James Monday

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants