From e2a8390ae470454b87f113d4986392dd15886f27 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Fri, 31 Jul 2026 18:51:25 +0000
Subject: [PATCH] Refactor the features component in the dental app

Replit-Commit-Author: Agent
---
 .../dental-app/src/components/Features.tsx    | 101 +++++++++---------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/artifacts/dental-app/src/components/Features.tsx b/artifacts/dental-app/src/components/Features.tsx
index 84be7ea..e87af10 100644
--- a/artifacts/dental-app/src/components/Features.tsx
+++ b/artifacts/dental-app/src/components/Features.tsx
@@ -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>