99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
import { dataStore, type FAQ } from '@/lib/dataStore';
|
||
|
||
export default function FAQPage() {
|
||
const [openFAQ, setOpenFAQ] = useState<number | null>(null);
|
||
const [faqs, setFaqs] = useState<FAQ[]>([]);
|
||
|
||
useEffect(() => {
|
||
setFaqs(dataStore.getFAQs().sort((a, b) => a.order - b.order));
|
||
}, []);
|
||
|
||
const toggleFAQ = (id: number) => {
|
||
setOpenFAQ(openFAQ === id ? null : id);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#003366]">
|
||
<Header />
|
||
|
||
<main className="pt-32 pb-16">
|
||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Başlık */}
|
||
<div className="text-center mb-12">
|
||
<h1 className="text-4xl font-bold text-white mb-4">
|
||
Sıkça Sorulan Sorular
|
||
</h1>
|
||
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||
A2 Metro Hattı projesi hakkında merak ettiğiniz soruların cevapları
|
||
</p>
|
||
</div>
|
||
|
||
{/* SSS Listesi */}
|
||
<div className="space-y-4">
|
||
{faqs.map((faq) => (
|
||
<div
|
||
key={faq.id}
|
||
className="bg-white rounded-xl shadow-lg overflow-hidden"
|
||
>
|
||
<button
|
||
onClick={() => toggleFAQ(faq.id)}
|
||
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors"
|
||
>
|
||
<h3 className="text-lg font-semibold text-[#004B87] pr-4">
|
||
{faq.question}
|
||
</h3>
|
||
<svg
|
||
className={`w-6 h-6 text-[#00B4D8] transform transition-transform duration-200 ${
|
||
openFAQ === faq.id ? 'rotate-180' : ''
|
||
}`}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
{openFAQ === faq.id && (
|
||
<div className="px-6 pb-4">
|
||
<div className="border-t border-gray-200 pt-4">
|
||
<p className="text-gray-700 leading-relaxed">
|
||
{faq.answer}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* İletişim CTA */}
|
||
<div className="mt-12 text-center">
|
||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
|
||
<h3 className="text-xl font-bold text-white mb-4">
|
||
Başka Sorunuz Mu Var?
|
||
</h3>
|
||
<p className="text-[#F8F9FA] mb-6">
|
||
Yukarıdaki sorular dışında merak ettiğiniz konular için bizimle iletişime geçebilirsiniz.
|
||
</p>
|
||
<Link
|
||
href="/#iletisim"
|
||
className="inline-block bg-[#00B4D8] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[#0099B8] transition-colors"
|
||
>
|
||
İletişime Geç
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
} |