125 lines
6.2 KiB
TypeScript
125 lines
6.2 KiB
TypeScript
// Imported from investidor/resources/js/modules/news/sections/about/MissionVision.tsx; original content preserved.
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { Target, Eye } from 'lucide-react';
|
|
import { Trans } from './source-text';
|
|
|
|
interface MissionVisionItem {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
gradient: string;
|
|
}
|
|
|
|
export const MissionVision = () => {
|
|
const [hoveredId, setHoveredId] = useState<number | null>(null);
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const [isInView, setIsInView] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => setIsInView(entry.isIntersecting),
|
|
{ threshold: 0.1, rootMargin: '0px 0px -80px 0px' },
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const items: MissionVisionItem[] = [
|
|
{
|
|
id: 1,
|
|
title: 'Missão',
|
|
description:
|
|
'Fornecer soluções integradas e inovadoras em comércio, comunicação, tecnologia e informação, com excelência na intermediação comercial, na informação pública e em plataformas digitais promovendo crescimento sustentável e impacto positivo no mercado moçambicano.',
|
|
icon: <Target className="h-7 w-7 sm:h-8 sm:w-8" />,
|
|
gradient: 'from-red-500 to-red-600',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Visão',
|
|
description:
|
|
'Ser a referência líder em Moçambique, impulsionando o progresso do país através de soluções inovadoras e sustentáveis, para um futuro mais conectado, próspero e dinâmico.',
|
|
icon: <Eye className="h-7 w-7 sm:h-8 sm:w-8" />,
|
|
gradient: 'from-red-600 to-red-800',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section ref={sectionRef} className="relative overflow-hidden py-6">
|
|
<div className="relative mx-auto max-w-7xl px-5 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-2 lg:gap-6">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={item.id}
|
|
onMouseEnter={() => setHoveredId(item.id)}
|
|
onMouseLeave={() => setHoveredId(null)}
|
|
className={`transition-all duration-1200 ease-in-out ${isInView ? 'translate-y-0 scale-100 opacity-100' : 'translate-y-6 scale-95 opacity-0'} `}
|
|
style={{ transitionDelay: `${index * 200}ms` }}
|
|
>
|
|
<div
|
|
className={`relative h-full rounded-2xl border bg-white/5 backdrop-blur-lg transition-all duration-700 ease-in-out sm:rounded-3xl ${
|
|
hoveredId === item.id
|
|
? '-translate-y-2 border-red-500/50 shadow-xl shadow-red-600/20 sm:-translate-y-3'
|
|
: 'border-white/10 shadow-sm'
|
|
} `}
|
|
>
|
|
<div className="p-5 sm:p-6 lg:p-8">
|
|
<div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-6">
|
|
<div
|
|
className={`h-14 w-14 flex-shrink-0 rounded-xl bg-gradient-to-br sm:h-16 sm:w-16 sm:rounded-2xl ${item.gradient} flex items-center justify-center p-3 text-white shadow-lg transition-all duration-700 ease-in-out sm:p-3.5 ${
|
|
hoveredId === item.id
|
|
? 'scale-125 rotate-12 animate-pulse shadow-2xl'
|
|
: 'animate-float scale-100 rotate-0'
|
|
} `}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
|
|
<div className="mt-3 min-w-0 flex-1 text-center sm:mt-0 sm:text-left">
|
|
<h3
|
|
className={`mb-2 text-2xl font-light tracking-tight transition-colors duration-500 sm:mb-3 sm:text-3xl lg:text-4xl ${hoveredId === item.id ? 'text-red-400' : 'text-red-500'} `}
|
|
>
|
|
<Trans>{item.title}</Trans>
|
|
</h3>
|
|
<p className="text-sm leading-relaxed font-light text-[#ffffff] sm:text-base lg:text-lg">
|
|
<Trans>
|
|
{item.description}
|
|
</Trans>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{hoveredId === item.id && (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl sm:rounded-3xl">
|
|
<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(200%); }
|
|
}
|
|
.animate-shimmer { animation: shimmer 2.5s ease-in-out infinite; }
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
.animate-float { animation: float 3s ease-in-out infinite; }
|
|
`}</style>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default MissionVision;
|