45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { Box, SimpleGrid, Stack, Text } from "@chakra-ui/react";
|
|
import type { ContentItem } from "../../db/schema";
|
|
import { Section } from "./Section";
|
|
import { SectionHeading } from "./SectionHeading";
|
|
|
|
export function Process({ items }: { items: ContentItem[] }) {
|
|
return (
|
|
<Section id="process">
|
|
<SectionHeading
|
|
eyebrow="服務流程"
|
|
title="專業安裝流程 5 步到位"
|
|
description="清晰透明嘅流程，每一步都有專人跟進，你唔需要自己四圍撲。"
|
|
/>
|
|
<Box>
|
|
<SimpleGrid columns={{ base: 1, md: 5 }} gap={{ base: 10, md: 6 }}>
|
|
{items.map((item) => (
|
|
<Stack
|
|
key={item.id}
|
|
align="flex-start"
|
|
textAlign="left"
|
|
gap="3"
|
|
>
|
|
<Box
|
|
fontFamily="heading"
|
|
fontWeight="900"
|
|
fontSize="5xl"
|
|
lineHeight="1"
|
|
color="brand.600"
|
|
>
|
|
{item.extra}
|
|
</Box>
|
|
<Text fontFamily="heading" fontWeight="700" fontSize="lg" color="ink">
|
|
{item.title}
|
|
</Text>
|
|
<Text fontSize="sm" color="fg.muted" lineHeight="1.75">
|
|
{item.description}
|
|
</Text>
|
|
</Stack>
|
|
))}
|
|
</SimpleGrid>
|
|
</Box>
|
|
</Section>
|
|
);
|
|
}
|