CTA004

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

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

<DemoLayout title="CTA004">
  <Stack pos="relative">
    <Frame isLayer>
      <Media isLayer src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
      <Layer style={{ backdropFilter: 'blur(4px) grayscale(100%)' }} bgc="black:30%" />
    </Frame>
    <Container isWrapper="m" set="gutter" py="50" z="1">
      <Stack g="40">
        <Stack ai="center" g="30">
          <Text class="u--trim" fz="5xl" fw="light" lts="l" c="white" ta="center">Contact</Text>
          <Text class="u--trim" fz="m" c="white" ta="center">お問い合わせはこちら</Text>
        </Stack>
        <Stack g="30">
          <TileGrid cols={['1', null, '2']} ai="center" g="30" w="stretch">
            <Button
              href="#"
              g="15"
              variant="outline"
              w="stretch"
              c="white"
              bdrs="10"
              py="15"
              fw="bold"
              set="transition"
              hov={{ bgc: 'white', c: 'black' }}
            >
              <Icon icon="book" fz="2em" />
              <span>資料を請求する</span>
            </Button>
            <Button
              href="#"
              g="15"
              variant="outline"
              w="stretch"
              c="white"
              bdrs="10"
              py="15"
              fw="bold"
              set="transition"
              hov={{ bgc: 'white', c: 'black' }}
            >
              <Icon icon="user" fz="2em" />
              <span>メールで相談する</span>
            </Button>
            <BoxLink layout="grid" href="#" gc="1 / -1" gtc={['1fr auto', null, '1fr 2fr auto']} ai="center" bgc="white" bdrs="10" ov="h" set="hov">
              <Frame as="figure" ar={['16/9', null, 'inherit']} gc={['1 / -1', null, '1']} pos="relative" h="100%" ov="h">
                <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="540" set="transition" hov="to:zoom" />
                <Layer set="transition" hov="to:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
                  <Center h="100%" c="white">
                    <Inline fz="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
                  </Center>
                </Layer>
              </Frame>
              <Stack jc="center" g="30" p="40">
                <Text class="u--trim" fz="l" fw="bold">訪問面談をご希望の方はこちら</Text>
                <Text class="u--trim" fz="s" o="-20">
                  お客様のご都合に合わせて専門スタッフが訪問面談いたします。ご相談方法やご依頼後の流れについてはまずはこちらをご覧ください。
                </Text>
              </Stack>
              <Flex ai="center" jc="center" p="15" bd bdrs="99" mx="30" set="transition" hov="to:reverse">
                <Icon icon="arrow-right" fz="120%" set="transition" />
              </Flex>
            </BoxLink>
          </TileGrid>
          <Stack ai="center" g="40" w="100%">
            <Text class="u--trim" fz="s" c="white" ta="center">お気軽にご相談ください。スタッフが迅速に対応いたします</Text>
          </Stack>
        </Stack>
      </Stack>
    </Container>
  </Stack>
</DemoLayout>

<style>
  @media (any-hover: hover) {
    .-hov\:to\:zoom {
      scale: var(--_isHov, 1.1);
    }
    .-hov\:to\:reverse {
      background-color: var(--_isHov, var(--black));
      color: var(--_isHov, var(--white));
    }
  }
</style>