Pierwszy wrzut promptstory

2026-02-15 13:22:48 +01:00
commit 27a3c6024f
27 changed files with 2833 additions and 0 deletions
--- a/components/StepToneGoal.tsx
+++ b/components/StepToneGoal.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { WizardState, Tone, Goal } from '../types';
+import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';
+
+interface StepToneGoalProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+  nextStep: () => void;
+}
+
+const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep }) => {
+
+  const handleToneSelect = (tone: Tone) => {
+    updateData({ tone });
+  };
+
+  const handleGoalSelect = (goal: Goal) => {
+    updateData({ goal });
+  };
+
+  const isComplete = data.tone && data.goal;
+
+  const tones: { id: Tone; label: string; desc: string; icon: React.ReactNode }[] = [
+    { id: 'funny', label: 'Luzak', desc: 'Humor, dystans, memy', icon: <Laugh size={32} /> },
+    { id: 'serious', label: 'Ekspert', desc: 'Konkrety, wiedza, liczby', icon: <Brain size={32} /> },
+    { id: 'inspirational', label: 'Mentor', desc: 'Emocje, głębia, lekcja', icon: <Zap size={32} /> },
+  ];
+
+  const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
+    { id: 'engagement', label: 'Społeczność', desc: 'Komentarze i dyskusja', icon: <MessageCircle size={32} /> },
+    { id: 'viral', label: 'Zasięg', desc: 'Udostępnienia (Share)', icon: <Share2 size={32} /> },
+    { id: 'sales', label: 'Sprzedaż', desc: 'Kliknięcie w link / Zakup', icon: <ShoppingBag size={32} /> },
+  ];
+
+  return (
+    <div className="space-y-12 animate-fade-in">
+      
+      {/* Sekcja 1: TON */}
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Ton (Vibe)</h2>
+        <p className="text-gray-500 mb-6 text-lg">Jak chcesz brzmieć?</p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {tones.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => handleToneSelect(t.id)}
+              className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
+                data.tone === t.id
+                  ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                  : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+              }`}
+            >
+              <div className={`mb-4 transition-colors ${data.tone === t.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
+                {t.icon}
+              </div>
+              <span className="text-xl font-bold tracking-tight mb-2">{t.label}</span>
+              <span className="text-sm opacity-75 font-medium">{t.desc}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Sekcja 2: CEL */}
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Cel</h2>
+        <p className="text-gray-500 mb-6 text-lg">Co chcesz osiągnąć tym postem?</p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {goals.map((g) => (
+            <button
+              key={g.id}
+              onClick={() => handleGoalSelect(g.id)}
+              className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
+                data.goal === g.id
+                  ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                  : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+              }`}
+            >
+              <div className={`mb-4 transition-colors ${data.goal === g.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
+                {g.icon}
+              </div>
+              <span className="text-xl font-bold tracking-tight mb-2">{g.label}</span>
+              <span className="text-sm opacity-75 font-medium">{g.desc}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Next Button */}
+      <div className="flex justify-end pt-4">
+        <button
+          onClick={nextStep}
+          disabled={!isComplete}
+          className="bg-[#EA4420] text-white px-8 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
+        >
+          Przejdź do szczegółów
+        </button>
+      </div>
+
+    </div>
+  );
+};
+
+export default StepToneGoal;