CTA002

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

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

<DemoLayout title="CTA002">
	<Stack g="20" pos="rel" py="50">
		<Frame isLayer>
			<Media isLayer src="https://cdn.lism-css.com/img/random-2510" alt="" width="960" height="640" />
			<Layer blur="4px" bgc="black:30%" />
		</Frame>
		<Container isWrapper="l" hasGutter z="0">
			<Stack g="40">
				<Stack g="30" ai="center">
					<HTML.p class="u-trim" fz="5xl" fw="100" ff="accent" lts="l" c="white" ta="center">Contact</HTML.p>
					<HTML.p class="u-trim" fz="m" c="white" ta="center">お気軽にご相談ください</HTML.p>
				</Stack>
				<Grid gt="repeat" cols={['1', null, '3']} g={['30', null, '40']}>
					<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="10">
						<Box jslf="c" p="30" bdrs="99" bgc="base-2">
							<Icon icon="book" fz="4xl" c="text-2" />
						</Box>
						<Stack g="20" ai="center">
							<HTML.p class="u-trim" fz="m">資料送付をご希望の方</HTML.p>
							<Button href="#" variant="outline" w="stretch" jc="center" bdrs="10" py="15" fw="bold">資料請求フォーム</Button>
						</Stack>
					</Grid>
					<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="10">
						<Box jslf="c" p="30" bdrs="99" bgc="base-2">
							<Icon icon="user" fz="4xl" c="text-2" />
						</Box>
						<Stack g="20" ai="center">
							<HTML.p class="u-trim" fz="m">電話でお問い合わせ</HTML.p>
							<Button href="#" w="stretch" jc="center" bdrs="10" py="15" fw="bold">TEL: 0123-xx-xxxx</Button>
							<HTML.p class="u-trim" fz="s" lh="s" o="-20">営業時間：9:00〜18:00</HTML.p>
						</Stack>
					</Grid>
					<Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="10">
						<Box jslf="c" p="30" bdrs="99" bgc="base-2">
							<Icon icon="chat" fz="4xl" c="text-2" />
						</Box>
						<Stack g="20" ai="center">
							<HTML.p class="u-trim" fz="m">メッセージでやり取り</HTML.p>
							<Button href="#" w="stretch" jc="center" bgc="accent" bdrs="10" py="15" fw="bold">チャットで相談</Button>
							<HTML.p class="u-trim" fz="xs" o="-20">または</HTML.p>
							<Button href="#" variant="outline" w="stretch" jc="center" bdrs="10" py="15" fw="bold">メールでお問い合わせ</Button>
							<HTML.p class="u-trim" fz="s" lh="s" o="-20">2営業日以内に返信いたします</HTML.p>
						</Stack>
					</Grid>
				</Grid>
			</Stack>
		</Container>
	</Stack>
</DemoLayout>