01 - アイコンを添えた2列の特徴

---
import { CalendarIcon, CheckCircleIcon, ClockwiseIcon, NoteIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Center, Columns, Container, Flex, Heading, Icon, Stack, Text } from 'lism-css/astro';

const features = [
  {
    icon: CheckCircleIcon,
    title: 'タスクをまとめて管理',
    description: '担当者や期限を決めて、やることを整理。ボードや一覧で、次に取り組む仕事を確認できます。',
  },
  {
    icon: ClockwiseIcon,
    title: 'プロジェクトの進捗を把握',
    description: '完了したタスクや残りの作業をひと目で確認。チームの状況を見ながら、計画を調整できます。',
  },
  {
    icon: NoteIcon,
    title: 'チームの情報を共有',
    description: 'ドキュメントや日々の更新をひとつの場所に。必要な情報を共有し、認識のずれを減らします。',
  },
  {
    icon: CalendarIcon,
    title: '予定をひと目で確認',
    description: 'タスクの期限やスプリントの予定をカレンダーに集約。先の予定を見渡して、無理なく仕事を進められます。',
  },
] as const;
---

<DemoLayout title="01 - アイコンを添えた2列の特徴">
  <Container as="section" isWrapper="m" hasGutter bgc="base">
    <Stack py={['50', null, '60']}>
      <Stack class="u--trimAll" g="30" max-sz="s" mx="auto" ta="center">
        <Text fz="s" c="brand" fw="bold" lts="l" tt="uppercase">Features</Text>
        <Heading fz={['2xl', null, '3xl']}>次にやることが、すぐわかる</Heading>
        <Text fz={['xs', 's']} c="text-2" max-sz="xs"
          >チームのタスクと現状を、一つの場所に。DevFlowが毎日のプロジェクト管理をすっきりまとめます。</Text
        >
      </Stack>

      <Columns cols={[1, null, 2]} cg="50" rg={['40', null, '50']} mbs={['40', null, '50']}>
        {
          features.map((feature) => (
            <Flex as="article" ai="start" g={['20', null, '25']}>
              <Center as="span" ar="1/1" fz="2xl" p=".25em" fxsh="0" bgc="brand" c="white" bdrs="30">
                <Icon icon={feature.icon} size="1em" />
              </Center>
              <Stack g="10">
                <Heading level="3" fz="m">
                  {feature.title}
                </Heading>
                <Text c="text-2" fz="s">
                  {feature.description}
                </Text>
              </Stack>
            </Flex>
          ))
        }
      </Columns>
    </Stack>
  </Container>
</DemoLayout>