213 lines
10 KiB
TypeScript
213 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import DashboardPreview from "./DashboardPreview";
|
|
|
|
interface DynamicBrandingProps {
|
|
currentStep: number;
|
|
companyName?: string;
|
|
subdomain?: string;
|
|
primaryColor?: string;
|
|
secondaryColor?: string;
|
|
logoUrl?: string;
|
|
}
|
|
|
|
export default function DynamicBranding({
|
|
currentStep,
|
|
companyName = "",
|
|
subdomain = "",
|
|
primaryColor = "#0ea5e9",
|
|
secondaryColor = "#0284c7",
|
|
logoUrl = ""
|
|
}: DynamicBrandingProps) {
|
|
const [activeTestimonial, setActiveTestimonial] = useState(0);
|
|
|
|
const testimonials = [
|
|
{
|
|
text: "A implementação do Aggios transformou completamente a gestão da nossa agência. Conseguimos reduzir em 65% o tempo gasto com tarefas administrativas e aumentar nossa capacidade de atendimento.",
|
|
author: "Carlos Eduardo Martins",
|
|
position: "CEO",
|
|
company: "Martins & Associados",
|
|
rating: 5
|
|
},
|
|
{
|
|
text: "Como diretora de operações, preciso de dados precisos em tempo real. O Aggios entrega exatamente isso. A plataforma é intuitiva e os relatórios são excepcionais para tomada de decisão estratégica.",
|
|
author: "Patricia Almeida Santos",
|
|
position: "Diretora de Operações",
|
|
company: "Digital Solutions Group",
|
|
rating: 5
|
|
},
|
|
{
|
|
text: "Implementamos o Aggios há 6 meses e o ROI foi imediato. Melhor controle financeiro, visibilidade total dos projetos e uma equipe muito mais produtiva. Recomendo sem ressalvas.",
|
|
author: "Roberto Henrique Costa",
|
|
position: "Diretor Financeiro",
|
|
company: "Costa & Partners",
|
|
rating: 5
|
|
},
|
|
{
|
|
text: "A integração com nossas ferramentas foi perfeita e o suporte técnico é simplesmente excepcional. O Aggios se tornou parte fundamental da nossa operação diária.",
|
|
author: "Fernanda Silva Rodrigues",
|
|
position: "Head de TI",
|
|
company: "Tech Innovators",
|
|
rating: 5
|
|
}
|
|
];
|
|
|
|
// Auto-rotate testimonials
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
|
|
}, 6000);
|
|
return () => clearInterval(interval);
|
|
}, [testimonials.length]);
|
|
|
|
// Se for etapa 4, mostrar preview do dashboard
|
|
if (currentStep === 4) {
|
|
return (
|
|
<div className="relative z-10 flex flex-col h-full w-full overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
|
{/* Decorative elements */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-0 left-0 w-96 h-96 bg-blue-500 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col justify-center items-center h-full p-12 text-white">
|
|
<div className="mb-6">
|
|
<h1 className="text-4xl font-bold tracking-tight text-white text-center mb-2">
|
|
aggios
|
|
</h1>
|
|
<p className="text-sm text-white/70 font-medium tracking-wide uppercase text-center">
|
|
Gestão Inteligente para Agências
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-lg text-center mb-8">
|
|
<h2 className="text-3xl font-bold mb-2 text-white">Preview do seu Painel</h2>
|
|
<p className="text-white/70 text-base">Veja como ficará seu dashboard personalizado</p>
|
|
</div>
|
|
|
|
<div className="w-full max-w-3xl mb-6">
|
|
<DashboardPreview
|
|
companyName={companyName}
|
|
subdomain={subdomain}
|
|
primaryColor={primaryColor}
|
|
secondaryColor={secondaryColor}
|
|
logoUrl={logoUrl}
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="text-white/60 text-sm">
|
|
As cores e configurações são atualizadas em tempo real
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative z-10 flex flex-col h-full w-full overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
|
{/* Decorative elements */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-20 left-20 w-80 h-80 bg-indigo-500 rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col justify-between h-full p-12 text-white">
|
|
<div className="mb-8">
|
|
<div className="inline-block">
|
|
<h1 className="text-4xl font-bold tracking-tight text-white mb-2">
|
|
aggios
|
|
</h1>
|
|
<p className="text-sm text-white/70 font-medium tracking-wide uppercase">
|
|
Gestão Inteligente para Agências
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="space-y-6">
|
|
<div className="mb-6">
|
|
<h3 className="text-sm font-semibold text-white/60 uppercase tracking-wider mb-1">
|
|
Depoimentos
|
|
</h3>
|
|
<p className="text-2xl font-bold text-white">
|
|
O que nossos clientes dizem
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="bg-white/5 backdrop-blur-md rounded-xl p-8 border border-white/10 shadow-2xl">
|
|
<div className="flex gap-1 mb-4">
|
|
{[...Array(testimonials[activeTestimonial].rating)].map((_, i) => (
|
|
<i key={i} className="ri-star-fill text-yellow-400 text-lg" />
|
|
))}
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<i className="ri-double-quotes-l text-4xl text-white/20" />
|
|
</div>
|
|
|
|
<p className="text-white/95 text-lg leading-relaxed mb-6 min-h-[140px]">
|
|
{testimonials[activeTestimonial].text}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-4 pt-6 border-t border-white/10">
|
|
<div className="relative w-14 h-14 rounded-full overflow-hidden ring-2 ring-white/20 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
|
<span className="text-white font-bold text-xl">
|
|
{testimonials[activeTestimonial].author.split(' ').map(n => n[0]).join('')}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-white text-lg">
|
|
{testimonials[activeTestimonial].author}
|
|
</p>
|
|
<p className="text-sm text-white/70">
|
|
{testimonials[activeTestimonial].position}
|
|
</p>
|
|
<p className="text-sm text-white/50 font-medium">
|
|
{testimonials[activeTestimonial].company}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 justify-center mt-6">
|
|
{testimonials.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setActiveTestimonial(index)}
|
|
className={`h-2 rounded-full transition-all duration-300 ${index === activeTestimonial
|
|
? "w-12 bg-white shadow-lg shadow-white/20"
|
|
: "w-2 bg-white/30 hover:bg-white/50"
|
|
}`}
|
|
aria-label={`Ir para depoimento ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-6 mt-8 pt-6 border-t border-white/10">
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-white">10.000+</p>
|
|
<p className="text-xs text-white/60 uppercase tracking-wide">Projetos</p>
|
|
</div>
|
|
<div className="w-px h-8 bg-white/20" />
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-white">98%</p>
|
|
<p className="text-xs text-white/60 uppercase tracking-wide">Satisfação</p>
|
|
</div>
|
|
<div className="w-px h-8 bg-white/20" />
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-white">5.000+</p>
|
|
<p className="text-xs text-white/60 uppercase tracking-wide">Usuários</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|