Deploy

src/components/sections/LegalPoliciesSection.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useState } from 'react'
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { ChevronDown } from 'lucide-react'
+
+interface PolicyItem {
+  title: string
+  body: string
+}
+
+export default function LegalPoliciesSection() {
+  const { items, loading } = useEmDashContent('policies')
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const policies = items.map((item) => item.data as PolicyItem)
+
+  const toggle = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index)
+  }
+
+  return (
+    <section
+      id="legal-policies"
+      data-vula-section="legalpolicies"
+      data-vula-cms="policies"
+      className="py-20 bg-neutral-50"
+    >
+      <div className="container mx-auto px-4 max-w-4xl">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl font-bold text-[#111827] mb-4">Legal Policies</h2>
+          <p className="text-lg text-[#36454F]">
+            Transparency is the foundation of trust. Review our privacy policy, terms of engagement, and disclaimer.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          {policies.map((policy, index) => (
+            <div
+              key={index}
+              className="rounded-xl border border-[#e5e7eb] bg-white shadow-[var(--shadow-surface)] overflow-hidden transition-all duration-200 ease-out"
+            >
+              <button
+                onClick={() => toggle(index)}
+                className="w-full flex items-center justify-between p-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#000080]"
+                aria-expanded={openIndex === index}
+              >
+                <span className="text-lg font-semibold text-[#111827]">{policy.title}</span>
+                <ChevronDown
+                  className={`w-5 h-5 text-[#36454F] transition-transform duration-200 ease-out ${
+                    openIndex === index ? 'rotate-180' : ''
+                  }`}
+                />
+              </button>
+              {openIndex === index && (
+                <div className="px-5 pb-5 border-t border-[#e5e7eb] pt-4">
+                  <div className="prose prose-sm max-w-none text-[#36454F]">
+                    {policy.body.split('\n').map((line, i) => (
+                      <p key={i}>{line}</p>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <p className="text-sm text-[#36454F] text-center mt-8">
+          These policies were last updated on 1 February 2025. For any questions, please{' '}
+          <a href="#contact" className="text-[#000080] underline underline-offset-2 hover:text-[#16a34a] transition-colors">
+            contact us
+          </a>.
+        </p>
+      </div>
+    </section>
+  )
+}