diff --git a/dist/index.html b/dist/index.html index 6ba40893..44a8d37a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,7 +7,7 @@ - + diff --git a/src/components/persona/PersonaEditor.tsx b/src/components/persona/PersonaEditor.tsx index 113135dc..344f45bc 100644 --- a/src/components/persona/PersonaEditor.tsx +++ b/src/components/persona/PersonaEditor.tsx @@ -97,14 +97,14 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit })); }; - const handleArrayAdd = (field: 'goals' | 'frustrations' | 'motivations' | 'scenarios' | 'fears') => { + const handleArrayAdd = (field: 'goals' | 'frustrations' | 'motivations' | 'scenarios') => { setEditedPersona(prev => ({ ...prev, [field]: [...(prev[field] || []), ''] })); }; - const handleArrayUpdate = (field: 'goals' | 'frustrations' | 'motivations' | 'scenarios' | 'fears', index: number, value: string) => { + const handleArrayUpdate = (field: 'goals' | 'frustrations' | 'motivations' | 'scenarios', index: number, value: string) => { setEditedPersona(prev => { const newArray = [...(prev[field] || [])]; newArray[index] = value; @@ -115,7 +115,7 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit }); }; - const handleArrayRemove = (field: 'goals' | 'frustrations' | 'motivations' | 'scenarios' | 'fears', index: number) => { + const handleArrayRemove = (field: 'goals' | 'frustrations' | 'motivations' | 'scenarios', index: number) => { setEditedPersona(prev => { const newArray = [...(prev[field] || [])]; newArray.splice(index, 1); @@ -366,141 +366,147 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit - - - Basic - Cooper + + + General + Cooper Profile Personality - Demographics - Lifestyle - Extended + Scenarios - + - - + + + + {editedPersona.name?.charAt(0) || 'P'} + + + Name handleChange('name', e.target.value)} + className="w-64" /> - - - - Age Range - handleChange('age', value)} - > - - - - - 18-24 - 25-34 - 35-44 - 45-54 - 55-64 - 65+ - - - - - - Gender - handleChange('gender', value)} - > - - - - - Male - Female - Non-binary - Other - - - - - Occupation handleChange('occupation', e.target.value)} + className="w-64" /> - - - Education - handleChange('education', value)} - > - - - - - High School - Some College - Associate's Degree - Bachelor's Degree - Master's Degree - PhD - - - - - - Location - handleChange('location', e.target.value)} - /> - - - - Ethnicity (Optional) - handleChange('ethnicity', value)} - > - - - - - White - Black - Asian - Hispanic/Latino - Native American - Middle Eastern - Mixed - Other - Prefer not to say - - - - - - - Personality - handleChange('personality', e.target.value)} - rows={3} - /> + + + + + + 👥Demographics + + + + Age + handleChange('age', e.target.value)} + placeholder="e.g. 29, 25-34" + /> + + + + Gender + handleChange('gender', e.target.value)} + placeholder="e.g. Female, Male, Non-binary" + /> + + + + Ethnicity + handleChange('ethnicity', e.target.value)} + placeholder="e.g. White, Asian, Mixed" + /> + - + + + + Education + handleChange('education', e.target.value)} + placeholder="e.g. Master's Degree (Comp Sci)" + /> + + + + Social Grade + handleChange('socialGrade', e.target.value)} + placeholder="e.g. A, B, C1, C2" + /> + + + + Household Income + handleChange('householdIncome', e.target.value)} + placeholder="e.g. £85,000 - £90,000" + /> + + + + + + Household Composition + handleChange('householdComposition', e.target.value)} + placeholder="e.g. Single-person household in a modern Islington flat" + /> + + + + + + + 📍Location + + + + Location + handleChange('location', e.target.value)} + /> + + + + Living Situation + handleChange('livingSituation', e.target.value)} + placeholder="e.g. Own home, Rent apartment" + /> + + + + + + + ❤️Interests + - Interests handleChange('interests', e.target.value)} @@ -508,75 +514,133 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit placeholder="Tech, travel, cooking, etc." /> - + + + + + 📚Media + - - Tech Savviness - {editedPersona.techSavviness}% - - handleChange('techSavviness', values[0])} - max={100} - step={1} + handleChange('mediaConsumption', e.target.value)} + rows={3} + placeholder="TV shows, podcasts, news sources, social media platforms" /> - - - - Brand Loyalty - {editedPersona.brandLoyalty || 0}% - - handleChange('brandLoyalty', values[0])} - max={100} - step={1} - /> - - - - - Price Consciousness - {editedPersona.priceConsciousness || 0}% - - handleChange('priceConsciousness', values[0])} - max={100} - step={1} - /> - - - - - Environmental Concern - {editedPersona.environmentalConcern || 0}% - - handleChange('environmentalConcern', values[0])} - max={100} - step={1} - /> - - - - - Purchasing Power - handleChange('hasPurchasingPower', value)} + + + + Digital Behavior + + + + Tech Savviness + {editedPersona.techSavviness}% + + handleChange('techSavviness', values[0])} + max={100} + step={1} /> - - Has Children - handleChange('hasChildren', value)} + + + Brand Loyalty + {editedPersona.brandLoyalty || 0}% + + handleChange('brandLoyalty', values[0])} + max={100} + step={1} /> + + + + Price Sensitivity + {editedPersona.priceConsciousness || 0}% + + handleChange('priceConsciousness', values[0])} + max={100} + step={1} + /> + + + + + Environmental Concern + {editedPersona.environmentalConcern || 0}% + + handleChange('environmentalConcern', values[0])} + max={100} + step={1} + /> + + + + + Device Usage + handleChange('deviceUsage', e.target.value)} + rows={3} + placeholder="Smartphone, laptop, tablet, smart TV, gaming console" + /> + + + + Shopping Habits + handleChange('shoppingHabits', e.target.value)} + rows={3} + placeholder="Online vs in-store, frequency, preferred retailers" + /> + + + + + + + Additional Information + + + Brand Preferences + handleChange('brandPreferences', e.target.value)} + rows={3} + placeholder="Favorite brands, brand values alignment" + /> + + + + Communication Preferences + handleChange('communicationPreferences', e.target.value)} + rows={3} + placeholder="Email, phone, text, video calls, in-person" + /> + + + + + Additional Information + handleChange('additionalInformation', e.target.value)} + rows={4} + placeholder="Any other relevant details or context" + /> @@ -584,7 +648,7 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit - + @@ -764,51 +828,6 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit - - - - - - Scenario Section Title - handleChange('scenarioType', e.target.value)} - placeholder="Life Scenarios" - /> - - Custom title for the scenarios section (e.g., "Customer Journey", "Use Cases") - - - - - Usage Scenarios - {(editedPersona.scenarios || []).map((item, index) => ( - - handleArrayUpdate('scenarios', index, e.target.value)} - rows={2} - /> - handleArrayRemove('scenarios', index)} - > - - - - ))} - handleArrayAdd('scenarios')} - className="mt-2" - > - - Add Scenario - - - @@ -901,403 +920,49 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit - + - Demographic Information - - - - - Social Grade - handleChange('socialGrade', value)} - > - - - - - A - Higher managerial - B - Intermediate managerial - C1 - Supervisory or clerical - C2 - Skilled manual workers - D - Semi and unskilled manual workers - E - State pensioners, unemployed - - - - - - Household Income - handleChange('householdIncome', value)} - > - - - - - Under $25,000 - $25,000 - $50,000 - $50,000 - $75,000 - $75,000 - $100,000 - $100,000 - $150,000 - $150,000 - $250,000 - Over $250,000 - Prefer not to say - - - - - - - - Household Composition - handleChange('householdComposition', value)} - > - - - - - Single person - Couple without children - Couple with children - Single parent - Multi-generational - Shared housing - Other - - - - - - Living Situation - handleChange('livingSituation', value)} - > - - - - - Own home - Rent apartment - Rent house - Live with family - Student housing - Assisted living - Other - - - - - - - - - - - - - Lifestyle & Behavior - - - - - Media Consumption - handleChange('mediaConsumption', e.target.value)} - rows={3} - placeholder="TV shows, podcasts, news sources, social media platforms" - /> - - Describe media consumption habits and preferences - - - - - Device Usage - handleChange('deviceUsage', e.target.value)} - rows={3} - placeholder="Smartphone, laptop, tablet, smart TV, gaming console" - /> - - Primary devices and usage patterns - - - - - Shopping Habits - handleChange('shoppingHabits', e.target.value)} - rows={3} - placeholder="Online vs in-store, frequency, preferred retailers" - /> - - Shopping behavior and preferences - - - - - Brand Preferences - handleChange('brandPreferences', e.target.value)} - rows={3} - placeholder="Favorite brands, brand values alignment" - /> - - Preferred brands and reasoning - - - - - - - Communication Preferences - handleChange('communicationPreferences', e.target.value)} - rows={3} - placeholder="Email, phone, text, video calls, in-person" - /> - - Preferred communication methods and channels - - - - - Payment Methods - handleChange('paymentMethods', e.target.value)} - rows={3} - placeholder="Credit cards, digital wallets, cash, BNPL" - /> - - Preferred payment methods and financial tools - - - - - Purchase Behavior - handleChange('purchaseBehaviour', e.target.value)} - rows={3} - placeholder="Research habits, decision factors, impulse vs planned buying" - /> - - How they approach making purchase decisions - - - - - - - - - - - - Extended Profile - - - - - Core Values - handleChange('coreValues', e.target.value)} - rows={3} - placeholder="Key principles and values that guide decisions" - /> - - - - Lifestyle Choices - handleChange('lifestyleChoices', e.target.value)} - rows={3} - placeholder="Health, fitness, diet, work-life balance preferences" - /> - - - - Social Activities - handleChange('socialActivities', e.target.value)} - rows={3} - placeholder="Social hobbies, community involvement, networking" - /> - - - - Category Knowledge - handleChange('categoryKnowledge', e.target.value)} - rows={3} - placeholder="Expertise in specific product/service categories" - /> - - - - Decision Influences - handleChange('decisionInfluences', e.target.value)} - rows={3} - placeholder="What factors most influence their decisions" - /> - - - - Pain Points - handleChange('painPoints', e.target.value)} - rows={3} - placeholder="Common challenges and friction points" - /> - - - - - - Journey Context - handleChange('journeyContext', e.target.value)} - rows={3} - placeholder="Current life stage and contextual factors" - /> - - - - Key Touchpoints - handleChange('keyTouchpoints', e.target.value)} - rows={3} - placeholder="Important interaction points and channels" - /> - - - - Self-Determination Needs - - - Autonomy - handleChange('selfDeterminationNeeds', { - ...editedPersona.selfDeterminationNeeds, - autonomy: e.target.value - })} - rows={2} - placeholder="Need for independence and self-direction" - /> - - - - Competence - handleChange('selfDeterminationNeeds', { - ...editedPersona.selfDeterminationNeeds, - competence: e.target.value - })} - rows={2} - placeholder="Need to feel capable and effective" - /> - - - - Relatedness - handleChange('selfDeterminationNeeds', { - ...editedPersona.selfDeterminationNeeds, - relatedness: e.target.value - })} - rows={2} - placeholder="Need for connection and belonging" - /> - - - - - - - - - - + - Fears & Concerns - {(editedPersona.fears || []).map((item, index) => ( - - handleArrayUpdate('fears', index, e.target.value)} - placeholder="Enter a fear or concern" - /> - handleArrayRemove('fears', index)} - > - - - - ))} + Scenario Section Title + handleChange('scenarioType', e.target.value)} + placeholder="Life Scenarios" + /> + + Custom title for the scenarios section (e.g., "Customer Journey", "Use Cases") + + + + + Usage Scenarios + {(editedPersona.scenarios || []).map((item, index) => ( + + handleArrayUpdate('scenarios', index, e.target.value)} + rows={2} + /> handleArrayAdd('fears')} - className="mt-2" + variant="ghost" + size="icon" + onClick={() => handleArrayRemove('scenarios', index)} > - - Add Fear/Concern + - - - Personal Narrative - handleChange('narrative', e.target.value)} - rows={4} - placeholder="Personal story, background, key life experiences" - /> - - A brief narrative that captures their personal story - - - - - Additional Information - handleChange('additionalInformation', e.target.value)} - rows={4} - placeholder="Any other relevant details or context" - /> - - Additional context or details not covered elsewhere - - - + ))} + handleArrayAdd('scenarios')} + className="mt-2" + > + + Add Scenario +
- Custom title for the scenarios section (e.g., "Customer Journey", "Use Cases") -
- Describe media consumption habits and preferences -
- Primary devices and usage patterns -
- Shopping behavior and preferences -
- Preferred brands and reasoning -
- Preferred communication methods and channels -
- Preferred payment methods and financial tools -
- How they approach making purchase decisions -
+ Custom title for the scenarios section (e.g., "Customer Journey", "Use Cases") +
- A brief narrative that captures their personal story -
- Additional context or details not covered elsewhere -