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

frontend/src/components/ColorProvider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+
+export function ColorProvider({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    loadPrimaryColor();
+  }, []);
+
+  const loadPrimaryColor = async () => {
+    try {
+      const response = await fetch('/api/config');
+      if (response.ok) {
+        const data = await response.json();
+        if (data.primaryColor) {
+          applyPrimaryColor(data.primaryColor);
+        }
+      }
+    } catch (error) {
+      console.error('Erro ao carregar cor primária:', error);
+    }
+  };
+
+  const applyPrimaryColor = (color: string) => {
+    // Converte hex para RGB
+    const r = parseInt(color.slice(1, 3), 16);
+    const g = parseInt(color.slice(3, 5), 16);
+    const b = parseInt(color.slice(5, 7), 16);
+
+    // Define as CSS variables
+    document.documentElement.style.setProperty('--color-primary-rgb', `${r} ${g} ${b}`);
+    document.documentElement.style.setProperty('--color-primary', color);
+  };
+
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return <>{children}</>;
+}

frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  type?: 'danger' | 'warning' | 'info';
+}
+
+export default function ConfirmDialog({
+  title,
+  message,
+  confirmText = 'OK',
+  cancelText = 'Cancelar',
+  onConfirm,
+  onCancel,
+  type = 'danger',
+}: ConfirmDialogProps) {
+  const buttonStyles = {
+    danger: 'bg-red-500 hover:bg-red-600 text-white',
+    warning: 'bg-yellow-500 hover:bg-yellow-600 text-white',
+    info: 'bg-primary hover:bg-orange-600 text-white',
+  };
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 animate-in fade-in duration-200"
+      onClick={onCancel}
+    >
+      <div 
+        className="bg-white dark:bg-secondary rounded-2xl shadow-2xl max-w-md w-full p-6 animate-in zoom-in-95 duration-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="text-xl font-bold text-secondary dark:text-white mb-3">
+          {title}
+        </h3>
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          {message}
+        </p>
+        <div className="flex gap-3">
+          <button
+            onClick={onCancel}
+            className="flex-1 px-4 py-3 border border-gray-300 dark:border-white/10 text-gray-700 dark:text-gray-300 rounded-xl font-medium hover:bg-gray-50 dark:hover:bg-white/5 transition-colors"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={`flex-1 px-4 py-3 rounded-xl font-medium transition-colors ${buttonStyles[type]}`}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/CookieConsent.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function CookieConsent() {
+  const [isVisible, setIsVisible] = useState(false);
+  const { t } = useLanguage();
+
+  useEffect(() => {
+    // Check if user has already made a choice
+    const consent = localStorage.getItem('cookie_consent');
+    if (consent === null) {
+      // Small delay to show animation
+      const timer = setTimeout(() => setIsVisible(true), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('cookie_consent', 'true');
+    setIsVisible(false);
+  };
+
+  const handleDecline = () => {
+    localStorage.setItem('cookie_consent', 'false');
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 animate-in slide-in-from-bottom-full duration-500">
+      <div className="container mx-auto max-w-4xl">
+        <div className="bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-2xl shadow-2xl p-6 md:flex items-center justify-between gap-6">
+          <div className="flex items-start gap-4 mb-6 md:mb-0">
+            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center shrink-0 text-primary">
+              <i className="ri-cookie-2-line text-2xl"></i>
+            </div>
+            <div>
+              <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                {t('cookie.text')}{' '}
+                <Link href="/privacidade" className="text-primary font-bold hover:underline">
+                  {t('cookie.policy')}
+                </Link>.
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex items-center justify-center gap-3 shrink-0">
+            <button 
+              onClick={handleDecline}
+              className="px-6 py-2.5 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-lg font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors text-sm cursor-pointer"
+            >
+              {t('cookie.decline')}
+            </button>
+            <button 
+              onClick={handleAccept}
+              className="px-6 py-2.5 bg-primary text-white rounded-lg font-bold hover:bg-orange-600 transition-colors text-sm shadow-lg shadow-primary/20 cursor-pointer"
+            >
+              {t('cookie.accept')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Footer.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import Link from 'next/link';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function Footer() {
+  const { t } = useLanguage();
+
+  return (
+    <footer className="bg-secondary text-white pt-16 pb-8">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
+          {/* Brand */}
+          <div className="col-span-1 md:col-span-1">
+            <div className="flex items-center gap-2 mb-6">
+              <i className="ri-building-2-fill text-4xl text-primary"></i>
+              <div className="flex items-center gap-2">
+                <span className="text-2xl font-bold font-headline">OCCTO</span>
+                <span className="text-[10px] font-bold text-primary bg-white/10 px-2 py-1 rounded-md uppercase tracking-wider">ENG.</span>
+              </div>
+            </div>
+            <p className="text-gray-400 mb-6">
+              Soluções em engenharia mecânica e segurança para movimentação de carga.
+            </p>
+            
+            <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-3 py-2 mb-6">
+              <i className="ri-verified-badge-fill text-primary"></i>
+              <span className="text-xs font-bold text-gray-300 uppercase tracking-wide">Prestador Oficial <span className="text-primary">Coca-Cola</span></span>
+            </div>
+
+            <div className="flex gap-4">
+              <a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
+                <i className="ri-instagram-line"></i>
+              </a>
+              <a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
+                <i className="ri-linkedin-fill"></i>
+              </a>
+              <a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
+                <i className="ri-facebook-fill"></i>
+              </a>
+            </div>
+          </div>
+
+          {/* Links */}
+          <div>
+            <h3 className="text-lg font-bold font-headline mb-6">Links Rápidos</h3>
+            <ul className="space-y-4">
+              <li><Link href="/" className="text-gray-400 hover:text-primary transition-colors">{t('nav.home')}</Link></li>
+              <li><Link href="/sobre" className="text-gray-400 hover:text-primary transition-colors">{t('nav.about')}</Link></li>
+              <li><Link href="/servicos" className="text-gray-400 hover:text-primary transition-colors">{t('nav.services')}</Link></li>
+              <li><Link href="/projetos" className="text-gray-400 hover:text-primary transition-colors">{t('nav.projects')}</Link></li>
+              <li><Link href="/contato" className="text-gray-400 hover:text-primary transition-colors">{t('nav.contact')}</Link></li>
+            </ul>
+          </div>
+
+          {/* Services */}
+          <div>
+            <h3 className="text-lg font-bold font-headline mb-6">{t('services.title')}</h3>
+            <ul className="space-y-4">
+              <li className="text-gray-400">Projetos de Dispositivos</li>
+              <li className="text-gray-400">Engenharia de Implementos</li>
+              <li className="text-gray-400">Inspeção de Equipamentos</li>
+              <li className="text-gray-400">Laudos Técnicos (NR-11/12)</li>
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div>
+            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.contact')}</h3>
+            <ul className="space-y-4">
+              <li className="flex items-start gap-3 text-gray-400">
+                <i className="ri-map-pin-line mt-1 text-primary"></i>
+                <span>Endereço da Empresa, 123<br />Cidade - ES</span>
+              </li>
+              <li className="flex items-center gap-3 text-gray-400">
+                <i className="ri-phone-line text-primary"></i>
+                <span>(27) 99999-9999</span>
+              </li>
+              <li className="flex items-center gap-3 text-gray-400">
+                <i className="ri-mail-line text-primary"></i>
+                <span>contato@octto.com.br</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-gray-500 text-sm">
+            © {new Date().getFullYear()} OCCTO Engenharia. {t('footer.rights')}
+          </p>
+          <div className="flex gap-6 text-sm text-gray-500">
+            <Link href="/privacidade" className="hover:text-white">Política de Privacidade</Link>
+            <Link href="/termos" className="hover:text-white">Termos de Uso</Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

frontend/src/components/Header.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import Link from 'next/link';
+import { useState, useEffect } from 'react';
+import { useTheme } from "next-themes";
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function Header() {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const { language, setLanguage, t } = useLanguage();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Prevent scrolling when mobile menu is open
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isMobileMenuOpen]);
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  const cycleLanguage = () => {
+    const langs: ('PT' | 'EN' | 'ES')[] = ['PT', 'EN', 'ES'];
+    const currentIndex = langs.indexOf(language);
+    const nextIndex = (currentIndex + 1) % langs.length;
+    setLanguage(langs[nextIndex]);
+  };
+
+  return (
+    <header className="w-full bg-white dark:bg-secondary shadow-sm sticky top-0 z-50 transition-colors duration-300">
+      <div className="container mx-auto px-4 h-20 flex items-center justify-between gap-4">
+        <Link href="/" className="flex items-center gap-3 shrink-0 group mr-auto z-50 relative">
+          <i className="ri-building-2-fill text-4xl text-primary group-hover:scale-105 transition-transform"></i>
+          <div className="flex items-center gap-2">
+            <span className="text-3xl font-bold text-secondary dark:text-white font-headline leading-none">OCCTO</span>
+            <span className="text-[10px] font-bold text-primary bg-primary/10 px-2 py-1 rounded-md uppercase tracking-wider">ENG.</span>
+          </div>
+        </Link>
+
+        <div className="hidden md:flex items-center gap-4">
+          {/* Search Bar */}
+          <div className={`flex items-center bg-gray-100 dark:bg-white/10 rounded-full transition-all duration-300 ${isSearchOpen ? 'w-64 px-4 py-2' : 'w-10 h-10 justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-white/20'}`} onClick={() => !isSearchOpen && setIsSearchOpen(true)}>
+              <i className={`ri-search-line text-gray-500 dark:text-gray-300 ${isSearchOpen ? 'mr-2' : 'text-lg'}`}></i>
+              {isSearchOpen && (
+                <input 
+                    type="text" 
+                    placeholder={t('nav.search')}
+                    autoFocus
+                    onBlur={() => setIsSearchOpen(false)}
+                    className="bg-transparent border-none outline-none text-sm w-full text-gray-600 dark:text-gray-200 placeholder-gray-400"
+                />
+              )}
+          </div>
+
+          <nav className="flex items-center gap-6 mr-4">
+            <Link href="/" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+              <i className="ri-home-4-line text-lg group-hover:scale-110 transition-transform"></i>
+              <span className="hidden lg:inline">{t('nav.home')}</span>
+            </Link>
+            <Link href="/servicos" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+              <i className="ri-tools-line text-lg group-hover:scale-110 transition-transform"></i>
+              <span className="hidden lg:inline">{t('nav.services')}</span>
+            </Link>
+            <Link href="/projetos" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+              <i className="ri-briefcase-line text-lg group-hover:scale-110 transition-transform"></i>
+              <span className="hidden lg:inline">{t('nav.projects')}</span>
+            </Link>
+            <Link href="/contato" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+              <i className="ri-mail-send-line text-lg group-hover:scale-110 transition-transform"></i>
+              <span className="hidden lg:inline">{t('nav.contact')}</span>
+            </Link>
+            <Link href="/sobre" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+              <i className="ri-user-line text-lg group-hover:scale-110 transition-transform"></i>
+              <span className="hidden lg:inline">{t('nav.about')}</span>
+            </Link>
+          </nav>
+
+          <div className="shrink-0 ml-2">
+            <Link 
+              href="/contato" 
+              className="px-6 py-2.5 bg-primary text-white rounded-lg font-bold hover:bg-orange-600 transition-colors flex items-center gap-2"
+            >
+              <i className="ri-whatsapp-line"></i>
+              <span className="hidden xl:inline">{t('nav.contact_us')}</span>
+            </Link>
+          </div>
+
+          <div className="flex items-center gap-2 pl-4 border-l border-gray-200 dark:border-white/10">
+            {/* Theme Toggle */}
+            <button 
+              onClick={toggleTheme}
+              className="w-10 h-10 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-600 dark:text-yellow-400 hover:bg-gray-200 dark:hover:bg-white/20 transition-colors cursor-pointer"
+              aria-label="Alternar tema"
+            >
+              {mounted && theme === 'dark' ? (
+                <i className="ri-sun-line text-xl"></i>
+              ) : (
+                <i className="ri-moon-line text-xl"></i>
+              )}
+            </button>
+
+            {/* Language Dropdown */}
+            <div className="relative group">
+              <button 
+                className="h-10 px-3 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center gap-2 text-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-white/20 transition-colors font-bold text-sm cursor-pointer"
+                aria-label="Alterar idioma"
+              >
+                <span>{language === 'PT' ? '🇧🇷' : language === 'EN' ? '🇺🇸' : '🇪🇸'}</span>
+                <span>{language}</span>
+                <i className="ri-arrow-down-s-line text-xs opacity-50"></i>
+              </button>
+              
+              <div className="absolute top-full right-0 pt-2 w-32 hidden group-hover:block animate-in fade-in slide-in-from-top-2 duration-200">
+                <div className="bg-white dark:bg-secondary rounded-xl shadow-xl border border-gray-100 dark:border-white/10 overflow-hidden">
+                  <button onClick={() => setLanguage('PT')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">🇧🇷</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Português</span>
+                  </button>
+                  <button onClick={() => setLanguage('EN')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">🇺🇸</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">English</span>
+                  </button>
+                  <button onClick={() => setLanguage('ES')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">🇪🇸</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Español</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button 
+          className="md:hidden text-2xl text-secondary dark:text-white z-50 relative w-10 h-10 flex items-center justify-center cursor-pointer"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          aria-label="Menu"
+        >
+          {isMobileMenuOpen ? <i className="ri-close-line"></i> : <i className="ri-menu-line"></i>}
+        </button>
+
+        {/* Mobile Menu Overlay */}
+        <div className={`fixed inset-0 bg-white dark:bg-secondary z-40 transition-transform duration-300 ease-in-out md:hidden flex flex-col pt-24 px-6 overflow-y-auto ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+          
+          {/* Mobile Search */}
+          <div className="mb-6 relative shrink-0">
+            <i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
+            <input 
+              type="text" 
+              placeholder={t('nav.search')}
+              className="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-100 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"
+            />
+          </div>
+
+          <nav className="flex flex-col gap-4 text-base font-medium">
+            <Link href="/" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+              <i className="ri-home-4-line text-primary text-lg"></i>
+              {t('nav.home')}
+            </Link>
+            <Link href="/servicos" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+              <i className="ri-tools-line text-primary text-lg"></i>
+              {t('nav.services')}
+            </Link>
+            <Link href="/projetos" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+              <i className="ri-briefcase-line text-primary text-lg"></i>
+              {t('nav.projects')}
+            </Link>
+            <Link href="/contato" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+              <i className="ri-mail-send-line text-primary text-lg"></i>
+              {t('nav.contact')}
+            </Link>
+            <Link href="/sobre" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+              <i className="ri-user-line text-primary text-lg"></i>
+              {t('nav.about')}
+            </Link>
+          </nav>
+
+          <div className="mt-6 flex flex-col gap-4 pb-8 shrink-0">
+            <Link 
+              href="/contato" 
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="w-full py-4 bg-primary text-white rounded-xl font-bold text-center flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
+            >
+              <i className="ri-whatsapp-line text-xl"></i>
+              {t('nav.contact_us')}
+            </Link>
+
+            <div 
+              className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
+              onClick={toggleTheme}
+            >
+              <span className="text-sm font-bold text-gray-500 dark:text-gray-400">{t('nav.theme')}</span>
+              <button 
+                className="w-10 h-10 rounded-full bg-white dark:bg-white/10 flex items-center justify-center text-gray-600 dark:text-yellow-400 shadow-sm transition-colors"
+              >
+                {mounted && theme === 'dark' ? (
+                  <i className="ri-sun-line text-xl"></i>
+                ) : (
+                  <i className="ri-moon-line text-xl"></i>
+                )}
+              </button>
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl">
+              <span className="text-sm font-bold text-gray-500 dark:text-gray-400">{t('nav.language')}</span>
+              <div className="flex gap-2">
+                <button onClick={() => setLanguage('PT')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'PT' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇧🇷</button>
+                <button onClick={() => setLanguage('EN')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'EN' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇺🇸</button>
+                <button onClick={() => setLanguage('ES')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'ES' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇪🇸</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/src/components/Toast.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from 'react';
+
+interface ToastProps {
+  message: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  onClose: () => void;
+  duration?: number;
+}
+
+export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const styles = {
+    success: 'bg-green-500 text-white',
+    error: 'bg-red-500 text-white',
+    warning: 'bg-yellow-500 text-white',
+    info: 'bg-blue-500 text-white',
+  };
+
+  const icons = {
+    success: 'ri-checkbox-circle-line',
+    error: 'ri-error-warning-line',
+    warning: 'ri-alert-line',
+    info: 'ri-information-line',
+  };
+
+  return (
+    <div className="fixed top-4 right-4 z-50 animate-in slide-in-from-top-5 fade-in duration-300">
+      <div className={`${styles[type]} rounded-xl shadow-lg px-6 py-4 flex items-center gap-3 min-w-[300px] max-w-md`}>
+        <i className={`${icons[type]} text-2xl`}></i>
+        <p className="flex-1 font-medium">{message}</p>
+        <button onClick={onClose} className="hover:opacity-70 transition-opacity">
+          <i className="ri-close-line text-xl"></i>
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/WhatsAppButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Link from 'next/link';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function WhatsAppButton() {
+  const { t } = useLanguage();
+
+  return (
+    <Link
+      href="https://wa.me/5511999999999" // Substitua pelo número real
+      target="_blank"
+      rel="noopener noreferrer"
+      className="fixed bottom-6 right-6 z-40 flex flex-row-reverse items-center justify-center bg-[#25D366] text-white w-14 h-14 rounded-full shadow-lg hover:bg-[#20bd5a] transition-all hover:scale-110 group animate-in slide-in-from-bottom-4 duration-700 delay-1000 hover:w-auto hover:px-6"
+      aria-label={t('whatsapp.label')}
+    >
+      <i className="ri-whatsapp-line text-3xl leading-none"></i>
+      <span className="font-bold max-w-0 overflow-hidden group-hover:max-w-xs group-hover:mr-3 transition-all duration-500 whitespace-nowrap">
+        {t('whatsapp.label')}
+      </span>
+    </Link>
+  );
+}

frontend/src/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}