Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web job board that allows users to view current job postings tailored for KLE CBALC. It provides functionalities such as filtering job listings by location, specialization, and job type, creating an efficient and user-friendly experience for job seekers.

## CORE FEATURES
1. **Job Listings**: Display a list of current job postings with essential details like title, company, location, and a brief description.
2. **Filters**: Users can filter job postings based on:
   - **Location**: Dynamic filter that allows adding locations as needed.
   - **Specialization**: Six predefined categories: 
     - General Admin or Sales
     - Business Analytics
     - Financial Services
     - Supply Chain and Logistic Management
     - Digital Marketing
     - Event Management
   - **Job Type**: Further refine job searches by full-time, part-time, freelance, etc.
3. **Search Functionality**: A search bar to quickly find specific job titles or companies.
4. **Responsive Design**: Ensure the application is fully responsive for both desktop and mobile users.

## 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 navigation links, a hero section highlighting the job board, a filter section above the job listings, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it within the project.
   - Install necessary dependencies such as shadcn/ui.

2. **Create the Layout Structure**:
   - Build the header component containing navigation links.
   - Develop the hero section to introduce the job board.
   - Implement the filter component with options for location, specialization, and job type.
   - Create the job listings component to display filtered job postings.

3. **Implement Filtering Logic**:
   - Set up state management to handle the filter criteria.
   - Write functions to filter job postings based on user selections.

4. **Design the UI Components**:
   - Style components using Tailwind CSS, ensuring to apply the specified design specifications.
   - Ensure all buttons and interactive elements have the defined border radius.

5. **Test Responsiveness**:
   - Use media queries and responsive design techniques to ensure the application looks great on all devices.

6. **Deploy the Application**:
   - Choose a hosting platform (e.g., Vercel, Netlify) to deploy the job board application.

## USER EXPERIENCE
Users will land on a clean, minimalist page where they can easily navigate through job postings. They can use the filters to customize their job search experience, making it easy to find relevant opportunities. The search functionality allows for quick access to specific jobs, enhancing the overall usability of the application. The responsive design ensures that users have a seamless experience whether they are on a desktop or mobile device.