Components

Astro components extracted from wam-online. Import directly by path from @lisacorp/wam-astro-components.

Button

import Button from "@lisacorp/wam-astro-components/primitives/Button.astro";

<Button href="/start">Get started</Button>
<Button variant="secondary" size="sm">Learn more</Button>
<Button variant="ghost" type="button">Cancel</Button>

Card

Everything you need for a serious project — Claude Sonnet, unlimited memory, priority support.

Rounded variant

Uses --radius-card: 60px — for hero cards and feature sections.

import Card from "@lisacorp/wam-astro-components/primitives/Card.astro";

<Card>
  <Fragment slot="header">Plan · <b>Pro</b></Fragment>
  Body content in the default slot.
  <Fragment slot="footer"><Button size="sm">Subscribe</Button></Fragment>
</Card>

<Card rounded>Big feature card</Card>

Masthead

Tier · BYOK Claude Sonnet

Pricing

990 ₽/mo 30-day trial

import Masthead from "@lisacorp/wam-astro-components/layout/Masthead.astro";

<Masthead title="Pricing">
  <Fragment slot="meta-left">Tier · <b>BYOK</b></Fragment>
  <Fragment slot="meta-right"><b>990 ₽/mo</b><span>30-day trial</span></Fragment>
</Masthead>

SiteHeader

WAM

import SiteHeader from "@lisacorp/wam-astro-components/layout/SiteHeader.astro";

<SiteHeader
  brandName="WAM"
  brandHref="/"
  links=[object Object][object Object][object Object]
>
  <Fragment slot="action"><Button size="sm">Get started</Button></Fragment>
</SiteHeader>

Hero

Introducing

Your AI agent in Telegram

import Hero from "@lisacorp/wam-astro-components/patterns/Hero.astro";

<Hero
  eyebrow="Introducing"
  title="Your AI agent in Telegram"
  lede="Powered by Claude. Works in any chat."
>
  <Fragment slot="actions">
    <Button href="/start" size="lg">Get started</Button>
    <Button href="/docs" variant="ghost" size="lg">Read docs</Button>
  </Fragment>
</Hero>

Form

Message

We reply within 24 hours.

import Form from "@lisacorp/wam-astro-components/primitives/Form.astro";

<Form action="/api/contact" method="post">
  <div class="wam-field">
    <label class="wam-label" for="email">Email</label>
    <input class="wam-input" id="email" name="email" type="email" />
  </div>
  <Fragment slot="actions">
    <Button type="submit">Send</Button>
  </Fragment>
</Form>