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

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

@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale } from "@/contexts/LocaleContext";
+
+export default function ServicosPage() {
+  const { t, locale } = useLocale();
+  const prefix = locale === 'pt' ? '' : `/${locale}`;
+
+  const services = [
+    {
+      icon: "ri-draft-line",
+      title: t('services.technical.title'),
+      description: t('services.technical.description'),
+      features: [
+        t('services.technical.feature1'),
+        t('services.technical.feature2'),
+        t('services.technical.feature3'),
+        t('services.technical.feature4')
+      ]
+    },
+    {
+      icon: "ri-truck-line",
+      title: t('services.vehicular.title'),
+      description: t('services.vehicular.description'),
+      features: [
+        t('services.vehicular.feature1'),
+        t('services.vehicular.feature2'),
+        t('services.vehicular.feature3'),
+        t('services.vehicular.feature4')
+      ]
+    },
+    {
+      icon: "ri-file-paper-2-line",
+      title: t('services.reports.title'),
+      description: t('services.reports.description'),
+      features: [
+        t('services.reports.feature1'),
+        t('services.reports.feature2'),
+        t('services.reports.feature3'),
+        t('services.reports.feature4')
+      ]
+    },
+    {
+      icon: "ri-tools-fill",
+      title: t('services.consulting.title'),
+      description: t('services.consulting.description'),
+      features: [
+        t('services.consulting.feature1'),
+        t('services.consulting.feature2'),
+        t('services.consulting.feature3'),
+        t('services.consulting.feature4')
+      ]
+    }
+  ];
+
+  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={`${prefix}/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>
+  );
+}