You are an expert AI assistant tasked with building a single-page, fully functional SPA (Single Page Application) for a new SaaS product called 'Matematik Zeka'. This application aims to showcase and facilitate the solving of complex mathematical problems using advanced AI models.
**1. PROJECT OVERVIEW:**
Matematik Zeka is a platform designed to highlight the capabilities of cutting-edge AI models in solving frontier mathematics problems. It serves as a showcase for AI-driven mathematical breakthroughs, enabling researchers and enthusiasts to submit problems, view AI-generated solutions, compare model performance, and potentially facilitate the publication of verified solutions. The core value proposition is to democratize access to advanced AI problem-solving in mathematics and to create a verifiable repository of AI-assisted mathematical discoveries.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **Styling:** Tailwind CSS for rapid and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for client-side routing.
- **HTTP Client:** Axios for making API requests (mocked for MVP).
- **Build Tool:** Vite for fast development and optimized builds.
- **Deployment:** Optimized for static hosting (e.g., Vercel, Netlify).
**3. CORE FEATURES:**
- **Problem Showcase:** Displays a list of challenging math problems. Each problem card should show the problem title, a brief description, the AI model(s) that solved it (e.g., GPT-5.4 Pro, Opus 4.6, Gemini 3.1 Pro), and a status (e.g., 'Solved', 'In Progress'). Clicking a card opens a detailed view.
- **User Flow:** User lands on the homepage, sees a list of problems. User clicks on a problem card to view details. The detail view shows the problem statement, the AI model(s) used, the full solution transcript (or a summary), and links to original AI outputs.
- **AI Solution Viewer:** Within the detailed problem view, presents the step-by-step solution provided by the AI. This includes the conversational transcript with the AI and its generated write-up.
- **User Flow:** After clicking a problem card, the user scrolls down to the 'Solution' section. They can see interactive steps, potentially expandable sections for detailed explanations, and links to external resources (like the original transcript).
- **Model Comparison View:** Allows users to select multiple problems and see which AI models performed best on each, or select multiple models and see their performance across a set of problems.
- **User Flow:** User navigates to the 'Compare Models' section. Selects problems from a list (checkboxes or multi-select dropdown). Selects AI models to compare. A results table or chart displays performance metrics (e.g., accuracy, solution complexity, time to solve if available).
- **User Submission (MVP Scope: Basic Input):** A form for users to submit new problems. For MVP, this will primarily capture problem title, description, and optionally link to an external source or initial AI interaction. Advanced submission/verification is out of scope for MVP.
- **User Flow:** User clicks 'Submit Problem'. Fills out a form with Problem Title, Description, Category (optional). Clicks 'Submit'. A success message is displayed.
**4. UI/UX DESIGN:**
- **Layout:** Clean, modern, and spacious single-page layout. A sticky header for navigation (Home, Problems, Compare, Submit). A footer with basic info.
- **Color Palette:** Primary: Deep Blue (#1A202C), Secondary: Teal (#008080), Accent: Gold (#FFD700) for key actions/highlights, Neutral: Grays (#E2E8F0, #A0AEC0, #CBD5E0).
- **Typography:** Sans-serif fonts for readability. Headings: Poppins (Bold), Body Text: Inter (Regular).
- **Component Hierarchy:** A clear visual hierarchy using spacing, font weights, and colors. Emphasis on clear calls to action.
- **Responsive Design:** Mobile-first approach. Layout adapts fluidly to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (sm:, md:, lg:).
- **Interactions:** Subtle hover effects on buttons and cards. Smooth transitions for route changes and modal appearances.
**5. DATA MODEL (Mock Data Structure):**
- **`problems` Array:**
```json
[
{
"id": "prob_001",
"title": "Frontier Math Open Problem X",
"description": "Improving lower bounds on the values of a sequence...",
"status": "Solved",
"solvedBy": ["GPT-5.4 Pro", "Opus 4.6", "Gemini 3.1 Pro"],
"contributors": ["Kevin Barreto", "Liam Price", "Will Brian"],
"publicationStatus": "Pending Publication",
"solution": {
"modelUsed": "GPT-5.4 Pro",
"summary": "AI identified an inefficiency in the lower-bound construction...",
"transcriptUrl": "/mock-data/transcript_gpt5.4.txt",
"writeUpUrl": "/mock-data/writeup_gpt5.4.txt",
"detailedSteps": [
{ "step": 1, "explanation": "Analyzed existing lower-bound construction.", "aiModel": "GPT-5.4 Pro" },
{ "step": 2, "explanation": "Identified inefficiency and proposed alternative approach.", "aiModel": "GPT-5.4 Pro" },
// ... more steps
]
}
},
// ... more problem objects
]
```
- **`models` Array:**
```json
[
{ "name": "GPT-5.4 Pro", "version": "Pro", "performanceScore": 9.5 },
{ "name": "Opus", "version": "4.6 (max)", "performanceScore": 9.2 },
{ "name": "Gemini", "version": "3.1 Pro", "performanceScore": 9.0 }
// ... more models
]
```
- **State Management (Zustand Store):**
```javascript
// store.js
import { create } from 'zustand';
const useStore = create((set) => ({
problems: [],
models: [],
currentProblem: null,
loading: false,
error: null,
fetchProblems: async () => {
set({ loading: true, error: null });
try {
// Simulate API call
const response = await fetch('/mock-data/problems.json');
const data = await response.json();
set({ problems: data, loading: false });
} catch (err) {
set({ error: 'Failed to load problems', loading: false });
}
},
fetchProblemById: (id) => set(state => {
const problem = state.problems.find(p => p.id === id);
return { currentProblem: problem };
}),
// ... other actions like addProblem, compareModels
}));
export default useStore;
```
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing using `React Router DOM`.
- **`Header.jsx`:** Sticky header navigation component. Contains links to different sections. Props: `navItems` (array of objects).
- **`HomePage.jsx`:** Landing page. Features a welcome message and highlights recent or featured problems.
- **`ProblemListPage.jsx`:** Displays the list of problem cards.
- **`ProblemCard.jsx`:** Individual card for each problem. Displays title, status, solvers. Props: `problem` (object).
- **`ProblemDetailPage.jsx`:** Shows the full details of a selected problem.
- **`SolutionViewer.jsx`:** Component to display the AI's solution, transcript, and write-up. Props: `solution` (object).
- **`DetailedSteps.jsx`:** Renders the step-by-step breakdown of the solution. Props: `steps` (array).
- **`ComparePage.jsx`:** Interface for comparing model performance.
- **`ModelSelector.jsx`:** Component to select models for comparison.
- **`ProblemSelector.jsx`:** Component to select problems for comparison.
- **`ComparisonTable.jsx`:** Displays the comparison results.
- **`SubmitPage.jsx`:** Form for users to submit new problems.
- **`ProblemForm.jsx`:** The actual form fields (title, description, etc.). Props: `onSubmit` (function).
- **`Footer.jsx`:** Static footer component.
- **`LoadingSpinner.jsx`:** Reusable loading indicator.
- **`ErrorMessage.jsx`:** Reusable error display component.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Use `Framer Motion` or similar for smooth fade-in/out transitions between pages/sections.
- **Card Hover Effects:** Subtle lift and shadow effect on `ProblemCard` on hover.
- **Button Hover/Active States:** Visual feedback on all interactive elements using Tailwind's `hover:` and `active:` variants.
- **Loading States:** Display `LoadingSpinner` during data fetching. Disable buttons and show loading indicators for submission actions.
- **Expandable Sections:** Smooth expansion/collapse animation for `DetailedSteps` in the solution viewer.
- **Micro-interactions:** Subtle animations on status indicators (e.g., a pulsing effect for 'Solved').
**8. EDGE CASES:**
- **Empty States:** Display user-friendly messages and visuals when no problems are listed, no comparison data is available, or submission fails.
- **Error Handling:** Gracefully handle API errors (network issues, server errors). Display informative `ErrorMessage` components. Implement retry mechanisms where appropriate.
- **Validation:** Basic form validation for the 'Submit Problem' form (e.g., title and description are required).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Provide `aria-labels` for interactive elements and keyboard navigation support.
- **Data Loading:** Implement skeleton loaders or `LoadingSpinner` to provide immediate feedback while data is being fetched.
- **No Solution Available:** Clearly indicate if a problem is not yet solved or if AI solution data is missing.
**9. SAMPLE DATA:**
(Refer to the **Data Model** section for structured mock data examples for `problems` and `models` arrays. Additional mock data examples for `transcriptUrl` and `writeUpUrl` can be simple text files like `mock-data/transcript_gpt5.4.txt` containing placeholder text: "Placeholder transcript content for GPT-5.4 Pro's interaction...".)
**10. DEPLOYMENT NOTES:**
- **Build Configuration:** Use Vite's build command (`npm run build`). Ensure the output is configured for static file serving.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., API base URLs if integrating with a real backend later). `VITE_API_URL`.
- **Performance Optimizations:** Code splitting via React Router. Image optimization (if any). Lazy loading components. Minify assets during build.
- **Routing:** Configure the hosting provider (e.g., Vercel, Netlify) for client-side routing fallbacks to handle direct URL access to SPA routes.
- **CORS:** If a separate backend API is used, ensure proper CORS configuration.
- **Mock Data Serving:** For the MVP, mock data can be served directly from a `public/mock-data` folder or bundled with the application assets.
This comprehensive prompt provides the AI with a detailed blueprint to generate the Matematik Zeka SPA, covering all essential aspects from user experience to technical implementation and edge case handling.