forked from UKSOURCE/hailearning.edu.vn
28 lines
1.4 KiB
TypeScript
28 lines
1.4 KiB
TypeScript
type DepartmentCardProps = {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
email: string;
|
|
phone: string;
|
|
};
|
|
|
|
export default function DepartmentCard({ icon, title, description, email, phone }: DepartmentCardProps) {
|
|
return (
|
|
<div className="bg-white rounded-[16px] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 hover:shadow-[0_8px_30px_rgb(38,60,111,0.08)] transition-all duration-300 flex flex-col h-full group">
|
|
<div className="w-14 h-14 bg-blue-50 rounded-[12px] flex items-center justify-center text-primary text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
|
|
<i className={icon}></i>
|
|
</div>
|
|
<div className="contact-card-title font-display font-bold text-dark mb-3">{title}</div>
|
|
<p className="text-sm text-gray-600 mb-6 flex-grow">{description}</p>
|
|
<div className="pt-4 border-t border-gray-100 mt-auto">
|
|
<a href={`mailto:${email}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary mb-3 transition-colors">
|
|
<i className="far fa-envelope text-primary w-4"></i> {email}
|
|
</a>
|
|
<a href={`tel:${phone.replace(/\s/g, '')}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary transition-colors">
|
|
<i className="fas fa-phone text-primary w-4"></i> {phone}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|