Marketing sections

Code

import { AppMockupHero, Button, CtaBanner, FeatureGrid, HowItWorks } from "@fadymondy/nasaq/web";import { Zap } from "lucide-react";export function Page() {  return (    <main className="flex flex-col gap-20">      <AppMockupHero        title="Book seats in seconds"        description="Plans, seat maps and payments in one place."        actions={<Button variant="primary" size="lg">Start free</Button>}        mockup={<img src="/app.png" alt="" />}        mockupLabel="The seat map"        frameTitle="app.example.com"      />      <HowItWorks title="How it works" steps={[{ title: "Create" }, { title: "Share" }, { title: "Sell" }]} />      <FeatureGrid title="Everything you need" features={[{ icon: <Zap />, title: "Fast", description: "Pages load at once." }]} />      <CtaBanner title="Ready to start?" action={<Button variant="primary">Create account</Button>} />    </main>  );}

Website · beta

Live examples and controls: Marketing sections in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/marketing-sections.json

Pieces for building a landing page in the product's own brand. They are presentational: pass copy, icons and buttons, and they lay them out.

Already in Nasaq and not repeated here: FeatureStory (one feature with a picture), PlanGrid and PlanCard (recurring plans), TestimonialWall and SubscriptionLanding.

When to useCopy Anchor Link

• A public product page, a launch page or an app-store style landing page.
• The empty or first-run screen of a product that must explain itself.

When not to useCopy Anchor Link

• Inside the working part of an app: use its own layout components.
• Recurring subscription plans: use PlanGrid.
• A live chat: use Chat or CopilotChat. SessionPlayback only replays a script.

ImportCopy Anchor Link

import { AppMockupHero, HowItWorks, FeatureGrid, PricingPacks, CtaBanner, SessionPlayback, AuroraBackground } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { AppMockupHero, Button, CtaBanner, FeatureGrid, HowItWorks } from "@fadymondy/nasaq/web";
import { Zap } from "lucide-react";

export function Page() {
  return (
    <main className="flex flex-col gap-20">
      <AppMockupHero
        title="Book seats in seconds"
        description="Plans, seat maps and payments in one place."
        actions={<Button variant="primary" size="lg">Start free</Button>}
        mockup={<img src="/app.png" alt="" />}
        mockupLabel="The seat map"
        frameTitle="app.example.com"
      />
      <HowItWorks title="How it works" steps={[{ title: "Create" }, { title: "Share" }, { title: "Sell" }]} />
      <FeatureGrid title="Everything you need" features={[{ icon: <Zap />, title: "Fast", description: "Pages load at once." }]} />
      <CtaBanner title="Ready to start?" action={<Button variant="primary">Create account</Button>} />
    </main>
  );
}

AnatomyCopy Anchor Link

AppMockupHero      data-slot="app-mockup-hero"    backdrop > eyebrow, h1, text, actions, proof, ScreenshotFrame (fades out at the bottom)
HowItWorks         data-slot="how-it-works"       intro + ol: number badge, line, title, text, optional media
FeatureGrid        data-slot="feature-grid"       intro + ul of tiles
PricingPacks       data-slot="pricing-packs"      intro + ul of article cards: name, credits, bonus, price, unit price, Buy
CtaBanner          data-slot="cta-banner"         panel (aurora when brand) with title, text, buttons, note
SessionPlayback    data-slot="session-playback"   header, role="log" transcript, play / scrubber / clock
AuroraBackground   data-slot="aurora-background"  drifting colour blobs behind children
GridBackground     data-slot="grid-background"    line or dot grid behind children

APICopy Anchor Link

AppMockupHeroCopy Anchor Link

HowItWorksCopy Anchor Link

FeatureGridCopy Anchor Link

CtaBannerCopy Anchor Link

PricingPacksCopy Anchor Link

SessionPlaybackCopy Anchor Link

AuroraBackground and GridBackgroundCopy Anchor Link

AuroraBackground: tone ("brand" \| "multi"), animate (default true), fade (default true). GridBackground: cell (40), pattern ("lines" \| "dots"), fade (true). Both take children, which render above the backdrop.

Helpers (pure, no React)Copy Anchor Link

sessionTimeline, sessionStateAt, sessionTimeFromRatio and formatSessionClock are the timeline maths of SessionPlayback.

ExamplesCopy Anchor Link

import { Button, PricingPacks } from "@fadymondy/nasaq/web";

export const Credits = () => (
  <PricingPacks
    title="Top up"
    packs={[
      { id: "s", name: "Starter", credits: 500, price: 9 },
      { id: "p", name: "Pro", credits: 2500, bonus: 250, price: 39, highlighted: true, badge: "Best value" },
    ]}
    onPurchase={async (pack) => { await fetch(`/buy/${pack.id}`, { method: "POST" }); }}
  />
);

AccessibilityCopy Anchor Link

• One h1 (the hero); sections use h2 and their steps and tiles h3. Pass titleAs="h3" inside another section.
• The backdrops are aria-hidden and ignore the pointer. Motion in the aurora stops under reduced motion.
• SessionPlayback is a role="log" with live updates off, so it does not read itself out while typing. It has a labelled play / pause button and a labelled scrubber. Under reduced motion it shows the whole session and does not autoplay.
• A mockupLabel on the hero makes the framed picture one image with a description.

RTL & i18nCopy Anchor Link

• Everything uses logical placement (start, end), so steps, tiles and buttons mirror in Arabic; the connector line and play arrow mirror too.
• Step numbers, credit amounts and the playback clock use Latin digits in both languages.
• SessionPlayback reveals Arabic word by word, never letter by letter.

Styling & tokensCopy Anchor Link

Backdrops use --nq-brand, the tag colours and --nq-line. Panels use bg-nq-selected, bg-card and border-border. Layout follows the container width (@container), so a section works in a narrow column as well as a full page.

Do / Don'tCopy Anchor Link

• Do give each page one hero and one final banner with one main button.
• Do describe steps with verbs ("Create", "Share", "Sell").
• Don't stack more than one aurora on a screen; it is a glow, not a pattern.
• Don't use SessionPlayback to promise features the product does not have.

RelatedCopy Anchor Link

• FeatureStory
• PlanCard
• TestimonialWall
• ScreenshotFrame
• text-effects

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-website-marketing-sections--docs