You are an AI assistant tasked with building a single-page React application using Tailwind CSS for a web platform called 'Rekabet Yok: Serbest Girişim Platformu'. This platform aims to empower freelancers and small businesses in Washington state following the recent ban on non-compete agreements. The core value proposition is to provide users with information, tools, and access to legal expertise to navigate their professional landscape safely and confidently.
PROJECT OVERVIEW:
**Purpose:** To create a user-friendly web application that serves as a resource and support system for individuals and businesses in Washington State impacted by the ban on non-compete agreements. It aims to demystify legal aspects, provide practical tools for creating agreements, and connect users with legal professionals.
**Problem Solved:** The elimination of non-compete agreements creates opportunities but also potential confusion regarding new legal boundaries and contractual obligations. This platform addresses the need for clear information, accessible legal tools, and professional guidance.
**Value Proposition:** 'Rekabet Yok' offers a centralized, reliable, and accessible solution for Washingtonians to understand their rights, manage contractual agreements effectively, and protect their professional interests in a newly liberated market.
TECH STACK:
- **Frontend Framework:** React (using Create React App or Vite for setup)
- **Styling:** Tailwind CSS for utility-first styling
- **State Management:** React Context API (for global state like user authentication, selected plan) and `useState`/`useReducer` for local component state.
- **Routing:** React Router DOM for navigation within the single-page application.
- **Form Handling:** `react-hook-form` for efficient and validated form management.
- **UI Components:** Potentially a small library like `headlessui` for accessible advanced components or build custom ones with Tailwind.
- **API Communication (Future):** `axios` or `fetch` API for potential backend integration.
- **Local Storage:** For persisting user preferences or temporary data.
CORE FEATURES:
1. **Information Hub:**
* **Description:** A section providing clear, concise explanations of the new Washington state law regarding non-compete agreements. This includes FAQs, summaries of legal implications, and rights of employees/employers.
* **User Flow:** User lands on the homepage, navigates to 'Learn' or 'Resources'. They can browse articles, search for specific topics, and view Q&A sections. The content should be easily digestible.
2. **Agreement Builder:**
* **Description:** A guided tool that allows users to generate basic agreement templates (e.g., freelance contracts, service agreements) relevant to the post-non-compete era. Users will answer a series of questions, and the tool will populate a template.
* **User Flow:** User navigates to 'Create Agreement'. They select the type of agreement. A multi-step form appears, asking for details like party names, scope of work, payment terms, confidentiality clauses (if applicable), duration, jurisdiction. Based on the inputs, a downloadable/printable document is generated.
3. **Legal Connect:**
* **Description:** A feature to find and connect with verified legal professionals (lawyers specializing in employment or contract law in Washington State). This includes profiles, service offerings, and a secure messaging/booking system.
* **User Flow:** User goes to 'Find a Lawyer'. They can search by specialty or location (pre-filtered for WA). They view lawyer profiles (experience, ratings, fees). They can send an inquiry message or book a consultation directly through the platform.
4. **My Dashboard (Post-Login/Future MVP):**
* **Description:** A personalized space where users can track their generated agreements, saved articles, consultation history, and receive important updates or alerts.
* **User Flow:** Logged-in user accesses their dashboard. They see sections for 'My Agreements', 'Messages', 'Saved Articles', 'Notifications'.
UI/UX DESIGN:
- **Layout:** Clean, modern, and intuitive single-page layout. A persistent navigation bar at the top (or side) for key sections: Home, Learn, Create Agreement, Find a Lawyer, Login/Dashboard. A clear footer with essential links.
- **Color Palette:** Primary: A calming, trustworthy blue (e.g., `#4A90E2`). Secondary: A neutral grey (e.g., `#F5F5F5` for backgrounds). Accent: A vibrant but professional color for calls-to-action (e.g., a teal or green like `#1ABC9C`). Text: Dark grey (`#333333`) for readability.
- **Typography:** Use a clean, sans-serif font family like 'Inter' or 'Poppins'. Headings should be distinct and legible. Body text should have comfortable line height and spacing for easy reading.
- **Responsive Design:** Mobile-first approach. Utilize Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`) to ensure optimal viewing and interaction on all screen sizes. Elements should stack vertically on smaller screens and arrange into columns or grids on larger screens. Ensure touch targets are adequately sized.
- **Visuals:** Use professional icons and subtle, relevant imagery. Avoid clutter.
COMPONENT BREAKDOWN:
- **`App.js`:** Main application component, sets up routing and global layout.
- **`Navigation.js`:** Header component with site title and navigation links. Manages active link state.
* Props: `navItems` (array of objects: { name: string, path: string, target?: string })
- **`Footer.js`:** Standard footer with copyright, links.
- **`HomePage.js`:** Landing page component. Introduces the platform, highlights key features with CTAs.
- **`InfoHub.js`:** Container for informational content. Might fetch articles or display static content.
* Children: `ArticleList.js`, `ArticleDetail.js`, `FAQSection.js`
- **`ArticleCard.js`:** Displays a summary of an article in the list.
* Props: `title`, `excerpt`, `imageUrl`, `slug`
- **`AgreementBuilder.js`:** Main component for the agreement generation tool. Manages form steps.
* State: `currentStep`, `formData`
* Children: `StepOneForm.js`, `StepTwoForm.js`, etc.
- **`ContractForm.js`:** Reusable form component for input fields.
* Props: `label`, `name`, `type`, `value`, `onChange`, `options?`, `validationError?`
- **`GeneratedAgreement.js`:** Displays the final generated agreement document.
* Props: `agreementData`
- **`LegalConnect.js`:** Displays lawyer listings and search functionality.
* Children: `LawyerList.js`, `LawyerProfile.js`, `SearchFilter.js`
- **`LawyerCard.js`:** Displays a summary of a lawyer's profile.
* Props: `name`, `specialty`, `rating`, `feeInfo`, `profileLink`
- **`Modal.js`:** Generic modal component for pop-ups (e.g., confirmation, detailed view).
* Props: `isOpen`, `onClose`, `children`
- **`Button.js`:** Reusable styled button component.
* Props: `onClick`, `children`, `variant` (primary, secondary), `disabled`
- **`Alert.js`:** Displays notifications or error messages.
* Props: `message`, `type` (info, warning, error)
DATA MODEL:
- **`navItems`:** `[{ name: 'Home', path: '/' }, { name: 'Learn', path: '/learn' }, ...]`
- **`articles`:** `[{ id: '1', title: 'Understanding the Ban', slug: 'understanding-the-ban', excerpt: '...', content: '...', imageUrl: '...' }, ...]`
- **`agreementFormFields`:** `[{ name: 'clientName', label: 'Client Name', type: 'text', required: true }, { name: 'serviceDescription', label: 'Service Description', type: 'textarea', required: true }, ...]`
- **`agreementData` (example):** `{ clientName: 'Jane Doe', serviceDescription: 'Web development services...', amount: 5000, currency: 'USD', paymentTerms: 'Net 30', effectiveDate: '2023-10-27', jurisdiction: 'Washington State' }`
- **`lawyers`:** `[{ id: 'ly1', name: 'Alex Johnson', specialty: 'Employment Law', rating: 4.8, reviewCount: 55, bio: 'Experienced WA employment lawyer...', consultationFee: '$200/hr', profileUrl: '/lawyers/alex-johnson' }, ...]`
- **Global State (Context):** `currentUser`, `authStatus`, `selectedPlan`.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between major sections using React Router and CSS.
- **Button Hovers:** Slight scale-up or background color change on button hover states.
- **Form Focus:** Highlight input fields with a border color change when they are in focus.
- **Loading States:** Use spinners (e.g., from `react-spinners` or custom SVG) for asynchronous operations like fetching data or generating documents. Display placeholder content (shimmer effect) for lists while loading.
- **Micro-interactions:** Visual feedback on successful form submission (e.g., a brief checkmark animation) or error indication.
- **Accordion/Toggle Animations:** Smooth expand/collapse animations for FAQ sections or details.
EDGE CASES:
- **Empty States:** Design for scenarios with no articles, no lawyers found, or no generated agreements yet. Display helpful messages and clear CTAs (e.g., 'Browse articles to learn more', 'Search for a lawyer').
- **Error Handling:** Implement robust error handling for API calls (if any) and form validations. Display user-friendly error messages using the `Alert` component. Prevent form submission if required fields are missing or invalid.
- **Validation:** Client-side validation for all forms using `react-hook-form`. Required fields, email formats, numeric inputs (for fees/amounts), date formats.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure sufficient color contrast. Manage focus order. Add ARIA attributes where necessary (e.g., for modals, custom form controls). Ensure keyboard navigability for all interactive elements.
- **Offline/Poor Connection:** Consider how the app behaves with intermittent connectivity. For MVP, relying on client-side validation and clearly indicating when data cannot be fetched is sufficient.
SAMPLE DATA:
1. **Article:**
```json
{
"id": "art101",
"title": "Key Changes in Washington Employment Law",
"slug": "key-changes-wa-employment-law",
"excerpt": "A deep dive into the specifics of the new law banning non-compete agreements and its impact.",
"content": "The recent legislation in Washington State has fundamentally altered the landscape... [more content]...",
"imageUrl": "/images/law-bg.jpg",
"category": "Legal Updates",
"publishedDate": "2023-01-15"
}
```
2. **FAQ Item:**
```json
{
"id": "faq001",
"question": "Can my employer still restrict me from working for a competitor?",
"answer": "Under the new Washington law, non-compete agreements are generally banned. This means employers can no longer prevent you from joining a competitor... [more details]..."
}
```
3. **Lawyer Profile:**
```json
{
"id": "ly001",
"name": "Maria Garcia",
"specialty": ["Contract Law", "Employment Law"],
"yearsExperience": 12,
"bio": "Dedicated to helping small businesses and freelancers navigate complex legal matters in Washington. Focuses on clear communication and practical solutions.",
"rating": 4.9,
"reviewCount": 72,
"consultationFee": "$250/hr",
"bookingUrl": "/book/maria-garcia",
"imageUrl": "/images/lawyer-maria.jpg"
}
```
4. **Agreement Template Fields (Example for Service Agreement):**
```json
[
{"name": "providerName", "label": "Service Provider Name", "type": "text", "required": true},
{"name": "clientName", "label": "Client Name", "type": "text", "required": true},
{"name": "serviceDescription", "label": "Detailed Description of Services", "type": "textarea", "required": true},
{"name": "startDate", "label": "Service Start Date", "type": "date", "required": true},
{"name": "endDate", "label": "Service End Date (Optional)", "type": "date", "required": false},
{"name": "paymentAmount", "label": "Total Compensation Amount", "type": "number", "required": true},
{"name": "paymentCurrency", "label": "Currency", "type": "select", "options": ["USD", "CAD"], "required": true, "defaultValue": "USD"},
{"name": "paymentTerms", "label": "Payment Schedule", "type": "text", "placeholder": "e.g., Net 30, 50% upfront", "required": true},
{"name": "confidentiality", "label": "Confidentiality Clause", "type": "textarea", "required": false, "defaultValue": "Both parties agree to keep proprietary information confidential."},
{"name": "governingLaw", "label": "Governing Law", "type": "select", "options": ["Washington State", "Oregon State"], "required": true, "defaultValue": "Washington State"}
]
```
5. **Generated Agreement Snippet:**
```json
{
"agreementType": "Service Agreement",
"providerName": "Tech Solutions LLC",
"clientName": "Global Corp",
"serviceDescription": "Provide cloud migration consulting services for Q4 2023.",
"startDate": "2023-10-01",
"endDate": null,
"paymentAmount": 15000,
"paymentCurrency": "USD",
"paymentTerms": "50% upon signing, 50% upon completion.",
"confidentiality": "Standard NDA terms apply.",
"governingLaw": "Washington State",
"effectiveDate": "2023-10-01",
"generatedAt": "2023-09-28T10:00:00Z"
}
```
DEPLOYMENT NOTES:
- **Build Command:** Use standard React build commands (e.g., `npm run build` or `yarn build`).
- **Environment Variables:** Configure environment variables for API endpoints (if applicable in later stages) using `.env` files (`REACT_APP_` prefix for CRA). For a simple MVP, most configuration might be hardcoded or managed within the build process.
- **Performance Optimizations:** Implement code splitting using React.lazy and Suspense for larger components. Optimize images. Use memoization (`React.memo`, `useMemo`, `useCallback`) where necessary to prevent unnecessary re-renders. Ensure efficient state management, especially in the Agreement Builder.
- **Hosting:** Deployable on static hosting platforms like Vercel, Netlify, or AWS S3/CloudFront.
- **SEO:** Implement basic SEO practices for the public-facing pages (Home, Learn) using Helmet or similar libraries for managing document head tags.