first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { motion } from 'framer-motion';
|
||||
import { MapPin, Phone, Send } from 'lucide-react';
|
||||
import { Instagram } from '@/components/InstagramIcon';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function Contact() {
|
||||
const t = useTranslations('Contact');
|
||||
const [formData, setFormData] = useState({ name: '', date: '', guests: '', message: '' });
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
|
||||
const text = `*Yeni Rezervasyon Talebi*%0A%0A*Ad Soyad:* ${formData.name}%0A*Tarih:* ${formData.date}%0A*Kişi Sayısı:* ${formData.guests}%0A*Mesaj:* ${formData.message}`;
|
||||
window.open(`https://wa.me/${phone}?text=${text}`, '_blank');
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const contactItems = [
|
||||
{
|
||||
Icon: MapPin,
|
||||
label: 'Adres',
|
||||
value: t('address'),
|
||||
color: 'text-coral',
|
||||
bg: 'bg-coral/10',
|
||||
},
|
||||
{
|
||||
Icon: Phone,
|
||||
label: 'Telefon / WhatsApp',
|
||||
value: `+${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '90 500 000 00 00'}`,
|
||||
color: 'text-aqua',
|
||||
bg: 'bg-aqua/10',
|
||||
},
|
||||
{
|
||||
Icon: Instagram,
|
||||
label: 'Instagram',
|
||||
value: '@kozmosbeach',
|
||||
href: 'https://www.instagram.com/kozmosbeach/',
|
||||
color: 'text-amber',
|
||||
bg: 'bg-amber/10',
|
||||
},
|
||||
];
|
||||
|
||||
const inputClass =
|
||||
'w-full bg-sand border border-sandy rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-coral focus:ring-1 focus:ring-coral transition-all placeholder:text-midnight/30';
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-28 bg-sandy/25 text-midnight">
|
||||
<div className="container mx-auto px-6 lg:px-12">
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<span className="text-xs tracking-[0.4em] uppercase font-black text-coral mb-4 block">
|
||||
— Bize Ulaşın
|
||||
</span>
|
||||
<h2 className="font-heading text-5xl md:text-6xl font-black text-midnight">
|
||||
{t('title')}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
|
||||
{/* Left: info + form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{/* Contact info */}
|
||||
<div className="space-y-5">
|
||||
{contactItems.map(({ Icon, label, value, href, color, bg }) => (
|
||||
<div key={label} className="flex items-start gap-4">
|
||||
<div className={`p-3 rounded-xl ${bg} ${color} flex-shrink-0`}>
|
||||
<Icon size={19} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-sm text-midnight/50 mb-0.5">{label}</p>
|
||||
{href ? (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={`${color} font-medium hover:underline`}
|
||||
>
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-midnight font-medium">{value}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-white p-8 rounded-3xl shadow-sm border border-sandy space-y-5"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
|
||||
{t('form.name')}
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
|
||||
{t('form.date')}
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="date"
|
||||
name="date"
|
||||
value={formData.date}
|
||||
onChange={handleChange}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
|
||||
{t('form.guests')}
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="number"
|
||||
min="1"
|
||||
name="guests"
|
||||
value={formData.guests}
|
||||
onChange={handleChange}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
|
||||
{t('form.message')}
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className={inputClass + ' resize-none'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-4 rounded-2xl font-black text-sm text-white flex items-center justify-center gap-2 hover:opacity-90 hover:scale-[1.01] transition-all shadow-md"
|
||||
style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827)' }}
|
||||
>
|
||||
<Send size={15} />
|
||||
{t('form.submit')}
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
|
||||
{/* Right: map */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="min-h-[420px] lg:min-h-[600px] w-full rounded-3xl overflow-hidden shadow-2xl"
|
||||
>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12754.717654763133!2d28.3144!3d36.9507!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14bf76ccf312ba37%3A0xcdaaa97b102b4bb7!2sAkyaka%2C%20Ula%2FMu%C4%9Fla!5e0!3m2!1str!2str!4v1700000000000!5m2!1str!2str"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user