Docker config
This commit is contained in:
mukesh13
64
app/components/Team/TeamCard.jsx
Normal file
64
app/components/Team/TeamCard.jsx
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
const TeamCard = ({
|
||||
image,
|
||||
name,
|
||||
position,
|
||||
linkedinUrl,
|
||||
detailUrl
|
||||
}) => {
|
||||
return (
|
||||
<article className="w-full h-full">
|
||||
<div className="rounded-3xl overflow-hidden hover:shadow-lg transition-shadow duration-300 h-full flex flex-col" style={{ backgroundColor: '#f2fcfc' }}>
|
||||
{/* Image Section */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="relative group">
|
||||
<img
|
||||
src={image}
|
||||
alt={name}
|
||||
className="w-full h-80 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
{detailUrl && (
|
||||
<a
|
||||
href={detailUrl}
|
||||
className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section - Flexible to fill remaining space */}
|
||||
<div className="p-6 flex-1 flex flex-col justify-between">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl font-semibold mb-2 hover:text-teal-600 transition-colors" style={{ color: '#555555' }}>
|
||||
{detailUrl ? (
|
||||
<a href={detailUrl}>{name}</a>
|
||||
) : (
|
||||
name
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-teal-600 text-sm font-medium leading-relaxed">{position}</p>
|
||||
</div>
|
||||
|
||||
{/* LinkedIn Button - Always at bottom */}
|
||||
{linkedinUrl && (
|
||||
<div className="flex justify-start mt-auto">
|
||||
<a
|
||||
href={linkedinUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors duration-300"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamCard;
|
||||
70
app/components/Team/TeamGrid.jsx
Normal file
70
app/components/Team/TeamGrid.jsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import TeamCard from './TeamCard';
|
||||
|
||||
const TeamGrid = () => {
|
||||
const teamMembers = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/team/DrAvinash.png",
|
||||
name: "Dr. Avanish Kumar",
|
||||
position: "Promoter",
|
||||
linkedinUrl: "https://www.linkedin.com/in/avanish-kumar-phd-a034791b0/",
|
||||
detailUrl: "/team-member-detail"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/team/Frame 5.png",
|
||||
name: "Dr. Goriparthi Ramakrishna",
|
||||
position: "Lab Head",
|
||||
linkedinUrl: "https://www.linkedin.com/in/goriparthi-ramakrishna/",
|
||||
detailUrl: "/team-member-detail1"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/team/Frame 6.png",
|
||||
name: "Dr. Divyank Mahajan",
|
||||
position: "Head, Techno-Commercial Strategy",
|
||||
linkedinUrl: "https://in.linkedin.com/in/divyank-mahajan-phd",
|
||||
detailUrl: "/team-member-detail2"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/team/Frame 4.png",
|
||||
name: "Dr. Mohammed Moquitul Haque",
|
||||
position: "Lead Scientist - Clinical Genomics",
|
||||
linkedinUrl: "https://www.linkedin.com/in/moquitul-haque-phd-9a405561/",
|
||||
detailUrl: "/team-member-detail3"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/team/Frame 12.png",
|
||||
name: "Richa Malhotra",
|
||||
position: "Business Manager - Clinical Genomic",
|
||||
linkedinUrl: "https://www.linkedin.com/in/richa-malhotra1/",
|
||||
detailUrl: "/team-member-detail4"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto max-w-none px-6">
|
||||
{/* Grid with equal height cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="flex">
|
||||
<TeamCard
|
||||
image={member.image}
|
||||
name={member.name}
|
||||
position={member.position}
|
||||
linkedinUrl={member.linkedinUrl}
|
||||
detailUrl={member.detailUrl}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamGrid;
|
||||
41
app/components/Team/TeamHero.jsx
Normal file
41
app/components/Team/TeamHero.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
|
||||
const TeamHero = () => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-6 h-24"
|
||||
style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-1 -mt-3">
|
||||
<div className="container mx-auto max-w-none px-4">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/about-us" className="text-white hover:text-yellow-400 underline">About Us</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-white">Our Team</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="relative z-10 text-center -mt-2">
|
||||
<h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
|
||||
Our Team
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamHero;
|
||||
Reference in New Issue
Block a user