You are an expert full-stack developer and AI startup consultant. Your task is to generate a comprehensive, production-ready single-page application (SPA) code for 'AI Uyum', a SaaS platform designed to help professionals navigate the labor market impacts of AI. The application should be built using React, Tailwind CSS, and leverage local storage for state management for the MVP. The prompt should be detailed enough to allow an AI coding assistant to directly generate the entire codebase.
**1. PROJECT OVERVIEW**
**Project Name:** AI Uyum: İş Gücü Dönüşüm Platformu
**Problem Solved:** The rapid advancement of Artificial Intelligence (AI) poses a significant risk of job displacement and transformation across various sectors. Many professionals, particularly those in occupations with high automation potential, lack awareness of their risk level and clear pathways to adapt, reskill, or transition to new roles. Companies also struggle to identify employees at risk and provide targeted support or identify emerging roles.
**Value Proposition:** AI Uyum empowers professionals and organizations to proactively manage the impact of AI on the labor market. For individuals, it provides personalized risk assessments, tailored skill development roadmaps, and access to relevant job opportunities. For businesses, it offers insights into their workforce's AI vulnerability and facilitates strategic talent management.
**MVP Goal:** To create a functional single-page application that allows users to assess their AI displacement risk, receive personalized reskilling suggestions, and discover relevant job openings.
**2. TECH STACK**
* **Frontend Framework:** React (using functional components and Hooks)
* **Styling:** Tailwind CSS (for utility-first CSS)
* **State Management:** React Context API for global state (e.g., user authentication, if implemented later) and `useState`/`useReducer` for local component state. For MVP, prioritize local state and potentially simple data structures stored in `localStorage` for persistence across sessions.
* **Routing:** React Router DOM (for navigation within the SPA)
* **Build Tool:** Vite (for fast development and optimized builds)
* **Deployment:** Target: Netlify/Vercel (static site deployment)
**3. CORE FEATURES (MVP)**
* **User Profile & Risk Assessment:**
* **User Flow:** User lands on the homepage. Clicks 'Assess My Risk'. Navigates to the assessment page. Fills out a form including Occupation (dropdown/autocomplete), Education Level (dropdown), Years of Experience (slider/input), Current Salary Range (dropdown). Optionally, they can input specific skills.
* **Backend Logic (Simulated in Frontend):** A predefined algorithm (or mock data lookup) calculates an 'AI Displacement Risk Score' (e.g., 1-100) based on the input. This score is influenced by factors like the occupation's susceptibility to AI automation (informed by BLS data or similar), education level, and experience.
* **Display:** The score is presented clearly with a qualitative description (e.g., Low Risk, Medium Risk, High Risk).
* **Personalized Skill Development Roadmap:**
* **User Flow:** After assessment, the user sees their risk score. Below this, a section titled 'Your Development Roadmap' appears. Based on the risk score and occupation, the system suggests 3-5 key skills to develop or areas to focus on.
* **Content:** Each suggested skill/area includes a brief description and links to external resources (e.g., Coursera, edX, LinkedIn Learning, specific relevant blogs/tutorials). For MVP, these are static links.
* **Display:** Presented as a list or cards, each featuring the skill name, a short rationale, and a 'Learn More' button linking externally.
* **AI-Resilient Job Board:**
* **User Flow:** Users can navigate to the 'Job Board' section. They can filter jobs by keywords, location (optional for MVP), and 'AI Resilience Level' (e.g., High Growth, AI-Augmented, AI-Resistant).
* **Content:** Displays a list of job openings sourced from mock data. Each listing shows Job Title, Company, Location (mock), and a brief description.
* **Filtering:** Implements client-side filtering based on the mock job data.
* **Local Data Persistence:**
* **Functionality:** The user's assessment results (risk score, inputs) should be saved to `localStorage`. When the user returns, their previous assessment should be pre-filled or displayed.
**4. UI/UX DESIGN**
* **Layout:** Single-page application. A clean, modern, and intuitive interface. Fixed header with navigation links (Home/Assess, Job Board, About). Main content area adapts to the current view. Footer with essential links.
* **Color Palette:** Primary: Deep Blue (#1e3a8a), Secondary: Teal (#14b8a6), Accent: Yellow/Gold (#facc15) for calls to action, Neutrals: Grays (e.g., #f3f4f6 for background, #6b7280 for text).
* **Typography:** Use a sans-serif font family like Inter or Poppins. Clear hierarchy with distinct sizes for headings (H1, H2, H3), body text, and captions.
* **Component Structure:** Modular components (explained below). Consistent spacing and padding using Tailwind's spacing scale.
* **Responsive Design:** Mobile-first approach. Use Tailwind's responsive prefixes (sm:, md:, lg:) to ensure usability across devices. Header collapses into a hamburger menu on smaller screens. Content sections stack vertically on mobile.
* **Visuals:** Subtle use of abstract AI-themed graphics or illustrations, perhaps on the homepage or loading states.
**5. COMPONENT BREAKDOWN**
* **`App.jsx`:** Main application component. Sets up routing using `react-router-dom`. Wraps the entire application.
* **`Header.jsx`:** Contains the site logo/title and navigation links. Handles mobile menu toggle.
* Props: `navItems` (array of objects { name: string, path: string }).
* **`Footer.jsx`:** Contains copyright information and secondary links.
* **`HomePage.jsx`:** Landing page. Includes a clear headline, brief explanation of the service, a prominent Call to Action (CTA) button to start the assessment.
* Contains: `HeroSection.jsx`, `FeatureHighlight.jsx`.
* **`HeroSection.jsx`:** Visual introduction on the homepage.
* Props: `title`, `subtitle`, `ctaText`, `ctaLink`.
* **`AssessmentPage.jsx`:** Main page for user input and displaying results.
* Contains child components like `AssessmentForm.jsx`, `RiskResult.jsx`, `SkillRoadmap.jsx`.
* State: Manages form inputs, calculated risk score, and suggested skills.
* **`AssessmentForm.jsx`:** Form component for collecting user data.
* State: Manages individual form field states.
* Props: `onSubmit` (function to handle form submission).
* Uses: `TextInput.jsx`, `SelectInput.jsx`, `SliderInput.jsx`.
* **`RiskResult.jsx`:** Displays the calculated AI Displacement Risk Score and its qualitative meaning.
* Props: `score` (number), `riskLevel` (string).
* **`SkillRoadmap.jsx`:** Displays suggested skills and external learning resources.
* Props: `skills` (array of objects { name: string, description: string, url: string }).
* **`JobBoardPage.jsx`:** Displays the list of job openings with filtering capabilities.
* State: Manages the list of jobs and active filters.
* Contains: `JobList.jsx`, `JobFilter.jsx`.
* **`JobList.jsx`:** Renders the list of job items.
* Props: `jobs` (array).
* **`JobItem.jsx`:** Represents a single job listing.
* Props: `job` (object { title, company, location, description, aiResilience }).
* **`JobFilter.jsx`:** Component for filtering job listings.
* Props: `onFilterChange` (function).
* **`TextInput.jsx`:** Reusable text input component.
* Props: `label`, `value`, `onChange`, `placeholder`, `id`.
* **`SelectInput.jsx`:** Reusable select dropdown component.
* Props: `label`, `value`, `onChange`, `options`, `id`.
* **`SliderInput.jsx`:** Reusable slider input component (e.g., for years of experience).
* Props: `label`, `value`, `onChange`, `min`, `max`.
* **`LoadingSpinner.jsx`:** Displays a loading indicator.
* **`EmptyState.jsx`:** Displays a message for when there are no results or data.
**6. DATA MODEL & STATE MANAGEMENT**
* **User Assessment Data (to be stored in `localStorage`):**
```json
{
"assessment": {
"occupation": "Software Engineer",
"education": "Master's Degree",
"experienceYears": 8,
"salaryRange": "100,000 - 150,000 USD",
"riskScore": 75,
"riskLevel": "Medium High",
"suggestedSkills": [
{
"name": "AI Ethics & Governance",
"description": "Understanding the ethical implications and regulatory frameworks of AI implementation.",
"url": "https://example.com/ai-ethics-course"
},
{
"name": "Advanced Prompt Engineering",
"description": "Mastering the art of crafting effective prompts for complex AI models.",
"url": "https://example.com/prompt-engineering-guide"
}
]
}
}
```
* **Mock Job Data (Array of objects):**
```json
[
{
"id": "job1",
"title": "AI Ethics Consultant",
"company": "Tech Solutions Inc.",
"location": "Remote",
"description": "Advise companies on responsible AI deployment and compliance.",
"aiResilience": "High Growth"
},
{
"id": "job2",
"title": "Machine Learning Engineer",
"company": "Innovate AI",
"location": "San Francisco, CA",
"description": "Develop and deploy machine learning models.",
"aiResilience": "AI-Augmented"
},
// ... more job objects
]
```
* **State Management Strategy:**
* Local component state (`useState`, `useReducer`) for form inputs and UI elements.
* `localStorage` for persisting the user's assessment results. Use a custom hook (`useLocalStorage`) to abstract reading and writing.
* React Context API can be introduced later for user authentication or shared application settings.
**7. ANIMATIONS & INTERACTIONS**
* **Page Transitions:** Subtle fade-in/fade-out transitions between sections or pages using `Framer Motion` or CSS transitions.
* **Button Hover Effects:** Slight scale-up or background color change on interactive elements like buttons.
* **Form Input Focus:** Highlight border color when an input field is focused.
* **Loading States:** Display `LoadingSpinner.jsx` when fetching or processing data (even if simulated). Show a brief animation (e.g., pulsing dots) during the risk calculation phase.
* **Micro-interactions:** Smooth expand/collapse for sections, subtle animations on skill suggestions.
* **Initial Load:** A brief, elegant loading animation for the entire SPA before the main content renders.
**8. EDGE CASES & ACCESSIBILITY (a11y)**
* **Empty States:** Design clear `EmptyState.jsx` components for the job board when no jobs match the filters or when `localStorage` is empty.
* **Error Handling:** Implement basic error handling for `localStorage` operations (e.g., if storage is full or disabled). Display user-friendly error messages.
* **Input Validation:** Basic front-end validation for required fields in the assessment form (e.g., ensuring all necessary fields are filled before submission).
* **Accessibility:** Use semantic HTML elements (`<nav>`, `<main>`, `<button>`). Ensure sufficient color contrast. Add `aria-labels` where necessary. Ensure keyboard navigability for all interactive elements.
* **Data Loading Simulation:** If simulating API calls, ensure loading indicators are used correctly.
**9. SAMPLE DATA**
* **Occupations (for `SelectInput`):** `['Software Engineer', 'Data Analyst', 'Marketing Manager', 'Graphic Designer', 'Accountant', 'Customer Service Representative', 'HR Specialist', 'Project Manager']`
* **Education Levels (for `SelectInput`):** `['High School Diploma', 'Associate Degree', 'Bachelor Degree', 'Master Degree', 'PhD']`
* **Salary Ranges (for `SelectInput`):** `['< 50,000 USD', '50,000 - 75,000 USD', '75,000 - 100,000 USD', '100,000 - 150,000 USD', '> 150,000 USD']`
* **Mock Jobs:** (As defined in the Data Model section, include at least 10 diverse entries).
* **Mock Skills:** (As defined in the Data Model section, include examples for different risk levels and occupations).
**10. DEPLOYMENT NOTES**
* **Build Command:** Use `npm run build` or `yarn build` (configured by Vite).
* **Environment Variables:** For MVP, no specific environment variables are strictly needed as data is mocked and local storage is used. For future scaling (API integration), `REACT_APP_API_URL` or similar would be required.
* **Performance Optimizations:** Vite provides excellent defaults. Ensure lazy loading of components if the app grows. Optimize images. Use `React.memo` where appropriate to prevent unnecessary re-renders.
* **Routing Configuration:** Configure `react-router-dom` for a SPA, ensuring all routes fall back to `index.html` for server-side handling (e.g., Netlify/Vercel configuration).
* **`localStorage` Strategy:** Implement a robust `useLocalStorage` hook that handles potential errors and provides a consistent interface for interacting with local storage.
This prompt provides a detailed blueprint for building the AI Uyum MVP. The AI coding assistant should be able to use this to generate the necessary React components, styling, state logic, and data structures to create a functional application.