feat: add project files
This commit is contained in:
mstfyldz
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Calendar, Users, Coffee } from "lucide-react";
|
||||
|
||||
export default function Reservation() {
|
||||
return (
|
||||
<section id="reservation" className="py-24 bg-white relative overflow-hidden">
|
||||
{/* Decorative background blobs */}
|
||||
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-sand-light rounded-full blur-3xl opacity-60 -translate-y-1/2 translate-x-1/3 pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 w-[380px] h-[380px] bg-coral-light/15 rounded-full blur-3xl opacity-50 translate-y-1/2 -translate-x-1/3 pointer-events-none" />
|
||||
|
||||
<div className="container mx-auto px-6 max-w-5xl relative z-10">
|
||||
<div className="bg-sea-dark rounded-[2.5rem] p-8 md:p-14 shadow-2xl overflow-hidden relative">
|
||||
{/* Inner glow */}
|
||||
<div className="absolute top-0 right-0 w-72 h-72 bg-sea-light rounded-full blur-3xl opacity-25 -translate-y-1/2 translate-x-1/2 pointer-events-none" />
|
||||
|
||||
<div className="text-center mb-12 relative z-10 text-white">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<span className="w-8 h-px bg-coral/70" />
|
||||
<h2 className="text-sm font-bold tracking-widest uppercase text-coral">Hemen Yerinizi Ayırtın</h2>
|
||||
<span className="w-8 h-px bg-coral/70" />
|
||||
</div>
|
||||
<h3 className="text-4xl md:text-5xl font-serif mb-4">Rezervasyon Talebi</h3>
|
||||
<p className="text-sand-light/80 max-w-2xl mx-auto text-sm leading-relaxed">
|
||||
Unutulmaz bir Ege deneyimi için hemen formumuzu doldurun, ekibimiz en kısa sürede sizinle iletişime geçsin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.form
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="relative z-10 bg-white p-7 md:p-10 rounded-2xl shadow-xl max-w-4xl mx-auto"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="grid md:grid-cols-3 gap-5 mb-6">
|
||||
|
||||
{/* Date */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-600 uppercase tracking-wide flex items-center gap-1.5">
|
||||
<Calendar size={13} className="text-coral" /> Tarih
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Guests */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-600 uppercase tracking-wide flex items-center gap-1.5">
|
||||
<Users size={13} className="text-coral" /> Kişi Sayısı
|
||||
</label>
|
||||
<select className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors bg-white text-sm">
|
||||
<option>1 Kişi</option>
|
||||
<option>2 Kişi</option>
|
||||
<option>3 Kişi</option>
|
||||
<option>4 Kişi</option>
|
||||
<option>5+ Kişi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Service type */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-semibold text-gray-600 uppercase tracking-wide flex items-center gap-1.5">
|
||||
<Coffee size={13} className="text-coral" /> Hizmet Tipi
|
||||
</label>
|
||||
<select className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors bg-white text-sm">
|
||||
<option>Beach Club (Şezlong/Loca)</option>
|
||||
<option>Restoran Akşam Yemeği</option>
|
||||
<option>Konaklama</option>
|
||||
<option>Özel Etkinlik / Organizasyon</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-5 mb-7">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Adınız Soyadınız"
|
||||
className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Telefon Numaranız"
|
||||
className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Shimmer submit button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-shimmer w-full bg-coral hover:bg-coral-dark text-white font-medium py-4 rounded-xl transition-colors shadow-lg hover:shadow-xl text-sm tracking-wide uppercase"
|
||||
>
|
||||
Rezervasyon Talebi Gönder
|
||||
</button>
|
||||
|
||||
<p className="text-[11px] text-center text-gray-400 mt-4">
|
||||
Bu form ön rezervasyon talebidir. Kesin onay için ekibimiz sizinle iletişime geçecektir.
|
||||
</p>
|
||||
</motion.form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user