Search

History

History002

A history/timeline template. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.

大きい画面で見る
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Stack, Container, Frame, Grid, Media, Flow, Text, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="History002">
  <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 History</Heading>
      <Stack bd-y-s>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-y-e py="40">
          <Text class="u--trim" fz="2xl" fs="i">2025</Text>
          <Flow px-s={['30', null, '0']}>
            <Text fz="l" fw="bold">Lism Inc. Founded</Text>
            <p>"We want to deliver travel that truly connects with each individual's heart"</p>
            <p>
              Driven by this singular passion, founders Sato and Suzuki established "Journeyful Inc." in a small apartment room in Tokyo. Questioning
              conventional package tours, they set out to develop a service that would enable anyone to design a journey that weaves their own story,
              powered by technology. Travel specialists and engineers gathered, and with just five members, they took the first step toward a grand
              dream.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media src="https://cdn.lism-css.com/random/img?category=building" alt="" width="960" height="640" />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-y-e py="40">
          <Text class="u--trim" fz="2xl" fs="i">2026</Text>
          <Flow px-s={['30', null, '0']}>
            <Text fz="l" fw="bold">"Journeyful" Launched</Text>
            <p>After approximately 18 months of development, the travel web service "Journeyful" was officially launched.</p>
            <p>
              At launch, the service started with dedicated concierges providing online consultations, proposing custom-made travel plans tailored to
              each user's preferences. The personalized travel experiences, far from generic tours, became a hot topic on social media and gained
              support from travel enthusiasts. It presented a new option for those seeking their own special journey.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media src="https://cdn.lism-css.com/random/img?category=japan" alt="" width="960" height="640" />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-y-e py="40">
          <Text class="u--trim" fz="2xl" fs="i">2027</Text>
          <Flow px-s={['30', null, '0']}>
            <Text fz="l" fw="bold">New Brand "Journeyful Earth" Launched</Text>
            <p>
              Under the philosophy of "contributing to local communities and the environment through travel," we launched "Journeyful Earth," a new
              brand specializing in sustainable tourism.
            </p>
            <p>
              We introduced a system that selects environmentally-friendly transportation and accommodation, and donates a portion of travel revenue
              to local environmental organizations. This initiative was recognized with the Sustainability Award at the "Japan Travel Awards 2025." We
              will continue to pursue a form of travel that enriches travelers, the communities that welcome them, and the planet as a whole.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media src="https://cdn.lism-css.com/random/img?category=room" alt="" width="960" height="640" />
            </Frame>
          </Flow>
        </Grid>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>
style.css