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