First commit

2026-03-16 23:54:36 +01:00
commit be129af1d9
53 changed files with 49704 additions and 0 deletions
@@ -0,0 +1,61 @@
+// app/faq/page.tsx
+
+"use client";
+
+import React, { useState } from 'react';
+import faqData from '../data/faq.json';
+import { ChevronDown, ChevronUp, MessageCircleQuestionMark } from 'lucide-react';
+
+export default function FAQ() {
+    const [openIndex, setOpenIndex] = useState<string | null>(null);
+
+    const toggleQuestion = (index: string) => {
+        setOpenIndex(openIndex === index ? null : index);
+    };
+
+    return (
+        <div className="w-full animate-fade-in">
+            <div className="mb-8">
+                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
+                    <MessageCircleQuestionMark className="mr-3 text-seafoam" size={32} />
+                    Vanliga Frågor (FAQ)
+                </h1>
+                <p className="text-moss font-medium mt-2 ml-11">Använd den här guiden för att snabbt svara på turisternas vanligaste frågor.</p>
+            </div>
+
+            <div className="columns-1 lg:columns-2 gap-6 space-y-6">
+                {faqData.map((section, sIndex) => (
+                    <div key={sIndex} className="break-inside-avoid bg-white/40 backdrop-blur-md border border-white p-6 rounded-3xl shadow-lg shadow-ebony/5">
+                        <h2 className="text-lg font-black text-ebony/70 uppercase tracking-widest mb-4">
+                            {section.category}
+                        </h2>
+                        <div className="space-y-3">
+                            {section.questions.map((item, qIndex) => {
+                                const id = `${sIndex}-${qIndex}`;
+                                const isOpen = openIndex === id;
+                                return (
+                                    <div key={id} className={`rounded-2xl overflow-hidden transition-all duration-300 ${isOpen ? 'bg-white shadow-md shadow-seafoam/10' : 'bg-eggshell/50 hover:bg-white'}`}>
+                                        <button
+                                            className="w-full text-left p-4 flex justify-between items-center focus:outline-none"
+                                            onClick={() => toggleQuestion(id)}
+                                        >
+                                            <span className="font-bold text-slate-teal text-sm pr-4 leading-snug">{item.q}</span>
+                                            <div className={`p-1 rounded-full transition-colors ${isOpen ? 'bg-seafoam text-eggshell' : 'bg-transparent text-seafoam'}`}>
+                                                {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                                            </div>
+                                        </button>
+                                        <div className={`transition-all duration-300 ease-in-out ${isOpen ? 'max-h-125 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+                                            <div className="p-2 pb-4 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/20 mx-4">
+                                                {item.a}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};