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 = {
@@ -28,18 +31,19 @@ export function Features() {
         </div>
 
         <motion.div
-          className="grid md:grid-cols-3 gap-8"
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, margin: "-100px" }}
+          className="space-y-8"
         >
-          {/* Feature 1 */}
+          {/* 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="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>
@@ -49,14 +53,33 @@ export function Features() {
               <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>
           </motion.div>
 
-          {/* Feature 2 */}
+          {/* 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 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"
               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>
@@ -66,14 +89,23 @@ export function Features() {
                 <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"
+              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>
@@ -83,7 +115,9 @@ export function Features() {
                 <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>