Initial Commit

src/components/ExpandableSection.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+
+interface ExpandableSectionProps {
+  title: string
+  content: string
+}
+
+export function ExpandableSection({ title, content }: ExpandableSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <button
+        className="w-full px-6 py-4 text-left bg-secondary/50 hover:bg-secondary/70 transition-colors flex items-center justify-between"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <h3 className="font-semibold">{title}</h3>
+        {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
+      </button>
+      {isExpanded && (
+        <div className="px-6 py-4 bg-background animate-slide-up">
+          <p className="text-muted-foreground leading-relaxed">{content}</p>
+        </div>
+      )}
+    </div>
+  )
+}