feat: CMS com limites de caracteres, traduções auto e painel de notificações

frontend/src/app/[locale]/projetos/page.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale } from "@/contexts/LocaleContext";
+
+export default function ProjetosPage() {
+  const { t, locale } = useLocale();
+  const prefix = locale === 'pt' ? '' : `/${locale}`;
+
+  // Placeholder data - will be replaced by database content
+  const projects = [
+    {
+      id: 1,
+      title: t('projects.items.item1.title'),
+      category: t('projects.categories.vehicular'),
+      location: "Vitória, ES",
+      image: "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop",
+      description: t('projects.items.item1.description')
+    },
+    {
+      id: 2,
+      title: t('projects.items.item2.title'),
+      category: t('projects.categories.reports'),
+      location: "Serra, ES",
+      image: "https://images.unsplash.com/photo-1535082623926-b3a33d531740?q=80&w=2052&auto=format&fit=crop",
+      description: t('projects.items.item2.description')
+    },
+    {
+      id: 3,
+      title: t('projects.items.item3.title'),
+      category: t('projects.categories.mechanical'),
+      location: "Aracruz, ES",
+      image: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop",
+      description: t('projects.items.item3.description')
+    },
+    {
+      id: 4,
+      title: t('projects.items.item4.title'),
+      category: t('projects.categories.safety'),
+      location: "Linhares, ES",
+      image: "https://images.unsplash.com/photo-1581092921461-eab62e97a782?q=80&w=2070&auto=format&fit=crop",
+      description: t('projects.items.item4.description')
+    },
+    {
+      id: 5,
+      title: t('projects.items.item5.title'),
+      category: t('projects.categories.vehicular'),
+      location: "Viana, ES",
+      image: "https://images.unsplash.com/photo-1591768793355-74d04bb6608f?q=80&w=2070&auto=format&fit=crop",
+      description: t('projects.items.item5.description')
+    },
+    {
+      id: 6,
+      title: t('projects.items.item6.title'),
+      category: t('projects.categories.safety'),
+      location: "Cariacica, ES",
+      image: "https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?q=80&w=2070&auto=format&fit=crop",
+      description: t('projects.items.item6.description')
+    }
+  ];
+
+  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 */}
+          <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.filters.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.filters.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.filters.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.filters.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={`${prefix}/projetos/${project.id}`} className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all mt-auto">
+                    {t('projects.viewDetails')} <i className="ri-arrow-right-line"></i>
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}