382 lines
14 KiB
TypeScript
382 lines
14 KiB
TypeScript
import React, { useState } from "react";
|
||
import {
|
||
Mail,
|
||
Phone,
|
||
MapPin,
|
||
FileText,
|
||
Building,
|
||
CalendarDays,
|
||
CalendarCheck,
|
||
MessageCircle,
|
||
} from "lucide-react";
|
||
import { useLanguage } from "../context/LanguageContext";
|
||
|
||
const Contact: React.FC = () => {
|
||
const { t } = useLanguage();
|
||
|
||
const [formData, setFormData] = useState({
|
||
company: "",
|
||
fullName: "",
|
||
email: "",
|
||
phone: "",
|
||
address: "",
|
||
branchCount: "",
|
||
userCount: "",
|
||
message: "",
|
||
});
|
||
|
||
const handleChange = (
|
||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||
) => {
|
||
const { name, value } = e.target;
|
||
setFormData((prev: any) => ({
|
||
...prev,
|
||
[name]: value,
|
||
}));
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||
e.preventDefault();
|
||
|
||
const apiUrl = `${import.meta.env.VITE_API_URL}/api/app/demo/demo-form`;
|
||
|
||
try {
|
||
const response = await fetch(apiUrl, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(formData),
|
||
});
|
||
|
||
if (response.ok) {
|
||
alert("Form başarıyla gönderildi.");
|
||
setFormData({
|
||
company: "",
|
||
fullName: "",
|
||
email: "",
|
||
phone: "",
|
||
address: "",
|
||
branchCount: "",
|
||
userCount: "",
|
||
message: "",
|
||
});
|
||
} else {
|
||
alert("Bir hata oluştu. Lütfen tekrar deneyin.");
|
||
}
|
||
} catch (error) {
|
||
console.error("Gönderim hatası:", error);
|
||
alert("Sunucuya ulaşılamıyor.");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* Hero Section */}
|
||
<div className="relative bg-blue-900 text-white py-24">
|
||
<div
|
||
className="absolute inset-0 opacity-20"
|
||
style={{
|
||
backgroundImage:
|
||
'url("https://images.pexels.com/photos/3183171/pexels-photo-3183171.jpeg?auto=compress&cs=tinysrgb&w=1920")',
|
||
backgroundSize: "cover",
|
||
backgroundPosition: "center",
|
||
}}
|
||
></div>
|
||
<div className="container mx-auto pt-16 px-4 relative">
|
||
<h1 className="text-5xl font-bold mb-6">{t("contact.title")}</h1>
|
||
<p className="text-xl max-w-3xl">{t("contact.subtitle")}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="py-16">
|
||
<div className="container mx-auto px-4">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
{/* Contact Information */}
|
||
<div className="space-y-4">
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||
{t("contact.info.title")}
|
||
</h2>
|
||
<div className="space-y-6">
|
||
<div className="flex items-start space-x-4">
|
||
<MapPin className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
|
||
<div>
|
||
<p className="text-gray-600">
|
||
{t("contact.address.full")}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-4">
|
||
<Phone className="w-6 h-6 text-blue-600 flex-shrink-0" />
|
||
<div>
|
||
<p className="text-gray-600">+90 (544) 769 7 638</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-4">
|
||
<Mail className="w-6 h-6 text-blue-600 flex-shrink-0" />
|
||
<div>
|
||
<p className="text-gray-600">
|
||
<a
|
||
href="mailto:destek@sozsoft.com"
|
||
className="hover:underline text-blue-600"
|
||
>
|
||
destek@sozsoft.com
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-4">
|
||
<Building className="w-6 h-6 text-blue-600 flex-shrink-0" />
|
||
<div>
|
||
<p className="text-gray-600">Kozyatağı</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-4">
|
||
<FileText className="w-6 h-6 text-blue-600 flex-shrink-0" />
|
||
<div>
|
||
<p className="text-gray-600">32374982750</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||
{t("contact.bank.title")}
|
||
</h2>
|
||
<div className="space-y-4">
|
||
<img
|
||
src="/img/enpara.svg"
|
||
alt="Enpara Logo"
|
||
className="w-24 object-contain mt-1 flex-shrink-0"
|
||
/>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900">
|
||
Özlem Öztürk
|
||
</h3>
|
||
<p className="text-gray-600">
|
||
03663 / Enpara
|
||
<br />
|
||
73941177
|
||
<br />
|
||
TR65 0011 1000 0000 0073 9411 77
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bank Information */}
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||
{t("contact.workHours")}
|
||
</h2>
|
||
<div className="space-y-4">
|
||
<div className="flex items-start space-x-4">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<CalendarDays className="w-5 h-5 text-blue-500" />
|
||
<p className="text-gray-600">
|
||
{t("contact.workHours.weekday")}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<CalendarCheck className="w-5 h-5 text-blue-500" />
|
||
<p className="text-gray-600">
|
||
{t("contact.workHours.weekend")}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<MessageCircle className="w-5 h-5 text-green-500" />
|
||
<p className="text-gray-600">
|
||
{t("contact.workHours.whatsapp")}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-8">
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||
{t("demo.form.title")}
|
||
</h2>
|
||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label
|
||
htmlFor="company"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.company") || "Şirket Adı"}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="company"
|
||
name="company"
|
||
value={formData.company}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label
|
||
htmlFor="fullName"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.fullName") || "Adınız Soyadınız"}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="fullName"
|
||
name="fullName"
|
||
value={formData.fullName}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label
|
||
htmlFor="email"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.email")}
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
name="email"
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label
|
||
htmlFor="phone"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.phone")}
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
name="phone"
|
||
value={formData.phone}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label
|
||
htmlFor="address"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.address")}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="address"
|
||
name="address"
|
||
value={formData.address}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label
|
||
htmlFor="branchCount"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.branchCount") || "Şube Adedi"}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
id="branchCount"
|
||
name="branchCount"
|
||
value={formData.branchCount}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label
|
||
htmlFor="userCount"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.userCount") || "Kullanıcı Adedi"}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
id="userCount"
|
||
name="userCount"
|
||
value={formData.userCount}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label
|
||
htmlFor="message"
|
||
className="block text-sm font-medium text-gray-700 mb-2"
|
||
>
|
||
{t("common.message")}
|
||
</label>
|
||
<textarea
|
||
id="message"
|
||
name="message"
|
||
rows={10}
|
||
value={formData.message}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors font-semibold"
|
||
>
|
||
{t("common.send")}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Map Section */}
|
||
<div className="bg-white py-16">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
|
||
{t("contact.location")}
|
||
</h2>
|
||
<div className="aspect-w-16 aspect-h-9 bg-gray-200 rounded-xl overflow-hidden">
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3006.209566407676!2d28.757000999999992!3d41.10811400000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8a0bbbdfcfd3fd24!2zU8O2enNvZnQ!5e0!3m2!1str!2str!4v1450816303558"
|
||
width="100%"
|
||
height="450"
|
||
style={{ border: 0 }}
|
||
allowFullScreen
|
||
loading="lazy"
|
||
referrerPolicy="no-referrer-when-downgrade"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Contact;
|