Update Features component and add supporting assets

Replit-Commit-Author: Agent

artifacts/dental-app/src/components/Features.tsx

@@ -1,5 +1,8 @@
 import { motion } from "framer-motion";
 import { MessageSquare, Clock, Shield } from "lucide-react";
+import intuitiveSrc from "@assets/generated_images/intuitive-interface.jpg";
+import patientSrc from "@assets/generated_images/patient-connection.jpg";
+import dataSrc from "@assets/generated_images/data-control.jpg";
 
 export function Features() {
   const containerVariants = {
@@ -27,63 +30,94 @@ export function Features() {
           </p>
         </div>
 
-        <motion.div 
-          className="grid md:grid-cols-3 gap-8"
+        <motion.div
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, margin: "-100px" }}
+          className="space-y-8"
         >
-          {/* Feature 1 */}
-          <motion.div 
+          {/* Feature 1 — full-width with image on the right */}
+          <motion.div
             variants={itemVariants}
-            className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
+            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-1"
           >
-            <div className="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
-              <MessageSquare className="w-7 h-7 text-primary" />
+            <div className="flex-1 p-8 md:p-10 flex flex-col justify-center">
+              <div className="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
+                <MessageSquare className="w-7 h-7 text-primary" />
+              </div>
+              <h3 className="text-2xl font-bold text-primary mb-4">
+                Real Intuitive Interface
+              </h3>
+              <p className="text-muted-foreground leading-relaxed">
+                Chat with our AI agent to check eligibility and claims using your own words. No clicking around. Increase your work efficiency more than 10 times.
+              </p>
+            </div>
+            <div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
+              <img
+                src={intuitiveSrc}
+                alt="Dental professional using AI chat interface"
+                className="w-full h-full object-cover"
+                data-testid="img-intuitive-interface"
+              />
             </div>
-            <h3 className="text-2xl font-bold text-primary mb-4">
-              Real Intuitive Interface
-            </h3>
-            <p className="text-muted-foreground leading-relaxed">
-              Chat with our AI agent to check eligibility and claims using your own words. No clicking around. Increase your work efficiency more than 10 times.
-            </p>
           </motion.div>
 
-          {/* Feature 2 */}
-          <motion.div 
-            variants={itemVariants}
-            className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
-            data-testid="feature-card-2"
-          >
-            <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>
-          </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"
+                />
+              </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>
 
-          {/* Feature 3 */}
-          <motion.div 
-            variants={itemVariants}
-            className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
-            data-testid="feature-card-3"
-          >
-            <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>
-          </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"
+                />
+              </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>
         </motion.div>
       </div>
     </section>