alles andere

2026-02-04 16:35:57 +01:00
parent c3c6616181
commit 0529b6ea72
29 changed files with 2078 additions and 81 deletions
--- a/src/components/FAQSection.tsx
+++ b/src/components/FAQSection.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Minus } from "lucide-react";
+
+const faqs = [
+    {
+        question: "Do you offer emergency electrical services in Corpus Christi?",
+        answer: "Yes, Budd Electric Co. provides 24/7 emergency electrical services in Corpus Christi and surrounding areas. We have licensed electricians on call around the clock to handle power outages, storm damage, and dangerous electrical faults safely."
+    },
+    {
+        question: "Are your electricians licensed and insured?",
+        answer: "Absolutely. We are fully licensed by the State of Texas (TECL #17007) and carry comprehensive insurance. All our electricians are background-checked and drug-tested for your peace of mind."
+    },
+    {
+        question: "Do you install Kohler whole-home generators?",
+        answer: "Yes, we are an authorized Kohler Generator dealer. We specialize in the sale, professional installation, and ongoing maintenance of Kohler standby generators to keep your home powered during outages."
+    },
+    {
+        question: "What areas do you serve besides Corpus Christi?",
+        answer: "We serve the entire Coastal Bend region, including Portland, Robstown, Ingleside, Rockport, Aransas Pass, and Port Aransas. If you're in South Texas, give us a call!"
+    }
+];
+
+export default function FAQSection() {
+    const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+    // Generate FAQ Schema
+    const faqSchema = {
+        "@context": "https://schema.org",
+        "@type": "FAQPage",
+        "mainEntity": faqs.map(faq => ({
+            "@type": "Question",
+            "name": faq.question,
+            "acceptedAnswer": {
+                "@type": "Answer",
+                "text": faq.answer
+            }
+        }))
+    };
+
+    return (
+        <section className="py-24 bg-gray-50">
+            <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
+            />
+            <div className="mx-auto max-w-3xl px-6 lg:px-8">
+                <div className="text-center mb-16">
+                    <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Common Questions</h2>
+                    <h3 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h3>
+                </div>
+
+                <div className="space-y-4">
+                    {faqs.map((faq, index) => (
+                        <div key={index} className="bg-white rounded-lg border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition">
+                            <button
+                                onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                                className="w-full flex items-center justify-between p-6 text-left focus:outline-none focus:ring-2 focus:ring-[color:var(--brand)] focus:ring-offset-2 rounded-lg"
+                                aria-expanded={openIndex === index}
+                                aria-controls={`faq-answer-${index}`}
+                            >
+                                <span className="font-bold text-[color:var(--ink)] text-lg pr-8">{faq.question}</span>
+                                {openIndex === index ? (
+                                    <Minus className="text-[color:var(--brand)] flex-shrink-0" size={20} aria-hidden="true" />
+                                ) : (
+                                    <Plus className="text-gray-400 flex-shrink-0" size={20} aria-hidden="true" />
+                                )}
+                            </button>
+                            <div
+                                id={`faq-answer-${index}`}
+                                className={`overflow-hidden transition-all duration-300 ease-in-out ${openIndex === index ? "max-h-48 opacity-100" : "max-h-0 opacity-0"
+                                    }`}
+                                role="region"
+                                aria-labelledby={`faq-question-${index}`}
+                            >
+                                <div className="p-6 pt-0 text-gray-600 leading-relaxed">
+                                    {faq.answer}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}