new web sayt
This commit is contained in:
nabijonovdavronbek619@gmail.com
242
components/ContactForm.tsx
Normal file
242
components/ContactForm.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { sendContactMessage } from "@/lib/api";
|
||||
import { Phone, MessageSquare, MapPin } from "lucide-react";
|
||||
|
||||
export function ContactForm() {
|
||||
const t = useTranslations();
|
||||
const pathname = usePathname();
|
||||
const locale = (pathname.split("/")[1] || "uz") as "uz" | "ru";
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
message: "",
|
||||
productSlug: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<{
|
||||
type: "success" | "error";
|
||||
text: string;
|
||||
} | null>(null);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>
|
||||
) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const result = await sendContactMessage({
|
||||
...formData,
|
||||
lang: locale,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
setMessage({ type: "success", text: t("contact.success") });
|
||||
setFormData({ name: "", phone: "", message: "", productSlug: "" });
|
||||
} else {
|
||||
setMessage({ type: "error", text: t("contact.error") });
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: "error", text: t("contact.error") });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="contact"
|
||||
className="py-20 bg-linear-to-br from-blue-50 to-indigo-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{t("contact.title")}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Get In Touch
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Reach out to us for inquiries, support, or partnership
|
||||
opportunities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Methods */}
|
||||
{[
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Phone",
|
||||
value: "+998 (99) 123-45-67",
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Telegram",
|
||||
value: "@firma_support",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Address",
|
||||
value: "Tashkent, Uzbekistan",
|
||||
},
|
||||
].map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
whileHover={{ x: 5 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<Icon className="text-blue-600 shrink-0" size={24} />
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-600">{item.value}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
|
||||
{/* Form */}
|
||||
<motion.form
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-white rounded-lg shadow-lg p-8"
|
||||
>
|
||||
{/* Name */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.name")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder={t("contact.namePlaceholder")}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.phone")} *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder={t("contact.phonePlaceholder")}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.message")}
|
||||
</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder={t("contact.messagePlaceholder")}
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Select */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.product")}
|
||||
</label>
|
||||
<select
|
||||
name="productSlug"
|
||||
value={formData.productSlug}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select a product...</option>
|
||||
<option value="schotchik-pump">Schotchik Pump</option>
|
||||
<option value="agregat-pump">Agregat Pump</option>
|
||||
<option value="ccl-20-24-pump">CCL 20/24 Pump</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Message Alert */}
|
||||
{message && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`mb-6 p-4 rounded-lg ${
|
||||
message.type === "success"
|
||||
? "bg-green-50 text-green-700 border border-green-200"
|
||||
: "bg-red-50 text-red-700 border border-red-200"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? "Sending..." : t("contact.send")}
|
||||
</motion.button>
|
||||
</motion.form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user