manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mockup): Viradhya name, Tia portrait avatar, real photos in memories grid

Browse source 
- 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>
This commit is contained in:
Manohar Gupta 2026-05-31 12:23:05 +05:30
parent 2608c7a146
commit 14db731ed4
1 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/marketing/PhoneMockup.tsx
View file

@ -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>