Hero01

---
import { Menu2Icon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Hero01">
  <Fragment slot="head">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&display=swap" rel="stylesheet" />
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
  </Fragment>

  <!-- header -->
  <Container as="header" isWrapper="xl" hasGutter pos="fixed" t="0" w="100%" py="25" t="0" z="99">
    <Flex ai="center" jc="between" g="30" c="white">
      <Inline lts="l">Lism</Inline>
      <Flex ai="center">
        <Icon icon={Menu2Icon} weight="light" fz="2xl" label="メニューを開く" />
      </Flex>
    </Flex>
  </Container>

  <!-- Hero -->
  <Stack isContainer hasGutter pos="relative" z="0" min-h="100svh" c="white" style={{ '--ff--accent': "'IBM Plex Mono', monospace" }}>
    {/* 背景画像と暗いオーバーレイ */}
    <Frame isLayer>
      <Media
        isLayer
        src="https://cdn.lism-css.com/img/dark/1m6evtRv6FvY.webp"
        alt=""
        width="960"
        height="640"
        style={{ scale: 1.1, transformOrigin: 'center 25%', objectPosition: '40% center' }}
      />
      <Layer bgc="black:25%" style={{ backdropFilter: 'grayscale(0.5) contrast(0.9) blur(4px)' }} />
      <!-- <Media isLayer src="https://cdn.lism-css.com/img/kpwuzP15GeSP.webp" alt="" width="960" height="640" style={{ scale: 1.1, transformOrigin: "75% 25%", objectPosition: '55% 40%' }} />
      <Layer bgc="black:30%" style={{ backdropFilter: 'blur(6px)' }} /> -->
    </Frame>
    <Stack isWrapper="s" fx="1" z="1" ff="accent" py="40" g="35">
      <Heading level="1" class="u--trim" fz={['3xl', '4xl']} lts="xl" fw="400" ta="center" tt="uppercase" my="auto">lorem ipsum</Heading>
      <Text class="u--trim" fz="s" lh="l" ta="center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
      </Text>
      <Flex g="20 30" fxw="wrap" jc="center">
        <Button href="#" variant="outline" c="white" px="40" py="10" hl="xs" hasTransition hov={{ bgc: 'base', c: 'text' }}>Button</Button>
      </Flex>
    </Stack>
  </Stack>
</DemoLayout>