Manus
commited on
Commit
Β·
b2b0280
1
Parent(s):
a47e999
Checkpoint: Complete multilingual Impulso Digital website with full i18n support. Includes language switcher component in header with Portuguese (π§π·), English (πΊπΈ), and Spanish (πͺπΈ) options. All content translated across all sections: Hero, Aurora Ecosystem, Drex Digital Partnership, Digital Sovereignty, Consumer Journey, and Contact. Language preference saved to localStorage. Maintains futuristic cyberpunk design with neon accents, interactive slides, premium icons, and institutional messaging. Fully responsive and optimized for government and investor presentations.
Browse files- client/src/App.tsx +7 -4
- client/src/components/LanguageSwitcher.tsx +33 -0
- client/src/contexts/LanguageContext.tsx +45 -0
- client/src/lib/translations.ts +288 -0
- client/src/pages/Home.tsx +77 -73
client/src/App.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import NotFound from "@/pages/NotFound";
|
|
| 4 |
import { Route, Switch } from "wouter";
|
| 5 |
import ErrorBoundary from "./components/ErrorBoundary";
|
| 6 |
import { ThemeProvider } from "./contexts/ThemeContext";
|
|
|
|
| 7 |
import Home from "./pages/Home";
|
| 8 |
|
| 9 |
|
|
@@ -30,10 +31,12 @@ function App() {
|
|
| 30 |
defaultTheme="light"
|
| 31 |
// switchable
|
| 32 |
>
|
| 33 |
-
<
|
| 34 |
-
<
|
| 35 |
-
|
| 36 |
-
|
|
|
|
|
|
|
| 37 |
</ThemeProvider>
|
| 38 |
</ErrorBoundary>
|
| 39 |
);
|
|
|
|
| 4 |
import { Route, Switch } from "wouter";
|
| 5 |
import ErrorBoundary from "./components/ErrorBoundary";
|
| 6 |
import { ThemeProvider } from "./contexts/ThemeContext";
|
| 7 |
+
import { LanguageProvider } from "./contexts/LanguageContext";
|
| 8 |
import Home from "./pages/Home";
|
| 9 |
|
| 10 |
|
|
|
|
| 31 |
defaultTheme="light"
|
| 32 |
// switchable
|
| 33 |
>
|
| 34 |
+
<LanguageProvider>
|
| 35 |
+
<TooltipProvider>
|
| 36 |
+
<Toaster />
|
| 37 |
+
<Router />
|
| 38 |
+
</TooltipProvider>
|
| 39 |
+
</LanguageProvider>
|
| 40 |
</ThemeProvider>
|
| 41 |
</ErrorBoundary>
|
| 42 |
);
|
client/src/components/LanguageSwitcher.tsx
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { useLanguage } from '@/contexts/LanguageContext';
|
| 2 |
+
import { Language } from '@/lib/translations';
|
| 3 |
+
import { Globe } from 'lucide-react';
|
| 4 |
+
|
| 5 |
+
export function LanguageSwitcher() {
|
| 6 |
+
const { language, setLanguage } = useLanguage();
|
| 7 |
+
|
| 8 |
+
const languages: { code: Language; label: string; flag: string }[] = [
|
| 9 |
+
{ code: 'pt', label: 'PortuguΓͺs', flag: 'π§π·' },
|
| 10 |
+
{ code: 'en', label: 'English', flag: 'πΊπΈ' },
|
| 11 |
+
{ code: 'es', label: 'EspaΓ±ol', flag: 'πͺπΈ' },
|
| 12 |
+
];
|
| 13 |
+
|
| 14 |
+
return (
|
| 15 |
+
<div className="flex items-center gap-1 bg-card border border-primary/30 rounded-lg p-1">
|
| 16 |
+
<Globe className="w-4 h-4 text-primary ml-2" />
|
| 17 |
+
{languages.map((lang) => (
|
| 18 |
+
<button
|
| 19 |
+
key={lang.code}
|
| 20 |
+
onClick={() => setLanguage(lang.code)}
|
| 21 |
+
className={`px-3 py-1.5 rounded text-sm font-medium transition-all ${
|
| 22 |
+
language === lang.code
|
| 23 |
+
? 'bg-primary text-background'
|
| 24 |
+
: 'text-foreground hover:bg-primary/10'
|
| 25 |
+
}`}
|
| 26 |
+
title={lang.label}
|
| 27 |
+
>
|
| 28 |
+
{lang.flag} {lang.code.toUpperCase()}
|
| 29 |
+
</button>
|
| 30 |
+
))}
|
| 31 |
+
</div>
|
| 32 |
+
);
|
| 33 |
+
}
|
client/src/contexts/LanguageContext.tsx
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
| 2 |
+
import { Language } from '@/lib/translations';
|
| 3 |
+
|
| 4 |
+
interface LanguageContextType {
|
| 5 |
+
language: Language;
|
| 6 |
+
setLanguage: (lang: Language) => void;
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
+
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
| 10 |
+
|
| 11 |
+
export function LanguageProvider({ children }: { children: ReactNode }) {
|
| 12 |
+
const [language, setLanguageState] = useState<Language>(() => {
|
| 13 |
+
// Try to get from localStorage
|
| 14 |
+
const saved = localStorage.getItem('language');
|
| 15 |
+
if (saved === 'pt' || saved === 'en' || saved === 'es') {
|
| 16 |
+
return saved;
|
| 17 |
+
}
|
| 18 |
+
// Default to English
|
| 19 |
+
return 'en';
|
| 20 |
+
});
|
| 21 |
+
|
| 22 |
+
const setLanguage = (lang: Language) => {
|
| 23 |
+
setLanguageState(lang);
|
| 24 |
+
localStorage.setItem('language', lang);
|
| 25 |
+
};
|
| 26 |
+
|
| 27 |
+
useEffect(() => {
|
| 28 |
+
// Set HTML lang attribute for accessibility
|
| 29 |
+
document.documentElement.lang = language;
|
| 30 |
+
}, [language]);
|
| 31 |
+
|
| 32 |
+
return (
|
| 33 |
+
<LanguageContext.Provider value={{ language, setLanguage }}>
|
| 34 |
+
{children}
|
| 35 |
+
</LanguageContext.Provider>
|
| 36 |
+
);
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
export function useLanguage() {
|
| 40 |
+
const context = useContext(LanguageContext);
|
| 41 |
+
if (context === undefined) {
|
| 42 |
+
throw new Error('useLanguage must be used within a LanguageProvider');
|
| 43 |
+
}
|
| 44 |
+
return context;
|
| 45 |
+
}
|
client/src/lib/translations.ts
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
export type Language = 'pt' | 'en' | 'es';
|
| 2 |
+
|
| 3 |
+
export const translations = {
|
| 4 |
+
pt: {
|
| 5 |
+
header: {
|
| 6 |
+
nav: {
|
| 7 |
+
aurora: 'Aurora',
|
| 8 |
+
drex: 'Drex',
|
| 9 |
+
sovereignty: 'Soberania',
|
| 10 |
+
contact: 'Contato',
|
| 11 |
+
},
|
| 12 |
+
whatsapp: 'WhatsApp',
|
| 13 |
+
},
|
| 14 |
+
hero: {
|
| 15 |
+
title: 'Aurora + Drex',
|
| 16 |
+
subtitle: 'Soberania Digital para o Brasil',
|
| 17 |
+
description: 'Impulso Digital cria a ponte entre instituiΓ§Γ΅es governamentais e brasileiros do dia a dia atravΓ©s do ecossistema inteligente da Aurora e da infraestrutura revolucionΓ‘ria do Drex Digital.',
|
| 18 |
+
startNow: 'ComeΓ§ar Agora',
|
| 19 |
+
learnMore: 'Saiba Mais',
|
| 20 |
+
aiPowered: 'Alimentado por IA',
|
| 21 |
+
secure: 'Seguro',
|
| 22 |
+
sovereign: 'Soberano',
|
| 23 |
+
},
|
| 24 |
+
slides: {
|
| 25 |
+
title: 'Nossa SoluΓ§Γ£o',
|
| 26 |
+
subtitle: 'Explore nossa abordagem abrangente para transformaΓ§Γ£o digital',
|
| 27 |
+
slide1: {
|
| 28 |
+
title: 'Ecossistema Aurora',
|
| 29 |
+
subtitle: 'Plataforma de IA Modular para TransformaΓ§Γ£o Digital',
|
| 30 |
+
description: 'Aurora nΓ£o Γ© apenas uma plataformaβΓ© um ecossistema abrangente projetado para evoluir com a economia digital do Brasil. ConstruΓda em IA de ponta, conecta atores institucionais com consumidores finais atravΓ©s de automaΓ§Γ£o inteligente e insights orientados por dados.',
|
| 31 |
+
},
|
| 32 |
+
slide2: {
|
| 33 |
+
title: 'IntegraΓ§Γ£o Drex Digital',
|
| 34 |
+
subtitle: 'Parceria com Moeda Digital Brasileira',
|
| 35 |
+
description: 'A plataforma Aurora da Impulso Digital serve como camada crΓtica de infraestrutura conectando a iniciativa Drex do Banco Central com milhΓ΅es de consumidores. Democratizamos o acesso a moeda digital atravΓ©s de interfaces inteligentes e amigΓ‘veis.',
|
| 36 |
+
},
|
| 37 |
+
slide3: {
|
| 38 |
+
title: 'Acesso ao Consumidor Final',
|
| 39 |
+
subtitle: 'Democratizando FinanΓ§as Digitais',
|
| 40 |
+
description: 'AtravΓ©s da Aurora, brasileiros do dia a dia acessam moeda digital, pagamentos inteligentes e serviΓ§os financeiros com seguranΓ§a de nΓvel institucional e respaldo governamental.',
|
| 41 |
+
},
|
| 42 |
+
slide4: {
|
| 43 |
+
title: 'Soberania Digital',
|
| 44 |
+
subtitle: 'IndependΓͺncia TecnolΓ³gica Brasileira',
|
| 45 |
+
description: 'Impulso Digital fortalece a infraestrutura digital do Brasil, garantindo soberania tecnolΓ³gica e reduzindo dependΓͺncia de soluΓ§Γ΅es estrangeiras de tecnologia financeira.',
|
| 46 |
+
},
|
| 47 |
+
previous: 'Anterior',
|
| 48 |
+
next: 'PrΓ³ximo',
|
| 49 |
+
},
|
| 50 |
+
aurora: {
|
| 51 |
+
title: 'Ecossistema Aurora',
|
| 52 |
+
description: 'Aurora nΓ£o Γ© apenas uma plataformaβΓ© um ecossistema abrangente projetado para evoluir com a economia digital do Brasil. ConstruΓda em IA de ponta, conecta atores institucionais com consumidores finais atravΓ©s de automaΓ§Γ£o inteligente e insights orientados por dados.',
|
| 53 |
+
education: 'EducaΓ§Γ£o',
|
| 54 |
+
educationDesc: 'AlfabetizaΓ§Γ£o em IA & treinamento',
|
| 55 |
+
automation: 'AutomaΓ§Γ£o',
|
| 56 |
+
automationDesc: 'OtimizaΓ§Γ£o de processos',
|
| 57 |
+
dataIntelligence: 'InteligΓͺncia de Dados',
|
| 58 |
+
dataIntelligenceDesc: 'Insights acionΓ‘veis',
|
| 59 |
+
decisionSupport: 'Suporte Γ DecisΓ£o',
|
| 60 |
+
decisionSupportDesc: 'OrientaΓ§Γ£o estratΓ©gica',
|
| 61 |
+
},
|
| 62 |
+
drex: {
|
| 63 |
+
title: 'Parceria Drex Digital',
|
| 64 |
+
description: 'A plataforma Aurora da Impulso Digital serve como camada crΓtica de infraestrutura conectando a iniciativa Drex do Banco Central com milhΓ΅es de consumidores. Democratizamos o acesso a moeda digital atravΓ©s de interfaces inteligentes e amigΓ‘veis.',
|
| 65 |
+
secureInfrastructure: 'Infraestrutura Segura',
|
| 66 |
+
secureInfrastructureDesc: 'SeguranΓ§a de nΓvel governamental para todas as transaΓ§Γ΅es',
|
| 67 |
+
massAdoption: 'AdoΓ§Γ£o em Massa',
|
| 68 |
+
massAdoptionDesc: 'AlcanΓ§ando cada consumidor brasileiro',
|
| 69 |
+
globalStandard: 'PadrΓ£o Global',
|
| 70 |
+
globalStandardDesc: 'Alinhado com frameworks internacionais de moeda digital',
|
| 71 |
+
},
|
| 72 |
+
sovereignty: {
|
| 73 |
+
title: 'Soberania Digital',
|
| 74 |
+
description: 'Impulso Digital estΓ‘ comprometida em fortalecer a independΓͺncia tecnolΓ³gica do Brasil. Ao desenvolver soluΓ§Γ΅es de IA caseiras e infraestrutura digital, reduzimos a dependΓͺncia de tecnologia estrangeira e garantimos que o futuro financeiro do Brasil permaneΓ§a sob controle brasileiro.',
|
| 75 |
+
commitment: 'Nosso Compromisso',
|
| 76 |
+
point1: 'Tecnologia 100% desenvolvida no Brasil',
|
| 77 |
+
point2: 'Alinhamento com iniciativas digitais governamentais',
|
| 78 |
+
point3: 'Apoio ao ecossistema nacional de inovaΓ§Γ£o',
|
| 79 |
+
point4: 'VisΓ£o de longo prazo para lideranΓ§a tecnolΓ³gica brasileira',
|
| 80 |
+
},
|
| 81 |
+
consumerJourney: {
|
| 82 |
+
title: 'Da InstituiΓ§Γ£o ao Consumidor',
|
| 83 |
+
subtitle: 'Impulso Digital fecha a lacuna, tornando moeda digital de nΓvel institucional acessΓvel para brasileiros do dia a dia',
|
| 84 |
+
},
|
| 85 |
+
contact: {
|
| 86 |
+
title: 'Vamos Construir o Futuro',
|
| 87 |
+
subtitle: 'AgΓͺncias governamentais, instituiΓ§Γ΅es financeiras e parceiros estratΓ©gicosβvamos moldar juntos o futuro digital do Brasil.',
|
| 88 |
+
company: 'Impulso Digital',
|
| 89 |
+
cnpj: 'CNPJ: 57.291.550/0001-24',
|
| 90 |
+
contactUs: 'Entre em Contato',
|
| 91 |
+
whatsappText: 'WhatsApp: +55 31 99622-4300',
|
| 92 |
+
email: 'Email',
|
| 93 |
+
},
|
| 94 |
+
footer: {
|
| 95 |
+
copyright: 'Β© 2026 Impulso Digital. Todos os direitos reservados.',
|
| 96 |
+
},
|
| 97 |
+
},
|
| 98 |
+
en: {
|
| 99 |
+
header: {
|
| 100 |
+
nav: {
|
| 101 |
+
aurora: 'Aurora',
|
| 102 |
+
drex: 'Drex',
|
| 103 |
+
sovereignty: 'Sovereignty',
|
| 104 |
+
contact: 'Contact',
|
| 105 |
+
},
|
| 106 |
+
whatsapp: 'WhatsApp',
|
| 107 |
+
},
|
| 108 |
+
hero: {
|
| 109 |
+
title: 'Aurora + Drex',
|
| 110 |
+
subtitle: 'Digital Sovereignty for Brazil',
|
| 111 |
+
description: 'Impulso Digital creates the bridge between government institutions and everyday Brazilians through Aurora\'s intelligent ecosystem and Drex Digital\'s revolutionary currency infrastructure.',
|
| 112 |
+
startNow: 'Start Now',
|
| 113 |
+
learnMore: 'Learn More',
|
| 114 |
+
aiPowered: 'AI-Powered',
|
| 115 |
+
secure: 'Secure',
|
| 116 |
+
sovereign: 'Sovereign',
|
| 117 |
+
},
|
| 118 |
+
slides: {
|
| 119 |
+
title: 'Our Solution',
|
| 120 |
+
subtitle: 'Swipe through our comprehensive approach to digital transformation',
|
| 121 |
+
slide1: {
|
| 122 |
+
title: 'Aurora Ecosystem',
|
| 123 |
+
subtitle: 'Modular AI Platform for Digital Transformation',
|
| 124 |
+
description: 'Aurora is not just a platformβit\'s a comprehensive ecosystem designed to evolve with Brazil\'s digital economy. Built on cutting-edge AI, it connects institutional actors with end consumers through intelligent automation and data-driven insights.',
|
| 125 |
+
},
|
| 126 |
+
slide2: {
|
| 127 |
+
title: 'Drex Digital Integration',
|
| 128 |
+
subtitle: 'Brazilian Digital Currency Partnership',
|
| 129 |
+
description: 'Impulso Digital\'s Aurora platform serves as the critical infrastructure layer connecting Brazil\'s Central Bank Drex initiative with millions of consumers. We democratize access to digital currency through intelligent, user-friendly interfaces.',
|
| 130 |
+
},
|
| 131 |
+
slide3: {
|
| 132 |
+
title: 'End-Consumer Access',
|
| 133 |
+
subtitle: 'Democratizing Digital Finance',
|
| 134 |
+
description: 'Through Aurora, everyday Brazilians access digital currency, smart payments, and financial services with institutional-grade security and government backing.',
|
| 135 |
+
},
|
| 136 |
+
slide4: {
|
| 137 |
+
title: 'Digital Sovereignty',
|
| 138 |
+
subtitle: 'Brazilian Technological Independence',
|
| 139 |
+
description: 'Impulso Digital strengthens Brazil\'s digital infrastructure, ensuring technological sovereignty and reducing dependence on foreign financial technology solutions.',
|
| 140 |
+
},
|
| 141 |
+
previous: 'Previous',
|
| 142 |
+
next: 'Next',
|
| 143 |
+
},
|
| 144 |
+
aurora: {
|
| 145 |
+
title: 'Aurora Ecosystem',
|
| 146 |
+
description: 'Aurora is not just a platformβit\'s a comprehensive ecosystem designed to evolve with Brazil\'s digital economy. Built on cutting-edge AI, it connects institutional actors with end consumers through intelligent automation and data-driven insights.',
|
| 147 |
+
education: 'Education',
|
| 148 |
+
educationDesc: 'AI literacy & training',
|
| 149 |
+
automation: 'Automation',
|
| 150 |
+
automationDesc: 'Process optimization',
|
| 151 |
+
dataIntelligence: 'Data Intelligence',
|
| 152 |
+
dataIntelligenceDesc: 'Actionable insights',
|
| 153 |
+
decisionSupport: 'Decision Support',
|
| 154 |
+
decisionSupportDesc: 'Strategic guidance',
|
| 155 |
+
},
|
| 156 |
+
drex: {
|
| 157 |
+
title: 'Drex Digital Partnership',
|
| 158 |
+
description: 'Impulso Digital\'s Aurora platform serves as the critical infrastructure layer connecting Brazil\'s Central Bank Drex initiative with millions of consumers. We democratize access to digital currency through intelligent, user-friendly interfaces.',
|
| 159 |
+
secureInfrastructure: 'Secure Infrastructure',
|
| 160 |
+
secureInfrastructureDesc: 'Government-grade security for all transactions',
|
| 161 |
+
massAdoption: 'Mass Adoption',
|
| 162 |
+
massAdoptionDesc: 'Reaching every Brazilian consumer',
|
| 163 |
+
globalStandard: 'Global Standard',
|
| 164 |
+
globalStandardDesc: 'Aligned with international digital currency frameworks',
|
| 165 |
+
},
|
| 166 |
+
sovereignty: {
|
| 167 |
+
title: 'Digital Sovereignty',
|
| 168 |
+
description: 'Impulso Digital is committed to strengthening Brazil\'s technological independence. By developing homegrown AI solutions and digital infrastructure, we reduce dependence on foreign technology and ensure that Brazil\'s financial future remains under Brazilian control.',
|
| 169 |
+
commitment: 'Our Commitment',
|
| 170 |
+
point1: '100% Brazilian-developed technology',
|
| 171 |
+
point2: 'Alignment with government digital initiatives',
|
| 172 |
+
point3: 'Support for national innovation ecosystem',
|
| 173 |
+
point4: 'Long-term vision for Brazilian tech leadership',
|
| 174 |
+
},
|
| 175 |
+
consumerJourney: {
|
| 176 |
+
title: 'From Institution to Consumer',
|
| 177 |
+
subtitle: 'Impulso Digital bridges the gap, making institutional-grade digital currency accessible to everyday Brazilians',
|
| 178 |
+
},
|
| 179 |
+
contact: {
|
| 180 |
+
title: 'Let\'s Build the Future',
|
| 181 |
+
subtitle: 'Government agencies, financial institutions, and strategic partnersβlet\'s shape Brazil\'s digital future together.',
|
| 182 |
+
company: 'Impulso Digital',
|
| 183 |
+
cnpj: 'CNPJ: 57.291.550/0001-24',
|
| 184 |
+
contactUs: 'Contact Us',
|
| 185 |
+
whatsappText: 'WhatsApp: +55 31 99622-4300',
|
| 186 |
+
email: 'Email',
|
| 187 |
+
},
|
| 188 |
+
footer: {
|
| 189 |
+
copyright: 'Β© 2026 Impulso Digital. All rights reserved.',
|
| 190 |
+
},
|
| 191 |
+
},
|
| 192 |
+
es: {
|
| 193 |
+
header: {
|
| 194 |
+
nav: {
|
| 195 |
+
aurora: 'Aurora',
|
| 196 |
+
drex: 'Drex',
|
| 197 |
+
sovereignty: 'SoberanΓa',
|
| 198 |
+
contact: 'Contacto',
|
| 199 |
+
},
|
| 200 |
+
whatsapp: 'WhatsApp',
|
| 201 |
+
},
|
| 202 |
+
hero: {
|
| 203 |
+
title: 'Aurora + Drex',
|
| 204 |
+
subtitle: 'SoberanΓa Digital para Brasil',
|
| 205 |
+
description: 'Impulso Digital crea el puente entre instituciones gubernamentales y brasileΓ±os comunes a travΓ©s del ecosistema inteligente de Aurora y la infraestructura revolucionaria de Drex Digital.',
|
| 206 |
+
startNow: 'Comenzar Ahora',
|
| 207 |
+
learnMore: 'Saber MΓ‘s',
|
| 208 |
+
aiPowered: 'Impulsado por IA',
|
| 209 |
+
secure: 'Seguro',
|
| 210 |
+
sovereign: 'Soberano',
|
| 211 |
+
},
|
| 212 |
+
slides: {
|
| 213 |
+
title: 'Nuestra SoluciΓ³n',
|
| 214 |
+
subtitle: 'Explore nuestro enfoque integral para la transformaciΓ³n digital',
|
| 215 |
+
slide1: {
|
| 216 |
+
title: 'Ecosistema Aurora',
|
| 217 |
+
subtitle: 'Plataforma de IA Modular para TransformaciΓ³n Digital',
|
| 218 |
+
description: 'Aurora no es solo una plataformaβes un ecosistema integral diseΓ±ado para evolucionar con la economΓa digital de Brasil. Construida con IA de vanguardia, conecta actores institucionales con consumidores finales a travΓ©s de automatizaciΓ³n inteligente e informaciΓ³n basada en datos.',
|
| 219 |
+
},
|
| 220 |
+
slide2: {
|
| 221 |
+
title: 'IntegraciΓ³n Drex Digital',
|
| 222 |
+
subtitle: 'AsociaciΓ³n con Moneda Digital BrasileΓ±a',
|
| 223 |
+
description: 'La plataforma Aurora de Impulso Digital sirve como capa de infraestructura crΓtica conectando la iniciativa Drex del Banco Central de Brasil con millones de consumidores. Democratizamos el acceso a moneda digital a travΓ©s de interfaces inteligentes y fΓ‘ciles de usar.',
|
| 224 |
+
},
|
| 225 |
+
slide3: {
|
| 226 |
+
title: 'Acceso al Consumidor Final',
|
| 227 |
+
subtitle: 'Democratizando Finanzas Digitales',
|
| 228 |
+
description: 'A travΓ©s de Aurora, los brasileΓ±os comunes acceden a moneda digital, pagos inteligentes y servicios financieros con seguridad de nivel institucional y respaldo gubernamental.',
|
| 229 |
+
},
|
| 230 |
+
slide4: {
|
| 231 |
+
title: 'SoberanΓa Digital',
|
| 232 |
+
subtitle: 'Independencia TecnolΓ³gica BrasileΓ±a',
|
| 233 |
+
description: 'Impulso Digital fortalece la infraestructura digital de Brasil, garantizando soberanΓa tecnolΓ³gica y reduciendo la dependencia de soluciones de tecnologΓa financiera extranjera.',
|
| 234 |
+
},
|
| 235 |
+
previous: 'Anterior',
|
| 236 |
+
next: 'Siguiente',
|
| 237 |
+
},
|
| 238 |
+
aurora: {
|
| 239 |
+
title: 'Ecosistema Aurora',
|
| 240 |
+
description: 'Aurora no es solo una plataformaβes un ecosistema integral diseΓ±ado para evolucionar con la economΓa digital de Brasil. Construida con IA de vanguardia, conecta actores institucionales con consumidores finales a travΓ©s de automatizaciΓ³n inteligente e informaciΓ³n basada en datos.',
|
| 241 |
+
education: 'EducaciΓ³n',
|
| 242 |
+
educationDesc: 'AlfabetizaciΓ³n en IA y capacitaciΓ³n',
|
| 243 |
+
automation: 'AutomatizaciΓ³n',
|
| 244 |
+
automationDesc: 'OptimizaciΓ³n de procesos',
|
| 245 |
+
dataIntelligence: 'Inteligencia de Datos',
|
| 246 |
+
dataIntelligenceDesc: 'InformaciΓ³n procesable',
|
| 247 |
+
decisionSupport: 'Soporte de Decisiones',
|
| 248 |
+
decisionSupportDesc: 'OrientaciΓ³n estratΓ©gica',
|
| 249 |
+
},
|
| 250 |
+
drex: {
|
| 251 |
+
title: 'AsociaciΓ³n Drex Digital',
|
| 252 |
+
description: 'La plataforma Aurora de Impulso Digital sirve como capa de infraestructura crΓtica conectando la iniciativa Drex del Banco Central de Brasil con millones de consumidores. Democratizamos el acceso a moneda digital a travΓ©s de interfaces inteligentes y fΓ‘ciles de usar.',
|
| 253 |
+
secureInfrastructure: 'Infraestructura Segura',
|
| 254 |
+
secureInfrastructureDesc: 'Seguridad de nivel gubernamental para todas las transacciones',
|
| 255 |
+
massAdoption: 'AdopciΓ³n Masiva',
|
| 256 |
+
massAdoptionDesc: 'Alcanzando cada consumidor brasileΓ±o',
|
| 257 |
+
globalStandard: 'EstΓ‘ndar Global',
|
| 258 |
+
globalStandardDesc: 'Alineado con marcos internacionales de moneda digital',
|
| 259 |
+
},
|
| 260 |
+
sovereignty: {
|
| 261 |
+
title: 'SoberanΓa Digital',
|
| 262 |
+
description: 'Impulso Digital estΓ‘ comprometida a fortalecer la independencia tecnolΓ³gica de Brasil. Al desarrollar soluciones de IA caseras e infraestructura digital, reducimos la dependencia de tecnologΓa extranjera y garantizamos que el futuro financiero de Brasil permanezca bajo control brasileΓ±o.',
|
| 263 |
+
commitment: 'Nuestro Compromiso',
|
| 264 |
+
point1: 'TecnologΓa 100% desarrollada en Brasil',
|
| 265 |
+
point2: 'AlineaciΓ³n con iniciativas digitales gubernamentales',
|
| 266 |
+
point3: 'Apoyo al ecosistema nacional de innovaciΓ³n',
|
| 267 |
+
point4: 'VisiΓ³n a largo plazo para el liderazgo tecnolΓ³gico brasileΓ±o',
|
| 268 |
+
},
|
| 269 |
+
consumerJourney: {
|
| 270 |
+
title: 'De la InstituciΓ³n al Consumidor',
|
| 271 |
+
subtitle: 'Impulso Digital cierra la brecha, haciendo que la moneda digital de nivel institucional sea accesible para brasileΓ±os comunes',
|
| 272 |
+
},
|
| 273 |
+
contact: {
|
| 274 |
+
title: 'Construyamos el Futuro',
|
| 275 |
+
subtitle: 'Agencias gubernamentales, instituciones financieras y socios estratΓ©gicosβjuntos moldearemos el futuro digital de Brasil.',
|
| 276 |
+
company: 'Impulso Digital',
|
| 277 |
+
cnpj: 'CNPJ: 57.291.550/0001-24',
|
| 278 |
+
contactUs: 'ContΓ‘ctenos',
|
| 279 |
+
whatsappText: 'WhatsApp: +55 31 99622-4300',
|
| 280 |
+
email: 'Email',
|
| 281 |
+
},
|
| 282 |
+
footer: {
|
| 283 |
+
copyright: 'Β© 2026 Impulso Digital. Todos los derechos reservados.',
|
| 284 |
+
},
|
| 285 |
+
},
|
| 286 |
+
};
|
| 287 |
+
|
| 288 |
+
export const getTranslation = (language: Language) => translations[language];
|
client/src/pages/Home.tsx
CHANGED
|
@@ -1,4 +1,7 @@
|
|
| 1 |
import { Button } from "@/components/ui/button";
|
|
|
|
|
|
|
|
|
|
| 2 |
import { Mail, MessageCircle, ChevronRight, Zap, Shield, Rocket, TrendingUp, Lock, Globe, Cpu, BarChart3, Users, Lightbulb } from "lucide-react";
|
| 3 |
import { useState, useEffect, createElement } from "react";
|
| 4 |
|
|
@@ -8,9 +11,13 @@ import { useState, useEffect, createElement } from "react";
|
|
| 8 |
* - Glowing effects and smooth animations
|
| 9 |
* - Professional messaging for government and investors
|
| 10 |
* - Aurora + Drex Digital partnership as core narrative
|
|
|
|
| 11 |
*/
|
| 12 |
|
| 13 |
export default function Home() {
|
|
|
|
|
|
|
|
|
|
| 14 |
const [scrollY, setScrollY] = useState(0);
|
| 15 |
const [activeSlide, setActiveSlide] = useState(0);
|
| 16 |
|
|
@@ -33,33 +40,29 @@ export default function Home() {
|
|
| 33 |
|
| 34 |
const slides = [
|
| 35 |
{
|
| 36 |
-
title:
|
| 37 |
-
subtitle:
|
| 38 |
-
description:
|
| 39 |
icon: Rocket,
|
| 40 |
-
color: "from-cyan-500 to-blue-600"
|
| 41 |
},
|
| 42 |
{
|
| 43 |
-
title:
|
| 44 |
-
subtitle:
|
| 45 |
-
description:
|
| 46 |
icon: TrendingUp,
|
| 47 |
-
color: "from-yellow-500 to-orange-600"
|
| 48 |
},
|
| 49 |
{
|
| 50 |
-
title:
|
| 51 |
-
subtitle:
|
| 52 |
-
description:
|
| 53 |
icon: Users,
|
| 54 |
-
color: "from-green-500 to-emerald-600"
|
| 55 |
},
|
| 56 |
{
|
| 57 |
-
title:
|
| 58 |
-
subtitle:
|
| 59 |
-
description:
|
| 60 |
icon: Shield,
|
| 61 |
-
|
| 62 |
-
}
|
| 63 |
];
|
| 64 |
|
| 65 |
return (
|
|
@@ -72,16 +75,17 @@ export default function Home() {
|
|
| 72 |
<span className="gradient-text font-bold text-xl hidden sm:inline">IMPULSO DIGITAL</span>
|
| 73 |
</div>
|
| 74 |
<nav className="hidden md:flex items-center gap-8">
|
| 75 |
-
<a href="#aurora" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
|
| 76 |
-
<a href="#drex" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
|
| 77 |
-
<a href="#sovereignty" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
|
| 78 |
-
<a href="#contact" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
|
| 79 |
</nav>
|
| 80 |
<div className="flex items-center gap-3">
|
|
|
|
| 81 |
<a href={whatsappLink} target="_blank" rel="noopener noreferrer">
|
| 82 |
<Button size="sm" className="bg-primary hover:bg-cyan-600 text-background gap-2">
|
| 83 |
<MessageCircle className="w-4 h-4" />
|
| 84 |
-
|
| 85 |
</Button>
|
| 86 |
</a>
|
| 87 |
</div>
|
|
@@ -100,13 +104,13 @@ export default function Home() {
|
|
| 100 |
<div className="space-y-8 animate-fade-in">
|
| 101 |
<div className="space-y-4">
|
| 102 |
<h1 className="text-5xl md:text-7xl font-bold leading-tight">
|
| 103 |
-
<span className="gradient-text">
|
| 104 |
</h1>
|
| 105 |
<h2 className="text-3xl md:text-4xl font-bold text-foreground">
|
| 106 |
-
|
| 107 |
</h2>
|
| 108 |
<p className="text-xl text-muted-foreground max-w-lg leading-relaxed">
|
| 109 |
-
|
| 110 |
</p>
|
| 111 |
</div>
|
| 112 |
|
|
@@ -114,12 +118,12 @@ export default function Home() {
|
|
| 114 |
<a href={whatsappLink} target="_blank" rel="noopener noreferrer">
|
| 115 |
<Button size="lg" className="bg-primary hover:bg-cyan-600 text-background gap-2 w-full sm:w-auto font-bold">
|
| 116 |
<Zap className="w-5 h-5" />
|
| 117 |
-
|
| 118 |
</Button>
|
| 119 |
</a>
|
| 120 |
<a href="#aurora">
|
| 121 |
<Button size="lg" variant="outline" className="border-primary text-primary hover:bg-primary/10 gap-2 w-full sm:w-auto font-bold">
|
| 122 |
-
|
| 123 |
<ChevronRight className="w-5 h-5" />
|
| 124 |
</Button>
|
| 125 |
</a>
|
|
@@ -128,15 +132,15 @@ export default function Home() {
|
|
| 128 |
<div className="flex gap-6 pt-4">
|
| 129 |
<div className="flex items-center gap-2">
|
| 130 |
<Cpu className="w-5 h-5 text-primary" />
|
| 131 |
-
<span className="text-sm font-medium">
|
| 132 |
</div>
|
| 133 |
<div className="flex items-center gap-2">
|
| 134 |
<Shield className="w-5 h-5 text-primary" />
|
| 135 |
-
<span className="text-sm font-medium">
|
| 136 |
</div>
|
| 137 |
<div className="flex items-center gap-2">
|
| 138 |
<Globe className="w-5 h-5 text-primary" />
|
| 139 |
-
<span className="text-sm font-medium">
|
| 140 |
</div>
|
| 141 |
</div>
|
| 142 |
</div>
|
|
@@ -154,10 +158,10 @@ export default function Home() {
|
|
| 154 |
<div className="container mx-auto px-4">
|
| 155 |
<div className="text-center mb-16 space-y-4">
|
| 156 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 157 |
-
<span className="gradient-text">
|
| 158 |
</h2>
|
| 159 |
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
| 160 |
-
|
| 161 |
</p>
|
| 162 |
</div>
|
| 163 |
|
|
@@ -200,7 +204,7 @@ export default function Home() {
|
|
| 200 |
disabled={activeSlide === 0}
|
| 201 |
className="px-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
| 202 |
>
|
| 203 |
-
|
| 204 |
</button>
|
| 205 |
<div className="flex gap-2">
|
| 206 |
{slides.map((_, idx) => (
|
|
@@ -218,7 +222,7 @@ export default function Home() {
|
|
| 218 |
disabled={activeSlide === slides.length - 1}
|
| 219 |
className="px-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
| 220 |
>
|
| 221 |
-
|
| 222 |
</button>
|
| 223 |
</div>
|
| 224 |
</div>
|
|
@@ -231,32 +235,32 @@ export default function Home() {
|
|
| 231 |
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
|
| 232 |
<div className="space-y-6">
|
| 233 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 234 |
-
<span className="gradient-text">
|
| 235 |
</h2>
|
| 236 |
<p className="text-lg text-muted-foreground leading-relaxed">
|
| 237 |
-
|
| 238 |
</p>
|
| 239 |
|
| 240 |
<div className="grid grid-cols-2 gap-4">
|
| 241 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 242 |
<Lightbulb className="w-6 h-6 text-primary mb-2" />
|
| 243 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 244 |
-
<p className="text-sm text-muted-foreground">
|
| 245 |
</div>
|
| 246 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 247 |
<Zap className="w-6 h-6 text-yellow-500 mb-2" />
|
| 248 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 249 |
-
<p className="text-sm text-muted-foreground">
|
| 250 |
</div>
|
| 251 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 252 |
<BarChart3 className="w-6 h-6 text-green-500 mb-2" />
|
| 253 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 254 |
-
<p className="text-sm text-muted-foreground">
|
| 255 |
</div>
|
| 256 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 257 |
<TrendingUp className="w-6 h-6 text-purple-500 mb-2" />
|
| 258 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 259 |
-
<p className="text-sm text-muted-foreground">
|
| 260 |
</div>
|
| 261 |
</div>
|
| 262 |
</div>
|
|
@@ -278,32 +282,32 @@ export default function Home() {
|
|
| 278 |
|
| 279 |
<div className="order-1 md:order-2 space-y-6">
|
| 280 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 281 |
-
<span className="gradient-text">
|
| 282 |
</h2>
|
| 283 |
<p className="text-lg text-muted-foreground leading-relaxed">
|
| 284 |
-
|
| 285 |
</p>
|
| 286 |
|
| 287 |
<div className="space-y-4">
|
| 288 |
<div className="flex gap-4">
|
| 289 |
<Lock className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
|
| 290 |
<div>
|
| 291 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 292 |
-
<p className="text-muted-foreground">
|
| 293 |
</div>
|
| 294 |
</div>
|
| 295 |
<div className="flex gap-4">
|
| 296 |
<Users className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
|
| 297 |
<div>
|
| 298 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 299 |
-
<p className="text-muted-foreground">
|
| 300 |
</div>
|
| 301 |
</div>
|
| 302 |
<div className="flex gap-4">
|
| 303 |
<Globe className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
|
| 304 |
<div>
|
| 305 |
-
<h4 className="font-semibold text-foreground mb-1">
|
| 306 |
-
<p className="text-muted-foreground">
|
| 307 |
</div>
|
| 308 |
</div>
|
| 309 |
</div>
|
|
@@ -318,30 +322,30 @@ export default function Home() {
|
|
| 318 |
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
|
| 319 |
<div className="space-y-6">
|
| 320 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 321 |
-
<span className="gradient-text">
|
| 322 |
</h2>
|
| 323 |
<p className="text-lg text-muted-foreground leading-relaxed">
|
| 324 |
-
|
| 325 |
</p>
|
| 326 |
|
| 327 |
<div className="bg-gradient-to-br from-primary/10 to-yellow-500/10 border border-primary/30 p-6 rounded-lg">
|
| 328 |
-
<h4 className="text-xl font-bold text-foreground mb-3">
|
| 329 |
<ul className="space-y-2 text-muted-foreground">
|
| 330 |
<li className="flex gap-2">
|
| 331 |
<span className="text-primary">β</span>
|
| 332 |
-
<span>
|
| 333 |
</li>
|
| 334 |
<li className="flex gap-2">
|
| 335 |
<span className="text-primary">β</span>
|
| 336 |
-
<span>
|
| 337 |
</li>
|
| 338 |
<li className="flex gap-2">
|
| 339 |
<span className="text-primary">β</span>
|
| 340 |
-
<span>
|
| 341 |
</li>
|
| 342 |
<li className="flex gap-2">
|
| 343 |
<span className="text-primary">β</span>
|
| 344 |
-
<span>
|
| 345 |
</li>
|
| 346 |
</ul>
|
| 347 |
</div>
|
|
@@ -359,10 +363,10 @@ export default function Home() {
|
|
| 359 |
<div className="container mx-auto px-4">
|
| 360 |
<div className="text-center mb-16 space-y-4">
|
| 361 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 362 |
-
<span className="gradient-text">
|
| 363 |
</h2>
|
| 364 |
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
| 365 |
-
|
| 366 |
</p>
|
| 367 |
</div>
|
| 368 |
|
|
@@ -381,34 +385,34 @@ export default function Home() {
|
|
| 381 |
<div className="max-w-2xl mx-auto text-center space-y-8">
|
| 382 |
<div className="space-y-4">
|
| 383 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 384 |
-
<span className="gradient-text">
|
| 385 |
</h2>
|
| 386 |
<p className="text-xl text-muted-foreground">
|
| 387 |
-
|
| 388 |
</p>
|
| 389 |
</div>
|
| 390 |
|
| 391 |
<div className="bg-card border border-primary/30 p-8 rounded-2xl space-y-6 glow-effect">
|
| 392 |
<div className="space-y-3">
|
| 393 |
-
<h3 className="text-lg font-semibold text-foreground">
|
| 394 |
<p className="text-muted-foreground">
|
| 395 |
-
<strong>
|
| 396 |
</p>
|
| 397 |
</div>
|
| 398 |
|
| 399 |
<div className="border-t border-border pt-6 space-y-4">
|
| 400 |
-
<h3 className="text-lg font-semibold text-foreground">
|
| 401 |
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
| 402 |
<a href={whatsappLink} target="_blank" rel="noopener noreferrer">
|
| 403 |
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-white gap-2 w-full sm:w-auto font-bold">
|
| 404 |
<MessageCircle className="w-5 h-5" />
|
| 405 |
-
|
| 406 |
</Button>
|
| 407 |
</a>
|
| 408 |
<a href={emailLink}>
|
| 409 |
<Button size="lg" variant="outline" className="border-primary text-primary hover:bg-primary/10 gap-2 w-full sm:w-auto font-bold">
|
| 410 |
<Mail className="w-5 h-5" />
|
| 411 |
-
|
| 412 |
</Button>
|
| 413 |
</a>
|
| 414 |
</div>
|
|
@@ -424,13 +428,13 @@ export default function Home() {
|
|
| 424 |
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
| 425 |
<div className="flex items-center gap-3">
|
| 426 |
<img src={logoUrl} alt="Impulso Digital" className="h-8 w-auto opacity-80" />
|
| 427 |
-
<span className="text-sm text-muted-foreground"
|
| 428 |
</div>
|
| 429 |
<div className="flex gap-6 text-sm text-muted-foreground">
|
| 430 |
-
<a href="#aurora" className="hover:text-primary transition-colors">
|
| 431 |
-
<a href="#drex" className="hover:text-primary transition-colors">
|
| 432 |
-
<a href="#sovereignty" className="hover:text-primary transition-colors">
|
| 433 |
-
<a href="#contact" className="hover:text-primary transition-colors">
|
| 434 |
</div>
|
| 435 |
</div>
|
| 436 |
</div>
|
|
|
|
| 1 |
import { Button } from "@/components/ui/button";
|
| 2 |
+
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
|
| 3 |
+
import { useLanguage } from "@/contexts/LanguageContext";
|
| 4 |
+
import { getTranslation } from "@/lib/translations";
|
| 5 |
import { Mail, MessageCircle, ChevronRight, Zap, Shield, Rocket, TrendingUp, Lock, Globe, Cpu, BarChart3, Users, Lightbulb } from "lucide-react";
|
| 6 |
import { useState, useEffect, createElement } from "react";
|
| 7 |
|
|
|
|
| 11 |
* - Glowing effects and smooth animations
|
| 12 |
* - Professional messaging for government and investors
|
| 13 |
* - Aurora + Drex Digital partnership as core narrative
|
| 14 |
+
* - Full multilingual support (PT, EN, ES)
|
| 15 |
*/
|
| 16 |
|
| 17 |
export default function Home() {
|
| 18 |
+
const { language } = useLanguage();
|
| 19 |
+
const t = getTranslation(language);
|
| 20 |
+
|
| 21 |
const [scrollY, setScrollY] = useState(0);
|
| 22 |
const [activeSlide, setActiveSlide] = useState(0);
|
| 23 |
|
|
|
|
| 40 |
|
| 41 |
const slides = [
|
| 42 |
{
|
| 43 |
+
title: t.slides.slide1.title,
|
| 44 |
+
subtitle: t.slides.slide1.subtitle,
|
| 45 |
+
description: t.slides.slide1.description,
|
| 46 |
icon: Rocket,
|
|
|
|
| 47 |
},
|
| 48 |
{
|
| 49 |
+
title: t.slides.slide2.title,
|
| 50 |
+
subtitle: t.slides.slide2.subtitle,
|
| 51 |
+
description: t.slides.slide2.description,
|
| 52 |
icon: TrendingUp,
|
|
|
|
| 53 |
},
|
| 54 |
{
|
| 55 |
+
title: t.slides.slide3.title,
|
| 56 |
+
subtitle: t.slides.slide3.subtitle,
|
| 57 |
+
description: t.slides.slide3.description,
|
| 58 |
icon: Users,
|
|
|
|
| 59 |
},
|
| 60 |
{
|
| 61 |
+
title: t.slides.slide4.title,
|
| 62 |
+
subtitle: t.slides.slide4.subtitle,
|
| 63 |
+
description: t.slides.slide4.description,
|
| 64 |
icon: Shield,
|
| 65 |
+
},
|
|
|
|
| 66 |
];
|
| 67 |
|
| 68 |
return (
|
|
|
|
| 75 |
<span className="gradient-text font-bold text-xl hidden sm:inline">IMPULSO DIGITAL</span>
|
| 76 |
</div>
|
| 77 |
<nav className="hidden md:flex items-center gap-8">
|
| 78 |
+
<a href="#aurora" className="text-foreground hover:text-primary transition-colors text-sm font-medium">{t.header.nav.aurora}</a>
|
| 79 |
+
<a href="#drex" className="text-foreground hover:text-primary transition-colors text-sm font-medium">{t.header.nav.drex}</a>
|
| 80 |
+
<a href="#sovereignty" className="text-foreground hover:text-primary transition-colors text-sm font-medium">{t.header.nav.sovereignty}</a>
|
| 81 |
+
<a href="#contact" className="text-foreground hover:text-primary transition-colors text-sm font-medium">{t.header.nav.contact}</a>
|
| 82 |
</nav>
|
| 83 |
<div className="flex items-center gap-3">
|
| 84 |
+
<LanguageSwitcher />
|
| 85 |
<a href={whatsappLink} target="_blank" rel="noopener noreferrer">
|
| 86 |
<Button size="sm" className="bg-primary hover:bg-cyan-600 text-background gap-2">
|
| 87 |
<MessageCircle className="w-4 h-4" />
|
| 88 |
+
{t.header.whatsapp}
|
| 89 |
</Button>
|
| 90 |
</a>
|
| 91 |
</div>
|
|
|
|
| 104 |
<div className="space-y-8 animate-fade-in">
|
| 105 |
<div className="space-y-4">
|
| 106 |
<h1 className="text-5xl md:text-7xl font-bold leading-tight">
|
| 107 |
+
<span className="gradient-text">{t.hero.title}</span>
|
| 108 |
</h1>
|
| 109 |
<h2 className="text-3xl md:text-4xl font-bold text-foreground">
|
| 110 |
+
{t.hero.subtitle}
|
| 111 |
</h2>
|
| 112 |
<p className="text-xl text-muted-foreground max-w-lg leading-relaxed">
|
| 113 |
+
{t.hero.description}
|
| 114 |
</p>
|
| 115 |
</div>
|
| 116 |
|
|
|
|
| 118 |
<a href={whatsappLink} target="_blank" rel="noopener noreferrer">
|
| 119 |
<Button size="lg" className="bg-primary hover:bg-cyan-600 text-background gap-2 w-full sm:w-auto font-bold">
|
| 120 |
<Zap className="w-5 h-5" />
|
| 121 |
+
{t.hero.startNow}
|
| 122 |
</Button>
|
| 123 |
</a>
|
| 124 |
<a href="#aurora">
|
| 125 |
<Button size="lg" variant="outline" className="border-primary text-primary hover:bg-primary/10 gap-2 w-full sm:w-auto font-bold">
|
| 126 |
+
{t.hero.learnMore}
|
| 127 |
<ChevronRight className="w-5 h-5" />
|
| 128 |
</Button>
|
| 129 |
</a>
|
|
|
|
| 132 |
<div className="flex gap-6 pt-4">
|
| 133 |
<div className="flex items-center gap-2">
|
| 134 |
<Cpu className="w-5 h-5 text-primary" />
|
| 135 |
+
<span className="text-sm font-medium">{t.hero.aiPowered}</span>
|
| 136 |
</div>
|
| 137 |
<div className="flex items-center gap-2">
|
| 138 |
<Shield className="w-5 h-5 text-primary" />
|
| 139 |
+
<span className="text-sm font-medium">{t.hero.secure}</span>
|
| 140 |
</div>
|
| 141 |
<div className="flex items-center gap-2">
|
| 142 |
<Globe className="w-5 h-5 text-primary" />
|
| 143 |
+
<span className="text-sm font-medium">{t.hero.sovereign}</span>
|
| 144 |
</div>
|
| 145 |
</div>
|
| 146 |
</div>
|
|
|
|
| 158 |
<div className="container mx-auto px-4">
|
| 159 |
<div className="text-center mb-16 space-y-4">
|
| 160 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 161 |
+
<span className="gradient-text">{t.slides.title}</span>
|
| 162 |
</h2>
|
| 163 |
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
| 164 |
+
{t.slides.subtitle}
|
| 165 |
</p>
|
| 166 |
</div>
|
| 167 |
|
|
|
|
| 204 |
disabled={activeSlide === 0}
|
| 205 |
className="px-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
| 206 |
>
|
| 207 |
+
{t.slides.previous}
|
| 208 |
</button>
|
| 209 |
<div className="flex gap-2">
|
| 210 |
{slides.map((_, idx) => (
|
|
|
|
| 222 |
disabled={activeSlide === slides.length - 1}
|
| 223 |
className="px-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
| 224 |
>
|
| 225 |
+
{t.slides.next}
|
| 226 |
</button>
|
| 227 |
</div>
|
| 228 |
</div>
|
|
|
|
| 235 |
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
|
| 236 |
<div className="space-y-6">
|
| 237 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 238 |
+
<span className="gradient-text">{t.aurora.title}</span>
|
| 239 |
</h2>
|
| 240 |
<p className="text-lg text-muted-foreground leading-relaxed">
|
| 241 |
+
{t.aurora.description}
|
| 242 |
</p>
|
| 243 |
|
| 244 |
<div className="grid grid-cols-2 gap-4">
|
| 245 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 246 |
<Lightbulb className="w-6 h-6 text-primary mb-2" />
|
| 247 |
+
<h4 className="font-semibold text-foreground mb-1">{t.aurora.education}</h4>
|
| 248 |
+
<p className="text-sm text-muted-foreground">{t.aurora.educationDesc}</p>
|
| 249 |
</div>
|
| 250 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 251 |
<Zap className="w-6 h-6 text-yellow-500 mb-2" />
|
| 252 |
+
<h4 className="font-semibold text-foreground mb-1">{t.aurora.automation}</h4>
|
| 253 |
+
<p className="text-sm text-muted-foreground">{t.aurora.automationDesc}</p>
|
| 254 |
</div>
|
| 255 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 256 |
<BarChart3 className="w-6 h-6 text-green-500 mb-2" />
|
| 257 |
+
<h4 className="font-semibold text-foreground mb-1">{t.aurora.dataIntelligence}</h4>
|
| 258 |
+
<p className="text-sm text-muted-foreground">{t.aurora.dataIntelligenceDesc}</p>
|
| 259 |
</div>
|
| 260 |
<div className="bg-card border border-primary/20 p-4 rounded-lg hover:border-primary/50 transition-colors">
|
| 261 |
<TrendingUp className="w-6 h-6 text-purple-500 mb-2" />
|
| 262 |
+
<h4 className="font-semibold text-foreground mb-1">{t.aurora.decisionSupport}</h4>
|
| 263 |
+
<p className="text-sm text-muted-foreground">{t.aurora.decisionSupportDesc}</p>
|
| 264 |
</div>
|
| 265 |
</div>
|
| 266 |
</div>
|
|
|
|
| 282 |
|
| 283 |
<div className="order-1 md:order-2 space-y-6">
|
| 284 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 285 |
+
<span className="gradient-text">{t.drex.title}</span>
|
| 286 |
</h2>
|
| 287 |
<p className="text-lg text-muted-foreground leading-relaxed">
|
| 288 |
+
{t.drex.description}
|
| 289 |
</p>
|
| 290 |
|
| 291 |
<div className="space-y-4">
|
| 292 |
<div className="flex gap-4">
|
| 293 |
<Lock className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
|
| 294 |
<div>
|
| 295 |
+
<h4 className="font-semibold text-foreground mb-1">{t.drex.secureInfrastructure}</h4>
|
| 296 |
+
<p className="text-muted-foreground">{t.drex.secureInfrastructureDesc}</p>
|
| 297 |
</div>
|
| 298 |
</div>
|
| 299 |
<div className="flex gap-4">
|
| 300 |
<Users className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
|
| 301 |
<div>
|
| 302 |
+
<h4 className="font-semibold text-foreground mb-1">{t.drex.massAdoption}</h4>
|
| 303 |
+
<p className="text-muted-foreground">{t.drex.massAdoptionDesc}</p>
|
| 304 |
</div>
|
| 305 |
</div>
|
| 306 |
<div className="flex gap-4">
|
| 307 |
<Globe className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
|
| 308 |
<div>
|
| 309 |
+
<h4 className="font-semibold text-foreground mb-1">{t.drex.globalStandard}</h4>
|
| 310 |
+
<p className="text-muted-foreground">{t.drex.globalStandardDesc}</p>
|
| 311 |
</div>
|
| 312 |
</div>
|
| 313 |
</div>
|
|
|
|
| 322 |
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
|
| 323 |
<div className="space-y-6">
|
| 324 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 325 |
+
<span className="gradient-text">{t.sovereignty.title}</span>
|
| 326 |
</h2>
|
| 327 |
<p className="text-lg text-muted-foreground leading-relaxed">
|
| 328 |
+
{t.sovereignty.description}
|
| 329 |
</p>
|
| 330 |
|
| 331 |
<div className="bg-gradient-to-br from-primary/10 to-yellow-500/10 border border-primary/30 p-6 rounded-lg">
|
| 332 |
+
<h4 className="text-xl font-bold text-foreground mb-3">{t.sovereignty.commitment}</h4>
|
| 333 |
<ul className="space-y-2 text-muted-foreground">
|
| 334 |
<li className="flex gap-2">
|
| 335 |
<span className="text-primary">β</span>
|
| 336 |
+
<span>{t.sovereignty.point1}</span>
|
| 337 |
</li>
|
| 338 |
<li className="flex gap-2">
|
| 339 |
<span className="text-primary">β</span>
|
| 340 |
+
<span>{t.sovereignty.point2}</span>
|
| 341 |
</li>
|
| 342 |
<li className="flex gap-2">
|
| 343 |
<span className="text-primary">β</span>
|
| 344 |
+
<span>{t.sovereignty.point3}</span>
|
| 345 |
</li>
|
| 346 |
<li className="flex gap-2">
|
| 347 |
<span className="text-primary">β</span>
|
| 348 |
+
<span>{t.sovereignty.point4}</span>
|
| 349 |
</li>
|
| 350 |
</ul>
|
| 351 |
</div>
|
|
|
|
| 363 |
<div className="container mx-auto px-4">
|
| 364 |
<div className="text-center mb-16 space-y-4">
|
| 365 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 366 |
+
<span className="gradient-text">{t.consumerJourney.title}</span>
|
| 367 |
</h2>
|
| 368 |
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
| 369 |
+
{t.consumerJourney.subtitle}
|
| 370 |
</p>
|
| 371 |
</div>
|
| 372 |
|
|
|
|
| 385 |
<div className="max-w-2xl mx-auto text-center space-y-8">
|
| 386 |
<div className="space-y-4">
|
| 387 |
<h2 className="text-4xl md:text-5xl font-bold">
|
| 388 |
+
<span className="gradient-text">{t.contact.title}</span>
|
| 389 |
</h2>
|
| 390 |
<p className="text-xl text-muted-foreground">
|
| 391 |
+
{t.contact.subtitle}
|
| 392 |
</p>
|
| 393 |
</div>
|
| 394 |
|
| 395 |
<div className="bg-card border border-primary/30 p-8 rounded-2xl space-y-6 glow-effect">
|
| 396 |
<div className="space-y-3">
|
| 397 |
+
<h3 className="text-lg font-semibold text-foreground">{t.contact.company}</h3>
|
| 398 |
<p className="text-muted-foreground">
|
| 399 |
+
<strong>{t.contact.cnpj}</strong>
|
| 400 |
</p>
|
| 401 |
</div>
|
| 402 |
|
| 403 |
<div className="border-t border-border pt-6 space-y-4">
|
| 404 |
+
<h3 className="text-lg font-semibold text-foreground">{t.contact.contactUs}</h3>
|
| 405 |
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
| 406 |
<a href={whatsappLink} target="_blank" rel="noopener noreferrer">
|
| 407 |
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-white gap-2 w-full sm:w-auto font-bold">
|
| 408 |
<MessageCircle className="w-5 h-5" />
|
| 409 |
+
{t.contact.whatsappText}
|
| 410 |
</Button>
|
| 411 |
</a>
|
| 412 |
<a href={emailLink}>
|
| 413 |
<Button size="lg" variant="outline" className="border-primary text-primary hover:bg-primary/10 gap-2 w-full sm:w-auto font-bold">
|
| 414 |
<Mail className="w-5 h-5" />
|
| 415 |
+
{t.contact.email}
|
| 416 |
</Button>
|
| 417 |
</a>
|
| 418 |
</div>
|
|
|
|
| 428 |
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
| 429 |
<div className="flex items-center gap-3">
|
| 430 |
<img src={logoUrl} alt="Impulso Digital" className="h-8 w-auto opacity-80" />
|
| 431 |
+
<span className="text-sm text-muted-foreground">{t.footer.copyright}</span>
|
| 432 |
</div>
|
| 433 |
<div className="flex gap-6 text-sm text-muted-foreground">
|
| 434 |
+
<a href="#aurora" className="hover:text-primary transition-colors">{t.header.nav.aurora}</a>
|
| 435 |
+
<a href="#drex" className="hover:text-primary transition-colors">{t.header.nav.drex}</a>
|
| 436 |
+
<a href="#sovereignty" className="hover:text-primary transition-colors">{t.header.nav.sovereignty}</a>
|
| 437 |
+
<a href="#contact" className="hover:text-primary transition-colors">{t.header.nav.contact}</a>
|
| 438 |
</div>
|
| 439 |
</div>
|
| 440 |
</div>
|