about us changes done
This commit is contained in:
priyanshuvish
BIN
src/assets/Aparna-Nair.png
Normal file
BIN
src/assets/Aparna-Nair.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
BIN
src/assets/Balaji-Chandrakumar.jpeg
Normal file
BIN
src/assets/Balaji-Chandrakumar.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
src/assets/Diju.jpeg
Normal file
BIN
src/assets/Diju.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/K-Ramkumar.png
Normal file
BIN
src/assets/K-Ramkumar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 KiB |
BIN
src/assets/R-Muralidharan.png
Normal file
BIN
src/assets/R-Muralidharan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
BIN
src/assets/Ramesh-Padmanabhan.jpeg
Normal file
BIN
src/assets/Ramesh-Padmanabhan.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/v-Swaminathan.jpg
Normal file
BIN
src/assets/v-Swaminathan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
File diff suppressed because it is too large
Load Diff
344
src/components/TeamMemberModal.tsx
Normal file
344
src/components/TeamMemberModal.tsx
Normal file
@@ -0,0 +1,344 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
interface TeamMember {
|
||||
name: string;
|
||||
role: string;
|
||||
image: string;
|
||||
fullBio?: string;
|
||||
experience?: string;
|
||||
expertise?: string[];
|
||||
education?: string;
|
||||
achievements?: string[];
|
||||
clientWork?: string;
|
||||
boardRoles?: string;
|
||||
}
|
||||
|
||||
interface TeamMemberModalProps {
|
||||
member: TeamMember | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TeamMemberModal({ member, isOpen, onClose }: TeamMemberModalProps) {
|
||||
// Prevent background scroll when modal is open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Disable body scroll
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.height = '100%';
|
||||
} else {
|
||||
// Re-enable body scroll
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.height = '';
|
||||
}
|
||||
|
||||
// Cleanup function to restore scroll on unmount
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.height = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// Handle escape key press
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!member) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Overlay */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 team-member-modal-overlay z-[9998]"
|
||||
onClick={onClose}
|
||||
style={{ zIndex: 9998 }}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="fixed inset-0 flex items-center justify-center p-4 z-[9999]"
|
||||
style={{ zIndex: 9999 }}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
|
||||
className="relative w-full max-w-6xl xl:max-w-5xl lg:max-w-4xl md:max-w-3xl sm:max-w-full max-h-[70vh] lg:max-h-[75vh] md:max-h-[80vh] sm:max-h-[85vh] overflow-hidden team-member-modal-container rounded-2xl"
|
||||
style={{ backgroundColor: '#FFFFFF' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Modal Content */}
|
||||
<div
|
||||
className="rounded-2xl overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: '#FFFFFF'
|
||||
}}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 md:top-6 md:right-6 z-10 w-10 h-10 md:w-12 md:h-12 bg-white/90 hover:bg-white rounded-full flex items-center justify-center transition-all duration-200 shadow-lg hover:shadow-xl"
|
||||
style={{ color: '#26231A' }}
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X size={20} className="md:w-6 md:h-6" />
|
||||
</button>
|
||||
|
||||
<div className="overflow-y-auto max-h-[70vh] lg:max-h-[75vh] md:max-h-[80vh] sm:max-h-[85vh] team-member-modal-scroll">
|
||||
{/* Header Section */}
|
||||
<div className="relative p-6 md:p-8 lg:p-12 rounded-t-2xl" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
|
||||
{/* Profile Image */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-32 h-32 lg:w-40 lg:h-40 rounded-2xl overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic Info */}
|
||||
<div className="flex-1">
|
||||
<h2
|
||||
className="text-h2 mb-3"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
{member.name}
|
||||
</h2>
|
||||
<p
|
||||
className="text-h4 mb-6"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#04045B'
|
||||
}}
|
||||
>
|
||||
{member.role}
|
||||
</p>
|
||||
|
||||
{member.experience && (
|
||||
<div className="mb-6">
|
||||
<h4
|
||||
className="text-body-lg mb-2"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A',
|
||||
fontWeight: '600'
|
||||
}}
|
||||
>
|
||||
Experience Overview
|
||||
</h4>
|
||||
<p
|
||||
className="text-body leading-relaxed"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#6F6F6F'
|
||||
}}
|
||||
>
|
||||
{member.experience}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Content */}
|
||||
<div className="px-6 md:px-8 lg:px-12 pb-6 md:pb-8 lg:pb-12 rounded-b-2xl">
|
||||
{/* Full Bio */}
|
||||
{member.fullBio && (
|
||||
<div className="mb-8">
|
||||
<h3
|
||||
className="text-h4 mb-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
Professional Background
|
||||
</h3>
|
||||
<div
|
||||
className="text-body leading-relaxed space-y-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
{member.fullBio.split('\n\n').map((paragraph, index) => (
|
||||
<p key={index}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expertise Areas */}
|
||||
{member.expertise && member.expertise.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<h3
|
||||
className="text-h4 mb-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
Areas of Expertise
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{member.expertise.map((skill, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-4 py-2 rounded-lg text-small"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: '#04045B',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Achievements */}
|
||||
{member.achievements && member.achievements.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<h3
|
||||
className="text-h4 mb-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
Key Achievements
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{member.achievements.map((achievement, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
|
||||
style={{ backgroundColor: '#F8C301' }}
|
||||
/>
|
||||
<p
|
||||
className="text-body"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
{achievement}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Client Work */}
|
||||
{member.clientWork && (
|
||||
<div className="mb-8">
|
||||
<h3
|
||||
className="text-h4 mb-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
Client Portfolio
|
||||
</h3>
|
||||
<p
|
||||
className="text-body leading-relaxed"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
{member.clientWork}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Board Roles */}
|
||||
{member.boardRoles && (
|
||||
<div className="mb-8">
|
||||
<h3
|
||||
className="text-h4 mb-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
Board Positions & Leadership Roles
|
||||
</h3>
|
||||
<p
|
||||
className="text-body leading-relaxed"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
{member.boardRoles}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Education */}
|
||||
{member.education && (
|
||||
<div className="mb-8">
|
||||
<h3
|
||||
className="text-h4 mb-4"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
Education & Qualifications
|
||||
</h3>
|
||||
<p
|
||||
className="text-body leading-relaxed"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A'
|
||||
}}
|
||||
>
|
||||
{member.education}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user