htamas1210/MotionWebStudio
1
0
Fork 0
mirror of https://github.com/Motion-Games/MotionWebStudio.git synced 2026-04-21 09:00:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
htom
2025-12-21 20:40:32 +01:00
commit c7f669fc11
54 changed files with 7575 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
pages/Contact.tsx Normal file
View File

@@ -0,0 +1,169 @@
import React, { useState } from 'react';
import { Mail, Phone, MapPin, Send } from 'lucide-react';
import { Button } from '../components/Button';
export const Contact: React.FC = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
service: 'webdev',
message: ''
});
const [submitted, setSubmitted] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Simulate API call
console.log('Form submitted:', formData);
setSubmitted(true);
setTimeout(() => setSubmitted(false), 5000);
};
return (
<div className="pt-20 bg-white min-h-screen">
<div className="bg-gray-900 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 className="text-4xl font-extrabold text-white mb-4">Lépjen velünk kapcsolatba</h1>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
Készen áll arra, hogy megvalósítsa elképzeléseit? Töltse ki az űrlapot, és hamarosan felvesszük Önnel a kapcsolatot!
</p>
</div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 -mt-10">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Contact Info Card */}
<div className="bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-xl p-8 text-white h-fit">
<h3 className="text-2xl font-bold mb-6">Elérhetőségeink</h3>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="p-3 bg-white/20 rounded-lg">
<Phone className="w-6 h-6" />
</div>
<div>
<p className="text-blue-100 text-sm">Telefon</p>
<p className="font-semibold">+36 30 123 4567</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="p-3 bg-white/20 rounded-lg">
<Mail className="w-6 h-6" />
</div>
<div>
<p className="text-blue-100 text-sm">E-mail</p>
<p className="font-semibold">info@motionweb.hu</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="p-3 bg-white/20 rounded-lg">
<MapPin className="w-6 h-6" />
</div>
<div>
<p className="text-blue-100 text-sm">Iroda</p>
<p className="font-semibold">Budapest, Magyarország</p>
</div>
</div>
</div>
</div>
{/* Form */}
<div className="lg:col-span-2 bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
{submitted ? (
<div className="h-full flex flex-col items-center justify-center text-center py-10">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
<Send className="w-8 h-8 text-green-600" />
</div>
<h3 className="text-2xl font-bold text-gray-900 mb-2">Köszönjük megkeresését!</h3>
<p className="text-gray-600">Munkatársunk hamarosan felveszi Önnel a kapcsolatot a megadott elérhetőségeken.</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Név</label>
<input
type="text"
name="name"
id="name"
required
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
placeholder="Teljes név"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">E-mail cím</label>
<input
type="email"
name="email"
id="email"
required
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
placeholder="pelda@email.com"
value={formData.email}
onChange={handleChange}
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Telefonszám</label>
<input
type="tel"
name="phone"
id="phone"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
placeholder="+36 30 123 4567"
value={formData.phone}
onChange={handleChange}
/>
</div>
<div>
<label htmlFor="service" className="block text-sm font-medium text-gray-700 mb-1">Érdeklődés tárgya</label>
<select
name="service"
id="service"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
value={formData.service}
onChange={handleChange}
>
<option value="webdev">Egyedi Weboldal</option>
<option value="webshop">Webshop</option>
<option value="marketing">SEO & Marketing</option>
<option value="other">Egyéb</option>
</select>
</div>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Üzenet</label>
<textarea
name="message"
id="message"
rows={4}
required
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
placeholder="Írja le röviden elképzeléseit..."
value={formData.message}
onChange={handleChange}
></textarea>
</div>
<div className="pt-2">
<Button type="submit" size="lg" fullWidth>Ajánlatkérés küldése</Button>
</div>
</form>
)}
</div>
</div>
</div>
</div>
);
};