About
01 - 写真つきの代表挨拶
見出しの下に、写真と役職・氏名つきの挨拶文を並べるセクションです。breakpoint「md」以下は1カラムになり、アイテムが縦に並びます。
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Grid, Media, Stack, Flow, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="About01">
<Container isWrapper="m" py="50" bgc="base" hasGutter>
<Stack g="50">
<Heading level="2" fz="3xl" fw="bold" ff="accent" ta="center">代表からご挨拶</Heading>
<Grid gtc={['auto', null, '1fr 1fr']} g="50">
<Frame as="figure" ar={['3/2', null, '3/4']} bdrs="20" bxsh="30">
<Media src="https://cdn.lism-css.com/img/staff/fXQxvQiBGeqm.webp" alt="" width="1000" height="1500" />
</Frame>
<Stack g="40" jc="center">
<Flow fz="l" hl="l">
<p>デジタルトランスフォーメーションが加速する現代において、 データの活用は企業成長の鍵となります。</p>
<p>
私たちは、高度なデータ解析技術とAIを駆使し、データに隠された価値を可視化することで、
お客様の的確な意思決定と新たなビジネス機会の創出を支援します。
テクノロジーで、よりスマートで持続可能な社会を実現する。それが私たちのビジョンです。
</p>
</Flow>
<Stack ai="flex-end" g="5" ff="accent">
<Text fz="l" o="pp">代表取締役社長</Text>
<Text fz="xl" fw="bold">佐藤 流素</Text>
</Stack>
</Stack>
</Grid>
</Stack>
</Container>
</DemoLayout>