99 lines
4.3 KiB
TypeScript
99 lines
4.3 KiB
TypeScript
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>
|
|
);
|
|
}
|