03 - A horizontal sign-up CTA

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Frame, Layer, Media, Stack, Text, WithSide } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="03 - A horizontal sign-up CTA">
  <Container as="section" isWrapper="l" p="30">
    <WithSide pos="relative" ov="hidden" g="40" ai="center" sideW="auto" mainW="xs" c="white" px="35" py="45" bxsh="10" bdrs="20">
      {/* Background photo and overlay. The content is brought to the front with pos="relative" */}
      <Frame isLayer>
        <Media src="https://images.unsplash.com/photo-1669295384050-a1d4357bd1d7?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
      </Frame>
      <Layer bgc="black:50%" />
      <Stack pos="relative" g="30">
        <Text class="u--trim" fz="2xl">
          <span class="-d:inline-block">14-day</span>
          <span class="-d:inline-block">free trial</span>
        </Text>
        <Text>Try every feature with no limits. No credit card required. Cancel anytime.</Text>
      </Stack>
      <Button isSide pos="relative" href="#" fw="bold" lts="l" bgc="white" c="black" px="40" py="20" bdrs="99">Try it free</Button>
    </WithSide>
  </Container>
</DemoLayout>