6 Blog post
This commit is contained in:
249
src/components/CollectorMotivation.tsx
Normal file
249
src/components/CollectorMotivation.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
'use client'
|
||||
|
||||
import { useApp } from '@/contexts/AppContext'
|
||||
import { CuratedItem } from '@/types'
|
||||
|
||||
interface CollectorMotivationProps {
|
||||
item: CuratedItem
|
||||
}
|
||||
|
||||
export function CollectorMotivation({ item }: CollectorMotivationProps) {
|
||||
const { state } = useApp()
|
||||
|
||||
// Based on research: collector psychology and motivation triggers
|
||||
const getMotivationTriggers = () => {
|
||||
const triggers = []
|
||||
|
||||
// Scarcity trigger
|
||||
if (item.rarity >= 4) {
|
||||
triggers.push({
|
||||
type: 'scarcity',
|
||||
icon: '⚡',
|
||||
title: 'Rare Find',
|
||||
message: 'Only a few of these exist in this condition',
|
||||
color: '#7B2E2E'
|
||||
})
|
||||
}
|
||||
|
||||
// Heritage/History trigger
|
||||
if (item.dateAdded && new Date(item.dateAdded).getFullYear() < 1980) {
|
||||
triggers.push({
|
||||
type: 'heritage',
|
||||
icon: '🏛️',
|
||||
title: 'Historical Significance',
|
||||
message: 'Connects you to a rich cultural heritage',
|
||||
color: '#2D6A6A'
|
||||
})
|
||||
}
|
||||
|
||||
// Investment trigger
|
||||
if (item.originalPrice && item.price < item.originalPrice * 0.8) {
|
||||
triggers.push({
|
||||
type: 'investment',
|
||||
icon: '💎',
|
||||
title: 'Investment Potential',
|
||||
message: 'Undervalued compared to market trends',
|
||||
color: '#C89C2B'
|
||||
})
|
||||
}
|
||||
|
||||
// Completion trigger (if user has similar items)
|
||||
const userCategoryItems = state.wishlist.filter(id => {
|
||||
const wishlistItem = state.items.find(i => i.id === id)
|
||||
return wishlistItem?.category === item.category
|
||||
})
|
||||
|
||||
if (userCategoryItems.length >= 2) {
|
||||
triggers.push({
|
||||
type: 'completion',
|
||||
icon: '🧩',
|
||||
title: 'Collection Builder',
|
||||
message: `Perfect addition to your ${item.category} collection`,
|
||||
color: '#4A7C59'
|
||||
})
|
||||
}
|
||||
|
||||
// Authenticity trust trigger
|
||||
if (item.authenticity.verified) {
|
||||
triggers.push({
|
||||
type: 'trust',
|
||||
icon: '🛡️',
|
||||
title: 'Verified Authentic',
|
||||
message: 'Buy with confidence - authenticity guaranteed',
|
||||
color: '#2D6A6A'
|
||||
})
|
||||
}
|
||||
|
||||
return triggers.slice(0, 3) // Show max 3 triggers
|
||||
}
|
||||
|
||||
const getCollectorPersonality = () => {
|
||||
const categoryCount = state.wishlist.reduce((acc, id) => {
|
||||
const item = state.items.find(i => i.id === id)
|
||||
if (item) {
|
||||
acc[item.category] = (acc[item.category] || 0) + 1
|
||||
}
|
||||
return acc
|
||||
}, {} as Record<string, number>)
|
||||
|
||||
const dominantCategory = Object.entries(categoryCount)
|
||||
.sort(([,a], [,b]) => b - a)[0]?.[0]
|
||||
|
||||
const personalities = {
|
||||
photography: {
|
||||
type: 'Visual Historian',
|
||||
description: 'You preserve moments and appreciate craftsmanship',
|
||||
motivation: 'Each camera tells a story of innovation'
|
||||
},
|
||||
music: {
|
||||
type: 'Audio Archivist',
|
||||
description: 'You value authentic sound and musical heritage',
|
||||
motivation: 'Original pressings capture the artist\'s true vision'
|
||||
},
|
||||
books: {
|
||||
type: 'Literary Curator',
|
||||
description: 'You collect knowledge and cultural significance',
|
||||
motivation: 'First editions connect you to literary history'
|
||||
},
|
||||
design: {
|
||||
type: 'Aesthetic Connoisseur',
|
||||
description: 'You appreciate timeless design and functionality',
|
||||
motivation: 'Mid-century pieces represent design perfection'
|
||||
}
|
||||
}
|
||||
|
||||
return personalities[dominantCategory as keyof typeof personalities] || {
|
||||
type: 'Eclectic Collector',
|
||||
description: 'You appreciate quality across all categories',
|
||||
motivation: 'Diverse collections tell richer stories'
|
||||
}
|
||||
}
|
||||
|
||||
const triggers = getMotivationTriggers()
|
||||
const personality = getCollectorPersonality()
|
||||
|
||||
if (triggers.length === 0) return null
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
backgroundColor: 'rgba(123, 46, 46, 0.05)',
|
||||
border: '1px solid rgba(123, 46, 46, 0.2)',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
marginBottom: '16px'
|
||||
}}>
|
||||
{/* Collector Personality */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '12px',
|
||||
paddingBottom: '8px',
|
||||
borderBottom: '1px solid rgba(123, 46, 46, 0.1)'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
backgroundColor: '#7B2E2E',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
🎯
|
||||
</div>
|
||||
<div>
|
||||
<div style={{
|
||||
fontFamily: 'Space Mono, monospace',
|
||||
fontSize: '11px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em',
|
||||
color: '#7B2E2E',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{personality.type}
|
||||
</div>
|
||||
<div style={{
|
||||
fontFamily: 'Spectral, serif',
|
||||
fontSize: '10px',
|
||||
color: '#8B7D6B',
|
||||
fontStyle: 'italic'
|
||||
}}>
|
||||
{personality.motivation}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Motivation Triggers */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px'
|
||||
}}>
|
||||
{triggers.map((trigger, index) => (
|
||||
<div
|
||||
key={trigger.type}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '6px 8px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||
borderRadius: '4px',
|
||||
borderLeft: `3px solid ${trigger.color}`
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '14px' }}>{trigger.icon}</span>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{
|
||||
fontFamily: 'Space Mono, monospace',
|
||||
fontSize: '10px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em',
|
||||
color: trigger.color,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '2px'
|
||||
}}>
|
||||
{trigger.title}
|
||||
</div>
|
||||
<div style={{
|
||||
fontFamily: 'Spectral, serif',
|
||||
fontSize: '11px',
|
||||
color: '#1E1A17'
|
||||
}}>
|
||||
{trigger.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div style={{
|
||||
marginTop: '12px',
|
||||
padding: '8px',
|
||||
backgroundColor: 'rgba(123, 46, 46, 0.1)',
|
||||
borderRadius: '4px',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{
|
||||
fontFamily: 'Pacifico, cursive',
|
||||
fontSize: '12px',
|
||||
color: '#7B2E2E',
|
||||
marginBottom: '4px'
|
||||
}}>
|
||||
Why collectors love this piece
|
||||
</div>
|
||||
<div style={{
|
||||
fontFamily: 'Spectral, serif',
|
||||
fontSize: '11px',
|
||||
color: '#1E1A17',
|
||||
fontStyle: 'italic'
|
||||
}}>
|
||||
"{personality.description}"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user