351 lines
16 KiB
TypeScript
351 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePageContent } from "@/hooks/usePageContent";
|
|
import { PartnerBadge } from "@/components/PartnerBadge";
|
|
|
|
type PortfolioProject = {
|
|
id: string;
|
|
title: string;
|
|
category: string;
|
|
coverImage: string | null;
|
|
galleryImages: string[];
|
|
status: string;
|
|
createdAt?: string;
|
|
};
|
|
|
|
type FallbackProject = {
|
|
id: string;
|
|
title: string;
|
|
category: string;
|
|
image: string;
|
|
};
|
|
|
|
const FALLBACK_PROJECTS: FallbackProject[] = [
|
|
{
|
|
id: "fallback-1",
|
|
title: "Projeto de Adequação - Coca-Cola",
|
|
category: "Engenharia Veicular",
|
|
image: "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop",
|
|
},
|
|
{
|
|
id: "fallback-2",
|
|
title: "Laudo de Guindaste Articulado",
|
|
category: "Inspeção Técnica",
|
|
image: "https://images.unsplash.com/photo-1581092335397-9583eb92d232?q=80&w=2070&auto=format&fit=crop",
|
|
},
|
|
{
|
|
id: "fallback-3",
|
|
title: "Dispositivo de Içamento Especial",
|
|
category: "Projeto Mecânico",
|
|
image: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop",
|
|
},
|
|
];
|
|
|
|
export default function Home() {
|
|
// Português é o idioma padrão - busca diretamente sem tradução
|
|
const { content, loading } = usePageContent('home', 'pt');
|
|
const [latestProjects, setLatestProjects] = useState<PortfolioProject[]>([]);
|
|
|
|
// Usar conteúdo do banco ou fallback
|
|
const hero = content?.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: 'Por que nos escolher',
|
|
title: 'Nossos Diferenciais',
|
|
items: [
|
|
{ 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: 'Nossos Serviços',
|
|
title: 'O Que Fazemos',
|
|
items: [
|
|
{ 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: '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: [
|
|
'Mais de 500 clientes atendidos',
|
|
'Equipe técnica qualificada',
|
|
'Parceiro oficial de grandes empresas'
|
|
] as string[]
|
|
};
|
|
|
|
const testimonials = content?.testimonials || {
|
|
pretitle: 'Depoimentos',
|
|
title: 'O Que Dizem Nossos Clientes',
|
|
items: [
|
|
{ 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 || {
|
|
clients: '500+',
|
|
projects: '1200+',
|
|
years: '15'
|
|
};
|
|
|
|
const cta = content?.cta || {
|
|
title: 'Pronto para tirar seu projeto do papel?',
|
|
text: 'Entre em contato com nossa equipe de especialistas.',
|
|
button: 'Fale Conosco'
|
|
};
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
const controller = new AbortController();
|
|
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects', {
|
|
method: 'GET',
|
|
cache: 'no-store',
|
|
credentials: 'same-origin',
|
|
signal: controller.signal,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Falha ao buscar projetos recentes (status ${response.status})`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (isMounted && Array.isArray(data)) {
|
|
const published = data
|
|
.filter((project: PortfolioProject) => project.status !== 'Rascunho')
|
|
.sort((a, b) => {
|
|
const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
|
|
const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
|
|
return dateB - dateA;
|
|
})
|
|
.slice(0, 3);
|
|
|
|
setLatestProjects(published);
|
|
}
|
|
} catch (err) {
|
|
if ((err as Error).name !== 'AbortError') {
|
|
console.error('Erro ao buscar projetos recentes:', err);
|
|
}
|
|
}
|
|
};
|
|
|
|
fetchProjects();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
controller.abort();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<main className="bg-white dark:bg-secondary transition-colors duration-300">
|
|
{/* Hero Section */}
|
|
<section className="relative h-[600px] flex items-center bg-secondary text-white overflow-hidden">
|
|
<div className="absolute inset-0 bg-black/60 z-10"></div>
|
|
{/* Placeholder for Hero Image - Industrial/Truck context */}
|
|
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
|
|
|
|
<div className="container mx-auto px-4 relative z-20">
|
|
<div className="max-w-3xl">
|
|
<div className="mb-8">
|
|
<PartnerBadge />
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-6xl font-bold font-headline mb-6 leading-tight">
|
|
{hero.title}
|
|
</h1>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-2xl">
|
|
{hero.subtitle}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Link href="/contato" className="px-8 py-4 bg-primary text-white rounded-lg font-bold hover-primary transition-colors text-center">
|
|
{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">
|
|
Ver Soluções
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section - Por que nos escolher */}
|
|
<section className="py-20 bg-white dark:bg-secondary">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-primary font-bold tracking-wider uppercase mb-2">{features.pretitle}</h2>
|
|
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{features.title}</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{features.items.map((feature: { icon: string; title: string; description: string }, index: number) => (
|
|
<div key={index} className="p-8 bg-gray-50 dark:bg-white/5 rounded-xl hover:shadow-lg transition-shadow border border-gray-100 dark:border-white/10 group">
|
|
<div className="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
|
|
<i className={`${feature.icon} text-3xl`}></i>
|
|
</div>
|
|
<h3 className="text-2xl font-bold font-headline mb-4 text-secondary dark:text-white">{feature.title}</h3>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<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">{services.pretitle}</h2>
|
|
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{services.title}</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{services.items.map((service: { icon: string; title: string; description: string }, index: number) => (
|
|
<div key={index} className="bg-white dark:bg-secondary p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow border-b-4 border-transparent hover:border-primary">
|
|
<i className={`${service.icon} text-4xl text-primary mb-4 block`}></i>
|
|
<h4 className="text-xl font-bold font-headline mb-2 text-secondary dark:text-white">{service.title}</h4>
|
|
<p className="text-gray-600 dark:text-gray-400 text-sm">{service.description}</p>
|
|
</div>
|
|
))}
|
|
</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">
|
|
Ver todos os serviços <i className="ri-arrow-right-line"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* About Preview */}
|
|
<section className="py-20 bg-secondary text-white">
|
|
<div className="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
|
|
<div className="w-full md:w-1/2 hidden md:block">
|
|
<div className="relative h-[400px] w-full rounded-xl overflow-hidden">
|
|
{/* Placeholder for About Image - Engineer inspecting */}
|
|
<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>
|
|
</div>
|
|
<div className="w-full md:w-1/2">
|
|
<h2 className="text-primary font-bold tracking-wider uppercase mb-2">{about.pretitle}</h2>
|
|
<h3 className="text-4xl font-bold font-headline mb-6">{about.title}</h3>
|
|
<p className="text-gray-400 mb-6 text-lg">
|
|
{about.description}
|
|
</p>
|
|
<ul className="space-y-4 mb-8">
|
|
{about.highlights.map((highlight: string, index: number) => (
|
|
<li key={index} className="flex items-center gap-3">
|
|
<i className="ri-check-double-line text-primary text-xl"></i>
|
|
<span>{highlight}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link href="/sobre" className="text-primary font-bold hover:text-white transition-colors flex items-center gap-2">
|
|
Conheça nossa expertise <i className="ri-arrow-right-line"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Latest Projects Section */}
|
|
<section className="py-20 bg-white dark:bg-secondary">
|
|
<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">Portfólio</h2>
|
|
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">Projetos Recentes</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">
|
|
Ver todos os projetos
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{(latestProjects.length > 0
|
|
? latestProjects.map((project) => ({
|
|
id: project.id,
|
|
title: project.title,
|
|
category: project.category,
|
|
image: project.coverImage || project.galleryImages?.[0] || FALLBACK_PROJECTS[0].image,
|
|
}))
|
|
: FALLBACK_PROJECTS
|
|
).map((project) => (
|
|
<Link key={project.id} href={`/projetos/${project.id}`} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer block">
|
|
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{ backgroundImage: `url('${project.image}')` }}></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.category}</span>
|
|
<h3 className="text-2xl font-bold font-headline text-white mb-2">{project.title}</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">
|
|
Ver detalhes <i className="ri-arrow-right-line"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Testimonials Section */}
|
|
<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">{testimonials.pretitle}</h2>
|
|
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{testimonials.title}</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{testimonials.items.map((testimonial: { text: string; name: string; role: string }, index: number) => (
|
|
<div key={index} className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border border-gray-100 dark:border-white/10 relative">
|
|
<i className="ri-double-quotes-l text-4xl text-primary/20 absolute top-6 left-6"></i>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-6 relative z-10 pt-6 italic">"{testimonial.text}"</p>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-gray-200 dark:bg-white/10 rounded-full flex items-center justify-center text-gray-400">
|
|
<i className="ri-user-line text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold font-headline text-secondary dark:text-white">{testimonial.name}</h4>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">{testimonial.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-24 bg-primary">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="text-4xl font-bold font-headline text-white mb-6">{cta.title}</h2>
|
|
<p className="text-white/90 text-xl mb-8 max-w-2xl mx-auto">
|
|
{cta.text}
|
|
</p>
|
|
<Link href="/contato" className="inline-block px-10 py-4 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition-colors shadow-lg">
|
|
{cta.button}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|