43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { useT } from '@/i18n';
|
|
import AnimateOnScroll from '@/components/AnimateOnScroll';
|
|
import s from '../content.module.css';
|
|
|
|
export default function HelpPage() {
|
|
const t = useT();
|
|
const topics = [
|
|
{ icon: '\u{1F6D2}', titleKey: 'help_t1_title', descKey: 'help_t1_desc' },
|
|
{ icon: '\u{1F4B1}', titleKey: 'help_t2_title', descKey: 'help_t2_desc' },
|
|
{ icon: '\u{1F4B3}', titleKey: 'help_t3_title', descKey: 'help_t3_desc' },
|
|
{ icon: '\u{1F512}', titleKey: 'help_t4_title', descKey: 'help_t4_desc' },
|
|
{ icon: '\u{1F4F1}', titleKey: 'help_t5_title', descKey: 'help_t5_desc' },
|
|
{ icon: '\u{2753}', titleKey: 'help_t6_title', descKey: 'help_t6_desc' },
|
|
];
|
|
return (
|
|
<>
|
|
<section className={s.hero}>
|
|
<h1 className={s.title}>{t('help_title')}</h1>
|
|
<p className={s.subtitle}>{t('help_subtitle')}</p>
|
|
</section>
|
|
<div className={s.grid}>
|
|
{topics.map((tp, i) => (
|
|
<AnimateOnScroll key={tp.titleKey} delay={i * 0.1}>
|
|
<div className={s.card}>
|
|
<div className={s.cardIcon}>{tp.icon}</div>
|
|
<h3 className={s.cardTitle}>{t(tp.titleKey)}</h3>
|
|
<p className={s.cardDesc}>{t(tp.descKey)}</p>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
))}
|
|
</div>
|
|
<div style={{ textAlign: 'center', padding: '0 24px 80px' }}>
|
|
<p style={{ fontSize: 16, color: 'var(--color-text-secondary)', marginBottom: 16 }}>{t('help_contact_hint')}</p>
|
|
<Link href="/contact" style={{ fontSize: 16, fontWeight: 600, color: 'var(--color-primary)' }}>{t('help_contact_link')} →</Link>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|