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 };