CTA01

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

import { ArrowRightIcon } from '@lism-css/icons/astro';
import { Stack, Grid, Container, Frame, Center, Media, Layer, Icon, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="CTA01">
  <Stack pos="relative">
    <Frame isLayer>
      <Media
        isLayer
        src="https://images.pexels.com/photos/7130498/pexels-photo-7130498.jpeg?auto=compress&cs=tinysrgb&w=1920"
        alt=""
        width="960"
        height="640"
      />
      <Layer style={{ backdropFilter: 'blur(8px)' }} bgc="base:75%" />
    </Frame>
    <Container isWrapper="s" px="35" py="60" z="1">
      <Grid ai="center" g="40">
        <Heading level="2" class="u--trim" fz="4xl" fw="bold" lts="l" ta="center">Contact</Heading>
        <Text class="u--trim" fz="m" hl="l" ta="center"
          >サービスに関するご質問やお見積もりのご依頼は、こちらからお問い合わせください。<br />内容を確認のうえ、担当者よりご連絡いたします。</Text
        >
        <Center jc="center">
          <Button href="#" g="15" px="20" py="15" bgc="black" c="white" bdrs="99" hov={{ bgc: 'transparent', c: 'text', bdc: 'text' }} hasTransition>
            <Inline ps="10" tt="uppercase" lts="l">Contact us</Inline>
            <Icon icon={ArrowRightIcon} weight="bold" />
          </Button>
        </Center>
      </Grid>
    </Container>
  </Stack>
</DemoLayout>