From 0e160c488d5d1780c5f3bf470efeac858f6b32f7 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 12:40:29 +0000
Subject: [PATCH] Changes

---
 src/App.tsx               |  2 ++
 src/components/Footer.tsx |  3 ++
 src/pages/FAQ.tsx         | 67 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/pages/FAQ.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 00f4eac..dfaaed0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import Account from "./pages/Account";
 import AccountConfirmation from "./pages/AccountConfirmation";
 import Contact from "./pages/Contact";
 import Admin from "./pages/Admin";
+import FAQ from "./pages/FAQ";
 import { useCartSync } from "./hooks/useCartSync";
 
 const queryClient = new QueryClient();
@@ -23,6 +24,7 @@ function AppContent() {
       <Routes>
         <Route path="/" element={<Index />} />
         <Route path="/contact" element={<Contact />} />
+        <Route path="/faq" element={<FAQ />} />
         <Route path="/reset-password" element={<ResetPassword />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/account" element={<Account />} />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 0301448..ceb3cbc 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -53,6 +53,9 @@ const Footer = () => {
           <a href="/contact" className="hover:text-primary transition-colors">
             Kontakta oss
           </a>
+          <a href="/faq" className="hover:text-primary transition-colors">
+            FAQ
+          </a>
         </div>
 
         {/* Copyright */}
diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
new file mode 100644
index 0000000..9754185
--- /dev/null
+++ b/src/pages/FAQ.tsx
@@ -0,0 +1,67 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const faqs = [
+  {
+    question: "Hur beställer jag produkter?",
+    answer: "Du kan enkelt beställa genom att välja ett av våra abonnemang och fylla i dina uppgifter. Vi kontaktar dig sedan för att bekräfta din beställning."
+  },
+  {
+    question: "Vilka leveransområden har ni?",
+    answer: "Vi levererar till företag och konditorier i hela Sverige. Kontakta oss för mer information om leverans till just ditt område."
+  },
+  {
+    question: "Hur ofta sker leveranserna?",
+    answer: "Leveransfrekvensen beror på vilket abonnemang du väljer. Vi erbjuder vecko-, varannan vecka- och månadsleveranser."
+  },
+  {
+    question: "Kan jag ändra mitt abonnemang?",
+    answer: "Ja, du kan när som helst ändra eller pausa ditt abonnemang genom att kontakta oss."
+  },
+  {
+    question: "Hur hanterar ni allergener?",
+    answer: "Alla våra produkter är tydligt märkta med innehållsförteckning. Kontakta oss om du har specifika frågor om allergener."
+  },
+  {
+    question: "Vad är er returpolicy?",
+    answer: "Vi strävar efter högsta kvalitet. Om du inte är nöjd med din leverans, kontakta oss inom 24 timmar så löser vi det."
+  }
+];
+
+const FAQ = () => {
+  return (
+    <div className="bg-background text-foreground min-h-screen">
+      <Header />
+      <main className="max-w-3xl mx-auto px-6 py-16">
+        <h1 className="text-3xl md:text-4xl font-bold text-center mb-4">
+          Vanliga frågor
+        </h1>
+        <p className="text-muted-foreground text-center mb-10">
+          Här hittar du svar på de vanligaste frågorna om våra produkter och tjänster.
+        </p>
+        
+        <Accordion type="single" collapsible className="w-full">
+          {faqs.map((faq, index) => (
+            <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionTrigger className="text-left">
+                {faq.question}
+              </AccordionTrigger>
+              <AccordionContent className="text-muted-foreground">
+                {faq.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default FAQ;