first commit

2026-09-11 15:49:41 +08:00
commit 5b69bc818a
98 changed files with 30551 additions and 0 deletions
@@ -0,0 +1,45 @@
+import { Accordion, Box, Text } from "@chakra-ui/react";
+import { Plus } from "lucide-react";
+import type { ContentItem } from "../../db/schema";
+import { Section } from "./Section";
+import { SectionHeading } from "./SectionHeading";
+
+export function Faq({ items }: { items: ContentItem[] }) {
+  if (items.length === 0) return null;
+  return (
+    <Section id="faq">
+      <SectionHeading
+        eyebrow="常見問題"
+        title="安裝前，你可能想知嘅事"
+        description="仲有其他疑問？歡迎隨時 WhatsApp 問我哋。"
+      />
+      <Box maxW="860px">
+        <Accordion.Root collapsible defaultValue={["faq-0"]}>
+          {items.map((item, index) => (
+            <Accordion.Item
+              key={item.id}
+              value={`faq-${index}`}
+              borderTopWidth="1px"
+              borderColor="border.subtle"
+              _last={{ borderBottomWidth: "1px" }}
+            >
+              <Accordion.ItemTrigger py="6" px="0" _hover={{ bg: "transparent" }}>
+                <Text flex="1" textAlign="start" fontFamily="heading" fontWeight="700" color="ink" fontSize={{ base: "md", md: "lg" }}>
+                  {item.title}
+                </Text>
+                <Accordion.ItemIndicator color="brand.700" _open={{ transform: "rotate(45deg)" }}>
+                  <Plus size={18} />
+                </Accordion.ItemIndicator>
+              </Accordion.ItemTrigger>
+              <Accordion.ItemContent>
+                <Accordion.ItemBody px="0" pb="7" pt="0" color="fg.muted" fontSize="sm" lineHeight="1.9" maxW="2xl">
+                  {item.description}
+                </Accordion.ItemBody>
+              </Accordion.ItemContent>
+            </Accordion.Item>
+          ))}
+        </Accordion.Root>
+      </Box>
+    </Section>
+  );
+}