Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as an interactive interface for THE-ARE, providing users with a dynamic experience that includes navigation, personal profiles, and interactive features. The application will enable users to track their club points, access personalized experiences, and engage with the brand through a sleek, minimalist design.

## CORE FEATURES
1. **Navigation Bar**: A central navigation element displaying the brand name "THE-ARE" with a menu icon, search icon, and shopping bag icon for easy access to different sections of the application.
   
2. **Club Notification Banner**: A prominent banner displaying welcome messages and user points, encouraging engagement with the club's offerings.

3. **User Profile Information**: A dedicated section showing the user's profile picture, name, and current club membership category, fostering a personalized experience.

4. **Points Progress Card**: A visual representation of accumulated points and the next level threshold, motivating users to engage with the application.

5. **Experience Section**: An interactive list showcasing available activities, including avatar creation and content related to club membership, with buttons linking to detailed experiences.

6. **Dynamic Content Interaction**: Allows users to navigate through buttons and tabs leading to various sections, ensuring a lively and engaging experience.

## 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 layout comprises a top navigation bar, followed by a notification banner, user profile section, points progress card, and an experiences section with interactive elements.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API (if needed for managing user state).

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and components.
3. **Create Layout Components**: Build the navigation bar, banner, profile, points card, and experiences section as reusable components.
4. **Implement State Management**: Set up Redux or Context API for managing user data and points.
5. **Design Components**: Style each component according to the design specifications using Tailwind CSS.
6. **Add Interactive Features**: Implement button functionalities to navigate between sections and update user data dynamically.
7. **Test Responsiveness**: Ensure the application functions well on various devices and screen sizes.

## USER EXPERIENCE
Users will be greeted with a clean, organized interface that allows easy navigation. The navigation bar provides quick access to different sections, while the club notification banner keeps users informed about their points. The profile section personalizes the experience, making users feel connected to THE-ARE. The interactive experience section encourages users to engage with available activities, enhancing their overall experience with the brand. 

By following these guidelines, the application will deliver a seamless and enjoyable user experience, aligning with the vision for THE-ARE's online presence.