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
+15 -16
View File
@@ -64,14 +64,13 @@ export function Features() {
</div>
</motion.div>
{/* Features 2 & 3 — two columns below, each with image */}
<div className="grid md:grid-cols-2 gap-8">
{/* 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"
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="h-52 overflow-hidden">
<div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
<img
src={patientSrc}
alt="Dental receptionist managing after-hours patient communication"
@@ -79,7 +78,7 @@ export function Features() {
data-testid="img-patient-connection"
/>
</div>
<div className="p-8 flex flex-col flex-1">
<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>
@@ -92,20 +91,13 @@ export function Features() {
</div>
</motion.div>
{/* 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"
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
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>
<div className="p-8 flex flex-col flex-1">
<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>
@@ -116,9 +108,16 @@ export function Features() {
All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours.
</p>
</div>
</motion.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>
);