+ {/* Page Header */}
+
+
+
+ {t('faqTitle', language)}
+
+
+ {t('faqSubtitle', language)}
+
+
+ {/* Search Bar */}
+
+
+
+
+
+ {/* Main Content */}
+
+ {/* Sidebar - Hidden on mobile, visible on desktop */}
+
+
+ {/* Content Area */}
+
+ {filteredCategories.length > 0 ? (
+
+ ) : (
+
+
+ {language === 'zh'
+ ? '没有找到匹配的问题'
+ : 'No matching questions found'}
+
+
+
+ )}
+
+
+
+ {/* Contact Section */}
+
+
+ {t('faqStillHaveQuestions', language)}
+
+
+ {t('faqContactUs', language)}
+
+
+
+
+ )
+}
diff --git a/web/src/components/faq/FAQSearchBar.tsx b/web/src/components/faq/FAQSearchBar.tsx
new file mode 100644
index 00000000..e4124e7f
--- /dev/null
+++ b/web/src/components/faq/FAQSearchBar.tsx
@@ -0,0 +1,51 @@
+import { Search, X } from 'lucide-react'
+
+interface FAQSearchBarProps {
+ searchTerm: string
+ onSearchChange: (value: string) => void
+ placeholder?: string
+}
+
+export function FAQSearchBar({
+ searchTerm,
+ onSearchChange,
+ placeholder = 'Search FAQ...',
+}: FAQSearchBarProps) {
+ return (
+