# All files / src/components/layout Footer.tsx

0% Statements 0/2
100% Branches 0/0
0% Functions 0/1
0% Lines 0/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

     import { Link } from 'react-router-dom';
    import { useTranslation } from 'react-i18next';

    function Footer() {
      const { t } = useTranslation();
      return (
        <footer className="bg-surface-secondary dark:bg-gray-50 border-t border-divider dark:border-border">
          <div className="max-w-7xl mx-auto w-full px-6 py-8">
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-8 gap-y-6">
              <div className="text-center">
                <h4 className="text-[12px] font-semibold text-text-primary mb-3">{t('footer.product.title')}</h4>
                <ul className="space-y-2.5">
                  <li><Link to="/" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.product.textTranslation')}</Link></li>
                  <li><Link to="/documents" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.product.documentTranslation')}</Link></li>
                  <li><Link to="/glossary" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.product.glossary')}</Link></li>
                  <li><Link to="/pricing" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.product.pricing')}</Link></li>
                </ul>
              </div>
              <div className="text-center">
                <h4 className="text-[12px] font-semibold text-text-primary mb-3">{t('footer.support.title')}</h4>
                <ul className="space-y-2.5">
                  <li><Link to="/help" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.support.helpCenter')}</Link></li>
                  <li><Link to="/about" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.support.aboutUs')}</Link></li>
                </ul>
              </div>
              <div className="text-center">
                <h4 className="text-[12px] font-semibold text-text-primary mb-3">{t('footer.legal.title')}</h4>
                <ul className="space-y-2.5">
                  <li><Link to="/privacy" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.legal.privacyPolicy')}</Link></li>
                  <li><Link to="/terms" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.legal.termsOfService')}</Link></li>
                </ul>
              </div>
              <div className="text-center">
                <h4 className="text-[12px] font-semibold text-text-primary mb-3">{t('footer.account.title')}</h4>
                <ul className="space-y-2.5">
                  <li><Link to="/register" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.account.register')}</Link></li>
                  <li><Link to="/login" className="text-[12px] text-text-tertiary hover:text-text-primary transition-colors">{t('footer.account.login')}</Link></li>
                </ul>
              </div>
            </div>
          </div>
          <div className="px-6 py-4 border-t border-divider dark:border-border">
            <div className="w-full flex flex-col sm:flex-row items-center justify-between gap-2">
              <p className="text-[12px] text-text-tertiary">&copy; {new Date().getFullYear()} NovelTrans. All rights reserved.</p>
              <p className="text-[12px] text-text-tertiary">{t('footer.slogan')}</p>
            </div>
          </div>
        </footer>
      );
    }

    export { Footer };