Landing Template

1import * as React from 'react';
2 
3// @interlace/landing-template v1.2.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/landing-template
5// What changed since: https://ds.interlace.tools/c/landing-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — LandingTemplate
10 *
11 * Marketing landing page surface. Composes Topbar + Hero +
12 * (optional) FeatureGrid + (optional) TestimonialGrid + (optional)
13 * PricingTable + (optional) FAQ + CTASection + Footer — each in its own
14 * SectionBoundary so the page streams section-by-section.
15 *
16 * Every section is optional via props; pass only what you need. The
17 * Topbar + Footer are required (every landing page has them).
18 *
19 * ## MIN_VIEWPORT — 320
20 */
21 
22import { cn } from '@/lib/utils';
23import { SectionBoundary } from '@/components/ui/section-boundary';
24import { Topbar } from '@/components/ui/patterns/topbar';
25import { Footer } from '@/components/ui/patterns/footer';
26import { Skeleton } from '@/components/ui/skeleton';
27import { Stack } from '@/components/ui/stack';
28import { Container } from '@/components/ui/container';
29 
30export const MIN_VIEWPORT = 320 as const;
31 
32interface LandingTemplateProps extends React.ComponentProps<'div'> {
33  /** Topbar props. */
34  topbar: React.ComponentProps<typeof Topbar>;
35  /** Hero section (consumer-supplied — pass the configured Hero pattern). */
36  hero: React.ReactNode;
37  /** Optional features section. */
38  features?: React.ReactNode;
39  /** Optional testimonials section. */
40  testimonials?: React.ReactNode;
41  /** Optional pricing section. */
42  pricing?: React.ReactNode;
43  /** Optional FAQ section. */
44  faq?: React.ReactNode;
45  /** Optional CTA section before the footer. */
46  cta?: React.ReactNode;
47  /** Footer props. */
48  footer: React.ComponentProps<typeof Footer>;
49  /** Extra arbitrary sections — rendered between hero and features. */
50  children?: React.ReactNode;
51}
52 
53function LandingTemplate({
54  topbar,
55  hero,
56  features,
57  testimonials,
58  pricing,
59  faq,
60  cta,
61  footer,
62  children,
63  className,
64  ...props
65}: LandingTemplateProps) {
66  return (
67    <div
68      data-slot="landing-template"
69      data-min-viewport={String(MIN_VIEWPORT)}
70      className={cn('bg-background text-foreground', className)}
71      {...props}
72    >
73      <Topbar {...topbar} />
74 
75      {/* Every section below sits inside <main>, and it is not decoration.
76// … truncated