🎨 Prompt for Front-End UI Creation in Lovable (Community Platform MVP)You are an expert front-end developer working with React, TypeScript, Vite, TailwindCSS, and ShadCN UI components. You will help design and structure the front-end of a modern, customizable community management platform.This MVP is designed for creators, organizations, and businesses to build and manage online communities with strong interaction, content organization, and early monetization.Your goal is to design an elegant, responsive, and scalable UI that covers the full feature set below. Use a consistent design system, ensure accessibility (WCAG AA), mobile-first layout, and modern UX patterns.---### 🧩 Technologies- React + TypeScript- Vite for fast development- TailwindCSS for utility-first styling- ShadCN UI for accessible and composable UI components- Framer Motion for smooth animations- Zustand or Redux for state management- React Router for routing- Heroicons / Lucide Icons- Day.js or Date-fns for date handling- React Query (optional) for data fetching abstraction---### ✅ MVP UI Features & Components---### 1. 👥 User Authentication and Management- Login page with email/password (secure, modern UI)- Signup page with avatar upload, name, bio, and social links- Password recovery flow (email input, success state)- User Profile Page (edit avatar, bio, links)- Admin Panel: List of members with roles (CRUD UI)📌 Deliver user identity and access control base---### 2. 🏛️ Community Creation & Structure- Community Creation Wizard (name, description, image)- Visual Theme Editor (color selector, logo upload)- Group / Sub-community creator UI- Access permission selector (public / private / hidden)- Sidebar with nested group navigation📌 Enable structured, personalized communities---### 3. 📰 Content Feed & Engagement- Main Feed with posts (text, images, links)- Post Composer (Markdown optional)- Comments section under each post- Reactions (like, upvote, emoji picker)- Mentions autocomplete (@user)- Realtime notifications component📌 Drive community interaction and sharing---### 4. 📆 Events & Live Meetups- Event creation form (title, date/time, description, link)- RSVP toggle (Yes/No/Might Go)- Sync with Google Calendar button- Email reminder settings (checkbox)- Upcoming events list with calendar layout📌 Facilitate real-time interaction and community culture---### 5. 📚 Learning / Resource Hub- File uploader (PDF, video, slides)- Resource viewer (PDF preview, video embed)- Create "Collections" of content (tagging interface)- Access control by group/tag (UI toggle)- View metrics per item (basic analytics)📌 Deliver knowledge and structured content---### 6. ✉️ Direct Messaging (Basic)- Inbox screen with conversation list- Chat window (threaded messages, scrollable)- New message notification badge📌 Enable private networking---### 7. 📊 Basic Admin Analytics- Dashboard for community owner: - Active members count - Most engaged posts - Participation per group - Activity by time (simple graph/chart)📌 Support insight-driven community management---### 8. 💳 Early Monetization (Stripe or MercadoPago)- Admin: Create subscription plans (Free, Premium, Pro)- Plan management page (price, description, access)- User: Subscribe flow (Stripe or MercadoPago embed)- Locked content badge for non-subscribers📌 Test revenue potential and retention via paywall---### 📱 Design Guidelines- Mobile-first responsive design (Tailwind breakpoints)- Clean, spacious layout (use grid/flex)- Large rounded corners, soft shadows- Motion for transitions and feedback (Framer Motion)- Accessible components (keyboard nav, contrast)- Easy-to-scan UI for content-heavy screens---### 🧠 Output FormatReturn a component-by-component breakdown of the UI for each feature. Use proper folder structures and file names. Explain interactions when necessary (e.g. state transitions, hover/focus behavior). Output all UI using React + Tailwind + ShadCN components.