fix(mockup): clean PNG avatar, local memory photos

Avatar (baby card):
- Switch tia-portrait.jpg → tia-portrait.png (white/transparent bg, no dark edges)
- bg-white on container so PNG transparency shows correctly
- object-position: 65% top to shift face right and center it in the circle

Memories grid (all local, no external URLs):
- memory-bath.jpg: baby feet in towel (downloaded from Unsplash, stored locally)
- memory-milestone.jpg: baby in pool float with sunglasses (local)
- Captions updated: 'Tiny toes 🛁' and 'Summer fun 😎'

About page P.S.:
- tia-portrait.jpg → tia-portrait.png (clean white background)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/(marketing)/about/page.tsx

@@ -542,7 +542,7 @@ export default function AboutPage() {
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               className="tia-ps-photo"
-              src="/images/tia-portrait.jpg"
+              src="/images/tia-portrait.png"
               alt="Baby Tia"
             />
             <b>P.S.</b>{" "}

src/components/marketing/PhoneMockup.tsx

@@ -41,9 +41,9 @@ function HomeScreen() {
 
       {/* 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 rounded-full flex-shrink-0 overflow-hidden border-2 border-rose-100">
+        <div className="w-10 h-10 rounded-full flex-shrink-0 overflow-hidden border-2 border-rose-100 bg-white">
           {/* 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" />
+          <img src="/images/tia-portrait.png" alt="Viradhya" className="w-full h-full object-cover" style={{ objectPosition: "65% top" }} />
         </div>
         <div className="flex-1">
           <p className="font-semibold text-gray-900 text-[11px]">Viradhya</p>
@@ -220,18 +220,18 @@ function MemoriesScreen() {
       {/* Photo grid */}
       <div className="px-3 grid grid-cols-2 gap-2 flex-1 overflow-hidden">
         {[
-          { src: "/images/tia-portrait.jpg",
-            pos: "top center",
+          { src: "/images/tia-portrait.png",
+            pos: "65% top",
             caption: "First smile 😊" },
-          { src: "https://images.unsplash.com/photo-1555252333-9f8e92e65df9?w=300&h=300&fit=crop&auto=format&q=80",
+          { src: "/images/memory-bath.jpg",
             pos: "center",
-            caption: "Bath time 🛁" },
+            caption: "Tiny toes 🛁" },
           { 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! 🎉" },
+          { src: "/images/memory-milestone.jpg",
+            pos: "center top",
+            caption: "Summer fun 😎" },
         ].map(photo => (
           <div key={photo.caption} className="rounded-xl overflow-hidden aspect-square relative">
             {/* eslint-disable-next-line @next/next/no-img-element */}