mirror of
https://github.com/Motion-Games/MotionWebStudio.git
synced 2026-04-21 09:00:53 +02:00
876 lines
45 KiB
TypeScript
876 lines
45 KiB
TypeScript
import React, { useState } from 'react';
|
||
import {
|
||
Send, CheckCircle, AlertCircle, Globe, Server, Check,
|
||
ArrowRight, ArrowLeft, User, FileText, Target, Layout,
|
||
Palette, Zap, Lightbulb, Settings, ClipboardCheck, Lock,
|
||
Cloud, Upload
|
||
} from 'lucide-react';
|
||
import { Button } from './Button';
|
||
import { useAuth } from '../context/AuthContext';
|
||
import { Link } from 'react-router-dom';
|
||
import { supabase, isSupabaseConfigured } from '../lib/supabaseClient';
|
||
|
||
interface Inspiration {
|
||
url: string;
|
||
comment: string;
|
||
}
|
||
|
||
export const OrderForm: React.FC = () => {
|
||
const { user, loading } = useAuth();
|
||
const [currentStep, setCurrentStep] = useState(1);
|
||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||
const [errors, setErrors] = useState<string[]>([]);
|
||
const [privacyAccepted, setPrivacyAccepted] = useState(false);
|
||
const [aszfAccepted, setAszfAccepted] = useState(false);
|
||
const totalSteps = 9;
|
||
|
||
const [formData, setFormData] = useState({
|
||
// 1. Kapcsolattartás
|
||
name: '',
|
||
company: '',
|
||
email: user?.email || '',
|
||
phone: '',
|
||
package: 'Pro Web', // Default selection updated
|
||
|
||
// 2. Bemutatkozás
|
||
description: '',
|
||
|
||
// 3. Célok
|
||
goals: [] as string[],
|
||
goalOther: '',
|
||
successCriteria: '',
|
||
|
||
// 4. Tartalom
|
||
content: [] as string[],
|
||
contentOther: '',
|
||
existingAssets: 'Nincs' as 'Igen' | 'Nem' | 'Részben',
|
||
contentLink: '', // New field for drive link
|
||
|
||
// 5. Design
|
||
primaryColor: '',
|
||
secondaryColor: '',
|
||
balanceColor: '',
|
||
style: [] as string[],
|
||
targetAudience: '',
|
||
|
||
// 6. Funkciók
|
||
features: [] as string[],
|
||
|
||
// 7. Inspirációk
|
||
inspirations: [
|
||
{ url: '', comment: '' },
|
||
{ url: '', comment: '' },
|
||
{ url: '', comment: '' }
|
||
] as Inspiration[],
|
||
|
||
// 8. Extrák & Megjegyzések
|
||
extras: [] as string[],
|
||
domainName: '',
|
||
notes: ''
|
||
});
|
||
|
||
// Helper arrays
|
||
const colorOptions = [
|
||
{ name: 'Piros', value: '#ef4444' },
|
||
{ name: 'Kék', value: '#3b82f6' },
|
||
{ name: 'Zöld', value: '#22c55e' },
|
||
{ name: 'Lila', value: '#a855f7' },
|
||
{ name: 'Fekete', value: '#171717' },
|
||
{ name: 'Fehér', value: '#ffffff' },
|
||
{ name: 'Szürke', value: '#6b7280' },
|
||
{ name: 'Narancs', value: '#f97316' },
|
||
{ name: 'Sárga', value: '#eab308' },
|
||
{ name: 'Türkiz', value: '#14b8a6' },
|
||
{ name: 'Barna', value: '#78350f' },
|
||
];
|
||
|
||
const styleOptions = [
|
||
'Modern és letisztult', 'Üzleti és professzionális', 'Fiatalos és energikus',
|
||
'Spirituális / nyugodt', 'Természetes / barátságos', 'Luxus / prémium'
|
||
];
|
||
|
||
const steps = [
|
||
{ id: 1, title: 'Kapcsolat', icon: User },
|
||
{ id: 2, title: 'Bemutatkozás', icon: FileText },
|
||
{ id: 3, title: 'Célok', icon: Target },
|
||
{ id: 4, title: 'Tartalom', icon: Layout },
|
||
{ id: 5, title: 'Design', icon: Palette },
|
||
{ id: 6, title: 'Funkciók', icon: Zap },
|
||
{ id: 7, title: 'Inspirációk', icon: Lightbulb },
|
||
{ id: 8, title: 'Extrák', icon: Settings },
|
||
{ id: 9, title: 'Összegzés', icon: ClipboardCheck },
|
||
];
|
||
|
||
// Auto-fill user data (Name and Email) when user loads
|
||
React.useEffect(() => {
|
||
const prefillUserData = async () => {
|
||
if (!user) return;
|
||
|
||
let emailToSet = user.email || '';
|
||
let nameToSet = '';
|
||
|
||
// 1. Try metadata (from session - fastest)
|
||
const meta = user.user_metadata;
|
||
if (meta?.last_name && meta?.first_name) {
|
||
// Hungarian order: Lastname Firstname
|
||
nameToSet = `${meta.last_name} ${meta.first_name}`;
|
||
}
|
||
|
||
// 2. Fallback to DB if Supabase is configured and metadata is missing name
|
||
if (!nameToSet && isSupabaseConfigured) {
|
||
try {
|
||
const { data } = await supabase
|
||
.from('profiles')
|
||
.select('first_name, last_name')
|
||
.eq('id', user.id)
|
||
.maybeSingle();
|
||
|
||
if (data?.first_name && data?.last_name) {
|
||
nameToSet = `${data.last_name} ${data.first_name}`;
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching user profile for order form:', error);
|
||
}
|
||
}
|
||
|
||
setFormData(prev => {
|
||
// Only update if fields are empty to avoid overwriting user input
|
||
if (prev.name && prev.email) return prev;
|
||
|
||
return {
|
||
...prev,
|
||
email: prev.email || emailToSet,
|
||
name: prev.name || nameToSet
|
||
};
|
||
});
|
||
};
|
||
|
||
prefillUserData();
|
||
}, [user]);
|
||
|
||
// If loading auth state, show a skeleton or loader
|
||
if (loading) {
|
||
return (
|
||
<div id="order-form-container" className="bg-white rounded-3xl shadow-xl p-12 text-center border border-gray-100 min-h-[400px] flex items-center justify-center">
|
||
<div className="animate-pulse text-gray-400">Betöltés...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Auth Protection - Lock Screen
|
||
if (!user) {
|
||
return (
|
||
<div id="order-form-container" className="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 scroll-mt-24 max-w-4xl mx-auto">
|
||
<div className="bg-gradient-to-br from-[#eef2ff] to-[#f5f3ff] pt-12 pb-8 px-6 md:px-12 border-b border-white shadow-sm text-center">
|
||
<div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-md text-[#4e6bff]">
|
||
<Lock className="w-10 h-10" />
|
||
</div>
|
||
<h2 className="text-3xl font-extrabold text-[#111827] mb-3">Jelentkezzen be a rendeléshez</h2>
|
||
<p className="text-[#4b5563] text-lg max-w-xl mx-auto">
|
||
Weboldal rendelés leadásához kérjük, jelentkezzen be fiókjába, vagy regisztráljon egyet ingyenesen.
|
||
</p>
|
||
</div>
|
||
<div className="p-12 text-center bg-white">
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
|
||
<Link to="/auth/login" className="w-full">
|
||
<Button fullWidth size="lg">Bejelentkezés</Button>
|
||
</Link>
|
||
<Link to="/auth/register" className="w-full">
|
||
<Button variant="outline" fullWidth size="lg">Regisztráció</Button>
|
||
</Link>
|
||
</div>
|
||
<p className="mt-8 text-sm text-gray-500">
|
||
A regisztráció mindössze 1 percet vesz igénybe, és segít a projekt későbbi nyomon követésében.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||
const { name, value } = e.target;
|
||
setFormData(prev => ({ ...prev, [name]: value }));
|
||
};
|
||
|
||
const handleCheckboxChange = (category: 'goals' | 'content' | 'style' | 'features' | 'extras', value: string) => {
|
||
setFormData(prev => {
|
||
const list = prev[category];
|
||
if (list.includes(value)) {
|
||
return { ...prev, [category]: list.filter(item => item !== value) };
|
||
} else {
|
||
return { ...prev, [category]: [...list, value] };
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleInspirationChange = (index: number, field: 'url' | 'comment', value: string) => {
|
||
const newInspirations = [...formData.inspirations];
|
||
newInspirations[index] = { ...newInspirations[index], [field]: value };
|
||
setFormData(prev => ({ ...prev, inspirations: newInspirations }));
|
||
};
|
||
|
||
const validateStep = (step: number): boolean => {
|
||
const newErrors: string[] = [];
|
||
|
||
if (step === 1) {
|
||
if (!formData.name) newErrors.push('A név megadása kötelező.');
|
||
if (!formData.email) newErrors.push('Az e-mail cím megadása kötelező.');
|
||
if (!formData.phone) newErrors.push('A telefonszám megadása kötelező.');
|
||
}
|
||
|
||
if (newErrors.length > 0) {
|
||
setErrors(newErrors);
|
||
return false;
|
||
}
|
||
|
||
setErrors([]);
|
||
return true;
|
||
};
|
||
|
||
const nextStep = () => {
|
||
if (validateStep(currentStep)) {
|
||
if (currentStep < totalSteps) {
|
||
setCurrentStep(prev => prev + 1);
|
||
window.scrollTo({ top: document.getElementById('order-form-container')?.offsetTop || 0, behavior: 'smooth' });
|
||
} else {
|
||
handleSubmit();
|
||
}
|
||
}
|
||
};
|
||
|
||
const prevStep = () => {
|
||
if (currentStep > 1) {
|
||
setCurrentStep(prev => prev - 1);
|
||
window.scrollTo({ top: document.getElementById('order-form-container')?.offsetTop || 0, behavior: 'smooth' });
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
setIsSubmitting(true);
|
||
setSubmitError(null);
|
||
|
||
if (!privacyAccepted) {
|
||
setSubmitError('A rendelés leadásához el kell fogadnia az Adatkezelési tájékoztatót.');
|
||
setIsSubmitting(false);
|
||
return;
|
||
}
|
||
|
||
if (!aszfAccepted) {
|
||
setSubmitError('A rendelés leadásához el kell fogadnia az Általános Szerződési Feltételeket (ÁSZF).');
|
||
setIsSubmitting(false);
|
||
return;
|
||
}
|
||
|
||
// Determine amount text
|
||
const amount =
|
||
formData.package === 'Landing Page' ? '190.000 Ft' :
|
||
formData.package === 'Pro Web' ? '350.000 Ft' :
|
||
'Egyedi Árazás';
|
||
|
||
if (isSupabaseConfigured && user) {
|
||
try {
|
||
const { error } = await supabase.from('orders').insert({
|
||
user_id: user.id,
|
||
customer_name: formData.name,
|
||
customer_email: formData.email,
|
||
package: formData.package,
|
||
status: 'new',
|
||
amount: amount,
|
||
details: formData
|
||
});
|
||
|
||
if (error) {
|
||
throw error;
|
||
}
|
||
|
||
setIsSubmitted(true);
|
||
window.scrollTo({ top: document.getElementById('order-form-container')?.offsetTop || 0, behavior: 'smooth' });
|
||
} catch (err: any) {
|
||
console.error('Error submitting order:', err);
|
||
setSubmitError('Hiba történt a rendelés elküldésekor: ' + err.message);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
} else {
|
||
// Fallback for Demo Mode
|
||
console.log('Demo Mode: Order Data:', formData);
|
||
await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate delay
|
||
setIsSubmitted(true);
|
||
setIsSubmitting(false);
|
||
window.scrollTo({ top: document.getElementById('order-form-container')?.offsetTop || 0, behavior: 'smooth' });
|
||
}
|
||
};
|
||
|
||
// Modern Input Style Class - MotionWeb Style
|
||
const inputClass = "w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-[#111111] placeholder-gray-400 focus:ring-4 focus:ring-[#4e6bff]/10 focus:border-[#4e6bff] outline-none transition-all shadow-sm";
|
||
const labelClass = "text-sm font-semibold text-gray-800 block mb-2";
|
||
const checkboxClass = "w-5 h-5 text-[#4e6bff] rounded focus:ring-[#4e6bff] border-gray-300 flex-shrink-0 transition-colors cursor-pointer";
|
||
|
||
const ColorPickerSection = ({ label, selected, onChange }: { label: string, selected: string, onChange: (color: string) => void }) => (
|
||
<div className="space-y-2">
|
||
<label className={labelClass}>{label}</label>
|
||
<div className="flex flex-wrap gap-3">
|
||
{colorOptions.map((color) => (
|
||
<button
|
||
key={color.name}
|
||
type="button"
|
||
onClick={() => onChange(color.name)}
|
||
className={`w-9 h-9 rounded-full border flex items-center justify-center transition-all hover:scale-110 hover:shadow-md ${selected === color.name ? 'border-gray-800 ring-2 ring-offset-2 ring-gray-200 scale-110' : 'border-gray-200'}`}
|
||
style={{ backgroundColor: color.value }}
|
||
title={color.name}
|
||
>
|
||
{selected === color.name && <Check className={`w-4 h-4 ${['Fehér', 'Sárga'].includes(color.name) ? 'text-black' : 'text-white'}`} />}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<p className="text-xs text-gray-500 min-h-[1.25rem]">{selected ? `Választott: ${selected}` : ''}</p>
|
||
</div>
|
||
);
|
||
|
||
if (isSubmitted) {
|
||
return (
|
||
<div id="order-form-container" className="bg-white rounded-3xl shadow-xl p-12 text-center border border-gray-100 animate-fade-in-up scroll-mt-24 max-w-4xl mx-auto">
|
||
<div className="w-24 h-24 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||
<CheckCircle className="w-12 h-12 text-green-500" />
|
||
</div>
|
||
<h2 className="text-3xl font-extrabold text-gray-900 mb-4">Rendelését sikeresen rögzítettük!</h2>
|
||
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||
Átirányítjuk az előlegfizetési oldalra. Amennyiben ez nem történik meg, kollégáink hamarosan felveszik Önnel a kapcsolatot.
|
||
</p>
|
||
<Button onClick={() => { setIsSubmitted(false); setCurrentStep(1); }} variant="outline">Új űrlap kitöltése</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div id="order-form-container" className="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 scroll-mt-24 transition-all duration-500 flex flex-col relative">
|
||
{/* Light Gradient Header & Step Navigation */}
|
||
<div className="bg-gradient-to-br from-[#eef2ff] to-[#f5f3ff] pt-12 pb-8 px-6 md:px-12 border-b border-white shadow-sm">
|
||
<div className="text-center mb-10">
|
||
<h2 className="text-3xl md:text-4xl font-extrabold text-[#111827] mb-3">Rendelés Leadása</h2>
|
||
<p className="text--[#4b5563] text-lg max-w-2xl mx-auto">Töltse ki az űrlapot a pontos ajánlatadáshoz, és segítünk megvalósítani elképzeléseit.</p>
|
||
</div>
|
||
|
||
{/* Desktop Stepper Navigation */}
|
||
<div className="hidden lg:flex justify-between items-center relative max-w-6xl mx-auto px-4 mb-4">
|
||
{/* Background Line */}
|
||
<div className="absolute left-4 right-4 top-5 transform -translate-y-1/2 h-1 bg-gray-200 rounded-full -z-10" />
|
||
{/* Active Progress Line */}
|
||
<div
|
||
className="absolute left-4 top-5 transform -translate-y-1/2 h-1 bg-[#4e6bff] rounded-full -z-10 transition-all duration-500 ease-out"
|
||
style={{ width: `${((currentStep - 1) / (totalSteps - 1)) * 96}%` }} // 96% to account for padding
|
||
/>
|
||
|
||
{steps.map((step) => {
|
||
const isActive = step.id === currentStep;
|
||
const isCompleted = step.id < currentStep;
|
||
|
||
return (
|
||
<div key={step.id} className="relative flex flex-col items-center group">
|
||
<div className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 border-2 z-10 ${
|
||
isActive
|
||
? 'bg-[#4e6bff] border-[#4e6bff] text-white shadow-[0_0_0_4px_rgba(78,107,255,0.2)] scale-110'
|
||
: isCompleted
|
||
? 'bg-[#4e6bff] border-[#4e6bff] text-white'
|
||
: 'bg-white border-gray-300 text-gray-400'
|
||
}`}>
|
||
{isCompleted ? <Check className="w-5 h-5" /> : <step.icon className="w-5 h-5" />}
|
||
</div>
|
||
<div className={`absolute top-12 text-xs font-semibold whitespace-nowrap transition-all duration-300 ${
|
||
isActive ? 'text-[#4e6bff] translate-y-0 opacity-100' : 'text-[#6b7280] translate-y-1'
|
||
}`}>
|
||
{step.title}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Mobile/Tablet Progress Bar */}
|
||
<div className="lg:hidden max-w-2xl mx-auto">
|
||
<div className="flex justify-between text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">
|
||
<span>Lépés {currentStep} / {totalSteps}</span>
|
||
<span className="text-[#4e6bff]">{steps[currentStep - 1].title}</span>
|
||
</div>
|
||
<div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full bg-[#4e6bff] shadow-[0_0_10px_rgba(78,107,255,0.5)] transition-all duration-500 ease-out"
|
||
style={{ width: `${(currentStep / totalSteps) * 100}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6 md:p-12 min-h-[400px] bg-white">
|
||
{errors.length > 0 && (
|
||
<div className="bg-red-50 border border-red-100 text-red-600 px-4 py-3 rounded-xl flex items-start gap-3 mb-8 animate-fade-in shadow-sm">
|
||
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<p className="font-bold">Kérjük, javítsa a következő hibákat:</p>
|
||
<ul className="list-disc list-inside text-sm mt-1 opacity-80">
|
||
{errors.map((err, idx) => <li key={idx}>{err}</li>)}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{submitError && (
|
||
<div className="bg-red-50 border border-red-100 text-red-600 px-4 py-3 rounded-xl flex items-start gap-3 mb-8 animate-fade-in shadow-sm">
|
||
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
||
<div>{submitError}</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 1: Kapcsolattartási adatok */}
|
||
{currentStep === 1 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<User className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Kapcsolattartási adatok</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className={labelClass}>Név <span className="text-red-500">*</span></label>
|
||
<input type="text" name="name" value={formData.name} onChange={handleInputChange} placeholder="Add meg a neved" className={inputClass} />
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>Cég neve <span className="text-gray-400 font-normal">(opcionális)</span></label>
|
||
<input type="text" name="company" value={formData.company} onChange={handleInputChange} placeholder="Ha van céged, írd ide a nevét" className={inputClass} />
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>E-mail cím <span className="text-red-500">*</span></label>
|
||
<input type="email" name="email" value={formData.email} onChange={handleInputChange} placeholder="valami@valami.hu" className={inputClass} readOnly />
|
||
<p className="text-xs text-gray-500 mt-1">A bejelentkezett e-mail címed.</p>
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>Telefonszám <span className="text-red-500">*</span></label>
|
||
<input type="tel" name="phone" value={formData.phone} onChange={handleInputChange} placeholder="+36..." className={inputClass} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-4">
|
||
<label className={labelClass}>Választott csomag</label>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
{['Landing Page', 'Pro Web', 'Enterprise'].map((pkg) => (
|
||
<label key={pkg} className={`relative flex items-center gap-3 px-4 py-4 rounded-xl border-2 cursor-pointer transition-all ${formData.package === pkg ? 'border-[#4e6bff] bg-blue-50/30' : 'border-gray-100 bg-gray-50 hover:border-gray-200'}`}>
|
||
<input type="radio" name="package" value={pkg} checked={formData.package === pkg} onChange={(e) => setFormData({...formData, package: e.target.value})} className="sr-only" />
|
||
<div className={`w-5 h-5 rounded-full border-2 flex-shrink-0 flex items-center justify-center ${formData.package === pkg ? 'border-[#4e6bff]' : 'border-gray-300'}`}>
|
||
{formData.package === pkg && <div className="w-2.5 h-2.5 rounded-full bg-[#4e6bff]" />}
|
||
</div>
|
||
<span className={`font-bold text-sm sm:text-base ${formData.package === pkg ? 'text-[#4e6bff]' : 'text-gray-700'}`}>{pkg}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 2 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<FileText className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">A vállalkozás rövid bemutatása</h3>
|
||
</div>
|
||
|
||
<div>
|
||
<label className={labelClass}>Mivel foglalkozik a cég?</label>
|
||
<textarea name="description" rows={6} value={formData.description} onChange={handleInputChange} placeholder="Pl.: vízszereléssel és háztartási gépek javításával foglalkozunk." className={inputClass}></textarea>
|
||
<p className="text-sm text-gray-500 mt-2 bg-gray-50 p-3 rounded-lg border border-gray-100 inline-block">💡 Tipp: Írjon le mindent, amit fontosnak tart a tevékenységével kapcsolatban.</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 3 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<Target className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Mi a weboldal fő célja?</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{['Cég bemutatása', 'Termék / szolgáltatás értékesítés', 'Időpontfoglalás vagy ügyfélszerzés', 'Hírlevél / e-mail lista építése', 'Közösségépítés', 'Egyéb'].map((goal) => (
|
||
<div key={goal}>
|
||
<label className={`flex items-center space-x-3 cursor-pointer p-4 rounded-xl border transition-all h-full shadow-sm ${formData.goals.includes(goal) ? 'border-[#4e6bff] bg-blue-50/20' : 'border-gray-200 bg-white hover:border-gray-300'}`}>
|
||
<input type="checkbox" checked={formData.goals.includes(goal)} onChange={() => handleCheckboxChange('goals', goal)} className={checkboxClass} />
|
||
<span className="text-gray-900 font-medium">{goal}</span>
|
||
</label>
|
||
{goal === 'Egyéb' && formData.goals.includes('Egyéb') && (
|
||
<div className="mt-2 animate-fade-in">
|
||
<input type="text" name="goalOther" value={formData.goalOther} onChange={handleInputChange} placeholder="Kérjük fejtse ki..." className={`${inputClass} text-sm py-2`} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="space-y-2 pt-4">
|
||
<label className={labelClass}>Mi számít sikernek a weboldal esetében? <span className="text-gray-400 font-normal">(opcionális)</span></label>
|
||
<input type="text" name="successCriteria" value={formData.successCriteria} onChange={handleInputChange} placeholder="Több megrendelés, több hívás, több látogató..." className={inputClass} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 4 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<Layout className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Tartalom és szerkezet</h3>
|
||
</div>
|
||
|
||
<div>
|
||
<label className={labelClass}>Milyen aloldalakat tervez?</label>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
{['Rólunk', 'Szolgáltatások', 'Termékek', 'Referenciák / Vélemények', 'Blog / Hírek', 'Kapcsolat', 'Egyéb'].map((item) => (
|
||
<div key={item}>
|
||
<label className={`flex items-center space-x-3 cursor-pointer p-3 rounded-lg border transition-all ${formData.content.includes(item) ? 'border-[#4e6bff] bg-blue-50/20' : 'border-transparent hover:bg-gray-50'}`}>
|
||
<input type="checkbox" checked={formData.content.includes(item)} onChange={() => handleCheckboxChange('content', item)} className={checkboxClass} />
|
||
<span className="text-gray-800 font-medium">{item}</span>
|
||
</label>
|
||
{item === 'Egyéb' && formData.content.includes('Egyéb') && (
|
||
<input type="text" name="contentOther" value={formData.contentOther} onChange={handleInputChange} placeholder="Egyéb oldalak..." className={`${inputClass} mt-1 py-2 text-sm`} />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-8 border-t border-gray-100">
|
||
<label className={labelClass}>Van már meglévő szöveg, kép vagy logó?</label>
|
||
<div className="flex flex-wrap gap-4 mt-3">
|
||
{['Igen', 'Nem', 'Részben'].map((opt) => (
|
||
<label key={opt} className={`flex items-center gap-3 px-5 py-3 rounded-lg border cursor-pointer transition-all ${formData.existingAssets === opt ? 'border-[#4e6bff] bg-blue-50/20 text-[#4e6bff]' : 'border-gray-200 bg-white hover:bg-gray-50 text-gray-700'}`}>
|
||
<input type="radio" name="existingAssets" value={opt} checked={formData.existingAssets === opt} onChange={(e) => setFormData({...formData, existingAssets: e.target.value as any})} className="w-4 h-4 text-[#4e6bff] focus:ring-[#4e6bff]" />
|
||
<span className="font-semibold">{opt}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
|
||
{/* Content Upload / Link Section */}
|
||
{(formData.existingAssets === 'Igen' || formData.existingAssets === 'Részben') && (
|
||
<div className="mt-6 bg-blue-50 border border-blue-100 p-6 rounded-xl animate-fade-in">
|
||
<h4 className="font-bold text-blue-900 mb-3 flex items-center gap-2">
|
||
<Cloud className="w-5 h-5" /> Tartalom megosztása
|
||
</h4>
|
||
<p className="text-sm text-blue-800 mb-4">
|
||
Kérjük, töltse fel a meglévő tartalmakat (képek, szövegek, logó) egy felhő tárhelyre (pl. Google Drive) és ossza meg a linket, vagy töltsön fel fájlt (max 1GB).
|
||
</p>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className={labelClass}>Felhő mappa linkje</label>
|
||
<input
|
||
type="url"
|
||
name="contentLink"
|
||
value={formData.contentLink}
|
||
onChange={handleInputChange}
|
||
placeholder="https://drive.google.com/..."
|
||
className={inputClass}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>Vagy fájl feltöltése</label>
|
||
<div className="border-2 border-dashed border-blue-200 rounded-lg p-6 bg-white text-center hover:bg-blue-50/50 transition-colors cursor-pointer relative group">
|
||
<Upload className="w-8 h-8 text-blue-400 mx-auto mb-2" />
|
||
<p className="text-sm text-gray-500">Kattintson a feltöltéshez vagy húzza ide a fájlt</p>
|
||
<p className="text-xs text-gray-400 mt-1">(Max 1GB)</p>
|
||
<input type="file" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" title="Fájl feltöltése" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 5 && (
|
||
<div className="space-y-8 animate-fade-in max-w-4xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<Palette className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Design és stílus</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 p-8 bg-gray-50/50 rounded-3xl border border-gray-100">
|
||
<ColorPickerSection label="Főszín" selected={formData.primaryColor} onChange={(c) => setFormData(prev => ({ ...prev, primaryColor: c }))} />
|
||
<ColorPickerSection label="Mellékszín" selected={formData.secondaryColor} onChange={(c) => setFormData(prev => ({ ...prev, secondaryColor: c }))} />
|
||
<ColorPickerSection label="Kiegyensúlyozó szín" selected={formData.balanceColor} onChange={(c) => setFormData(prev => ({ ...prev, balanceColor: c }))} />
|
||
</div>
|
||
|
||
<div className="space-y-3 pt-4">
|
||
<label className={labelClass}>Weboldal stílusa:</label>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||
{styleOptions.map((style) => (
|
||
<label key={style} className={`flex items-center space-x-3 cursor-pointer p-4 rounded-xl border shadow-sm transition-all ${formData.style.includes(style) ? 'border-[#4e6bff] bg-blue-50/20' : 'border-gray-200 bg-white hover:border-gray-300'}`}>
|
||
<input type="checkbox" checked={formData.style.includes(style)} onChange={() => handleCheckboxChange('style', style)} className={checkboxClass} />
|
||
<span className="text-gray-900 text-sm font-semibold">{style}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className={labelClass}>Célcsoport <span className="text-gray-400 font-normal">(opcionális)</span></label>
|
||
<input type="text" name="targetAudience" value={formData.targetAudience} onChange={handleInputChange} placeholder="Pl.: 18–30 éves fiatalok, középkorú nők, vállalkozók stb." className={inputClass} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 6 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<Zap className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Funkciók és technikai igények</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{['Kapcsolatfelvételi űrlap', 'Időpontfoglalás rendszer', 'Hírlevél-feliratkozás', 'Webshop / fizetési lehetőség', 'Blog / hírek', 'Többnyelvűség', 'Képgaléria / videógaléria', 'Google Térkép integráció', 'Chat gomb (Messenger / WhatsApp)'].map((feat) => (
|
||
<label key={feat} className={`flex items-center space-x-3 cursor-pointer p-4 rounded-xl border shadow-sm transition-all ${formData.features.includes(feat) ? 'border-[#4e6bff] bg-blue-50/20' : 'border-gray-200 bg-white hover:border-gray-300'}`}>
|
||
<input type="checkbox" checked={formData.features.includes(feat)} onChange={() => handleCheckboxChange('features', feat)} className={checkboxClass} />
|
||
<span className="text-gray-900 font-medium">{feat}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 7 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<Lightbulb className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Inspirációk</h3>
|
||
<p className="text-gray-500 mt-2">Segítsen megérteni az ízlését!</p>
|
||
</div>
|
||
|
||
<div className="bg-blue-50 border border-blue-100 p-5 rounded-xl text-blue-800 text-sm mb-6 flex items-start gap-3">
|
||
<div className="bg-white p-1 rounded-full"><Lightbulb className="w-4 h-4 text-[#4e6bff]" /></div>
|
||
<p>Osszon meg velünk 3 weboldalt, ami tetszik, és írja le röviden, miért (pl. színek, elrendezés, hangulat).</p>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{[0, 1, 2].map((i) => (
|
||
<div key={i} className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-gray-50/50 p-6 rounded-2xl border border-gray-100 hover:shadow-md transition-all">
|
||
<div>
|
||
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 block">Weboldal {i+1} URL</label>
|
||
<div className="relative">
|
||
<Globe className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
|
||
<input
|
||
type="url"
|
||
value={formData.inspirations[i].url}
|
||
onChange={(e) => handleInspirationChange(i, 'url', e.target.value)}
|
||
placeholder="https://pelda.hu"
|
||
className={`${inputClass} pl-9`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 block">Mi tetszik benne?</label>
|
||
<input
|
||
type="text"
|
||
value={formData.inspirations[i].comment}
|
||
onChange={(e) => handleInspirationChange(i, 'comment', e.target.value)}
|
||
placeholder="Színek, elrendezés, animációk..."
|
||
className={inputClass}
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 8 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<Settings className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Extra szolgáltatások és Megjegyzések</h3>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<label className={labelClass}>Igényelt extra szolgáltatások:</label>
|
||
<div className="flex flex-wrap gap-4">
|
||
{['SEO optimalizálás', 'Szövegírás', 'Domain ügyintézés', 'Tárhely ügyintézés'].map((extra) => (
|
||
<label key={extra} className={`flex items-center space-x-3 cursor-pointer select-none p-3 rounded-lg border transition-all ${formData.extras.includes(extra) ? 'border-[#4e6bff] bg-blue-50/20' : 'border-gray-200 bg-white hover:border-gray-300'}`}>
|
||
<input type="checkbox" checked={formData.extras.includes(extra)} onChange={() => handleCheckboxChange('extras', extra)} className={checkboxClass} />
|
||
<span className="text-gray-900 font-medium">{extra}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
|
||
{/* Dynamic Content */}
|
||
<div className="space-y-4">
|
||
{formData.extras.includes('Domain ügyintézés') && (
|
||
<div className="bg-blue-50 border border-blue-100 p-6 rounded-xl animate-fade-in">
|
||
<label className="text-sm font-semibold text-blue-900 block mb-2">Add meg a kívánt domain nevet:</label>
|
||
<div className="relative">
|
||
<Globe className="absolute left-3 top-3 w-5 h-5 text-blue-400" />
|
||
<input type="text" name="domainName" value={formData.domainName} onChange={handleInputChange} placeholder="azencegem.hu" className={`${inputClass} pl-10 border-blue-200 focus:ring-blue-300`} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Domain Warning */}
|
||
{!formData.extras.includes('Domain ügyintézés') && (
|
||
<div className="bg-yellow-50 border border-yellow-100 p-6 rounded-xl flex items-start gap-4 animate-fade-in text-yellow-900 mt-2">
|
||
<div className="bg-white p-2 rounded-full shadow-sm"><Globe className="w-5 h-5 text-yellow-600" /></div>
|
||
<div className="text-sm leading-relaxed">
|
||
<strong>Figyelem:</strong> Nem jelölte be a domain ügyintézést. Kérjük győződjön meg róla, hogy rendelkezik saját domain névvel, vagy a későbbiekben tudja biztosítani a DNS beállításokat.
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{!formData.extras.includes('Tárhely ügyintézés') && (
|
||
<div className="bg-orange-50 border border-orange-100 p-6 rounded-xl flex items-start gap-4 animate-fade-in text-orange-900">
|
||
<div className="bg-white p-2 rounded-full shadow-sm"><Server className="w-5 h-5 text-orange-500" /></div>
|
||
<div className="text-sm leading-relaxed">
|
||
<strong>Figyelem:</strong> Mivel nem jelölte be a tárhely ügyintézést, a weboldalt átadjuk (forráskód), de az üzemeltetést és a szerver beállítását nem a MotionWeb végzi.
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-8 border-t border-gray-100">
|
||
<label className={labelClass}>Megjegyzések, további kérések</label>
|
||
<textarea name="notes" rows={5} value={formData.notes} onChange={handleInputChange} placeholder="További ötletek, kérések, megjegyzések..." className={inputClass}></textarea>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 9: Összegzés */}
|
||
{currentStep === 9 && (
|
||
<div className="space-y-8 animate-fade-in max-w-3xl mx-auto">
|
||
<div className="text-center mb-8">
|
||
<div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-[#4e6bff]">
|
||
<ClipboardCheck className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">Rendelés összesítése</h3>
|
||
<p className="text-gray-500">Ellenőrizze az adatokat a véglegesítés előtt.</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
|
||
<div className="bg-gray-50 p-6 rounded-2xl border border-gray-200 space-y-4">
|
||
<div>
|
||
<h4 className="font-bold text-gray-400 uppercase tracking-wide text-xs mb-2">Kapcsolattartó</h4>
|
||
<p className="font-bold text-xl text-gray-900">{formData.name}</p>
|
||
<p className="text-gray-600">{formData.email}</p>
|
||
<p className="text-gray-600">{formData.phone}</p>
|
||
{formData.company && <p className="text-gray-600 font-medium mt-1">{formData.company}</p>}
|
||
</div>
|
||
<div className="pt-4 border-t border-gray-200">
|
||
<h4 className="font-bold text-gray-400 uppercase tracking-wide text-xs mb-2">Választott Csomag</h4>
|
||
<span className="inline-block bg-[#4e6bff] text-white px-4 py-1.5 rounded-full font-bold text-sm shadow-sm">{formData.package}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 p-6 rounded-2xl border border-gray-200 space-y-4">
|
||
<div>
|
||
<h4 className="font-bold text-gray-400 uppercase tracking-wide text-xs mb-2">Célok</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{formData.goals.length > 0 ? formData.goals.map(g => <span key={g} className="bg-white border border-gray-200 px-3 py-1 rounded-lg text-xs font-semibold text-gray-700 shadow-sm">{g}</span>) : <span className="text-gray-400 italic">Nincs megadva</span>}
|
||
</div>
|
||
</div>
|
||
<div className="pt-4 border-t border-gray-200">
|
||
<h4 className="font-bold text-gray-400 uppercase tracking-wide text-xs mb-2">Színvilág</h4>
|
||
<div className="flex gap-3">
|
||
{formData.primaryColor && <div className="w-8 h-8 rounded-full border border-gray-200 shadow-sm" style={{background: colorOptions.find(c => c.name === formData.primaryColor)?.value}} title="Főszín"></div>}
|
||
{formData.secondaryColor && <div className="w-8 h-8 rounded-full border border-gray-200 shadow-sm" style={{background: colorOptions.find(c => c.name === formData.secondaryColor)?.value}} title="Mellékszín"></div>}
|
||
{formData.balanceColor && <div className="w-8 h-8 rounded-full border border-gray-200 shadow-sm" style={{background: colorOptions.find(c => c.name === formData.balanceColor)?.value}} title="Kiegyensúlyozó"></div>}
|
||
{!formData.primaryColor && !formData.secondaryColor && !formData.balanceColor && <span className="text-gray-400 italic">Nincs színválasztás</span>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-[#4e6bff]/10 border border-[#4e6bff]/20 p-6 rounded-xl text-blue-900 text-sm">
|
||
<p className="font-bold mb-2">Mi történik a rendelés leadása után?</p>
|
||
<p className="opacity-90 leading-relaxed">
|
||
A "Rendelés leadása" gombra kattintva átirányítjuk az előlegfizetési oldalra. A sikeres tranzakciót követően kollégáink 48 órán belül felveszik Önnel a kapcsolatot a megadott elérhetőségeken a projekt indításához.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div className="flex items-start">
|
||
<div className="flex items-center h-5">
|
||
<input
|
||
id="privacy-order"
|
||
name="privacy"
|
||
type="checkbox"
|
||
required
|
||
checked={privacyAccepted}
|
||
onChange={(e) => setPrivacyAccepted(e.target.checked)}
|
||
className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded cursor-pointer"
|
||
/>
|
||
</div>
|
||
<div className="ml-3 text-sm">
|
||
<label htmlFor="privacy-order" className="font-medium text-gray-700">
|
||
Elfogadom az <Link to="/privacy" target="_blank" className="text-primary hover:underline">Adatkezelési tájékoztatót</Link>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start">
|
||
<div className="flex items-center h-5">
|
||
<input
|
||
id="aszf-order"
|
||
name="aszf"
|
||
type="checkbox"
|
||
required
|
||
checked={aszfAccepted}
|
||
onChange={(e) => setAszfAccepted(e.target.checked)}
|
||
className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded cursor-pointer"
|
||
/>
|
||
</div>
|
||
<div className="ml-3 text-sm">
|
||
<label htmlFor="aszf-order" className="font-medium text-gray-700">
|
||
Elfogadom az <Link to="/terms" target="_blank" className="text-primary hover:underline">Általános Szerződési Feltételeket (ÁSZF)</Link>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer Navigation */}
|
||
<div className="bg-white border-t border-gray-100 p-8 flex justify-between items-center rounded-b-2xl">
|
||
<Button
|
||
onClick={prevStep}
|
||
variant="white"
|
||
disabled={currentStep === 1 || isSubmitting}
|
||
className={`${currentStep === 1 ? 'opacity-0 pointer-events-none' : ''} border border-gray-200 text-gray-600 hover:bg-gray-50 px-6`}
|
||
>
|
||
<ArrowLeft className="w-4 h-4 mr-2" /> Vissza
|
||
</Button>
|
||
|
||
{currentStep < totalSteps ? (
|
||
<Button onClick={nextStep} className="bg-[#4e6bff] hover:bg-[#3d54cc] text-white shadow-lg shadow-blue-200 px-8 py-3 rounded-full hover:scale-105 transition-all">
|
||
Következő <ArrowRight className="w-4 h-4 ml-2" />
|
||
</Button>
|
||
) : (
|
||
<Button onClick={handleSubmit} disabled={isSubmitting} className="bg-gradient-to-r from-[#4e6bff] to-[#7c3aed] text-white shadow-xl hover:shadow-2xl hover:scale-105 transition-all px-10 py-4 text-lg rounded-full disabled:opacity-70 disabled:cursor-not-allowed">
|
||
{isSubmitting ? 'Küldés...' : (
|
||
<>Rendelés leadása <Send className="w-5 h-5 ml-2" /></>
|
||
)}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |