Lism CSS
検索

Navigation

Navigation008

ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。

大きい画面で見る
↓
コード
index.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Navigation008">
  <Grid gtr="auto" gtc={['auto', null, 'auto 1fr']} pos="relative">
    <Container isWrapper="l" gr="1" gc="1" py="50" hasGutter pos="relative" z="1">
      <Stack g="40">
        <Stack g="30" ai="fs" c="white">
          <Heading level="2" class="u--trim" fz="3xl" fw="bold" ta="center">募集職種</Heading>
          <p>
            弊社サービス開発に関わる様々な職種で人材を募集しております。<br />
            ご興味ある方は募集詳細をご確認の上お気軽にご相談ください。
          </p>
        </Stack>
        <Stack g="50">
          <AutoColumns cols="18rem" g="30">
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">Webディレクター</Text>
              <Text class="u--trim" fz="s" o="pp">
                自社Webサイトやアプリの機能改善、新規コンテンツの企画立案から制作進行管理までを担当します。
                データ分析に基づき、ユーザーにとってより魅力的で使いやすいサービスへと成長させていく役割です。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">UI/UXデザイナー</Text>
              <Text class="u--trim" fz="s" o="pp">
                「旅のワクワク感」を最大化する、直感的で心地よいユーザー体験をデザインします。
                Webサイトやアプリの画面設計、プロトタイピング、ユーザーテストを通じて、サービス全体の品質向上を担います。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">フロントエンドエンジニア</Text>
              <Text class="u--trim" fz="s" o="pp">
                デザイナーが作成したUIを、ReactやVue.jsなどのモダンな技術を用いて正確に実装します。
                ユーザーがストレスなく旅を探せるよう、スムーズなインタラクションやページの高速化を実現する役割です。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">バックエンドエンジニア</Text>
              <Text class="u--trim" fz="s" o="pp">
                旅行プランの検索・予約システムや決済基盤など、サービスの中核をなすサーバーサイドの開発・運用を担当。
                スケーラビリティと堅牢性を両立させ、安定したサービス提供を実現します。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">デジタルマーケター</Text>
              <Text class="u--trim" fz="s" o="pp">
                SEO、広告運用、SNS、コンテンツマーケティングなど、様々な手法を駆使してサービスの魅力を発信し、新規顧客を獲得します。
                データに基づいた戦略立案と実行で、事業の成長をドライブする仕事です。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">コンテンツクリエイター</Text>
              <Text class="u--trim" fz="s" o="pp">
                旅先の魅力を伝える記事コンテンツや、SNS向けの動画、写真を企画・制作します。
                人々の「旅に出たい」という気持ちを喚起する、ストーリーテリングの能力が求められます。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">カスタマーサポート</Text>
              <Text class="u--trim" fz="s" o="pp">
                旅行の予約に関するお問い合わせから、旅行中のトラブル対応まで、お客様をサポートするお仕事です。
                メールや電話を通じて、お客様の不安を解消し、安心して旅を楽しんでいただくための重要な役割を担います。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
            <Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
              <Text class="u--trim" fz="xl" fw="bold">データアナリスト</Text>
              <Text class="u--trim" fz="s" o="pp">
                予約データやユーザーの行動ログなどを分析し、サービス改善やマーケティング戦略のためのインサイトを抽出します。
                データドリブンな意思決定を支え、事業成長に貢献するポジションです。
              </Text>
              <Flex>
                <Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
                  <Text gc="2">募集要項を見る</Text>
                  <Icon icon="arrow-right" fz="100%" gc="3" />
                </Button>
              </Flex>
            </Grid>
          </AutoColumns>
        </Stack>
      </Stack>
    </Container>
    <Frame gr="1" gc="1" pos="a" w="100%" h="100%">
      <Media src="https://cdn.lism-css.com/random/img?category=working&r=1" alt="" width="960" height="640" />
      <Layer style={{ backdropFilter: 'blur(4px)' }} bgc="black:50%" />
    </Frame>
  </Grid>
</DemoLayout>
style.css