# All files / src/pages StaticPages.tsx

0% Statements 0/13
0% Branches 0/2
0% Functions 0/7
0% Lines 0/13

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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107

     import { useTranslation } from 'react-i18next';

    function PageWrapper({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
      return (
        <div className="px-0" style={{ maxWidth: '80rem' }}>
          <div className="border border-border/50 rounded-lg overflow-hidden">
            <div className="px-5 py-4 border-b border-border/50">
              <h1 className="text-[18px] font-semibold text-text-primary">{title}</h1>
              {subtitle && <p className="text-[13px] text-text-tertiary mt-1">{subtitle}</p>}
            </div>
            <div className="px-5 py-6 text-[14px] text-text-secondary leading-relaxed space-y-4">
              {children}
            </div>
          </div>
        </div>
      );
    }

    function AboutPage() {
      const { t } = useTranslation();
      return (
        <PageWrapper title={t('static.about.title')} subtitle={t('static.about.subtitle')}>
          <p>{t('static.about.description')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-6">{t('static.features.title')}</h3>
          <ul className="list-disc list-inside space-y-2">
            <li>{t('static.features.textTranslation')}</li>
            <li>{t('static.features.documentTranslation')}</li>
            <li>{t('static.features.glossary')}</li>
            <li>{t('static.features.history')}</li>
            <li>{t('static.features.api')}</li>
          </ul>
          <h3 className="text-text-primary font-semibold text-[15px] mt-6">{t('static.tech.title')}</h3>
          <p>{t('static.about.techDescription')}</p>
        </PageWrapper>
      );
    }

    function HelpPage() {
      const { t } = useTranslation();
      const faqs = [
        { q: t('static.help.howToTranslateText'), a: t('static.help.howToTranslateTextAnswer') },
        { q: t('static.help.supportedFormats'), a: t('static.help.supportedFormatsAnswer') },
        { q: t('static.help.manageHistory'), a: t('static.help.manageHistoryAnswer') },
        { q: t('static.help.createApiKey'), a: t('static.help.createApiKeyAnswer') },
        { q: t('static.help.freeLimitations'), a: t('static.help.freeLimitationsAnswer') },
      ];
      return (
        <PageWrapper title={t('static.help.title')} subtitle={t('static.help.faq')}>
          <div className="space-y-4">
            {faqs.map((item, i) => (
              <div key={i} className="border border-border/50 rounded-lg p-4">
                <h3 className="text-[14px] font-semibold text-text-primary mb-2">{item.q}</h3>
                <p className="text-[13px] text-text-tertiary">{item.a}</p>
              </div>
            ))}
          </div>
        </PageWrapper>
      );
    }

    function PrivacyPage() {
      const { t } = useTranslation();
      return (
        <PageWrapper title={t('static.privacy.title')} subtitle={`${t('static.privacy.lastUpdated')}: 2026-04-20`}>
          <p>{t('static.privacy.intro')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-4">{t('static.privacy.dataCollection')}</h3>
          <p>{t('static.privacy.dataCollectionDesc')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-4">{t('static.privacy.dataUsage')}</h3>
          <p>{t('static.privacy.dataUsageDesc')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-4">{t('static.privacy.dataSecurity')}</h3>
          <p>{t('static.privacy.dataSecurityDesc')}</p>
        </PageWrapper>
      );
    }

    function TermsPage() {
      const { t } = useTranslation();
      return (
        <PageWrapper title={t('static.terms.title')} subtitle={`${t('static.terms.lastUpdated')}: 2026-04-20`}>
          <p>{t('static.terms.intro')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-4">{t('static.terms.serviceUsage')}</h3>
          <p>{t('static.terms.serviceUsageDesc')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-4">{t('static.terms.accountResponsibility')}</h3>
          <p>{t('static.terms.accountResponsibilityDesc')}</p>
          <h3 className="text-text-primary font-semibold text-[15px] mt-4">{t('static.terms.intellectualProperty')}</h3>
          <p>{t('static.terms.intellectualPropertyDesc')}</p>
        </PageWrapper>
      );
    }

    function NotFoundPage() {
      const { t } = useTranslation();
      return (
        <div className="flex items-center justify-center py-24">
          <div className="text-center">
            <h1 className="text-[48px] font-semibold text-text-primary mb-4">404</h1>
            <p className="text-text-secondary text-[16px] mb-6">{t('static.notFound.title')}</p>
            <a href="/" className="inline-flex items-center px-5 py-2 text-[13px] font-medium text-white bg-accent rounded-button hover:bg-accent-hover transition-colors">
              {t('static.notFound.backToHome')}
            </a>
          </div>
        </div>
      );
    }

    export { AboutPage, HelpPage, PrivacyPage, TermsPage, NotFoundPage };