Marketing

import { GlassSurface } from "@zedtech/zedkit-ui/marketing";

<GlassSurface as="section" aria-label="Plans" tone="raised" padding="lg">
  Plans
</GlassSurface>;

import { Hero } from "@zedtech/zedkit-ui/marketing";

<Hero
  title="Keep your shop. Add live updates."
  description="Stock, orders and offers update without a refresh."
  actions={<a href="/signup">Create an account</a>}
/>;

import { CtaBand } from "@zedtech/zedkit-ui/marketing";

<CtaBand
  title="Try it on a staging key"
  actions={<a href="/signup">Create an account</a>}
/>;

import { FeatureGrid } from "@zedtech/zedkit-ui/marketing";

<FeatureGrid
  title="Built for the shop you already run"
  features={[
    { title: "Live stock", description: "Counts follow every sale." },
    { title: "Personal offers", description: "Each visitor sees what fits." },
  ]}
/>;

import { HowItWorks } from "@zedtech/zedkit-ui/marketing";

<HowItWorks
  title="Live in three steps"
  steps={[{ title: "Create an account" }, { title: "Create a key" }, { title: "See your first event" }]}
/>;

import { MarketingFooter, MarketingHeader } from "@zedtech/zedkit-ui/marketing";

<MarketingHeader
  brand={<a href="/">Harbor</a>}
  links={[<a key="docs" href="/docs">Docs</a>]}
  actions={<a href="/signup">Create an account</a>}
/>;
<MarketingFooter brand="Harbor" columns={[{ title: "Product", links: [<a key="docs" href="/docs">Docs</a>] }]} />;

import { MediaSection } from "@zedtech/zedkit-ui/marketing";

<MediaSection
  title="An assistant that knows your catalog"
  points={["Reads your products", "Never changes an order"]}
  media={<img src="/assistant.png" alt="The assistant answering a question about stock" />}
/>;

import { LogoBand } from "@zedtech/zedkit-ui/marketing";

<LogoBand
  title="Works with the shops you know"
  logos={[{ name: "Harbor Studio", logo: <img src="/harbor.svg" alt="" /> }]}
/>;

import { Testimonials } from "@zedtech/zedkit-ui/marketing";

<Testimonials
  title="What shops say"
  items={[{ quote: "We launched a new offer in a day.", name: "Ada Lovelace", role: "Head of e-commerce" }]}
/>;

import { Pricing } from "@zedtech/zedkit-ui/marketing";

<Pricing
  title="Simple pricing"
  plans={[
    { name: "Starter", price: "€0", period: "per month", features: ["1 staging key"], action: <a href="/signup">Start free</a> },
    { name: "Growth", price: "€29", period: "per month", features: ["5 keys"], highlighted: true, badge: "Most popular" },
  ]}
/>;

import { Faq } from "@zedtech/zedkit-ui/marketing";

<Faq
  title="Questions"
  items={[{ question: "Do I need to change my shop?", answer: "No. It runs next to it." }]}
/>;

import { LocaleSwitch } from "@zedtech/zedkit-ui/marketing";

<LocaleSwitch
  current="en"
  locales={[
    { code: "en", label: "English", href: "/en" },
    { code: "fr", label: "Français", href: "/fr" },
  ]}
/>;