From 14db731ed4c58273a1ca5d9604a0d147b82bae11 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 12:23:05 +0530
Subject: [PATCH] fix(mockup): Viradhya name, Tia portrait avatar, real photos
 in memories grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Baby name: Arjun → Viradhya (greeting + card name + img alt)
- Baby card avatar: 👶 emoji → tia-portrait.jpg (circle crop, object-top)
- Memories grid: emoji color blocks → real photos
    Slot 1: tia-portrait.jpg (First smile 😊)
    Slot 2: Unsplash baby photo (Bath time 🛁)
    Slot 3: family-illustration.jpg (With family 🌸)
    Slot 4: Unsplash baby photo (8 months! 🎉)
  Each card has dark gradient overlay so white caption is readable

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/marketing/PhoneMockup.tsx | 41 +++++++++++++++++-------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/marketing/PhoneMockup.tsx b/src/components/marketing/PhoneMockup.tsx
index fdea8ee..a3c507e 100644
--- a/src/components/marketing/PhoneMockup.tsx
+++ b/src/components/marketing/PhoneMockup.tsx
@@ -36,17 +36,18 @@ function HomeScreen() {
       {/* Greeting */}
       <div className="px-3 pb-2">
         <p className="font-bold text-[13px] text-gray-900">Good morning 👋</p>
-        <p className="text-gray-500 text-[9px]">How is Arjun doing today?</p>
+        <p className="text-gray-500 text-[9px]">How is Viradhya doing today?</p>
       </div>
 
       {/* Baby card */}
       <div className="mx-3 mb-2 bg-white rounded-2xl shadow-sm px-3 py-2 flex items-center gap-3">
-        <div className="w-10 h-10 bg-rose-100 rounded-full flex items-center justify-center text-lg flex-shrink-0">
-          👶
+        <div className="w-10 h-10 rounded-full flex-shrink-0 overflow-hidden border-2 border-rose-100">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src="/images/tia-portrait.jpg" alt="Viradhya" className="w-full h-full object-cover object-top" />
         </div>
         <div className="flex-1">
-          <p className="font-semibold text-gray-900 text-[11px]">Arjun</p>
-          <p className="text-gray-500 text-[9px]">4 months</p>
+          <p className="font-semibold text-gray-900 text-[11px]">Viradhya</p>
+          <p className="text-gray-500 text-[9px]">8 months</p>
         </div>
         <span className="text-gray-400 text-[11px]">→</span>
       </div>
@@ -219,14 +220,30 @@ function MemoriesScreen() {
       {/* Photo grid */}
       <div className="px-3 grid grid-cols-2 gap-2 flex-1 overflow-hidden">
         {[
-          { bg: "bg-rose-200",   emoji: "😊", caption: "First smile"  },
-          { bg: "bg-amber-200",  emoji: "🛁", caption: "Bath time"    },
-          { bg: "bg-violet-200", emoji: "🏆", caption: "4 months!"    },
-          { bg: "bg-green-200",  emoji: "👨‍👩‍👧", caption: "With Nani"   },
+          { src: "/images/tia-portrait.jpg",
+            pos: "top center",
+            caption: "First smile 😊" },
+          { src: "https://images.unsplash.com/photo-1555252333-9f8e92e65df9?w=300&h=300&fit=crop&auto=format&q=80",
+            pos: "center",
+            caption: "Bath time 🛁" },
+          { src: "/images/family-illustration.jpg",
+            pos: "top center",
+            caption: "With family 🌸" },
+          { src: "https://images.unsplash.com/photo-1519689680058-324335c77eba?w=300&h=300&fit=crop&auto=format&q=80",
+            pos: "center",
+            caption: "8 months! 🎉" },
         ].map(photo => (
-          <div key={photo.caption} className={`${photo.bg} rounded-xl flex flex-col items-center justify-center aspect-square gap-1`}>
-            <span className="text-2xl">{photo.emoji}</span>
-            <span className="text-[8px] text-gray-600 font-medium">{photo.caption}</span>
+          <div key={photo.caption} className="rounded-xl overflow-hidden aspect-square relative">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={photo.src}
+              alt={photo.caption}
+              className="w-full h-full object-cover"
+              style={{ objectPosition: photo.pos }}
+            />
+            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent px-1.5 pb-1.5 pt-4">
+              <span className="text-[8px] text-white font-medium drop-shadow">{photo.caption}</span>
+            </div>
           </div>
         ))}
       </div>