Versão inicial do site Avanzato
This commit is contained in:
@@ -0,0 +1,371 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
import { Star, Building2, MapPin } from 'lucide-react';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
interface Testimonial {
|
||||
id: number;
|
||||
cliente: string;
|
||||
responsavel: string;
|
||||
cargo?: string;
|
||||
segmento: string;
|
||||
cidade: string;
|
||||
quote: string;
|
||||
destaque: string;
|
||||
icone: string;
|
||||
}
|
||||
|
||||
const testimonials: Testimonial[] = [
|
||||
{
|
||||
id: 1,
|
||||
cliente: "Moraes & Moraes Advogados",
|
||||
responsavel: "Edilson Fernando de Moraes",
|
||||
segmento: "Advocacia",
|
||||
cidade: "São Paulo",
|
||||
quote: "Evitamos um investimento de mais de R$ 15.000 com a solução aplicada.",
|
||||
destaque: "Economia de R$ 15.000",
|
||||
icone: "⚖️"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
cliente: "Divas Car",
|
||||
responsavel: "Joelma Rodrigues",
|
||||
segmento: "Centro Automotivo",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Hoje todo o sistema está estruturado com backup em nuvem e funcionando perfeitamente.",
|
||||
destaque: "Backup em nuvem implementado",
|
||||
icone: "🚘"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
cliente: "Toyota Arquitetura",
|
||||
responsavel: "Elio Toyota",
|
||||
segmento: "Arquitetura",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Fui atendido prontamente, mesmo fora do horário, salvando um contrato importante.",
|
||||
destaque: "Atendimento fora do horário",
|
||||
icone: "🪵"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
cliente: "R2 Car",
|
||||
responsavel: "R2 Car Centro Automotivo",
|
||||
segmento: "Pintura Automotiva",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Em menos de uma hora todos os problemas foram resolvidos e tudo voltou a funcionar perfeitamente.",
|
||||
destaque: "Resolvido em menos de 1 hora",
|
||||
icone: "🚗"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
cliente: "Simpercom Impermeabilizações",
|
||||
responsavel: "João de Paula",
|
||||
segmento: "Impermeabilização",
|
||||
cidade: "Guarulhos",
|
||||
quote: "O problema foi resolvido com excelência, fortalecendo ainda mais nossa parceria.",
|
||||
destaque: "Resolvido com excelência",
|
||||
icone: "🧱"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
cliente: "Summa Desenvolvimento Humano",
|
||||
responsavel: "Silvia Pedrosa Luiz",
|
||||
segmento: "Coaching",
|
||||
cidade: "São Paulo",
|
||||
quote: "Os problemas foram resolvidos com rapidez e eficiência, mesmo para quem não entende de tecnologia.",
|
||||
destaque: "Rapidez e eficiência",
|
||||
icone: "🧠"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
cliente: "Visão Contabilidade",
|
||||
responsavel: "Antonio Gonçalves",
|
||||
segmento: "Contabilidade",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Passei a indicar os serviços com total confiança pela qualidade e agilidade.",
|
||||
destaque: "Total confiança",
|
||||
icone: "📊"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
cliente: "SEG1 Corretora de Seguros",
|
||||
responsavel: "Jorge Luiz Braga",
|
||||
segmento: "Seguros",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Melhoramos todos os computadores com apenas 10% do investimento necessário.",
|
||||
destaque: "90% de economia",
|
||||
icone: "🛡️"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
cliente: "Apoio 24 Horas",
|
||||
responsavel: "Roberto",
|
||||
cargo: "Sócio Proprietário",
|
||||
segmento: "Segurança / Monitoramento",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Garantimos a operação 24h mesmo com falhas de internet e energia, graças à estrutura implementada pela Avanzato.",
|
||||
destaque: "Operação 24h garantida",
|
||||
icone: "🛡️"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
cliente: "Lucio Seguros",
|
||||
responsavel: "Lucio Benevenuto",
|
||||
segmento: "Seguros",
|
||||
cidade: "Guarulhos",
|
||||
quote: "O equipamento ganhou performance e o atendimento foi rápido e eficiente.",
|
||||
destaque: "Performance melhorada",
|
||||
icone: "🛡️"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
cliente: "Caroni Reis Advogados",
|
||||
responsavel: "Jorge Paulo Caroni Reis",
|
||||
segmento: "Advocacia",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Fui atendido com dedicação e profissionalismo, sempre dentro do prazo e orçamento.",
|
||||
destaque: "Dentro do prazo",
|
||||
icone: "⚖️"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
cliente: "Trilha Empregos",
|
||||
responsavel: "Suelia Luz",
|
||||
segmento: "Recrutamento",
|
||||
cidade: "Guarulhos",
|
||||
quote: "Superou minhas expectativas com um atendimento atencioso, competente e eficiente.",
|
||||
destaque: "Superou expectativas",
|
||||
icone: "🧩"
|
||||
}
|
||||
];
|
||||
|
||||
// Lista de empresas que confiam na Avanzato (logos/nomes no final da seção)
|
||||
const empresasQueConfiam = [
|
||||
"Apoio24horas",
|
||||
"GateOneServitel",
|
||||
"Alamo",
|
||||
"Quantica",
|
||||
"Mourad Nadi",
|
||||
"RMA",
|
||||
"Ganiko",
|
||||
"Dcarvalho",
|
||||
"Divas Car",
|
||||
"Thalls",
|
||||
"Garuppy",
|
||||
"Moraes",
|
||||
"Dellacont",
|
||||
"Madri",
|
||||
"EFLAW",
|
||||
"BST Security",
|
||||
"Piso.com",
|
||||
"RollPrime"
|
||||
];
|
||||
|
||||
// Schema.org JSON-LD para SEO
|
||||
const generateSchemaOrg = () => {
|
||||
const reviews = testimonials.map(t => ({
|
||||
"@type": "Review",
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": t.responsavel
|
||||
},
|
||||
"reviewRating": {
|
||||
"@type": "Rating",
|
||||
"ratingValue": 5,
|
||||
"bestRating": 5
|
||||
},
|
||||
"reviewBody": t.quote,
|
||||
"publisher": {
|
||||
"@type": "Organization",
|
||||
"name": t.cliente
|
||||
}
|
||||
}));
|
||||
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Avanzato Tecnologia",
|
||||
"url": "https://avanzato.com.br",
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "5",
|
||||
"bestRating": "5",
|
||||
"ratingCount": String(reviews.length),
|
||||
"reviewCount": String(reviews.length)
|
||||
},
|
||||
"review": reviews
|
||||
};
|
||||
};
|
||||
|
||||
const TestimonialCard = ({ testimonial }: { testimonial: Testimonial }) => {
|
||||
return (
|
||||
<div className="testimonial-card bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300 h-full flex flex-col">
|
||||
{/* Icon and stars */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-2xl">{testimonial.icone}</span>
|
||||
<div className="flex gap-0.5">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-4 h-4 text-[#cbf400] fill-[#cbf400]" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<blockquote className="text-gray-300 text-sm leading-relaxed mb-4 flex-1">
|
||||
"{testimonial.quote}"
|
||||
</blockquote>
|
||||
|
||||
{/* Destaque badge */}
|
||||
<div className="mb-4">
|
||||
<span className="inline-block px-3 py-1 bg-[#cbf400]/10 text-[#cbf400] text-xs font-medium rounded-full border border-[#cbf400]/20">
|
||||
{testimonial.destaque}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Client info */}
|
||||
<div className="flex items-center gap-3 pt-4 border-t border-white/5">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#cbf400]/20 to-[#cbf400]/5 flex items-center justify-center text-[#cbf400] font-bold">
|
||||
{testimonial.responsavel.charAt(0)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-white font-semibold text-sm truncate">{testimonial.responsavel}</p>
|
||||
<div className="flex items-center gap-2 text-gray-500 text-xs">
|
||||
<Building2 className="w-3 h-3 flex-shrink-0" />
|
||||
<span className="truncate">{testimonial.cliente}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-600 text-xs">
|
||||
<MapPin className="w-3 h-3 flex-shrink-0" />
|
||||
<span>{testimonial.cidade}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Testimonials = () => {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const titleRef = useRef<HTMLDivElement>(null);
|
||||
const cardsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.fromTo(
|
||||
titleRef.current,
|
||||
{ y: 50, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: 'expo.out',
|
||||
scrollTrigger: {
|
||||
trigger: titleRef.current,
|
||||
start: 'top 80%',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const cards = cardsRef.current?.querySelectorAll('.testimonial-card');
|
||||
if (cards) {
|
||||
gsap.fromTo(
|
||||
cards,
|
||||
{ y: 60, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.7,
|
||||
stagger: 0.08,
|
||||
ease: 'expo.out',
|
||||
scrollTrigger: {
|
||||
trigger: cardsRef.current,
|
||||
start: 'top 80%',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}, sectionRef);
|
||||
|
||||
return () => ctx.revert();
|
||||
}, []);
|
||||
|
||||
const schemaData = generateSchemaOrg();
|
||||
|
||||
return (
|
||||
<section
|
||||
id="depoimentos"
|
||||
ref={sectionRef}
|
||||
className="section-padding bg-[#0e0e0e] relative overflow-hidden"
|
||||
>
|
||||
{/* Schema.org JSON-LD */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
||||
/>
|
||||
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 left-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2" />
|
||||
<div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-3xl translate-y-1/2 translate-x-1/2" />
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
{/* Section header */}
|
||||
<div ref={titleRef} className="text-center max-w-3xl mx-auto mb-16">
|
||||
<span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
|
||||
Depoimentos
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">
|
||||
O que nossos <span className="text-gradient">clientes dizem</span>
|
||||
</h2>
|
||||
<p className="text-gray-400 text-lg">
|
||||
Mais de 500 empresas confiam na Avanzato para cuidar da sua tecnologia.
|
||||
Veja o que dizem sobre nossos serviços.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
|
||||
{[
|
||||
{ valor: "500+", label: "Clientes atendidos" },
|
||||
{ valor: "11", label: "Anos de experiência" },
|
||||
{ valor: "4.9", label: "Nota média" },
|
||||
{ valor: "98%", label: "Taxa de satisfação" },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center bg-[#1a1a1a] rounded-xl p-6 border border-white/5">
|
||||
<div className="text-3xl md:text-4xl font-black text-[#cbf400] mb-1">{stat.valor}</div>
|
||||
<div className="text-gray-500 text-sm">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Testimonials grid */}
|
||||
<div
|
||||
ref={cardsRef}
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"
|
||||
>
|
||||
{testimonials.map((testimonial) => (
|
||||
<TestimonialCard key={testimonial.id} testimonial={testimonial} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Client logos section */}
|
||||
<div className="mt-20">
|
||||
<p className="text-center text-gray-500 text-sm mb-8 uppercase tracking-wider">
|
||||
Empresas que confiam na Avanzato
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center items-center gap-x-8 gap-y-4 opacity-60">
|
||||
{empresasQueConfiam.map((empresa, i) => (
|
||||
<span key={i} className="text-gray-400 font-medium text-sm hover:text-[#cbf400] transition-colors">
|
||||
{empresa}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
Reference in New Issue
Block a user