94 lines
5.4 KiB
TypeScript
94 lines
5.4 KiB
TypeScript
import { getSiteContents } from "@/lib/data"
|
||
import { ContactForm } from "@/components/contact/contact-form"
|
||
import { Mail, MapPin, Phone, Instagram, Youtube } from "lucide-react"
|
||
import { FaTiktok } from "react-icons/fa"
|
||
import Link from "next/link"
|
||
|
||
export default async function ContactPage() {
|
||
const siteSettings = await getSiteContents()
|
||
|
||
return (
|
||
<div className="container py-12 md:py-24">
|
||
<div className="text-center mb-8 md:mb-12">
|
||
<h1 className="text-3xl md:text-4xl font-bold tracking-tight mb-4 font-outfit">İletişime Geçin</h1>
|
||
<p className="text-muted-foreground max-w-xl mx-auto">
|
||
Sorularınız, teklif talepleriniz veya teknik destek için bize ulaşın.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-5xl mx-auto">
|
||
<div className="space-y-8">
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-semibold">İletişim Bilgileri</h2>
|
||
<div className="flex items-start space-x-4">
|
||
<MapPin className="w-6 h-6 text-primary mt-1" />
|
||
<div>
|
||
<p className="font-medium">Merkez Ofis & Showroom</p>
|
||
<p className="text-slate-600 dark:text-slate-400 whitespace-pre-wrap">
|
||
{siteSettings.contact_address || "Organize Sanayi Bölgesi, 12. Cadde No: 45\nBaşakşehir, İstanbul"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-4">
|
||
<Phone className="w-6 h-6 text-primary" />
|
||
<div>
|
||
<p className="font-medium">Telefon</p>
|
||
<p className="text-slate-600 dark:text-slate-400">
|
||
<a
|
||
href={`tel:${(siteSettings.contact_phone || "+90 (212) 555 00 00").replace(/[^\d+]/g, '')}`}
|
||
className="hover:text-primary transition-colors hover:underline"
|
||
>
|
||
{siteSettings.contact_phone || "+90 (212) 555 00 00"}
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-4">
|
||
<Mail className="w-6 h-6 text-primary" />
|
||
<div>
|
||
<p className="font-medium">E-posta</p>
|
||
<p className="text-slate-600 dark:text-slate-400">
|
||
{siteSettings.contact_email || "info@parakasa.com"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-4 border-t">
|
||
<h3 className="text-lg font-semibold mb-3">Sosyal Medya</h3>
|
||
<div className="flex gap-4">
|
||
{siteSettings.social_instagram && (
|
||
<Link href={siteSettings.social_instagram} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
|
||
<Instagram className="h-5 w-5" />
|
||
</Link>
|
||
)}
|
||
{siteSettings.social_youtube && (
|
||
<Link href={siteSettings.social_youtube} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
|
||
<Youtube className="h-5 w-5" />
|
||
</Link>
|
||
)}
|
||
{siteSettings.social_tiktok && (
|
||
<Link href={siteSettings.social_tiktok} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
|
||
<FaTiktok className="h-5 w-5" />
|
||
</Link>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{siteSettings.contact_map_embed ? (
|
||
<div
|
||
className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative"
|
||
dangerouslySetInnerHTML={{ __html: siteSettings.contact_map_embed }}
|
||
/>
|
||
) : (
|
||
<div className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative flex items-center justify-center text-muted-foreground">
|
||
Harita henüz eklenmemiş.
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<ContactForm />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|