About
01 - Greeting with a portrait
A greeting section with a portrait, title and name beside the message. Below the "md" breakpoint, it switches to a single column with items stacked vertically.
en.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">Message from Our CEO</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>In today's world of accelerating digital transformation, data utilization is the key to corporate growth.</p>
<p>
We leverage advanced data analytics and AI to visualize the hidden value in data, supporting our clients in making informed decisions
and creating new business opportunities. Realizing a smarter, more sustainable society through technology. That is our vision.
</p>
</Flow>
<Stack ai="flex-end" g="5" ff="accent">
<Text fz="l" o="pp">CEO</Text>
<Text fz="xl" fw="bold">Ryuso Sato</Text>
</Stack>
</Stack>
</Grid>
</Stack>
</Container>
</DemoLayout>