Cta Section

1import * as React from 'react';
2 
3// @interlace/cta-section v1.0.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/cta-section
5// What changed since: https://ds.interlace.tools/c/cta-section#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — CTASection
10 *
11 * Call-to-action section. Title + description + 1-2 action buttons in a
12 * centred column on a tinted surface. The shape every landing page reaches
13 * for ("Ready to ship?" / "Start your trial" / "Read the docs"). Server
14 * component.
15 *
16 * ## Anatomy
17 *
18 *   <section data-slot="cta-section" data-min-viewport="320">
19 *     <Container>
20 *       <Stack align="center">
21 *         <Typography variant="h2">{title}</Typography>
22 *         <Typography variant="long">{description}</Typography>
23 *         <div>{actions}</div>
24 *       </Stack>
25 *     </Container>
26 *   </section>
27 *
28 * | Rule | Concept                          | Where in this file                                          |
29 * | ---- | -------------------------------- | ----------------------------------------------------------- |
30 * | R4   | Extends native el                | `React.ComponentProps<'section'>` + CTASection props        |
31 * | R6   | data-slot on root                | `data-slot="cta-section"`                                   |
32 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}`                        |
33 * | R10  | Composition seam (slots)         | `title` / `description` / `actions` ReactNode props         |
34 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
35 * | R18  | Tailwind only                    | Zero inline `style`; utility classes only                   |
36 * | R19  | Tokens only                      | `bg-primary-subtle` / `text-foreground` / spacing scale     |
37 * | R20  | AA contrast                      | accent foreground on tinted surface                         |
38 * | R25  | Server component                 | No hooks                                                    |
39 * | R26  | A11y                             | `<section>` with `aria-labelledby` when title is text       |
40 */
41 
42import { cn } from '@/lib/utils';
43import { Container } from '@/components/ui/container';
44import { Skeleton } from '@/components/ui/skeleton';
45import { Stack } from '@/components/ui/stack';
46import { Typography } from '@/components/ui/typography';
47 
48// … truncated