website/client/src/components/SiteFooter.jsx

import { Link } from 'react-router-dom'
import { useSite } from '../contexts/SiteContext.jsx'

export default function SiteFooter() {
  const { contactEmail, siteTitle } = useSite()
  return (
    <footer
      className="sans site-footer"
      style={{
        borderTop: '1px solid var(--line)',
        padding: '28px 16px',
        color: 'var(--muted)',
        fontSize: '0.9rem',
        background: 'rgba(9,13,18,0.6)',
      }}
    >
      <div className="site-footer-inner">
        <div className="site-footer-badge">
          <img src="/assets/img/runic-emblem.png" alt="" aria-hidden="true" />
          <span>
            Powered by
            <br />
            <a
              href="https://gitea.whitlocktech.com/RunicGateway"
              target="_blank"
              rel="noopener noreferrer"
              className="site-footer-brand-link"
            >
              <strong>Runic Gateway</strong>
            </a>
          </span>
        </div>
        <div className="site-footer-info">
          <span>{siteTitle} is an independent private shard project.</span>
          <span style={{ color: 'var(--dim)', fontSize: '0.84rem' }}>
            <a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
              {contactEmail}
            </a>
            &nbsp;·&nbsp;
            <Link to="/site/shard" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
              Shard Status
            </Link>
            &nbsp;·&nbsp;
            <Link to="/admin/login" style={{ color: '#5d6b7d', textDecoration: 'none' }}>
              Admin
            </Link>
          </span>
        </div>
      </div>
    </footer>
  )
}