import React, { useState } from 'react'; const ArchetypeTest = () => { const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState([]); const [result, setResult] = useState(null); const questions = [ { question: "Какая цветовая гамма вас больше привлекает?", options: [ { text: "Черный, белый, серый - классические оттенки", type: "minimalist" }, { text: "Яркие, сочные цвета - красный, оранжевый, фуксия", type: "dramatic" }, { text: "Пастельные, нежные тона - розовый, бежевый, лавандовый", type: "romantic" }, { text: "Элегантные, глубокие цвета - темно-синий, изумрудный, бордовый", type: "classic" }, { text: "Неоновые, футуристические - электрик, лайм, космические оттенки", type: "artist" } ] }, { question: "Как вы предпочитаете организовывать пространство?", options: [ { text: "Минимум предметов, максимум свободного места", type: "minimalist" }, { text: "Яркие акценты, которые сразу бросаются в глаза", type: "dramatic" }, { text: "Уютно и мягко, много текстур и декора", type: "romantic" }, { text: "Все на своих местах, качественные классические вещи", type: "classic" }, { text: "Креативный хаос, необычные предметы и эксперименты", type: "artist" } ] }, { question: "Какой стиль одежды вам ближе?", options: [ { text: "Простые линии, базовые цвета, качественные ткани", type: "minimalist" }, { text: "Яркие принты, смелые сочетания, выделяющиеся детали", type: "dramatic" }, { text: "Женственные силуэты, мягкие ткани, романтичные детали", type: "romantic" }, { text: "Классические фасоны, дорогие материалы, элегантность", type: "classic" }, { text: "Авангардные формы, необычные материалы, арт-объекты", type: "artist" } ] }, { question: "Какое настроение должен передавать ваш визуальный контент?", options: [ { text: "Спокойствие, ясность, профессионализм", type: "minimalist" }, { text: "Энергию, силу, уверенность", type: "dramatic" }, { text: "Теплоту, нежность, вдохновение", type: "romantic" }, { text: "Статус, качество, надежность", type: "classic" }, { text: "Креативность, инновации, неожиданность", type: "artist" } ] }, { question: "Какой тип композиции вам нравится больше?", options: [ { text: "Симметрия, много воздуха, фокус на главном", type: "minimalist" }, { text: "Контрастные элементы, динамичные диагонали", type: "dramatic" }, { text: "Мягкие переходы, плавные линии, органические формы", type: "romantic" }, { text: "Сбалансированные пропорции, проверенные правила", type: "classic" }, { text: "Асимметрия, неожиданные ракурсы, игра с формами", type: "artist" } ] }, { question: "Какой образ жизни вам ближе?", options: [ { text: "Осознанное потребление, качество превыше количества", type: "minimalist" }, { text: "Активная жизнь, яркие впечатления, лидерство", type: "dramatic" }, { text: "Гармония, красота в деталях, забота о близких", type: "romantic" }, { text: "Стабильность, традиции, проверенные ценности", type: "classic" }, { text: "Творчество, эксперименты, поиск нового", type: "artist" } ] } ]; const archetypes = { minimalist: { name: "МИНИМАЛИСТ", description: "Вы цените простоту, ясность и функциональность. Ваш стиль - это искусство убирать лишнее и оставлять только важное.", colors: ["#FFFFFF", "#000000", "#F5F5F5", "#8E8E8E", "#D3D3D3"], colorNames: ["Чистый белый", "Глубокий черный", "Светло-серый", "Графитовый", "Серебристый"], style: "Чистые линии, много воздуха, монохромность, геометрические формы, фокус на качестве", blogStyle: "Лаконичные композиции, минимум элементов, качественная типографика, много белого пространства", tips: "Используйте правило 'меньше = больше', фокусируйтесь на одном главном элементе в кадре" }, dramatic: { name: "ДРАМАТИК", description: "Вы любите производить впечатление и не боитесь быть в центре внимания. Ваш стиль - это сила, контраст и выразительность.", colors: ["#FF0000", "#000000", "#FFFFFF", "#FF6B35", "#FFD700"], colorNames: ["Алый красный", "Черный", "Белый", "Огненный оранжевый", "Золотой"], style: "Высокий контраст, смелые цветовые сочетания, драматическое освещение, сильные акценты", blogStyle: "Контрастные заголовки, яркие CTA-кнопки, эффектные фотографии, смелая типографика", tips: "Не бойтесь черно-белых решений с яркими акцентами, используйте драматические тени и свет" }, romantic: { name: "РОМАНТИК", description: "Вы цените красоту, гармонию и эмоциональную связь. Ваш стиль - это нежность, уют и вдохновение.", colors: ["#F8BBD0", "#E1BEE7", "#FFCDD2", "#FFF9C4", "#E8F5E8"], colorNames: ["Нежно-розовый", "Лавандовый", "Персиковый", "Ванильный", "Мятный"], style: "Мягкие градиенты, пастельные тона, органические формы, текстуры, теплое освещение", blogStyle: "Атмосферные фотографии, мягкие переходы, каллиграфические шрифты, уютные композиции", tips: "Используйте естественное освещение, добавляйте текстуры и мягкие тени" }, classic: { name: "КЛАССИК", description: "Вы предпочитаете проверенные временем решения и цените качество. Ваш стиль - это элегантность и статус.", colors: ["#1A365D", "#2D5A27", "#8B4513", "#800020", "#2F4F4F"], colorNames: ["Темно-синий", "Изумрудный", "Шоколадный", "Бордовый", "Серо-зеленый"], style: "Сдержанная палитра, качественные материалы, симметрия, благородные оттенки", blogStyle: "Элегантная типографика, сбалансированные композиции, качественные изображения, статусные цвета", tips: "Делайте ставку на качество над количеством, используйте проверенные цветовые сочетания" }, artist: { name: "АРТИСТ", description: "Вы - творческая личность, которая не боится экспериментов. Ваш стиль - это креативность и инновации.", colors: ["#9C27B0", "#00BCD4", "#CDDC39", "#FF5722", "#FFC107"], colorNames: ["Фиолетовый", "Циан", "Лайм", "Оранжевый", "Янтарный"], style: "Смелые цветовые сочетания, необычные формы, креативные решения, эксперименты", blogStyle: "Креативные коллажи, необычные композиции, яркие акценты, игра с формами", tips: "Не бойтесь миксовать стили, экспериментируйте с неожиданными сочетаниями" } }; const handleAnswer = (option) => { const newAnswers = [...answers, option.type]; setAnswers(newAnswers); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { calculateResult(newAnswers); } }; const calculateResult = (allAnswers) => { const counts = {}; allAnswers.forEach(answer => { counts[answer] = (counts[answer] || 0) + 1; }); const dominantType = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b ); setResult(archetypes[dominantType]); }; const resetTest = () => { setCurrentQuestion(0); setAnswers([]); setResult(null); }; if (result) { return (

Ваш архетип:

{result.name}

Описание

{result.description}

Ваш стиль

{result.style}

Стиль блога

{result.blogStyle}

Советы

{result.tips}

Ваша цветовая палитра

{result.colors.map((color, index) => (

{result.colorNames[index]}

{color}

))}

💡 Для работы с ИИ:

Используйте эти цвета в промптах для Midjourney и других ИИ-инструментов. Добавляйте в описание: "в стиле {result.name.toLowerCase()}"

); } return (

Визуальный код ИИстетика

Определите свой архетип для создания контента

Вопрос {currentQuestion + 1} из {questions.length}
{Math.round(((currentQuestion + 1) / questions.length) * 100)}%

{questions[currentQuestion].question}

{questions[currentQuestion].options.map((option, index) => ( ))}
); }; export default ArchetypeTest;
Made on
Tilda