naturvardarna/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-17 02:44:24 +01:00 Verified
parent 9b395ef75c
commit ec7bfd7e34
10 changed files with 352 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/faq/page.tsx
+10 -10
View File
@@ -14,8 +14,8 @@ export default function FAQ() {
};
return (
<div className="w-full animate-fade-in">
<div className="mb-8">
<div className="w-full animate-fade-in space-y-6">
<div>
<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)
@@ -23,29 +23,29 @@ export default function FAQ() {
<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">
<div className="columns-1 lg:columns-2 gap-4 space-y-4">
{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">
<div key={sIndex} className="break-inside-avoid bg-eggshell border-2 border-slate-teal/10 p-5 rounded-2xl shadow-sm">
<h2 className="text-sm font-black text-ebony/60 uppercase tracking-widest mb-4">
{section.category}
</h2>
<div className="space-y-3">
<div className="space-y-2">
{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'}`}>
<div key={id} className={`rounded-xl overflow-hidden transition-colors ${isOpen ? 'bg-white shadow-sm' : 'bg-transparent hover:bg-white/50'}`}>
<button
className="w-full text-left p-4 flex justify-between items-center focus:outline-none"
className="w-full text-left p-3 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'}`}>
<div className={`p-1 rounded-full transition-colors ${isOpen ? 'bg-seafoam text-eggshell' : '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">
<div className="p-2 pb-3 text-ebony font-medium text-sm leading-relaxed border-t border-ebony/20 mx-4">
{item.a}
</div>
</div>