138 lines
4.7 KiB
TypeScript
138 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import type React from "react";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { MessageSquare } from "lucide-react";
|
|
import { useLanguage } from "@/contexts/language-context";
|
|
|
|
export default function Contact() {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
message: "",
|
|
});
|
|
const { t } = useLanguage();
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission
|
|
console.log(formData);
|
|
};
|
|
|
|
return (
|
|
<section id="contact" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
|
{t.contact.title}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">{t.contact.subtitle}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{/* Form */}
|
|
<div className="bg-muted rounded-xl p-8 border border-border">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
{t.contact.fields.name}
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder={t.contact.fields.name}
|
|
className="bg-background border-border"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
{t.contact.fields.email}
|
|
</label>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder={t.contact.fields.email}
|
|
className="bg-background border-border"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
{t.contact.fields.message}
|
|
</label>
|
|
<textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder={t.contact.fields.message}
|
|
className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
rows={4}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<Button className="w-full bg-primary hover:bg-primary/90">
|
|
{t.contact.fields.send}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact Info */}
|
|
<div className="flex flex-col justify-between space-y-6">
|
|
<div className="bg-background rounded-xl p-6 border border-border">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
|
|
<MessageSquare size={24} className="text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold text-foreground mb-2">
|
|
{t.contact.whatsapp.title}
|
|
</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
{t.contact.whatsapp.desc}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full border-primary text-primary hover:bg-primary/90 bg-transparent"
|
|
>
|
|
{t.contact.open}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-xl p-6 border border-border">
|
|
<h3 className="font-semibold text-foreground mb-2">
|
|
{t.contact.email.title}
|
|
</h3>
|
|
<p className="text-muted-foreground">{t.contact.email.address}</p>
|
|
</div>
|
|
|
|
<div className="bg-background rounded-xl p-6 border border-border">
|
|
<h3 className="font-semibold text-foreground mb-2">
|
|
{t.contact.response.title}
|
|
</h3>
|
|
<p className="text-muted-foreground">{t.contact.response.desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|