erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Simplificar sistema de traducao com LibreTranslate

Browse Source 
- Remover traducoes manuais do LanguageContext
- Adicionar componente T para auto-traducao
- Usar useTranslatedContent para conteudo do banco
- Atualizar todas as paginas publicas
- Integrar LibreTranslate para traducao automatica
This commit is contained in:
Erik
2025-11-26 21:33:35 -03:00
parent 6044a437f8
commit ea0c4ac5a6
9 changed files with 313 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/app/(public)/contato/page.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import { useLanguage } from "@/contexts/LanguageContext";
import { useToast } from "@/contexts/ToastContext";
import { useState, useEffect } from "react";
import { useTranslatedContent, T } from "@/components/TranslatedText";
interface ContactInfo {
icon: string;
@@ -27,7 +27,6 @@ interface ContactContent {
}
export default function ContatoPage() {
const { t } = useLanguage();
const { success, error: showError } = useToast();
const [content, setContent] = useState<ContactContent | null>(null);
const [loading, setLoading] = useState(true);
@@ -40,6 +39,9 @@ export default function ContatoPage() {
message: ''
});
// Traduzir conteúdo do banco automaticamente
const { translatedContent } = useTranslatedContent(content);
useEffect(() => {
fetchContent();
}, []);
@@ -91,34 +93,34 @@ export default function ContatoPage() {
};
// Valores padrão caso não tenha conteúdo salvo
const hero = content?.hero || {
pretitle: t('contact.info.pretitle'),
title: t('contact.hero.title'),
subtitle: t('contact.hero.subtitle')
const hero = translatedContent?.hero || {
pretitle: 'Fale Conosco',
title: 'Entre em Contato',
subtitle: 'Estamos prontos para atender sua empresa com soluções de engenharia de alta qualidade'
};
const info = content?.info || {
title: t('contact.info.title'),
subtitle: t('contact.info.subtitle'),
const info = translatedContent?.info || {
title: 'Informações',
subtitle: 'Como nos encontrar',
description: 'Estamos à disposição para atender sua empresa com a excelência técnica que seu projeto exige.',
items: [
{
icon: 'ri-whatsapp-line',
title: t('contact.info.phone.title'),
description: t('contact.info.whatsapp.desc'),
title: 'Telefone',
description: 'Atendimento de segunda a sexta, das 8h às 18h',
link: 'https://wa.me/5527999999999',
linkText: '(27) 99999-9999'
},
{
icon: 'ri-mail-send-line',
title: t('contact.info.email.title'),
description: t('contact.info.email.desc'),
title: 'E-mail',
description: 'Responderemos em até 24 horas úteis',
link: 'mailto:contato@octto.com.br',
linkText: 'contato@octto.com.br'
},
{
icon: 'ri-map-pin-line',
title: t('contact.info.address.title'),
title: 'Endereço',
description: 'Av. Nossa Senhora da Penha, 1234\nSanta Lúcia, Vitória - ES\nCEP: 29056-000',
link: 'https://maps.google.com',
linkText: 'Ver no mapa'
@@ -187,12 +189,12 @@ export default function ContatoPage() {
<div className="bg-white dark:bg-secondary p-8 md:p-10 rounded-3xl shadow-xl border border-gray-100 dark:border-white/10 relative overflow-hidden">
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full -mr-10 -mt-10"></div>
<h3 className="text-2xl font-bold font-headline text-secondary dark:text-white mb-8 relative z-10">{t('contact.form.title')}</h3>
<h3 className="text-2xl font-bold font-headline text-secondary dark:text-white mb-8 relative z-10"><T>Envie uma Mensagem</T></h3>
<form onSubmit={handleSubmit} className="flex flex-col gap-6 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="group">
<label htmlFor="nome" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors">{t('contact.form.name')}</label>
<label htmlFor="nome" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Nome</T></label>
<div className="relative">
<i className="ri-user-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
<input
@@ -202,12 +204,12 @@ export default function ContatoPage() {
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
placeholder={t('contact.form.name.placeholder')}
placeholder="Seu nome completo"
/>
</div>
</div>
<div className="group">
<label htmlFor="telefone" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors">{t('contact.form.phone')}</label>
<label htmlFor="telefone" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Telefone</T></label>
<div className="relative">
<i className="ri-phone-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
<input
@@ -223,7 +225,7 @@ export default function ContatoPage() {
</div>
<div className="group">
<label htmlFor="email" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors">{t('contact.form.email')}</label>
<label htmlFor="email" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>E-mail</T></label>
<div className="relative">
<i className="ri-mail-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
<input
@@ -233,13 +235,13 @@ export default function ContatoPage() {
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
placeholder={t('contact.form.email.placeholder')}
placeholder="seu@email.com"
/>
</div>
</div>
<div className="group">
<label htmlFor="assunto" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors">{t('contact.form.subject')}</label>
<label htmlFor="assunto" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Assunto</T></label>
<div className="relative">
<i className="ri-file-list-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
<select
@@ -248,18 +250,18 @@ export default function ContatoPage() {
onChange={(e) => setFormData({...formData, subject: e.target.value})}
className="w-full pl-11 pr-10 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
>
<option value="">{t('contact.form.subject.select')}</option>
<option value="orcamento">{t('contact.form.subject.quote')}</option>
<option value="duvida">{t('contact.form.subject.doubt')}</option>
<option value="parceria">{t('contact.form.subject.partnership')}</option>
<option value="trabalhe">{t('contact.form.subject.other')}</option>
<option value="">Selecione um assunto</option>
<option value="orcamento">Solicitar Orçamento</option>
<option value="duvida">Dúvida Técnica</option>
<option value="parceria">Proposta de Parceria</option>
<option value="trabalhe">Outro Assunto</option>
</select>
<i className="ri-arrow-down-s-line absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
</div>
<div className="group">
<label htmlFor="mensagem" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors">{t('contact.form.message')}</label>
<label htmlFor="mensagem" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Mensagem</T></label>
<div className="relative">
<i className="ri-message-2-line absolute left-4 top-6 text-gray-400 group-focus-within:text-primary transition-colors"></i>
<textarea
@@ -268,7 +270,7 @@ export default function ContatoPage() {
value={formData.message}
onChange={(e) => setFormData({...formData, message: e.target.value})}
className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl h-40 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
placeholder={t('contact.form.message.placeholder')}
placeholder="Descreva como podemos ajudá-lo..."
></textarea>
</div>
</div>
@@ -281,11 +283,11 @@ export default function ContatoPage() {
{submitting ? (
<>
<i className="ri-loader-4-line animate-spin"></i>
<span>Enviando...</span>
<span><T>Enviando...</T></span>
</>
) : (
<>
<span>{t('contact.form.submit')}</span>
<span><T>Enviar Mensagem</T></span>
<i className="ri-send-plane-fill group-hover:translate-x-1 transition-transform"></i>
</>
)}