fix: corrigir tipagem de params para Next.js 15 nas APIs

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

@@ -1,59 +1,72 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { useLocale } from "@/contexts/LocaleContext";
 
+type Service = {
+  id: string;
+  title: string;
+  icon: string;
+  shortDescription: string | null;
+  fullDescription: string | null;
+  active: boolean;
+  order: number;
+};
+
 export default function ServicosPage() {
   const { t, locale } = useLocale();
   const prefix = locale === 'pt' ? '' : `/${locale}`;
+  const [services, setServices] = useState<Service[]>([]);
+  const [loading, setLoading] = useState(true);
 
-  const services = [
+  // Fallback services usando traduções
+  const fallbackServices = [
     {
       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')
-      ]
+      shortDescription: t('services.technical.description'),
     },
     {
       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')
-      ]
+      shortDescription: t('services.vehicular.description'),
     },
     {
       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')
-      ]
+      shortDescription: t('services.reports.description'),
     },
     {
       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')
-      ]
+      shortDescription: t('services.consulting.description'),
     }
   ];
 
+  useEffect(() => {
+    async function fetchServices() {
+      try {
+        const res = await fetch('/api/services');
+        if (res.ok) {
+          const data = await res.json();
+          // Filtrar apenas serviços ativos e ordenar
+          const activeServices = data
+            .filter((s: Service) => s.active)
+            .sort((a: Service, b: Service) => a.order - b.order);
+          setServices(activeServices);
+        }
+      } catch (error) {
+        console.error('Erro ao carregar serviços:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchServices();
+  }, []);
+
+  const displayServices = services.length > 0 ? services : fallbackServices;
+
   return (
     <main className="bg-white dark:bg-secondary transition-colors duration-300">
       {/* Hero Section */}
@@ -71,44 +84,37 @@ export default function ServicosPage() {
       {/* 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>
+          {loading ? (
+            <div className="flex items-center justify-center py-20">
+              <i className="ri-loader-4-line animate-spin text-4xl text-primary"></i>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {displayServices.map((service, index) => (
+                <div key={'id' in service ? service.id : 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>
                   
-                  <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 className="p-8 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">
+                      {service.shortDescription || ''}
+                    </p>
+                  </div>
                 </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>
+          )}
         </div>
       </section>