File size: 6,179 Bytes
2586888 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | import { Heart, Brain, Target, Users, Linkedin, GraduationCap } from "lucide-react";
import { Card } from "@/components/ui/card";
const teamMembers = [
{ name: "Fatma Al-Zahraa Emad", linkedin: "#" },
{ name: "Gehad Mohamed", linkedin: "#" },
{ name: "Hebatullah El Gazoly", linkedin: "#" },
{ name: "Mohamed Assem", linkedin: "#" },
{ name: "Mohamed Sameh", linkedin: "#" },
];
export const AboutPage = () => {
return (
<div className="space-y-12 animate-fade-in">
{/* Hero Section */}
<div className="text-center">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary/10">
<Heart className="h-10 w-10 text-primary" />
</div>
<h1 className="mb-4 font-display text-4xl font-bold tracking-tight">
About <span className="gradient-text">Cardexa</span>
</h1>
<p className="mx-auto max-w-2xl text-lg text-muted-foreground">
An AI-powered echocardiography analysis platform for automated cardiac function assessment
</p>
</div>
{/* Project Overview */}
<div className="grid gap-6 md:grid-cols-3">
<Card className="glass-card p-6">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
<Brain className="h-6 w-6 text-primary" />
</div>
<h3 className="mb-2 font-display text-lg font-semibold">AI-Powered Analysis</h3>
<p className="text-sm text-muted-foreground">
Leveraging deep learning models to automatically analyze echocardiography videos and extract critical cardiac measurements.
</p>
</Card>
<Card className="glass-card p-6">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
<Target className="h-6 w-6 text-primary" />
</div>
<h3 className="mb-2 font-display text-lg font-semibold">Precise Measurements</h3>
<p className="text-sm text-muted-foreground">
Accurate identification of end-systolic and end-diastolic frames with volume calculations and ejection fraction estimation.
</p>
</Card>
<Card className="glass-card p-6">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
<Heart className="h-6 w-6 text-primary" />
</div>
<h3 className="mb-2 font-display text-lg font-semibold">Clinical Assessment</h3>
<p className="text-sm text-muted-foreground">
Automated classification of heart function status to assist medical professionals in diagnosis and treatment planning.
</p>
</Card>
</div>
{/* Supervisors Section */}
<div>
<div className="mb-6 flex items-center justify-center gap-3">
<GraduationCap className="h-6 w-6 text-primary" />
<h2 className="font-display text-2xl font-bold">Project Supervisors</h2>
</div>
<div className="grid gap-6 md:grid-cols-2">
<Card className="glass-card p-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
<GraduationCap className="h-6 w-6 text-primary" />
</div>
<div>
<p className="text-sm text-muted-foreground">Supervisor</p>
<h3 className="font-display text-xl font-semibold">Dr. Mohammed A. Hassan</h3>
</div>
</div>
</Card>
<Card className="glass-card p-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
<GraduationCap className="h-6 w-6 text-primary" />
</div>
<div>
<p className="text-sm text-muted-foreground">Teaching Assistant</p>
<h3 className="font-display text-xl font-semibold">Eng. Maha Salah</h3>
</div>
</div>
</Card>
</div>
</div>
{/* Team Section */}
<div>
<div className="mb-8 flex items-center justify-center gap-3">
<Users className="h-6 w-6 text-primary" />
<h2 className="font-display text-2xl font-bold">Our Team</h2>
</div>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
{teamMembers.map((member, index) => (
<a
key={index}
href={member.linkedin}
target="_blank"
rel="noopener noreferrer"
className="group"
>
<Card className="glass-card overflow-hidden transition-all duration-300 hover:ring-2 hover:ring-primary/30 hover:-translate-y-1">
<div className="aspect-square bg-gradient-to-br from-primary/20 to-accent flex items-center justify-center relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary/20" />
<div className="relative flex h-20 w-20 items-center justify-center rounded-full bg-background/80 text-2xl font-display font-bold text-primary">
{member.name.split(" ").map(n => n[0]).join("")}
</div>
<div className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-background/90 opacity-0 transition-opacity group-hover:opacity-100">
<Linkedin className="h-4 w-4 text-primary" />
</div>
</div>
<div className="p-4 text-center">
<p className="font-medium text-sm">{member.name}</p>
</div>
</Card>
</a>
))}
</div>
</div>
{/* Footer Note */}
<div className="text-center text-sm text-muted-foreground">
<p>© 2024 Cardexa - Cardiac Analysis Platform</p>
<p className="mt-1">Built with ❤️ for better healthcare</p>
</div>
</div>
);
};
|