CTA001

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Stack, Container, Frame, TileGrid, Media, Layer, Icon, Text, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="CTA001">
  <Stack pos="relative">
    <Frame isLayer>
      <Media isLayer src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
      <Layer style={{ backdropFilter: 'blur(4px)' }} bgc="black:50%" />
    </Frame>
    <Container isWrapper="s" set="gutter" py="50" z="1">
      <Stack ai="center" g="40">
        <Stack ai="center" g="30">
          <Heading level="2" class="u--trim" fz="4xl" fw="bold" ff="mono" lts="l" c="white" ta="center">Contact</Heading>
          <Text class="u--trim" fz="m" c="white" ta="center">はじめての方もお気軽にご相談ください<br />弊社スタッフが迅速に対応いたします</Text>
        </Stack>
        <TileGrid cols={['1', null, '2']} ai="center" g="30 40" w="stretch">
          <Button
            href="#"
            g="15"
            variant="outline"
            w="stretch"
            jc="center"
            c="white"
            bdrs="10"
            py="20"
            fw="bold"
            set="transition"
            hov={{ bgc: 'white', c: 'black' }}
          >
            <Icon icon="chat" fz="2em" />
            <span>チャットで相談</span>
          </Button>
          <Button
            href="#"
            g="15"
            w="stretch"
            jc="center"
            bgc="white"
            c="black"
            bdrs="10"
            py="20"
            fw="bold"
            set="transition"
            hov={{ bgc: 'accent', c: 'white' }}
          >
            <Icon icon="user" fz="2em" />
            <span>メールでお問い合わせ</span>
          </Button>
        </TileGrid>
      </Stack>
    </Container>
  </Stack>
</DemoLayout>