Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application will be a professional blog platform that embodies a minimalist aesthetic, focusing on clean design and typography. The main purpose is to provide users with an engaging space to share insights, articles, and updates, while integrating seamlessly with the visual elements of the associated Instagram profile.

## CORE FEATURES
1. **Content Management System (CMS)**: Allow users to create, edit, and publish blog posts with rich text formatting and media integration.
2. **Dynamic Homepage**: A clean, organized layout showcasing featured posts, categories, and recent updates to enhance content discovery.
3. **Category Filters**: Enable users to filter posts by categories, improving navigation and user engagement.
4. **Search Functionality**: A search bar to help users quickly find specific content within the blog.
5. **Commenting System**: Allow readers to engage with posts through comments, fostering a community feel.
6. **Responsive Design**: Ensure the blog is fully functional on mobile devices, maintaining usability and aesthetics across screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on clean lines, ample white space, and a simple layout that emphasizes content readability. Use a minimal color palette that aligns with the Instagram aesthetic, incorporating soft pastels or a monochrome scheme.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: A grid or card layout for blog posts on the homepage, featuring a prominent header with the blog title and navigation links. Each post card should include an image, title, and excerpt.
- **Typography**: Use a modern sans-serif font for headings (e.g., "Inter" or "Montserrat") and a readable serif font for body text (e.g., "Georgia" or "Merriweather") to create a strong visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling to maintain a minimalist aesthetic.
- **UI Components**: Utilize shadcn/ui for ready-to-use components that match the design specifications.
- **State Management**: Use React Context or Zustand for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Install Dependencies**: Add shadcn/ui for UI components and any necessary state management libraries.
3. **Create Core Components**: Build components for the header, footer, blog post cards, and individual post view.
4. **Implement Routing**: Set up React Router to navigate between the homepage, post pages, and category filters.
5. **Develop the CMS**: Implement a simple interface for creating and managing blog posts, integrating rich text editing capabilities.
6. **Add Responsive Design**: Ensure all components are responsive and adapt to various screen sizes, optimizing for mobile devices.
7. **Implement Search and Filter**: Create a search functionality and category filters, enhancing user navigation.
8. **Test the Application**: Conduct usability testing to ensure a smooth user experience and address any issues that arise.

## USER EXPERIENCE
Users will interact with the blog through an intuitive interface that emphasizes content. Upon arriving at the homepage, they will be greeted with a clean layout displaying featured posts. Navigation will be straightforward, with easy access to categories and a search bar prominently displayed. Users can click on a post to read more, leave comments, and share their thoughts, creating an interactive, community-driven experience. The responsive design will ensure that users on mobile devices enjoy the same seamless experience as those on desktops.