import React from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from '../js/i18n'; const tools = [ { id: 'text2image', icon: 'fa-image', path: '/text2image' }, { id: 'jsonFormatter', icon: 'fa-code', path: '/json-formatter' }, { id: 'textTranslation', icon: 'fa-language', path: '/text-translation' }, ]; function Home() { const { t } = useTranslation(); return ( <div> <section className="hero"> {/* 添加 logo */} <h1>{t('title')}</h1> <p className="slogan">{t('slogan')}</p> </section> <section className="tools-section"> <div className="tools-grid"> {tools.map(tool => ( <Link to={tool.path} key={tool.id} className="tool-card"> <i className={`fas ${tool.icon} tool-icon`}></i> <h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3> <p className="tool-description">{t(`tools.${tool.id}.description`)}</p> </Link> ))} </div> </section> </div> ); } export default Home;