You are an expert full-stack developer and startup consultant tasked with building a Single Page Application (SPA) for a new SaaS product called 'Marka Çağı: Dijital Kimlik ve Değer Yaratma' (Brand Age: Digital Identity and Value Creation). The core problem this application solves is helping brands, particularly those facing global competition and currency fluctuations (inspired by the Swiss watch industry's 'quartz crisis'), establish and maintain a strong, resilient digital identity and value proposition. The application should be a one-page SPA built with React, leveraging Tailwind CSS for styling.
**1. PROJECT OVERVIEW:**
'Marka Çağı' aims to empower brands to navigate the complexities of the modern global market by providing tools to build a robust digital identity and effectively communicate their unique value proposition. Inspired by historical examples like the Swiss watch industry's struggles against technological disruption and currency shifts, this platform focuses on proactive digital strategy. It helps brands define their core identity, understand their competitive landscape, and craft compelling communication assets. The primary value proposition is to provide accessible, actionable tools for building brand resilience and maximizing value in an increasingly digital and competitive world.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and hooks)
- **Styling:** Tailwind CSS (for rapid, utility-first styling)
- **State Management:** Zustand (lightweight and performant for global state)
- **Routing:** React Router DOM (for potential future expansion, though MVP is single page)
- **HTTP Client:** Axios (for any potential API interactions, though MVP focuses on client-side logic and mock data)
- **Form Handling:** React Hook Form (for efficient form management)
- **UI Components:** Headless UI (for accessible, unstyled components that integrate well with Tailwind)
- **Icons:** React Icons
**3. CORE FEATURES:**
As a single-page application, all core features will be accessible through different sections or modals within the main page. The navigation will be a persistent sidebar or top bar.
* **A. Digital Brand Identity Builder:**
* **User Flow:** User navigates to the 'Brand Identity' section. They are presented with a guided questionnaire or form. Sections include: Brand Name, Vision Statement, Mission Statement, Core Values (multiple choice + custom input), Target Audience Demographics/Psychographics, Brand Personality (e.g., Innovative, Traditional, Playful, Sophisticated), Unique Selling Proposition (USP).
* **Functionality:** Input fields collect brand information. Based on inputs, the tool suggests: a primary color palette (e.g., 3-5 colors), font pairings (e.g., a heading font and a body font from a predefined list), and a brand voice descriptor (e.g., 'Formal & Authoritative', 'Friendly & Casual'). The output is a summary page displaying these elements, with options to save (locally for MVP) or export as a PDF.
* **B. Competitor & Market Analysis Module:**
* **User Flow:** User navigates to the 'Market Analysis' section. They input 1-3 competitor brand names or URLs (for MVP, this will primarily drive mock data display). The system then displays mock analysis data.
* **Functionality:** This section presents simulated data. It shows mock competitor profiles, including their perceived digital presence (e.g., social media activity level, website tone), primary communication themes, and potential market positioning. The focus is on providing a template for the *type* of analysis users would perform, rather than live data scraping in MVP.
* **C. Value Proposition Communication Toolkit:**
* **User Flow:** User navigates to the 'Communication Toolkit' section. They can browse templates categorized by channel (Social Media Post, Blog Article Intro, Email Newsletter Snippet). They select a template and customize it using fields pre-populated with their Brand Identity inputs (e.g., inserting Brand Name, USP).
* **Functionality:** Displays a library of pre-defined content structures. Templates use placeholders like `[Brand Name]`, `[USP]`, `[Target Audience descriptor]`, `[Color 1]`, `[Font 1]`. Users fill these placeholders. The output is formatted text ready for copy-pasting. Includes basic text editing for customization.
* **D. Currency Fluctuation Impact Simulator (Simplified):**
* **User Flow:** User navigates to the 'Simulator' section. They input their base product price (e.g., in USD), the current exchange rate of their local currency to USD, and a hypothetical future exchange rate. They also specify if they are an exporter or importer.
* **Functionality:** Calculates and displays the change in price for consumers in the US market and the change in cost for the brand (if importing materials) based on the currency shift. This is a simplified calculation to illustrate the concept. For example: `New USD Price = Base Price * (Old Exchange Rate / New Exchange Rate)`. For importers: `New Material Cost in USD = Base Material Cost in USD * (New Exchange Rate / Old Exchange Rate)`. This provides a basic 'what-if' scenario.
**4. UI/UX DESIGN:**
* **Layout:** A clean, modern one-page layout. A persistent sidebar (collapsible on smaller screens) for navigation between sections (Dashboard/Overview, Brand Identity, Market Analysis, Communication Toolkit, Simulator). The main content area displays the active section. Modals for detailed views or input forms.
* **Color Palette:** Primary: Deep Navy Blue (`#0A192F`), Secondary: Off-White (`#CCD6F6`), Accent: A vibrant Teal (`#64FFDA`) for calls to action and highlights. Neutral grays for text and borders. The Brand Identity Builder will allow users to select their *own* brand colors, but the app's UI will use the defined palette.
* **Typography:** Headings: A modern sans-serif like 'Inter' or 'Manrope' (bold). Body Text: A highly readable sans-serif like 'Inter' or 'Open Sans' (regular, light). Ensure good contrast and legibility.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on mobile. Content sections reflow to single columns. Modals are full-screen on mobile. Use Tailwind's responsive prefixes (sm:, md:, lg:) extensively.
* **Visuals:** Minimalist icons, clean lines. Use subtle gradients or background textures sparingly. Focus on clarity and ease of use.
**5. DATA MODEL (MVP - Client-Side / Local Storage):**
* **`brandProfile` State (Zustand):**
* `brandName`: string
* `vision`: string
* `mission`: string
* `values`: string[]
* `targetAudience`: { demographics: string, psychographics: string }
* `brandPersonality`: string
* `usp`: string
* `identityGuide`: { colors: string[], fonts: { heading: string, body: string }, voice: string }
* **`competitorAnalysis` State (Mock Data):**
* `competitors`: Array of {
* `name`: string,
* `digitalPresenceScore`: number (1-5),
* `mainThemes`: string[],
* `marketPosition`: string
* `mockWebsiteTone`: string
* `mockSocialActivity`: string
* }
* **`communicationTemplates` State (Static Data):**
* `templates`: Array of {
* `id`: string,
* `type`: 'Social Media' | 'Blog Intro' | 'Email Snippet',
* `title`: string,
* `templateString`: string // e.g., "Check out our new product! Highlighting our `[USP]` for `[Target Audience descriptor]`. #[Brand Name]"
* }
* **`simulatorData` State (Local Input):**
* `basePriceUsd`: number
* `currentExchangeRate`: number // Local currency to 1 USD
* `futureExchangeRate`: number
* `isExporter`: boolean
* `simulationResults`: { priceChangePercent: number, costImpactPercent: number } | null
**Local Storage:** Use `localStorage` to persist the `brandProfile` data between sessions. All other data can be managed in memory or reset on page load for MVP simplicity.
**6. COMPONENT BREAKDOWN:**
* **`App.js`:** Main component, sets up layout, routing (if implemented), and global state provider (Zustand store).
* **`Sidebar.js`:** Persistent navigation menu. Displays links to different sections. Handles active link styling. Takes `activeSection` prop and `onSectionChange` function.
* **`Header.js`:** Top bar, could contain app logo and possibly user account info (future).
* **`MainContent.js`:** Container that renders the current section based on `activeSection` state.
* **`Dashboard.js`:** Overview section. Summarizes key brand info, maybe links to other sections.
* **`BrandIdentityBuilder.js`:** Contains the form and logic for collecting brand details and generating the identity guide. Includes sub-components:
* **`BrandInfoForm.js`:** Form for Vision, Mission, Values, USP etc. Takes `onSubmit` prop.
* **`AudienceForm.js`:** Form for demographics, psychographics.
* **`IdentityOutput.js`:** Displays the generated colors, fonts, voice. Takes `identityGuide` data.
* **`MarketAnalysis.js`:** Displays mock competitor data. Includes:
* **`CompetitorCard.js`:** Displays info for a single competitor. Takes `competitor` object.
* **`AnalysisTable.js`:** Mock table showing scores and themes.
* **`CommunicationToolkit.js`:** Displays template library and customization interface. Includes:
* **`TemplateBrowser.js`:** Lists available templates, allows filtering/selection. Takes `templates` data and `onSelectTemplate` function.
* **`TemplateEditor.js`:** Shows selected template, allows input for placeholders, displays output. Takes `selectedTemplate` and `brandProfile` data.
* **`CurrencySimulator.js`:** Form and display for currency simulation. Includes:
* **`SimulatorForm.js`:** Inputs for price, rates, exporter status. Takes `onSubmit` prop.
* **`SimulationResults.js`:** Displays calculated results. Takes `results` data.
* **`Button.js`:** Reusable custom button component with primary/secondary variants. Accepts `onClick`, `children`, `variant` props.
* **`Input.js`:** Reusable input field component. Accepts `label`, `type`, `value`, `onChange` props.
* **`Modal.js`:** Generic modal component. Accepts `isOpen`, `onClose`, `children` props.
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Subtle fade-in/fade-out for section changes in `MainContent.js` using Framer Motion or CSS transitions.
* **Button Hovers:** Slight scale-up or background color change on hover for all interactive elements.
* **Form Interactions:** Subtle visual feedback on input focus (e.g., border color change). Loading indicator (spinner) when 'generating' identity or 'calculating' simulation.
* **Sidebar Toggle:** Smooth slide animation when the sidebar collapses/expands.
* **Modal Entry/Exit:** Scale/fade animation for modals.
* **Loading States:** Use skeleton loaders or spinners for any simulated data loading.
**8. EDGE CASES:**
* **Empty States:** Sections like Market Analysis or Communication Toolkit should display user-friendly messages (e.g., 'Complete your Brand Identity to unlock competitor insights.') when relevant `brandProfile` data is missing.
* **Form Validation:** Implement basic validation for required fields in all forms (e.g., Brand Name, USP, currency rates must be numbers). Use React Hook Form's validation capabilities. Display clear error messages near the fields.
* **Data Persistence:** Ensure `brandProfile` data is saved to `localStorage` reliably. Handle potential `localStorage` errors (e.g., quota exceeded, though unlikely for this data size).
* **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive elements, modals, and navigation. Ensure sufficient color contrast. All interactive elements should be keyboard navigable.
* **Simulator Inputs:** Prevent non-numeric input where numbers are expected. Handle division by zero in the simulator logic (e.g., if `futureExchangeRate` is 0). Ensure exchange rates are positive numbers.
**9. SAMPLE DATA:**
* **`brandProfile` (Example after completion):
```json
{
"brandName": "AuraTech",
"vision": "To be the leading innovator in sustainable smart home technology.",
"mission": "Empowering homeowners with intuitive and eco-friendly solutions for modern living.",
"values": ["Innovation", "Sustainability", "User-Centricity", "Quality"],
"targetAudience": {
"demographics": "28-55 years old, homeowners, middle-to-upper income, tech-savvy.",
"psychographics": "Environmentally conscious, values convenience and design, seeks long-term value."
},
"brandPersonality": "Innovative & Reliable",
"usp": "The smartest, most sustainable way to manage your home environment.",
"identityGuide": {
"colors": ["#2C3E50", "#3498DB", "#1ABC9C", "#F39C12"],
"fonts": {
"heading": "Manrope",
"body": "Open Sans"
},
"voice": "Informative, Confident, Eco-conscious"
}
}
```
* **`competitorAnalysis.competitors` (Example Item):**
```json
{
"name": "EcoHome Solutions",
"digitalPresenceScore": 4,
"mainThemes": ["Smart Home Automation", "Energy Efficiency", "IoT"],
"marketPosition": "Mid-range competitor focusing on energy savings.",
"mockWebsiteTone": "Professional & Technical",
"mockSocialActivity": "Moderate - Weekly posts on industry news."
}
```
* **`communicationTemplates.templates` (Example Item):
```json
{
"id": "sm_promo_1",
"type": "Social Media",
"title": "New Product Announcement",
"templateString": "🚀 Exciting News! Introducing the new [Product Name] from [Brand Name]! Experience `[USP]`. Designed for the `[Target Audience descriptor]` who values `[Value 1]` and `[Value 2]`. Learn more! #[Brand Name] #SmartHome #Innovation #[Color 1 Hex]"
}
```
**10. DEPLOYMENT NOTES:**
* **Build Command:** `npm run build` (or `yarn build`). This will generate a production-ready static build in the `build/` directory.
* **Environment Variables:** For this MVP, no specific environment variables are strictly required. However, for future API integrations, variables like `REACT_APP_API_URL` could be used and managed via a `.env` file.
* **Performance Optimizations:**
* Code Splitting: React Router (if used later) can help. For the current single page, ensure components are not unnecessarily large.
* Image Optimization: Use optimized image formats and sizes if any visuals are added.
* Memoization: Use `React.memo`, `useMemo`, `useCallback` where appropriate to prevent unnecessary re-renders, especially in frequently updated components or complex calculations.
* Bundle Analysis: Use tools like `webpack-bundle-analyzer` to inspect the final bundle size and identify potential optimizations.
* **Hosting:** The static build can be easily deployed to platforms like Netlify, Vercel, GitHub Pages, or any static web server.
* **Development Server:** `npm start` (or `yarn start`) for local development.