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>
</>
)}

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

@@ -1,72 +1,74 @@
"use client";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { usePageContent } from "@/hooks/usePageContent";
import { useTranslatedContent, T } from "@/components/TranslatedText";
export default function Home() {
const { t } = useLanguage();
const { content, loading } = usePageContent('home');
// Traduzir conteúdo do banco automaticamente
const { translatedContent } = useTranslatedContent(content);
// Usar conteúdo personalizado do banco ou fallback para traduções
const hero = content?.hero || {
title: t('home.hero.title'),
subtitle: t('home.hero.subtitle'),
buttonText: t('home.hero.cta_primary')
// Usar conteúdo traduzido ou fallback
const hero = translatedContent?.hero || {
title: 'Engenharia de Excelência para Seus Projetos',
subtitle: 'Soluções completas em engenharia veicular, mecânica e segurança do trabalho com mais de 15 anos de experiência.',
buttonText: 'Conheça Nossos Serviços'
};
const features = content?.features || {
pretitle: t('home.features.pretitle'),
title: t('home.features.title'),
const features = translatedContent?.features || {
pretitle: 'Por que nos escolher',
title: 'Nossos Diferenciais',
items: [
{ icon: 'ri-shield-star-line', title: t('home.features.1.title'), description: t('home.features.1.desc') },
{ icon: 'ri-settings-4-line', title: t('home.features.2.title'), description: t('home.features.2.desc') },
{ icon: 'ri-truck-line', title: t('home.features.3.title'), description: t('home.features.3.desc') }
{ icon: 'ri-shield-star-line', title: 'Qualidade Garantida', description: 'Processos certificados e equipe altamente qualificada.' },
{ icon: 'ri-settings-4-line', title: 'Soluções Personalizadas', description: 'Atendimento sob medida para suas necessidades.' },
{ icon: 'ri-truck-line', title: 'Especialização Veicular', description: 'Expertise em engenharia automotiva.' }
] as Array<{ icon: string; title: string; description: string }>
};
const services = content?.services || {
pretitle: t('home.services.pretitle'),
title: t('home.services.title'),
const services = translatedContent?.services || {
pretitle: 'Nossos Serviços',
title: 'O Que Fazemos',
items: [
{ icon: 'ri-draft-line', title: t('home.services.1.title'), description: t('home.services.1.desc') },
{ icon: 'ri-file-paper-2-line', title: t('home.services.2.title'), description: t('home.services.2.desc') },
{ icon: 'ri-alert-line', title: t('home.services.3.title'), description: t('home.services.3.desc') },
{ icon: 'ri-truck-fill', title: t('home.services.4.title'), description: t('home.services.4.desc') }
{ icon: 'ri-draft-line', title: 'Projetos Técnicos', description: 'Desenvolvimento de projetos de engenharia.' },
{ icon: 'ri-file-paper-2-line', title: 'Laudos e Perícias', description: 'Emissão de laudos técnicos.' },
{ icon: 'ri-alert-line', title: 'Segurança do Trabalho', description: 'Implementação de normas de segurança.' },
{ icon: 'ri-truck-fill', title: 'Engenharia Veicular', description: 'Modificações e adaptações de veículos.' }
] as Array<{ icon: string; title: string; description: string }>
};
const about = content?.about || {
pretitle: t('home.about.pretitle'),
title: t('home.about.title'),
description: t('home.about.desc'),
const about = translatedContent?.about || {
pretitle: 'Conheça a OCCTO',
title: 'Sobre Nós',
description: 'Com mais de 15 anos de experiência, a OCCTO Engenharia se consolidou como referência em soluções de engenharia.',
highlights: [
t('home.about.list.1'),
t('home.about.list.2'),
t('home.about.list.3')
'Mais de 500 clientes atendidos',
'Equipe técnica qualificada',
'Parceiro oficial de grandes empresas'
] as string[]
};
const testimonials = content?.testimonials || {
pretitle: t('home.testimonials.pretitle'),
title: t('home.testimonials.title'),
const testimonials = translatedContent?.testimonials || {
pretitle: 'Depoimentos',
title: 'O Que Dizem Nossos Clientes',
items: [
{ name: 'Ricardo Mendes', role: t('home.testimonials.1.role'), text: t('home.testimonials.1.text') },
{ name: 'Fernanda Costa', role: t('home.testimonials.2.role'), text: t('home.testimonials.2.text') },
{ name: 'Paulo Oliveira', role: t('home.testimonials.3.role'), text: t('home.testimonials.3.text') }
{ name: 'Ricardo Mendes', role: 'Gerente de Frota', text: 'Excelente trabalho!' },
{ name: 'Fernanda Costa', role: 'Diretora de Operações', text: 'Parceria de confiança.' },
{ name: 'Paulo Oliveira', role: 'Engenheiro Chefe', text: 'Conhecimento técnico incomparável.' }
] as Array<{ name: string; role: string; text: string }>
};
const stats = content?.stats || {
const stats = translatedContent?.stats || {
clients: '500+',
projects: '1200+',
years: '15'
};
const cta = content?.cta || {
title: t('home.cta.title'),
text: t('home.cta.desc'),
button: t('home.cta.button')
const cta = translatedContent?.cta || {
title: 'Pronto para tirar seu projeto do papel?',
text: 'Entre em contato com nossa equipe de especialistas.',
button: 'Fale Conosco'
};
return (
@@ -81,7 +83,7 @@ export default function Home() {
<div className="max-w-3xl">
<div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 mb-8 hover:bg-white/20 transition-colors cursor-default">
<i className="ri-verified-badge-fill text-primary text-xl"></i>
<span className="text-sm font-bold tracking-wider uppercase text-white">{t('home.hero.badge')} <span className="text-primary">Coca-Cola</span></span>
<span className="text-sm font-bold tracking-wider uppercase text-white"><T>Prestador de Serviço Oficial</T> <span className="text-primary">Coca-Cola</span></span>
</div>
<h1 className="text-5xl md:text-6xl font-bold font-headline mb-6 leading-tight">
@@ -95,7 +97,7 @@ export default function Home() {
{hero.buttonText}
</Link>
<Link href="/projetos" className="px-8 py-4 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-secondary transition-colors text-center">
{t('home.hero.cta_secondary')}
<T>Ver Soluções</T>
</Link>
</div>
</div>
@@ -143,7 +145,7 @@ export default function Home() {
</div>
<div className="text-center mt-12">
<Link href="/servicos" className="text-primary font-bold hover:text-secondary dark:hover:text-white transition-colors inline-flex items-center gap-2">
{t('home.services.link')} <i className="ri-arrow-right-line"></i>
<T>Ver todos os serviços</T> <i className="ri-arrow-right-line"></i>
</Link>
</div>
</div>
@@ -173,7 +175,7 @@ export default function Home() {
))}
</ul>
<Link href="/sobre" className="text-primary font-bold hover:text-white transition-colors flex items-center gap-2">
{t('home.about.link')} <i className="ri-arrow-right-line"></i>
<T>Conheça nossa expertise</T> <i className="ri-arrow-right-line"></i>
</Link>
</div>
</div>
@@ -184,29 +186,29 @@ export default function Home() {
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
<div>
<h2 className="text-primary font-bold tracking-wider uppercase mb-2">{t('home.projects.pretitle')}</h2>
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{t('home.projects.title')}</h3>
<h2 className="text-primary font-bold tracking-wider uppercase mb-2"><T>Portfólio</T></h2>
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white"><T>Projetos Recentes</T></h3>
</div>
<Link href="/projetos" className="px-6 py-3 border border-secondary dark:border-white text-secondary dark:text-white rounded-lg font-bold hover:bg-secondary hover:text-white dark:hover:bg-white dark:hover:text-secondary transition-colors">
{t('home.projects.link')}
<T>Ver todos os projetos</T>
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{ img: "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop", title: t('home.projects.1.title'), cat: t('home.projects.1.cat') },
{ img: "https://images.unsplash.com/photo-1581092335397-9583eb92d232?q=80&w=2070&auto=format&fit=crop", title: t('home.projects.2.title'), cat: t('home.projects.2.cat') },
{ img: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop", title: t('home.projects.3.title'), cat: t('home.projects.3.cat') }
{ img: "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop", title: "Projeto de Adequação - Coca-Cola", cat: "Engenharia Veicular" },
{ img: "https://images.unsplash.com/photo-1581092335397-9583eb92d232?q=80&w=2070&auto=format&fit=crop", title: "Laudo de Guindaste Articulado", cat: "Inspeção Técnica" },
{ img: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop", title: "Dispositivo de Içamento Especial", cat: "Projeto Mecânico" }
].map((project, index) => (
<div key={index} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer">
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{ backgroundImage: `url('${project.img}')` }}></div>
<div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
<div className="absolute bottom-0 left-0 p-8 w-full transform translate-y-4 group-hover:translate-y-0 transition-transform">
<span className="text-primary font-bold text-sm uppercase tracking-wider mb-2 block">{project.cat}</span>
<h3 className="text-2xl font-bold font-headline text-white mb-2">{project.title}</h3>
<span className="text-primary font-bold text-sm uppercase tracking-wider mb-2 block"><T>{project.cat}</T></span>
<h3 className="text-2xl font-bold font-headline text-white mb-2"><T>{project.title}</T></h3>
<div className="h-0 group-hover:h-auto overflow-hidden transition-all">
<span className="text-white/80 text-sm flex items-center gap-2 mt-4">
{t('home.projects.view_details')} <i className="ri-arrow-right-line"></i>
<T>Ver detalhes</T> <i className="ri-arrow-right-line"></i>
</span>
</div>
</div>

48
frontend/src/app/(public)/projetos/page.tsx
View File

@@ -1,57 +1,55 @@
"use client";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { T } from "@/components/TranslatedText";
export default function ProjetosPage() {
const { t } = useLanguage();
// Placeholder data - will be replaced by database content
const projects = [
{
id: 1,
title: t('home.projects.1.title'),
category: t('home.projects.1.cat'),
title: "Adequação de Frota de Caminhões",
category: "Engenharia Veicular",
location: "Vitória, ES",
image: "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop",
description: "Projeto de adequação técnica de 50 caminhões para instalação de carrocerias especiais e sistemas de segurança."
},
{
id: 2,
title: t('home.projects.2.title'),
category: t('home.projects.2.cat'),
title: "Laudo Técnico de Guindaste Industrial",
category: "Laudos e Perícias",
location: "Serra, ES",
image: "https://images.unsplash.com/photo-1535082623926-b3a33d531740?q=80&w=2052&auto=format&fit=crop",
description: "Inspeção completa e emissão de laudo técnico para guindaste de 45 toneladas, com testes de carga e verificação estrutural."
},
{
id: 3,
title: t('home.projects.3.title'),
category: t('home.projects.3.cat'),
title: "Projeto de Equipamento Portuário",
category: "Projetos Mecânicos",
location: "Aracruz, ES",
image: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop",
description: "Desenvolvimento e cálculo estrutural de Spreader para movimentação de contêineres em área portuária."
},
{
id: 4,
title: t('home.projects.4.title'),
category: t('home.projects.4.cat'),
title: "Adequação NR-12 de Linha de Produção",
category: "Segurança do Trabalho",
location: "Linhares, ES",
image: "https://images.unsplash.com/photo-1581092921461-eab62e97a782?q=80&w=2070&auto=format&fit=crop",
description: "Inventário e adequação de segurança de 120 máquinas operatrizes conforme norma regulamentadora NR-12."
},
{
id: 5,
title: t('home.projects.5.title'),
category: t('home.projects.5.cat'),
title: "Homologação de Veículos Especiais",
category: "Engenharia Veicular",
location: "Viana, ES",
image: "https://images.unsplash.com/photo-1591768793355-74d04bb6608f?q=80&w=2070&auto=format&fit=crop",
description: "Processo completo de homologação e certificação de plataformas elevatórias para distribuição urbana."
},
{
id: 6,
title: t('home.projects.6.title'),
category: t('home.projects.6.cat'),
title: "Sistema de Proteção Contra Quedas",
category: "Segurança do Trabalho",
location: "Cariacica, ES",
image: "https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2070&auto=format&fit=crop",
description: "Projeto e instalação de sistema de linha de vida para proteção contra quedas em operações de carga e descarga."
@@ -65,9 +63,9 @@ export default function ProjetosPage() {
<div className="absolute inset-0 bg-black/60 z-10"></div>
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
<div className="container mx-auto px-4 relative z-20">
<h1 className="text-5xl font-bold font-headline mb-4">{t('projects.hero.title')}</h1>
<h1 className="text-5xl font-bold font-headline mb-4"><T>Nossos Projetos</T></h1>
<p className="text-xl text-gray-300 max-w-2xl">
{t('projects.hero.subtitle')}
<T>Conheça alguns dos projetos que já realizamos para nossos clientes</T>
</p>
</div>
</section>
@@ -77,10 +75,10 @@ export default function ProjetosPage() {
<div className="container mx-auto px-4">
{/* Filters (Placeholder) */}
<div className="flex flex-wrap gap-4 mb-12 justify-center">
<button className="px-6 py-2 bg-primary text-white rounded-full font-bold shadow-md">{t('projects.filter.all')}</button>
<button className="px-6 py-2 bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-white/20 transition-colors">{t('projects.filter.implements')}</button>
<button className="px-6 py-2 bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-white/20 transition-colors">{t('projects.filter.mechanical')}</button>
<button className="px-6 py-2 bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-white/20 transition-colors">{t('projects.filter.reports')}</button>
<button className="px-6 py-2 bg-primary text-white rounded-full font-bold shadow-md"><T>Todos</T></button>
<button className="px-6 py-2 bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-white/20 transition-colors"><T>Implementos</T></button>
<button className="px-6 py-2 bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-white/20 transition-colors"><T>Projetos Mecânicos</T></button>
<button className="px-6 py-2 bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-white/20 transition-colors"><T>Laudos</T></button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -90,20 +88,20 @@ export default function ProjetosPage() {
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" style={{ backgroundImage: `url('${project.image}')` }}></div>
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors"></div>
<div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-xs font-bold text-secondary uppercase tracking-wider">
{project.category}
<T>{project.category}</T>
</div>
</div>
<div className="p-6 grow flex flex-col">
<h3 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2 group-hover:text-primary transition-colors">{project.title}</h3>
<h3 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2 group-hover:text-primary transition-colors"><T>{project.title}</T></h3>
<div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm mb-4">
<i className="ri-map-pin-line"></i>
<span>{project.location}</span>
</div>
<p className="text-gray-600 dark:text-gray-400 text-sm mb-6 line-clamp-3 grow">
{project.description}
<T>{project.description}</T>
</p>
<Link href={`/projetos/${project.id}`} className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all mt-auto">
{t('projects.card.details')} <i className="ri-arrow-right-line"></i>
<T>Ver Detalhes</T> <i className="ri-arrow-right-line"></i>
</Link>
</div>
</div>

32
frontend/src/app/(public)/servicos/page.tsx
View File

@@ -1,28 +1,26 @@
"use client";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { T } from "@/components/TranslatedText";
export default function ServicosPage() {
const { t } = useLanguage();
const services = [
{
icon: "ri-draft-line",
title: t('home.services.1.title'),
description: t('home.services.1.desc'),
title: "Projetos Técnicos",
description: "Desenvolvimento de projetos de engenharia mecânica, estrutural e veicular com alta precisão e conformidade normativa.",
features: ["Projeto Mecânico 3D", "Cálculo Estrutural", "Dispositivos Especiais", "Homologação de Equipamentos"]
},
{
icon: "ri-truck-line",
title: t('home.features.3.title'),
description: t('home.features.3.desc'),
title: "Engenharia Veicular",
description: "Expertise em modificações, adaptações e homologações veiculares com foco em segurança e conformidade.",
features: ["Projeto de Instalação", "Estudo de Estabilidade", "Adequação de Carrocerias", "Regularização Veicular"]
},
{
icon: "ri-file-paper-2-line",
title: t('home.services.2.title'),
description: t('home.services.2.desc'),
title: "Laudos e Perícias",
description: "Emissão de laudos técnicos e pareceres periciais para equipamentos, estruturas e veículos.",
features: ["Laudos de Munck/Guindaste", "Inspeção de Segurança", "Teste de Carga", "Certificação de Equipamentos"]
},
{
@@ -40,9 +38,9 @@ export default function ServicosPage() {
<div className="absolute inset-0 bg-black/60 z-10"></div>
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
<div className="container mx-auto px-4 relative z-20">
<h1 className="text-5xl font-bold font-headline mb-4">{t('services.hero.title')}</h1>
<h1 className="text-5xl font-bold font-headline mb-4"><T>Nossos Serviços</T></h1>
<p className="text-xl text-gray-300 max-w-2xl">
{t('services.hero.subtitle')}
<T>Soluções completas em engenharia para atender às necessidades da sua empresa</T>
</p>
</div>
</section>
@@ -65,22 +63,22 @@ export default function ServicosPage() {
<span className="text-5xl font-bold text-gray-100 dark:text-white/10 font-headline select-none">0{index + 1}</span>
</div>
<h3 className="text-2xl font-bold font-headline text-secondary dark:text-white mb-4 group-hover:text-primary transition-colors">{service.title}</h3>
<h3 className="text-2xl font-bold font-headline text-secondary dark:text-white mb-4 group-hover:text-primary transition-colors"><T>{service.title}</T></h3>
<p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
{service.description}
<T>{service.description}</T>
</p>
</div>
<div className="mt-auto bg-gray-50/50 dark:bg-white/5 p-8 border-t border-gray-100 dark:border-white/10 backdrop-blur-sm">
<h4 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
<span className="w-8 h-px bg-primary"></span>
{t('services.scope')}
<T>Escopo de Atuação</T>
</h4>
<ul className="grid grid-cols-1 sm:grid-cols-2 gap-y-3 gap-x-4">
{service.features.map((feature, idx) => (
<li key={idx} className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
<i className="ri-checkbox-circle-fill text-primary/80"></i>
{feature}
<T>{feature}</T>
</li>
))}
</ul>
@@ -94,9 +92,9 @@ export default function ServicosPage() {
{/* CTA */}
<section className="py-16 bg-primary text-white text-center">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold font-headline mb-6">{t('services.cta.title')}</h2>
<h2 className="text-3xl font-bold font-headline mb-6"><T>Precisa de um serviço especializado?</T></h2>
<Link href="/contato" className="inline-block px-8 py-3 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition-colors">
{t('services.cta.button')}
<T>Solicite um Orçamento</T>
</Link>
</div>
</section>

32
frontend/src/app/(public)/sobre/page.tsx
View File

@@ -1,11 +1,9 @@
"use client";
import Image from "next/image";
import { useLanguage } from "@/contexts/LanguageContext";
import { T } from "@/components/TranslatedText";
export default function SobrePage() {
const { t } = useLanguage();
return (
<main className="bg-white dark:bg-secondary transition-colors duration-300">
{/* Hero Section */}
@@ -13,9 +11,9 @@ export default function SobrePage() {
<div className="absolute inset-0 bg-black/60 z-10"></div>
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
<div className="container mx-auto px-4 relative z-20">
<h1 className="text-5xl font-bold font-headline mb-4">{t('about.hero.title')}</h1>
<h1 className="text-5xl font-bold font-headline mb-4"><T>Sobre a OCCTO</T></h1>
<p className="text-xl text-gray-300 max-w-2xl">
{t('about.hero.subtitle')}
<T>Conheça nossa história, missão e valores que nos guiam na entrega de excelência em engenharia</T>
</p>
</div>
</section>
@@ -25,13 +23,13 @@ export default function SobrePage() {
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row gap-12 items-center">
<div className="w-full md:w-1/2">
<h2 className="text-primary font-bold tracking-wider uppercase mb-2">{t('about.history.title')}</h2>
<h3 className="text-3xl font-bold font-headline text-secondary dark:text-white mb-6">{t('about.history.subtitle')}</h3>
<h2 className="text-primary font-bold tracking-wider uppercase mb-2"><T>Nossa História</T></h2>
<h3 className="text-3xl font-bold font-headline text-secondary dark:text-white mb-6"><T>Mais de 15 anos de experiência em engenharia</T></h3>
<p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
{t('about.history.p1')}
<T>A OCCTO Engenharia foi fundada com o objetivo de oferecer soluções completas em engenharia mecânica, veicular e segurança do trabalho. Ao longo de mais de 15 anos, construímos uma trajetória sólida baseada na excelência técnica e no compromisso com a satisfação dos nossos clientes.</T>
</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
{t('about.history.p2')}
<T>Nossa equipe é formada por engenheiros altamente qualificados e especializados, que trabalham com as mais modernas ferramentas e metodologias para garantir resultados precisos e confiáveis em cada projeto.</T>
</p>
</div>
<div className="w-full md:w-1/2 grid grid-cols-2 gap-4">
@@ -50,30 +48,30 @@ export default function SobrePage() {
<section className="py-20 bg-gray-50 dark:bg-[#121212]">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-primary font-bold tracking-wider uppercase mb-2">{t('about.values.title')}</h2>
<h3 className="text-3xl font-bold font-headline text-secondary dark:text-white">{t('about.values.subtitle')}</h3>
<h2 className="text-primary font-bold tracking-wider uppercase mb-2"><T>Nossos Valores</T></h2>
<h3 className="text-3xl font-bold font-headline text-secondary dark:text-white"><T>O que nos move</T></h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
<i className="ri-medal-line text-2xl"></i>
</div>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3">{t('about.values.quality.title')}</h4>
<p className="text-gray-600 dark:text-gray-400">{t('about.values.quality.desc')}</p>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3"><T>Qualidade</T></h4>
<p className="text-gray-600 dark:text-gray-400"><T>Comprometimento com a excelência em cada projeto, garantindo precisão e conformidade em todas as entregas.</T></p>
</div>
<div className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
<i className="ri-shake-hands-line text-2xl"></i>
</div>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3">{t('about.values.transparency.title')}</h4>
<p className="text-gray-600 dark:text-gray-400">{t('about.values.transparency.desc')}</p>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3"><T>Transparência</T></h4>
<p className="text-gray-600 dark:text-gray-400"><T>Relações baseadas na honestidade e comunicação clara, mantendo nossos clientes sempre informados.</T></p>
</div>
<div className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
<i className="ri-leaf-line text-2xl"></i>
</div>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3">{t('about.values.sustainability.title')}</h4>
<p className="text-gray-600 dark:text-gray-400">{t('about.values.sustainability.desc')}</p>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3"><T>Sustentabilidade</T></h4>
<p className="text-gray-600 dark:text-gray-400"><T>Compromisso com práticas responsáveis e soluções que minimizam impactos ambientais.</T></p>
</div>
</div>
</div>