219 lines
10 KiB
TypeScript
219 lines
10 KiB
TypeScript
// Imported from investidor/resources/js/modules/news/sections/about/CompanyValues.tsx; original content preserved.
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { Users, Lightbulb, Globe, ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { Trans } from './source-text';
|
|
|
|
const img01 = '/assets/imgs/img01.jpg';
|
|
const img02 = '/assets/imgs/img02.jpg';
|
|
const img03 = '/assets/imgs/img03.jpg';
|
|
const img04 = '/assets/imgs/img04.jpg';
|
|
|
|
interface CompanyValue {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
image?: string;
|
|
icon?: React.ReactNode;
|
|
color?: string;
|
|
label?: string;
|
|
}
|
|
|
|
export const CompanyValues = () => {
|
|
const [hoveredId, setHoveredId] = useState<number | null>(null);
|
|
const [isInView, setIsInView] = useState<boolean>(false);
|
|
const [expandedId, setExpandedId] = useState<number | null>(null);
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (sectionRef.current) {
|
|
const rect = sectionRef.current.getBoundingClientRect();
|
|
setIsInView(
|
|
rect.top < window.innerHeight * 0.8 && rect.bottom > 100,
|
|
);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
handleScroll();
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const values: CompanyValue[] = [
|
|
{
|
|
id: 1,
|
|
title: 'Diversidade & Inclusão',
|
|
description:
|
|
'Representando todas as vozes e realidades de Moçambique',
|
|
image: img01,
|
|
icon: <Users className="h-6 w-6" />,
|
|
color: 'from-red-500 to-orange-500',
|
|
label: 'Valor Central',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Inovação',
|
|
description:
|
|
'Soluções tecnológicas e sustentáveis que impulsionam o desenvolvimento',
|
|
image: img02,
|
|
icon: <Lightbulb className="h-6 w-6" />,
|
|
color: 'from-red-600 to-red-700',
|
|
label: 'Essencial',
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Excelência',
|
|
description:
|
|
'Acreditamos que cada história merece ser contada com propósito. Combinamos visão criativa e conhecimento estratégico para dar vida às ideias.',
|
|
image: img03,
|
|
label: 'Somos mais que comunicação, somos transformação',
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Impacto Positivo',
|
|
description:
|
|
'Criamos marcas que inspiram, conteúdo que conecta e experiências memoráveis. Transformamos visão em realidade com estratégia, criatividade e tecnologia.',
|
|
image: img04,
|
|
icon: <Globe className="h-6 w-6" />,
|
|
color: 'from-red-600 to-red-700',
|
|
label: 'Propósito',
|
|
},
|
|
];
|
|
|
|
const toggleExpand = (id: number) => {
|
|
setExpandedId(expandedId === id ? null : id);
|
|
};
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="bg-primary relative overflow-hidden py-4"
|
|
>
|
|
<div className="mx-auto mb-4 max-w-7xl space-y-2 px-6 text-center">
|
|
<div
|
|
className={`transition-all duration-1000 ${isInView ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}
|
|
>
|
|
<h2 className="text-3xl font-semibold tracking-wide text-white md:text-3xl">
|
|
<span
|
|
className="font-bold italic not-italic"
|
|
style={{ color: '#FFFFFF' }}
|
|
>
|
|
<Trans>Valores</Trans>
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="grid grid-cols-1 items-stretch gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{values.map((value, i) => {
|
|
const isExpanded = expandedId === value.id;
|
|
const hasLongText = value.id === 3 || value.id === 4;
|
|
|
|
return (
|
|
<div
|
|
key={value.id}
|
|
onMouseEnter={() => setHoveredId(value.id)}
|
|
onMouseLeave={() => setHoveredId(null)}
|
|
className={`group relative transition-all duration-500 ${isInView ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
|
|
style={{ transitionDelay: `${i * 100}ms` }}
|
|
>
|
|
<div
|
|
className={`relative flex h-full flex-col overflow-hidden rounded-2xl border bg-white/5 backdrop-blur-xl transition-all duration-500 ${
|
|
hoveredId === value.id
|
|
? 'translate-y-[-6px] border-red-500/40 shadow-2xl shadow-red-600/20'
|
|
: 'border-white/10'
|
|
}`}
|
|
>
|
|
<div className="relative flex h-44 flex-1 flex-col overflow-hidden">
|
|
<img
|
|
src={value.image}
|
|
alt={value.title}
|
|
className={`h-full w-full object-cover transition-transform duration-700 ${
|
|
hoveredId === value.id
|
|
? 'scale-110'
|
|
: 'scale-100'
|
|
}`}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/40" />
|
|
|
|
{value.icon && value.color && (
|
|
<div
|
|
className={`absolute top-4 left-4 h-11 w-11 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center text-white shadow-lg transition-transform duration-500 ${
|
|
hoveredId === value.id
|
|
? 'scale-110 rotate-12'
|
|
: ''
|
|
}`}
|
|
>
|
|
{value.icon}
|
|
</div>
|
|
)}
|
|
|
|
{value.label && (
|
|
<div className="absolute top-4 right-5 px-3 py-1 text-lg font-bold text-white drop-shadow-md md:text-xl">
|
|
<Trans>{value.label}</Trans>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col bg-gradient-to-t from-black/60 via-black/30 to-transparent p-5">
|
|
<h3 className="mb-2 text-2xl font-bold text-white drop-shadow-md md:text-3xl">
|
|
<Trans>{value.title}</Trans>
|
|
</h3>
|
|
<p
|
|
className={`text-sm leading-relaxed text-gray-100 drop-shadow-md md:text-base ${
|
|
!isExpanded && hasLongText
|
|
? 'line-clamp-2'
|
|
: ''
|
|
}`}
|
|
>
|
|
<Trans>{value.description}</Trans>
|
|
</p>
|
|
{hasLongText && (
|
|
<button
|
|
onClick={() =>
|
|
toggleExpand(value.id)
|
|
}
|
|
className="mt-1 flex items-center gap-1 text-sm font-medium text-red-400 transition-colors hover:text-red-300"
|
|
>
|
|
{isExpanded ? (
|
|
<>
|
|
<Trans>Ver menos</Trans>{' '}
|
|
<ChevronUp className="h-4 w-4" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Trans>Ver mais</Trans>{' '}
|
|
<ChevronDown className="h-4 w-4" />
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{hoveredId === value.id && (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
|
|
<div className="animate-shimmer absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
.animate-shimmer { animation: shimmer 1.5s ease-in-out infinite; }
|
|
`}</style>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CompanyValues;
|