You are an expert AI assistant tasked with generating a single-page React application (SPA) for a novel age verification and content access management system. The application should be built using React, Tailwind CSS, and employ efficient state management. The goal is to create a secure, user-friendly, and privacy-preserving platform that allows users to verify their age without unnecessarily exposing personal data, and enables content providers to manage age-restricted content access.
**PROJECT OVERVIEW:**
The primary objective of this application is to solve the growing problem of age verification on the internet. Current methods can be intrusive, insecure, or cumbersome. This platform aims to provide a seamless and privacy-focused solution. Users can verify their age once and use this verified status to access various age-gated services without repeating the verification process or sharing sensitive personal information repeatedly. Content providers benefit from a reliable way to enforce age restrictions, ensuring compliance and user safety. The core value proposition is secure, private, and convenient age verification for accessing digital content and services.
**TECH STACK:**
- **Frontend Framework:** React (using Create React App or Vite for project setup)
- **Styling:** Tailwind CSS for rapid UI development and consistent styling.
- **State Management:** React Context API for global state management (user authentication, verification status) and local component state where appropriate. For more complex state, consider Zustand or Redux Toolkit if the MVP scales.
- **Routing:** React Router DOM for navigation within the SPA.
- **Form Handling:** React Hook Form for efficient and performant form management, including validation.
- **Utilities:** Axios for API requests (if an API backend is simulated or planned).
- **Icons:** React Icons for a variety of icon options.
**CORE FEATURES:**
1. **User Authentication & Profile:**
* **User Flow:** Users can sign up using email and password. Upon successful signup, they are directed to the dashboard. They can log in using their credentials. The profile section allows users to view their basic information (username, email) and their current age verification status.
* **Details:** Secure password hashing (simulated on the frontend for this MVP, real implementation would need a backend).
2. **Age Verification Module:**
* **User Flow:** From the dashboard, users can initiate the age verification process. They will be presented with a simplified verification flow. For the MVP, this will simulate verification via a secure third-party service (e.g., a modal or a dedicated page). The user provides necessary information (e.g., date of birth, possibly a simulated ID upload or a secure link to a trusted provider). The system confirms verification status (Verified/Unverified).
* **Details:** The MVP will simulate the verification outcome. In a real-world scenario, this would involve API calls to a verification service. Emphasis on privacy: Minimal data is requested, and the status is stored securely.
3. **Content Access Dashboard:**
* **User Flow:** After verification, the user's dashboard updates to reflect their 'Verified' status. They can see a list of content/services they can now access. If unverified, they see prompts to complete verification.
* **Details:** This acts as a personalized portal showing available content based on the verified age status.
4. **Content Provider Interface (Simplified):**
* **User Flow:** (Accessible via a separate route or a toggle for demo purposes) Content providers can register or log in. They can define content items and set the minimum age requirement for access. They can view a list of their content and associated access permissions.
* **Details:** This section demonstrates how content providers would integrate with the system. For MVP, it's a static list where they can input content title and age threshold.
**UI/UX DESIGN:**
- **Layout:** A clean, modern, single-page application layout. A persistent navigation bar (header) for main sections (Home, Dashboard, Verify Age, Content Provider). A footer with essential links. The main content area will dynamically change based on the selected route.
- **Color Palette:** Primary: #1a202c (Dark background/text). Secondary: #4299e1 (Vibrant blue for accents, buttons, links). Accent: #68d391 (Green for success states, verification complete). Warning: #f56565 (Red for errors, unverified states). Neutral: #a0aec0 (Gray for secondary text, borders).
- **Typography:** Use a clean, readable sans-serif font like 'Inter' or 'Roboto'. Headings: Semi-bold, larger sizes. Body text: Regular weight, comfortable line height.
- **Responsive Design:** Mobile-first approach. Utilize Tailwind CSS's responsive modifiers (sm:, md:, lg:). Ensure all components are fully functional and look good on screen sizes ranging from 320px to 1920px.
- **Key Components:** Authentication Forms (Login/Signup), Dashboard Cards (Verification Status, Content List), Verification Modal/Page, Content Provider Form.
**COMPONENT BREAKDOWN:**
- **`App.js`:** Main application component, sets up routing and global layout.
- **`Header.js`:** Navigation bar, includes logo and navigation links. Manages active link styling.
* `props`: `navItems` (array of objects: { name, path })
- **`Footer.js`:** Static footer with copyright and links.
- **`HomePage.js`:** Landing page explaining the service.
- **`AuthPage.js`:** Container for Login and Signup forms.
* **`LoginForm.js`:** Email/Password input fields, login button. Handles local form state and submission.
* `props`: `onSubmit` (function)
* **`SignupForm.js`:** Email/Password input fields, signup button. Handles local form state and submission.
* `props`: `onSubmit` (function)
- **`DashboardPage.js`:** Main user dashboard after login.
* **`VerificationStatusCard.js`:** Displays current verification status (Verified/Unverified).
* `props`: `status` (string: 'verified' | 'unverified')
* **`AvailableContentList.js`:** Displays content items the user can access.
* `props`: `contentItems` (array of objects)
* **`VerifyAgeButton.js`:** Button to initiate the verification process.
* `props`: `onClick` (function)
- **`VerificationPage.js`:** (Or a Modal) Contains the age verification form/steps.
* **`DOBForm.js`:** Date of Birth input fields.
* `props`: `onSubmit` (function), `onClose` (function, if modal)
* **`SimulatedVerification.js`:** Component to simulate external verification process.
* `props`: `onSuccess` (function), `onFailure` (function)
- **`ContentProviderPage.js`:** Interface for content providers.
* **`AddContentForm.js`:** Form to add new content with age restrictions.
* `props`: `onSubmit` (function)
* **`ContentItemList.js`:** Displays list of content added by the provider.
* `props`: `contentItems` (array of objects)
- **`PrivateRoute.js`:** Wrapper component to protect routes requiring authentication.
* `props`: `component` (React Component), `isAuthenticated` (boolean)
**DATA MODEL:**
- **User State:** `{ id: string, email: string, isAuthenticated: boolean, verificationStatus: 'unverified' | 'verified' | 'pending', dob: string | null }`
- **Content Item (User View):** `{ id: string, title: string, requiredAge: number, accessible: boolean }`
- **Content Item (Provider View):** `{ id: string, title: string, requiredAge: number, createdAt: string }`
- **State Management:** Use `React.createContext` for `AuthContext` (managing user state) and `VerificationContext` (managing verification status).
**SAMPLE DATA:**
1. **User (Initial):** `{ id: null, email: '', isAuthenticated: false, verificationStatus: 'unverified', dob: null }`
2. **User (Verified):** `{ id: 'user-123', email: 'test@example.com', isAuthenticated: true, verificationStatus: 'verified', dob: '2000-05-15' }`
3. **Content Item (Accessible):** `{ id: 'content-abc', title: 'Advanced AI Course', requiredAge: 18, accessible: true }`
4. **Content Item (Inaccessible):** `{ id: 'content-def', title: 'Classic Films Archive', requiredAge: 16, accessible: false }`
5. **Content Item (Provider):** `{ id: 'cp-1', title: 'Beginner Guitar Lessons', requiredAge: 13, createdAt: '2023-10-27T10:00:00Z' }`
6. **Content Item (Provider):** `{ id: 'cp-2', title: 'Financial Planning Guide', requiredAge: 18, createdAt: '2023-10-26T14:30:00Z' }`
7. **Content Item (Provider):** `{ id: 'cp-3', title: 'Young Adult Fiction Library', requiredAge: 12, createdAt: '2023-10-25T09:15:00Z' }`
8. **Mock API Response (Verification Success):** `{ success: true, message: 'Age verified successfully.', status: 'verified' }`
9. **Mock API Response (Verification Failure):** `{ success: false, message: 'Verification failed. Please try again.', status: 'unverified' }`
10. **Navigation Items:** `[{ name: 'Home', path: '/' }, { name: 'Dashboard', path: '/dashboard' }, { name: 'Content Provider', path: '/provider' }]`
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Use `React Router DOM`'s features or a library like `Framer Motion` for smooth fade-in/fade-out transitions between pages.
- **Button Hovers:** Subtle background color change or slight scale-up effect on button hover using Tailwind CSS transitions (`hover:bg-blue-600`, `hover:scale-105`).
- **Loading States:** Display spinners or skeleton loaders when fetching data or performing verification. Use Tailwind's `animate-spin` for spinners.
- **Form Feedback:** Smooth appearance/disappearance of error messages below input fields.
- **Modal Animations:** Fade-in and slide-up effects for modals using CSS transitions.
**EDGE CASES:**
- **Empty States:** Display user-friendly messages when the dashboard or content lists are empty (e.g., "Verify your age to see available content.").
- **Error Handling:** Gracefully handle API errors (e.g., network issues, server errors) with clear messages to the user. Implement try-catch blocks for asynchronous operations.
- **Validation:** Client-side validation for all forms (email format, password strength, date of birth validity). Display clear, inline error messages using React Hook Form.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast.
- **Unauthenticated User:** Redirect unauthenticated users attempting to access protected routes (Dashboard, Provider Page) to the login page.
- **Verification Loop:** Prevent users from repeatedly triggering verification if it's pending or failed, provide clear instructions.
**DEPLOYMENT NOTES:**
- **Build Command:** Use `npm run build` (for CRA) or `npm run build` (for Vite). Ensure the build output is optimized for production.
- **Environment Variables:** Use `.env` files to manage environment-specific variables (e.g., API endpoints if a backend is introduced later). Prefix variables with `REACT_APP_` (CRA) or `VITE_` (Vite).
- **Performance Optimizations:** Code splitting (handled by CRA/Vite), lazy loading components, image optimization (if applicable), memoization (`React.memo`) for frequently re-rendering components.
- **HTTPS:** Ensure the application is served over HTTPS in production.
- **CORS:** Configure CORS on the backend if applicable to allow requests from the frontend domain.