Warm tactile pet-friendly redesign with app-preview bento sections

[syed-reza98]

Summary

Complete rewrite of templates/index.html — warm, tactile, pet-friendly design with CSS-only app mockups previewing the real PetFolio experience. No other files modified.

Design system

• Brand: #2979FF blue for CTAs, accents, and verified elements
• Care & Streaks: linear-gradient(145deg, #F5A623 → #E8956D → #C97B55) warm orange/peach
• Nutrition: linear-gradient(145deg, #5BA99A → #4A9087 → #357A6E) sage/mint
• Canvas: #FFFFFF white layered on #F7F9FF soft off-white panels
• Geometry: border-radius: 100px pill inputs everywhere, 18–24px on all cards

Five sections built

1 · Hero + Waitlist

• Large animated app icon (88px blue rounded square, pop-in keyframe)
• Pill-shaped inputs — firstName, email, petType, petCount — all with border-radius: 100px and identical sizing/padding
• Blue-focused pill submit button with hover lift + shadow
• Live #counter + #form-state / #success-state toggle preserved

2 · Care Dashboard & Streak System

• Orange gradient card with box-shadow: 0 16px 48px rgba(232,149,109,.32)
• SVG circular ring (r=34, circumference≈213.6, 3/3 complete = full white stroke)
• 7-day streak dot row with filled/empty/today states
• Three task tiles: Heartworm tablet ("Mark done"), Grooming session ("✓ Done"), Evening walk with Montu 2/3 ("Start walk")

3 · Smart Nutrition Vault

• Sage gradient card with decorative circle overlays
• 1292 kcal/day giant callout + Weight/Activity/Species stats row
• Sequential weight log: 0.90 → 1.00 → 1.10 → 1.20 → 2.00 kg across dated entries
• "📊 Log Weight" floating action button (white pill, sage text)

4 · Social Discovery & Playdate Match

• Orange gradient profile card — Ziggy 4yr, within 2 miles, tag pills (Reptile, Medium·45–60 min, Friendly, Playful, Good on lead)
• Swipe dock: ✕ pass · 👋 wave · 🐾 match (primary orange) · ⭐ super-like · ⚡ boost
• Filter chips: Distance, Energy level, Play style, Breed type

5 · Social Profile + Seller Dashboard

• Social panel: Blue gradient banner, avatar, 47 Posts / 231 Followers / 89 Following stats grid, "View Social Profile" pill button, 6-cell photo feed preview
• Seller panel: Shop header, 12 Products / 38 Orders / $284 Revenue stats, product rows (Organic Dog Treats Live · Interactive Fetch Toy Draft · Grooming Shampoo Set Sold out)

Preserved (unchanged)

• app.py, vercel.json, requirements.txt — untouched
• id="firstName", id="email", id="petType", id="petCount"
• id="form-state", id="success-state", id="counter", id="spot-number"
• handleJoin(), fetchWaitlistCount(), WAITLIST_API, referral link mechanics

Test plan

• All four pill inputs render with border-radius: 100px at all breakpoints
• Waitlist form posts to /api/join, success state shows #spot-number
• Counter animates from /api/stats on load
• shake() fires on empty/invalid fields with red border
• Orange care card, sage nutrition card, match card all render correctly
• Seller dashboard product rows and social feed grid display correctly
• No horizontal overflow at 375px, 600px, 960px, 1440px

https://claude.ai/code/session_01UP2KyuZxM8D7kEkq4akq3t

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
petfolio-waitlist	Ready	Preview, Comment	May 18, 2026 11:45pm