検索

Greeting

Greeting004

挨拶用のテンプレートです。

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

import { Wrapper, Grid, HTML, Frame, Media, Stack, Flow, Layer, Center } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Greeting004">
	<Wrapper contentSize="full" py="50">
		<Frame ar="5/2" gc="1 / -1" min-h="300px" max-h="500px" w="stretch" pos="rel">
			<Media src="https://cdn.lism-css.com/img/random-2510" alt="" />
			<Layer bgc="rgb(0 0 0 / 20%)" blur="8px">
				<Center h="100%" c="white">
					<HTML.span class="u--trim" fz="4xl" fw="normal" ff="mono" fs="italic" lts="l" px="20" py="10" my-s="-4rem">Greeting</HTML.span>
				</Center>
			</Layer>
		</Frame>
		<Wrapper contentSize="m" py="50" my-s="-8rem" pos="rel" setGutter>
			<Grid gtc="auto" g="40" bgc="white" p={['40', '50']}>
				<Stack g="30">
					<HTML.h lv="2" class="u--trim" fz="3xl" fw="bold" ff="accent">地球と共生する、日常を未来へ</HTML.h>
					<HTML.p class="u--trim" fz="xl" o="-20">代表取締役 CEO 岩崎 大地</HTML.p>
				</Stack>
				<Flow fz="m">
					<p>
						私たちは今、地球という唯一無二の故郷の未来が問われる、歴史的な岐路に立たされています。
						この現実を前にして、メーカーとしての、そしてデザイナーとしての私たちの責任は計り知れません。
						「消費」を前提とした一方通行のものづくりから脱却し、自然の循環の中に、再び私たちの産業を美しく組み込んでいくこと。
						これこそが、現代における最も重要で、そして最も創造的なデザインの課題であると、私たちは確信しています。
					</p>
					<p>
						私たちが提唱するのは、「サーキュラーデザイン(循環するデザイン)」という考え方です。
						それは、製品の役目が終わった後のことまでを、設計の初期段階から深く考慮に入れるアプローチです。
						廃棄される漁網をアップサイクルした美しい新素材、土に還るバイオプラスチック、そして修理や部品交換を容易にするモジュール構造。
						私たちは、製品がごみになるのではなく、次の製品を生み出すための「資源」となるような、未来志向のエコシステムを構築しようとしています。
					</p>
					<p>
						この取り組みは、単なる環境配慮という言葉だけでは終わりません。そこには、新しい美学が宿ります。
						自然素材が時間と共に深く、味わいを増していく経年変化の美しさ。
						限られた資源を最大限に活かすことから生まれる、ミニマルで知的なフォルム。
						サステナビリティの追求は、私たちデザイナーに新たなインスピレーションを与え、これまでにない価値観を創造する原動力となっているのです。
					</p>
					<p>
						お客様が私たちの製品を手に取るという選択は、単なる購買活動ではありません。
						それは、地球との共生を目指す、新しい未来への一票です。
						私たちは、お客様と共に、そして志を同じくするパートナーたちと共に、この大きな変革の波を牽引していきたいと願っています。
						デザインの力で、持続可能で、真に豊かな社会を実現するために。私たちの挑戦は、まだ始まったばかりです。
					</p>
				</Flow>
			</Grid>
		</Wrapper>
	</Wrapper>
</DemoLayout>
style.css