Gitead/managementwebsite01
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor the features component in the dental app

Browse Source 
Replit-Commit-Author: Agent
This commit is contained in:
Replit Agent
2026-07-31 18:51:25 +00:00
parent 4da7735432
commit e2a8390ae4
1 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
artifacts/dental-app/src/components/Features.tsx
View File

@@ -64,60 +64,59 @@ export function Features() {
</div>
</motion.div>
{/* Features 2 & 3 — two columns below, each with image */}
<div className="grid md:grid-cols-2 gap-8">
<motion.div
variants={itemVariants}
className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col"
data-testid="feature-card-2"
>
<div className="h-52 overflow-hidden">
<img
src={patientSrc}
alt="Dental receptionist managing after-hours patient communication"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
data-testid="img-patient-connection"
/>
{/* Feature 2 — full-width, image on the left, text on the right */}
<motion.div
variants={itemVariants}
className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col md:flex-row"
data-testid="feature-card-2"
>
<div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
<img
src={patientSrc}
alt="Dental receptionist managing after-hours patient communication"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
data-testid="img-patient-connection"
/>
</div>
<div className="flex-1 p-8 md:p-10 flex flex-col justify-center">
<div className="w-14 h-14 bg-accent/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors">
<Clock className="w-7 h-7 text-primary" />
</div>
<div className="p-8 flex flex-col flex-1">
<div className="w-14 h-14 bg-accent/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors">
<Clock className="w-7 h-7 text-primary" />
</div>
<h3 className="text-2xl font-bold text-primary mb-4">
24/7 Patient Connection
</h3>
<p className="text-muted-foreground leading-relaxed">
After-hours messaging and calling handled automatically by AI, in your way. Never miss any patient inquiry.
</p>
</div>
</motion.div>
<h3 className="text-2xl font-bold text-primary mb-4">
24/7 Patient Connection
</h3>
<p className="text-muted-foreground leading-relaxed">
After-hours messaging and calling handled automatically by AI, in your way. Never miss any patient inquiry.
</p>
</div>
</motion.div>
<motion.div
variants={itemVariants}
className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col"
data-testid="feature-card-3"
>
<div className="h-52 overflow-hidden">
<img
src={dataSrc}
alt="Secure local data storage and backup system"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
data-testid="img-data-control"
/>
{/* Feature 3 — full-width, text on the left, image on the right */}
<motion.div
variants={itemVariants}
className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col md:flex-row"
data-testid="feature-card-3"
>
<div className="flex-1 p-8 md:p-10 flex flex-col justify-center">
<div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors">
<Shield className="w-7 h-7 text-[#158915]" />
</div>
<div className="p-8 flex flex-col flex-1">
<div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors">
<Shield className="w-7 h-7 text-[#158915]" />
</div>
<h3 className="text-2xl font-bold text-primary mb-4">
Your Data, Your Control
</h3>
<p className="text-muted-foreground leading-relaxed">
All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours.
</p>
</div>
</motion.div>
</div>
<h3 className="text-2xl font-bold text-primary mb-4">
Your Data, Your Control
</h3>
<p className="text-muted-foreground leading-relaxed">
All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours.
</p>
</div>
<div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
<img
src={dataSrc}
alt="Secure local data storage and backup system"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
data-testid="img-data-control"
/>
</div>
</motion.div>
</motion.div>
</div>
</section>