first commit

2026-09-11 15:49:41 +08:00
commit 5b69bc818a
98 changed files with 30551 additions and 0 deletions
@@ -0,0 +1,98 @@
+import { Box, Container, HStack, Link, Stack, Text, VStack } from "@chakra-ui/react";
+import { Mail, MapPin, Phone } from "lucide-react";
+import { mailHref, telHref, whatsappHref, type Settings } from "../../data/content";
+import { WhatsAppIcon } from "./icons";
+
+export function Footer({ settings }: { settings: Settings }) {
+  const name = settings.company_name || "盈豐太陽能工程有限公司";
+  const shortName = settings.company_short_name || settings.company_name || "盈豐太陽能";
+  const year = new Date().getFullYear();
+
+  return (
+    <Box as="footer" bg="ink" color="white" borderTopWidth="1px" borderColor="whiteAlpha.200" pt={{ base: 12, md: 16 }} pb="8">
+      <Container maxW="1200px" px={{ base: 5, md: 8 }}>
+        <Stack
+          direction={{ base: "column", md: "row" }}
+          justify="space-between"
+          gap={{ base: 10, md: 16 }}
+        >
+          <VStack align="flex-start" gap="4" maxW="sm">
+            <Text fontFamily="heading" fontWeight="900" fontSize="xl" letterSpacing="0.02em">
+              {shortName}
+            </Text>
+            <Text color="whiteAlpha.600" fontSize="sm" lineHeight="1.8">
+              專營香港村屋太陽能系統，由評估、設計、申請到安裝驗收，一站式為你善用天台，賺取發電回報。
+            </Text>
+            <Text color="whiteAlpha.500" fontSize="xs" letterSpacing="0.08em">
+              {settings.license_no}
+            </Text>
+          </VStack>
+
+          <HStack gap={{ base: 10, md: 16 }} align="flex-start">
+            <VStack align="flex-start" gap="3">
+              <Text fontWeight="700" fontSize="xs" letterSpacing="0.15em" color="whiteAlpha.500">
+                快速連結
+              </Text>
+              {[
+                { label: "服務範圍", href: "#services" },
+                { label: "完成案例", href: "#cases" },
+                { label: "服務流程", href: "#process" },
+                { label: "常見問題", href: "#faq" },
+                { label: "Blog", href: "/blog" },
+              ].map((l) => (
+                <Link
+                  key={l.href}
+                  href={l.href}
+                  fontSize="sm"
+                  color="whiteAlpha.700"
+                  _hover={{ color: "white", textDecoration: "none" }}
+                >
+                  {l.label}
+                </Link>
+              ))}
+            </VStack>
+
+            <VStack align="flex-start" gap="3">
+              <Text fontWeight="700" fontSize="xs" letterSpacing="0.15em" color="whiteAlpha.500">
+                聯絡我哋
+              </Text>
+              <HStack gap="2" color="whiteAlpha.700" fontSize="sm">
+                <Phone size={16} />
+                <Link href={telHref(settings)} color="whiteAlpha.700" _hover={{ color: "white", textDecoration: "none" }}>
+                  {settings.phone}
+                </Link>
+              </HStack>
+              <HStack gap="2" color="whiteAlpha.700" fontSize="sm">
+                <WhatsAppIcon style={{ width: 16, height: 16 }} />
+                <Link href={whatsappHref(settings)} target="_blank" rel="noopener" color="whiteAlpha.700" _hover={{ color: "white", textDecoration: "none" }}>
+                  WhatsApp
+                </Link>
+              </HStack>
+              <HStack gap="2" color="whiteAlpha.700" fontSize="sm">
+                <Mail size={16} />
+                <Link href={mailHref(settings)} color="whiteAlpha.700" _hover={{ color: "white", textDecoration: "none" }}>
+                  {settings.email}
+                </Link>
+              </HStack>
+              <HStack gap="2" color="whiteAlpha.700" fontSize="sm" align="flex-start">
+                <MapPin size={16} style={{ marginTop: 3 }} />
+                <Text>{settings.address}</Text>
+              </HStack>
+            </VStack>
+          </HStack>
+        </Stack>
+
+        <Box borderTopWidth="1px" borderColor="whiteAlpha.200" mt="12" pt="6">
+          <HStack justify="space-between" flexWrap="wrap" gap="2">
+            <Text fontSize="xs" color="whiteAlpha.500">
+              © {year} {name} All rights reserved.
+            </Text>
+            <Link href="/admin" fontSize="xs" color="whiteAlpha.500" _hover={{ color: "whiteAlpha.900", textDecoration: "none" }}>
+              管理後台
+            </Link>
+          </HStack>
+        </Box>
+      </Container>
+    </Box>
+  );
+}