This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
// 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;
|
||||
Reference in New Issue
Block a user