Build a mobile-first React web app called "PalPilot", an intelligent assistant for maintaining and deepening friendships. The app should look and feel like a native iOS/Android app, constrained to a mobile width (max-w-md mx-auto) with a fixed bottom navigation bar.
Please use React, Tailwind CSS for styling, Lucide React for icons, and Framer Motion for smooth transitions. Do not include a backend or authentication; use local React state and rich dummy data to make the demo fully interactive.
Global Layout & Styling:
- Use a clean, modern aesthetic with a light gray background (bg-gray-50) and white cards. Use Indigo/Purple as the primary accent color.
- Include a fixed bottom navigation bar with 4 tabs: Nudges (Home icon), Friends (Users icon), Activities (Calendar icon), and Profile (User icon).
- Add padding to the bottom of the main content area so it isn't hidden by the navigation bar.
Dummy Data Requirements:
Create a robust set of dummy data:
- Friends: Array of objects containing id, name, avatar URL (use pravatar or unsplash), job, interests (array of strings), lifeEvents (array of strings), lastContactDate, and relationshipStrength (0-100).
- Nudges: Array of objects linking to a friendId, with urgency ('high', 'medium', 'low'), reason (e.g., "Sarah's birthday is in 10 days"), suggestedMessage, and actionType ('message', 'voice_note', 'meetup').
- Activities: Array of objects with title, description, date, location, imageUrl, and suggestedFriends (array of friendIds).
Tab 1: Home (Nudges) - Default View
- A header saying "Good Morning!" and a subtext showing how many connections to nurture today.
- A vertical list of Nudge cards. Each card should have:
- A subtle left-border color indicating urgency (Red=High, Yellow=Medium, Green=Low).
- The friend's avatar, name, and the reason for the nudge.
- A highlighted box (e.g., light indigo background) showing an "AI Suggestion" message. Include an edit icon that lets the user edit the message inline.
- Two buttons at the bottom: A prominent "Send in 1 tap" button (with an icon matching the actionType) and a "Dismiss" (X) button.
- Animate the cards so they slide out when dismissed. Show a nice "All caught up!" empty state when the list is empty.
Tab 2: Friends
- A header with a search bar to filter friends.
- List View: A list of friends showing their avatar, name, job, and a small colored dot indicating relationship strength.
- Detail View: When a friend is clicked, transition to a detailed profile view. Show a large avatar, name, job, and stats (Relationship Strength % and Last Contact Date). Below that, show their Interests as pill-shaped tags, and a list of their recent Life Events. Include a "Back" button to return to the list.
Tab 3: Activities
- A feed of curated local events (Activities).