About
03 - Timeline with dividing lines
A history section that lists years and events in order, separated by dividing lines. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Grid, Media, Box, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="About03">
<Container isWrapper="m" bgc="base" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="3xl" fw="bold" ff="accent" ta="center">Our Story</Heading>
<Stack bd-l g="40">
<Grid gtc={['auto', null, '16rem 1fr']} g="30">
<Box>
<Text bd-l bdc="text" fz="2xl" p="15 30" ms="-1px">2016</Text>
</Box>
<Stack g="30" ps={['30', null, '0']} pb="20">
<Frame as="figure" ar="16/9" bdrs="10">
<Media
src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
</Frame>
<Stack g="20">
<Text fz="l" fw="bold">Journeyful Inc. founded</Text>
<p>
"We want to deliver a trip that fits each person." With that idea, founders Sato and Suzuki started the company in a small apartment
in Tokyo.
</p>
<p>
Five people in total: travel experts and engineers. Instead of fixed package tours, they began building a service that lets anyone
design their own journey.
</p>
</Stack>
</Stack>
</Grid>
<Grid gtc={['auto', null, '16rem 1fr']} g="30">
<Box>
<Text bd-l bdc="text" fz="2xl" p="15 30" ms="-1px">2019</Text>
</Box>
<Stack g="30" ps={['30', null, '0']} pb="20">
<Frame as="figure" ar="16/9" bdrs="10">
<Media
src="https://images.pexels.com/photos/3184668/pexels-photo-3184668.jpeg?auto=compress&cs=tinysrgb&w=1920"
alt=""
width="960"
height="640"
/>
</Frame>
<Stack g="20">
<Text fz="l" fw="bold">Travel web service "Journeyful" launched</Text>
<p>After about three years of development, the service went live.</p>
<p>
A dedicated concierge listens to your wishes online and proposes an itinerary made just for you. The experience spread on social media
and won over many travelers.
</p>
</Stack>
</Stack>
</Grid>
<Grid gtc={['auto', null, '16rem 1fr']} g="30">
<Box>
<Text bd-l bdc="text" fz="2xl" p="15 30" ms="-1px">2025</Text>
</Box>
<Stack g="30" ps={['30', null, '0']} pb="20">
<Frame as="figure" ar="16/9" bdrs="10">
<Media
src="https://images.unsplash.com/photo-1605540827677-693bad36b91f?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
/>
</Frame>
<Stack g="20">
<Text fz="l" fw="bold">New brand "Journeyful Earth" started</Text>
<p>
A travel brand that chooses low-impact transport and lodging, and donates part of its revenue to environmental groups in the places
you visit.
</p>
<p>
The initiative won the Sustainability Grand Prize at the Japan Travel Awards 2025. We will keep growing trips that enrich both
travelers and the places that welcome them.
</p>
</Stack>
</Stack>
</Grid>
</Stack>
</Stack>
</Container>
</DemoLayout>