Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to connect users looking for partners for activities such as sports, study groups, or part-time work. It features a minimalist design that focuses on user profiles and interaction options, enabling users to find and connect with potential partners easily.

## CORE FEATURES
1. **User Profiles**: Each user has a profile displaying their name, age, verification status, activity type, availability, and a brief description of what they are looking for.
2. **Activity Tabs**: Users can switch between different activity types (e.g., finding a partner for sports, study, or part-time work) with the default tab showing "找搭子" (Find Partner).
3. **Connection Options**: Users can initiate connections by clicking buttons, which will be disabled until the user has unlocked the feature by verifying their profile.
4. **Load More Profiles**: A feature that allows users to load additional profiles as they scroll down the page, enhancing user engagement.
5. **Navigation Bar**: Quick access to Home, Discover, Publish, Messages, and My Profile sections for easy navigation across the application.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout consists of a header with logo and navigation, a tabbed section for activities, a grid display of user profiles, and a sticky footer for navigation links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for managing global state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS. Configure Tailwind for styling.
2. **Create Components**: Build components for the Header, Tabs, User Profile Cards, and Navigation Bar.
3. **Design the Layout**: Use Tailwind CSS to create a responsive layout that adheres to the minimalist design principles.
4. **Implement State Management**: Set up a global state to handle user data and activity types.
5. **Profile Loading Logic**: Implement the logic for loading user profiles dynamically and the functionality for the "Load More" button.
6. **Connect UI to State**: Ensure that user interactions (e.g., initiating connections) are properly connected to the state management system.
7. **Test and Optimize**: Test the application for responsiveness, usability, and performance, making necessary optimizations.

## USER EXPERIENCE
Users will have an intuitive experience navigating through the application. They can easily switch between different activity types using the tabbed interface, view profiles in a clean and organized manner, and connect with others. The minimalist design ensures that users can focus on the content without distractions, while the responsive layout adapts to different screen sizes for optimal usability.