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

Initial commit: CMS completo com gerenciamento de leads e personalização de tema

Browse Source
This commit is contained in:
Erik
2025-11-26 14:09:21 -03:00
commit aaa1709e41
106 changed files with 26268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
frontend/src/app/(public)/contato/page.tsx Normal file
View File

@@ -0,0 +1,316 @@
"use client";
import { useLanguage } from "@/contexts/LanguageContext";
import { useToast } from "@/contexts/ToastContext";
import { useState, useEffect } from "react";
interface ContactInfo {
icon: string;
title: string;
description: string;
link: string;
linkText: string;
}
interface ContactContent {
hero: {
pretitle: string;
title: string;
subtitle: string;
};
info: {
title: string;
subtitle: string;
description: string;
items: ContactInfo[];
};
}
export default function ContatoPage() {
const { t } = useLanguage();
const { success, error: showError } = useToast();
const [content, setContent] = useState<ContactContent | null>(null);
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [formData, setFormData] = useState({
name: '',
phone: '',
email: '',
subject: '',
message: ''
});
useEffect(() => {
fetchContent();
}, []);
const fetchContent = async () => {
try {
const response = await fetch('/api/pages/contact');
if (response.ok) {
const data = await response.json();
if (data.content) {
setContent(data.content);
}
}
} catch (error) {
console.error('Erro ao carregar conteúdo:', error);
} finally {
setLoading(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSubmitting(true);
try {
const response = await fetch('/api/messages', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
if (!response.ok) throw new Error('Erro ao enviar mensagem');
// Limpar formulário
setFormData({
name: '',
phone: '',
email: '',
subject: '',
message: ''
});
success('Mensagem enviada com sucesso! Entraremos em contato em breve.');
} catch (error) {
showError('Erro ao enviar mensagem. Tente novamente.');
} finally {
setSubmitting(false);
}
};
// 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 info = content?.info || {
title: t('contact.info.title'),
subtitle: t('contact.info.subtitle'),
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'),
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'),
link: 'mailto:contato@octto.com.br',
linkText: 'contato@octto.com.br'
},
{
icon: 'ri-map-pin-line',
title: t('contact.info.address.title'),
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'
}
]
};
return (
<main className="bg-white dark:bg-secondary transition-colors duration-300">
{/* Hero Section */}
<section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
<div className="absolute inset-0 bg-linear-to-r from-black/80 to-black/40 z-10"></div>
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?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="inline-flex items-center gap-2 bg-primary/20 backdrop-blur-sm border border-primary/30 rounded-full px-4 py-1 mb-6">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
<span className="text-sm font-bold text-primary uppercase tracking-wider">{hero.pretitle}</span>
</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 max-w-2xl leading-relaxed">
{hero.subtitle}
</p>
</div>
</div>
</section>
<section className="py-20 bg-white dark:bg-secondary relative">
{/* Decorative Elements */}
<div className="absolute top-0 right-0 w-1/3 h-full bg-gray-50 dark:bg-white/5 -z-10 hidden lg:block"></div>
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
{/* Informações de Contato */}
<div className="lg:col-span-5 space-y-12">
<div>
<h2 className="text-primary font-bold tracking-wider uppercase mb-3">{info.title}</h2>
<h3 className="text-3xl md:text-4xl font-bold font-headline text-secondary dark:text-white mb-6">{info.subtitle}</h3>
<p className="text-gray-600 dark:text-gray-400 text-lg leading-relaxed">
{info.description}
</p>
</div>
<div className="space-y-6">
{info.items.map((item, index) => (
<div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
<div className="flex items-start gap-5">
<div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
<i className={`${item.icon} text-3xl`}></i>
</div>
<div>
<h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
<p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
<a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">
{item.linkText} <i className="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
))}
</div>
</div>
{/* Formulário */}
<div className="lg:col-span-7">
<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>
<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>
<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
type="text"
id="nome"
required
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')}
/>
</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>
<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
type="tel"
id="telefone"
value={formData.phone}
onChange={(e) => setFormData({...formData, phone: 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="(00) 00000-0000"
/>
</div>
</div>
</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>
<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
type="email"
id="email"
required
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')}
/>
</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>
<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
id="assunto"
value={formData.subject}
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>
</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>
<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
id="mensagem"
required
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')}
></textarea>
</div>
</div>
<button
type="submit"
disabled={submitting}
className="mt-4 w-full bg-primary text-white py-4 rounded-xl font-bold hover:bg-orange-600 transition-all shadow-lg hover:shadow-primary/30 flex items-center justify-center gap-2 group disabled:opacity-50 disabled:cursor-not-allowed"
>
{submitting ? (
<>
<i className="ri-loader-4-line animate-spin"></i>
<span>Enviando...</span>
</>
) : (
<>
<span>{t('contact.form.submit')}</span>
<i className="ri-send-plane-fill group-hover:translate-x-1 transition-transform"></i>
</>
)}
</button>
</form>
</div>
</div>
</div>
</div>
</section>
{/* Map Section */}
<section className="h-[400px] w-full bg-gray-200 dark:bg-white/5 relative grayscale hover:grayscale-0 transition-all duration-700">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3741.447687667888!2d-40.29799692398269!3d-20.32313498115656!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xb817d0a5b5b5b5%3A0x5b5b5b5b5b5b5b5b!2sAv.%20Nossa%20Sra.%20da%20Penha%2C%20Vit%C3%B3ria%20-%20ES!5e0!3m2!1spt-BR!2sbr!4v1700000000000!5m2!1spt-BR!2sbr"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
className="absolute inset-0"
></iframe>
<div className="absolute inset-0 bg-primary/10 pointer-events-none"></div>
</section>
</main>
);
}

22
frontend/src/app/(public)/layout.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import CookieConsent from "@/components/CookieConsent";
import WhatsAppButton from "@/components/WhatsAppButton";
export default function PublicLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Header />
<div className="grow">
{children}
</div>
<Footer />
<CookieConsent />
<WhatsAppButton />
</>
);
}

261
frontend/src/app/(public)/page.tsx Normal file
View File

@@ -0,0 +1,261 @@
"use client";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { usePageContent } from "@/hooks/usePageContent";
export default function Home() {
const { t } = useLanguage();
const { content, loading } = usePageContent('home');
// 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')
};
const features = content?.features || {
pretitle: t('home.features.pretitle'),
title: t('home.features.title'),
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') }
]
};
const services = content?.services || {
pretitle: t('home.services.pretitle'),
title: t('home.services.title'),
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') }
]
};
const about = content?.about || {
pretitle: t('home.about.pretitle'),
title: t('home.about.title'),
description: t('home.about.desc'),
highlights: [
t('home.about.list.1'),
t('home.about.list.2'),
t('home.about.list.3')
]
};
const testimonials = content?.testimonials || {
pretitle: t('home.testimonials.pretitle'),
title: t('home.testimonials.title'),
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') }
]
};
const stats = content?.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')
};
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="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>
</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:bg-orange-600 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">
{t('home.hero.cta_secondary')}
</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, index) => (
<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, index) => (
<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">
{t('home.services.link')} <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, index) => (
<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">
{t('home.about.link')} <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">{t('home.projects.pretitle')}</h2>
<h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{t('home.projects.title')}</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')}
</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') }
].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>
<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>
</span>
</div>
</div>
</div>
))}
</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, index) => (
<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>
);
}

55
frontend/src/app/(public)/privacidade/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
export default function PrivacyPolicy() {
return (
<main className="py-20 bg-white">
<div className="container mx-auto px-4 max-w-4xl">
<h1 className="text-4xl font-bold font-headline text-secondary mb-8">Política de Privacidade</h1>
<div className="prose prose-lg text-gray-600">
<p className="mb-6">
A Octto Engenharia valoriza a privacidade de seus usuários e clientes. Esta Política de Privacidade descreve como coletamos, usamos e protegemos suas informações pessoais ao utilizar nosso site e serviços.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">1. Coleta de Informações</h2>
<p className="mb-4">
Coletamos informações que você nos fornece diretamente, como quando preenche nosso formulário de contato, solicita um orçamento ou se inscreve em nossa newsletter. As informações podem incluir nome, e-mail, telefone e detalhes sobre sua empresa ou projeto.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">2. Uso das Informações</h2>
<p className="mb-4">
Utilizamos as informações coletadas para:
</p>
<ul className="list-disc pl-6 mb-6 space-y-2">
<li>Responder a suas consultas e solicitações de orçamento;</li>
<li>Fornecer informações sobre nossos serviços de engenharia e laudos técnicos;</li>
<li>Melhorar a experiência do usuário em nosso site;</li>
<li>Cumprir obrigações legais e regulatórias.</li>
</ul>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">3. Proteção de Dados</h2>
<p className="mb-4">
Adotamos medidas de segurança técnicas e organizacionais adequadas para proteger seus dados pessoais contra acesso não autorizado, alteração, divulgação ou destruição.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">4. Compartilhamento de Informações</h2>
<p className="mb-4">
Não vendemos, trocamos ou transferimos suas informações pessoais para terceiros, exceto quando necessário para a prestação de nossos serviços (ex: parceiros técnicos envolvidos em um projeto específico) ou quando exigido por lei.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">5. Cookies</h2>
<p className="mb-4">
Nosso site pode utilizar cookies para melhorar a navegação e entender como os visitantes interagem com nosso conteúdo. Você pode desativar os cookies nas configurações do seu navegador, se preferir.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">6. Contato</h2>
<p className="mb-4">
Se você tiver dúvidas sobre esta Política de Privacidade, entre em contato conosco através do e-mail: contato@octto.com.br.
</p>
<p className="text-sm text-gray-500 mt-12">
Última atualização: Novembro de 2025.
</p>
</div>
</div>
</main>
);
}

157
frontend/src/app/(public)/projetos/[id]/page.tsx Normal file
View File

@@ -0,0 +1,157 @@
import Link from "next/link";
import { notFound } from "next/navigation";
// Mock data - same as in the main projects page
// In a real app, this would come from a database or API
const projects = [
{
id: 1,
title: "Engenharia de Adequação - Frota Coca-Cola",
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.",
details: "Desenvolvimento completo do projeto de engenharia para adequação de frota de distribuição de bebidas. O escopo incluiu o cálculo estrutural para rebaixamento de carrocerias, instalação de sistemas de proteção lateral e traseira conforme resoluções do CONTRAN, e homologação junto aos órgãos competentes. O projeto resultou em aumento de 15% na capacidade de carga e total conformidade normativa.",
features: ["Cálculo Estrutural", "Homologação DENATRAN", "Segurança Operacional", "Adequação de Carroceria"]
},
{
id: 2,
title: "Laudo de Guindaste Articulado",
category: "Inspeção Técnica",
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.",
details: "Realização de inspeção detalhada em guindaste articulado (Munck) com capacidade de 45 toneladas. Foram realizados ensaios não destrutivos (líquido penetrante) em pontos críticos de solda, verificação do sistema hidráulico, testes de carga estática e dinâmica conforme NR-11. O laudo técnico atestou a integridade do equipamento para operação segura.",
features: ["Ensaio Não Destrutivo", "Teste de Carga", "Verificação Hidráulica", "ART de Inspeção"]
},
{
id: 3,
title: "Projeto de Dispositivo de Içamento",
category: "Projeto Mecânico",
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.",
details: "Projeto mecânico de um Spreader (balancim) automático para içamento de contêineres de 20 e 40 pés. O dispositivo foi projetado para suportar cargas de até 30 toneladas, com sistema de travamento twist-lock automático. Entregamos o projeto completo em 3D, desenhos de fabricação, memorial de cálculo e manual de operação.",
features: ["Modelagem 3D", "Cálculo de Elementos Finitos", "Detalhamento de Fabricação", "Manual de Operação"]
},
{
id: 4,
title: "Certificação NR-12 - Parque Industrial",
category: "Laudos",
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.",
details: "Consultoria completa para adequação à NR-12 em parque fabril. Realizamos o inventário de 120 máquinas, análise de risco (HRN), projeto de proteções mecânicas e sistemas de segurança eletrônica. Acompanhamos a implementação e emitimos os laudos de validação final, garantindo a segurança dos operadores.",
features: ["Análise de Risco", "Projeto de Proteções", "Sistemas de Segurança", "Laudo de Validação"]
},
{
id: 5,
title: "Homologação de Plataforma Elevatória",
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.",
details: "Assessoria técnica para fabricante de plataformas elevatórias veiculares. Realizamos os cálculos de estabilidade, testes de tombamento e resistência estrutural necessários para a obtenção do CAT (Certificado de Adequação à Legislação de Trânsito). O equipamento foi homologado com sucesso para uso em veículos urbanos de carga.",
features: ["Cálculo de Estabilidade", "Teste de Tombamento", "Dossiê Técnico", "Homologação INMETRO/DENATRAN"]
},
{
id: 6,
title: "Projeto de Linha de Vida para Caminhões",
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.",
details: "Projeto e instalação de sistema de linha de vida rígida sobre estrutura metálica para proteção de quedas durante o enlonamento de caminhões. O sistema permite que o operador trabalhe com segurança em toda a extensão da carroceria. Fornecimento de projeto, ART e treinamento de uso para a equipe.",
features: ["Projeto Estrutural", "Sistema de Ancoragem", "Treinamento NR-35", "ART de Instalação"]
}
];
export default function ProjectDetails({ params }: { params: { id: string } }) {
const project = projects.find((p) => p.id === parseInt(params.id));
if (!project) {
notFound();
}
return (
<main>
{/* Hero Section */}
<section className="relative h-[500px] flex items-center bg-secondary text-white overflow-hidden">
<div className="absolute inset-0 bg-black/60 z-10"></div>
<div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url('${project.image}')` }}
></div>
<div className="container mx-auto px-4 relative z-20">
<span className="inline-block px-3 py-1 bg-primary text-white text-sm font-bold rounded-md mb-4 uppercase tracking-wider">
{project.category}
</span>
<h1 className="text-4xl md:text-6xl font-bold font-headline mb-4 leading-tight max-w-4xl">
{project.title}
</h1>
<div className="flex items-center gap-2 text-gray-300 text-lg">
<i className="ri-map-pin-line text-primary"></i>
<span>{project.location}</span>
</div>
</div>
</section>
{/* Content Section */}
<section className="py-20 bg-white">
<div className="container mx-auto px-4">
<div className="flex flex-col lg:flex-row gap-16">
{/* Main Content */}
<div className="lg:w-2/3">
<h2 className="text-3xl font-bold font-headline text-secondary mb-6">Sobre o Projeto</h2>
<p className="text-gray-600 text-lg leading-relaxed mb-8">
{project.details}
</p>
<h3 className="text-2xl font-bold font-headline text-secondary mb-6">Escopo Técnico</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{project.features.map((feature, index) => (
<div key={index} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg border border-gray-100">
<i className="ri-checkbox-circle-line text-primary text-xl"></i>
<span className="font-medium text-gray-700">{feature}</span>
</div>
))}
</div>
</div>
{/* Sidebar */}
<div className="lg:w-1/3">
<div className="bg-gray-50 p-8 rounded-xl border border-gray-100 sticky top-24">
<h3 className="text-xl font-bold font-headline text-secondary mb-6">Ficha Técnica</h3>
<ul className="space-y-4 mb-8">
<li className="flex justify-between border-b border-gray-200 pb-3">
<span className="text-gray-500">Cliente</span>
<span className="font-medium text-secondary">Confidencial</span>
</li>
<li className="flex justify-between border-b border-gray-200 pb-3">
<span className="text-gray-500">Categoria</span>
<span className="font-medium text-secondary">{project.category}</span>
</li>
<li className="flex justify-between border-b border-gray-200 pb-3">
<span className="text-gray-500">Local</span>
<span className="font-medium text-secondary">{project.location}</span>
</li>
<li className="flex justify-between border-b border-gray-200 pb-3">
<span className="text-gray-500">Ano</span>
<span className="font-medium text-secondary">2024</span>
</li>
</ul>
<Link href="/contato" className="block w-full py-4 bg-primary text-white text-center rounded-lg font-bold hover:bg-orange-600 transition-colors">
Solicitar Orçamento Similar
</Link>
<Link href="/projetos" className="block w-full py-4 mt-4 border border-gray-300 text-gray-600 text-center rounded-lg font-bold hover:bg-gray-100 transition-colors">
Voltar para Projetos
</Link>
</div>
</div>
</div>
</div>
</section>
</main>
);
}

116
frontend/src/app/(public)/projetos/page.tsx Normal file
View File

@@ -0,0 +1,116 @@
"use client";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
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'),
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'),
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'),
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'),
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'),
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'),
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."
}
];
return (
<main className="bg-white dark:bg-secondary transition-colors duration-300">
{/* Hero Section */}
<section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
<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>
<p className="text-xl text-gray-300 max-w-2xl">
{t('projects.hero.subtitle')}
</p>
</div>
</section>
{/* Projects Grid */}
<section className="py-20 bg-white dark:bg-secondary">
<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>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{projects.map((project) => (
<div key={project.id} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col">
<div className="relative h-64 overflow-hidden">
<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}
</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>
<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}
</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>
</Link>
</div>
</div>
))}
</div>
</div>
</section>
</main>
);
}

105
frontend/src/app/(public)/servicos/page.tsx Normal file
View File

@@ -0,0 +1,105 @@
"use client";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
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'),
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'),
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'),
features: ["Laudos de Munck/Guindaste", "Inspeção de Segurança", "Teste de Carga", "Certificação de Equipamentos"]
},
{
icon: "ri-tools-fill",
title: "Consultoria Técnica",
description: "Assessoria especializada para adequação de frotas, planos de Rigging e supervisão de manutenção de equipamentos de carga.",
features: ["Plano de Rigging", "Supervisão de Manutenção", "Consultoria em Normas", "Treinamento Operacional"]
}
];
return (
<main className="bg-white dark:bg-secondary transition-colors duration-300">
{/* Hero Section */}
<section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
<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>
<p className="text-xl text-gray-300 max-w-2xl">
{t('services.hero.subtitle')}
</p>
</div>
</section>
{/* Services List */}
<section className="py-20 bg-gray-50 dark:bg-[#121212]">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{services.map((service, index) => (
<div key={index} className="group bg-white dark:bg-secondary rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-white/10 flex flex-col relative">
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<i className={`${service.icon} text-9xl text-primary`}></i>
</div>
<div className="p-8 pb-0 relative z-10">
<div className="flex justify-between items-start mb-6">
<div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 shadow-sm">
<i className={`${service.icon} text-3xl`}></i>
</div>
<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>
<p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
{service.description}
</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')}
</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}
</li>
))}
</ul>
</div>
</div>
))}
</div>
</div>
</section>
{/* 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>
<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')}
</Link>
</div>
</section>
</main>
);
}

83
frontend/src/app/(public)/sobre/page.tsx Normal file
View File

@@ -0,0 +1,83 @@
"use client";
import Image from "next/image";
import { useLanguage } from "@/contexts/LanguageContext";
export default function SobrePage() {
const { t } = useLanguage();
return (
<main className="bg-white dark:bg-secondary transition-colors duration-300">
{/* Hero Section */}
<section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
<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>
<p className="text-xl text-gray-300 max-w-2xl">
{t('about.hero.subtitle')}
</p>
</div>
</section>
{/* História e Missão */}
<section className="py-20 bg-white dark:bg-secondary">
<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>
<p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
{t('about.history.p1')}
</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
{t('about.history.p2')}
</p>
</div>
<div className="w-full md:w-1/2 grid grid-cols-2 gap-4">
<div className="h-64 rounded-xl bg-gray-200 dark:bg-white/10 overflow-hidden relative">
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center"></div>
</div>
<div className="h-64 rounded-xl bg-gray-200 dark:bg-white/10 overflow-hidden relative mt-8">
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center"></div>
</div>
</div>
</div>
</div>
</section>
{/* Valores */}
<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>
</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>
</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>
</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>
</div>
</div>
</div>
</section>
</main>
);
}

49
frontend/src/app/(public)/termos/page.tsx Normal file
View File

@@ -0,0 +1,49 @@
export default function TermsOfUse() {
return (
<main className="py-20 bg-white">
<div className="container mx-auto px-4 max-w-4xl">
<h1 className="text-4xl font-bold font-headline text-secondary mb-8">Termos de Uso</h1>
<div className="prose prose-lg text-gray-600">
<p className="mb-6">
Bem-vindo ao site da Octto Engenharia. Ao acessar e utilizar este site, você concorda em cumprir e estar vinculado aos seguintes Termos de Uso. Se você não concordar com qualquer parte destes termos, por favor, não utilize nosso site.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">1. Uso do Site</h2>
<p className="mb-4">
O conteúdo deste site é apenas para fins informativos gerais sobre nossos serviços de engenharia mecânica, laudos e projetos. Reservamo-nos o direito de alterar ou descontinuar qualquer aspecto do site a qualquer momento.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">2. Propriedade Intelectual</h2>
<p className="mb-4">
Todo o conteúdo presente neste site, incluindo textos, gráficos, logotipos, ícones, imagens e software, é propriedade da Octto Engenharia ou de seus fornecedores de conteúdo e é protegido pelas leis de direitos autorais do Brasil e internacionais.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">3. Limitação de Responsabilidade</h2>
<p className="mb-4">
A Octto Engenharia não se responsabiliza por quaisquer danos diretos, indiretos, incidentais ou consequenciais resultantes do uso ou da incapacidade de uso deste site ou de qualquer informação nele contida. As informações técnicas fornecidas no site não substituem a consulta profissional e a emissão de laudos técnicos específicos para cada caso.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">4. Links para Terceiros</h2>
<p className="mb-4">
Nosso site pode conter links para sites de terceiros. Estes links são fornecidos apenas para sua conveniência. A Octto Engenharia não tem controle sobre o conteúdo desses sites e não assume responsabilidade por eles.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">5. Alterações nos Termos</h2>
<p className="mb-4">
Podemos revisar estes Termos de Uso a qualquer momento. Ao utilizar este site, você concorda em ficar vinculado à versão atual desses Termos de Uso.
</p>
<h2 className="text-2xl font-bold font-headline text-secondary mt-8 mb-4">6. Legislação Aplicável</h2>
<p className="mb-4">
Estes termos são regidos e interpretados de acordo com as leis da República Federativa do Brasil. Qualquer disputa relacionada a estes termos será submetida à jurisdição exclusiva dos tribunais competentes.
</p>
<p className="text-sm text-gray-500 mt-12">
Última atualização: Novembro de 2025.
</p>
</div>
</div>
</main>
);
}