From 64c16ce56980858560a67bd591d7a0030f93d846 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Fri, 31 Jul 2026 16:10:48 +0000
Subject: [PATCH] Add content to dental app hero component

Replit-Commit-Author: Agent
---
 artifacts/dental-app/src/components/Hero.tsx | 27 ++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/artifacts/dental-app/src/components/Hero.tsx b/artifacts/dental-app/src/components/Hero.tsx
index 2152b5a..340634c 100644
--- a/artifacts/dental-app/src/components/Hero.tsx
+++ b/artifacts/dental-app/src/components/Hero.tsx
@@ -103,6 +103,33 @@ export function Hero() {
                   <div className="w-3 h-3 bg-accent rounded-sm" />
                 </div>
               </div>
+
+              {/* Divider between conversations */}
+              <div className="border-t border-border/50 my-2" />
+
+              {/* Claims mockup */}
+              <div className="flex gap-4">
+                <div className="w-8 h-8 rounded-full bg-primary/10 flex-shrink-0" />
+                <div className="bg-white p-4 rounded-2xl rounded-tl-sm shadow-sm border border-border text-sm max-w-md">
+                  Claim John Smith for crown #30
+                </div>
+              </div>
+              <div className="flex gap-4 justify-end">
+                <div className="bg-white border border-border rounded-xl shadow-sm text-sm w-72 flex flex-col">
+                  <div className="p-5 flex-1 space-y-2">
+                    <div className="font-semibold text-primary text-base">John Smith</div>
+                    <div className="text-muted-foreground">CDT Code: D2740 – Crown, porcelain/ceramic</div>
+                    <div className="text-muted-foreground">Tooth Number: #30</div>
+                  </div>
+                  <div className="border-t border-border px-5 py-4 flex gap-3">
+                    <button data-testid="button-claim-confirm" className="flex-1 bg-primary text-accent text-xs font-semibold py-2 rounded-full hover:opacity-90 transition-opacity">Confirm</button>
+                    <button data-testid="button-claim-cancel" className="flex-1 border border-border text-muted-foreground text-xs font-semibold py-2 rounded-full hover:bg-secondary transition-colors">Cancel</button>
+                  </div>
+                </div>
+                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                  <div className="w-3 h-3 bg-accent rounded-sm" />
+                </div>
+              </div>
             </div>
           </div>
         </motion.div>