CTA003

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

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

<DemoLayout title="CTA003">
  <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) grayscale(100%)' }} bgc="black:50%" />
    </Frame>
    <Container isWrapper="l" hasGutter py="50" z="1">
      <Grid gtc={['auto', null, 'auto 1fr']} ai="center" g="40 60" w="stretch">
        <Stack ai="fs" g="40" py={[0, null, '50']}>
          <Stack g="40">
            <Text class="u--trim" fz="5xl" fw="100" lts="l" c="white">Contact</Text>
            <Text class="u--trim" fz="m" c="white">はじめての方もお気軽にご相談ください<br />弊社スタッフが迅速に対応いたします</Text>
          </Stack>
          <Stack g="30" w="stretch">
            <Button
              href="#"
              g="15"
              variant="outline"
              w="stretch"
              c="white"
              bdrs="10"
              py="15"
              fw="bold"
              hasTransition
              hov={{ bgc: 'white', c: 'black' }}
            >
              <Icon icon="chat" fz="2em" />
              <span>チャットで相談</span>
            </Button>
            <Button
              href="#"
              g="15"
              variant="outline"
              w="stretch"
              c="white"
              bdrs="10"
              py="15"
              fw="bold"
              hasTransition
              hov={{ bgc: 'white', c: 'black' }}
            >
              <Icon icon="user" fz="2em" />
              <span>メールでお問い合わせ</span>
            </Button>
          </Stack>
        </Stack>
        <Frame as="figure" h="100%">
          <Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" bdrs="10" />
        </Frame>
      </Grid>
    </Container>
  </Stack>
</DemoLayout>