Components
Button · pill canonical
import Button from "@lisacorp/wam-astro-components/primitives/Button.astro"; <Button href="/start">Get started</Button> <Button variant="ghost" size="sm">Learn more</Button> <Button variant="secondary" type="button">Cancel</Button> <!-- ghost-on-dark: for use over dark photo overlays --> <Button variant="ghost-on-dark" size="lg">Learn more</Button>
Card · soft radius default
PLAN · PRO
Everything you need for a serious project — Claude Sonnet, unlimited memory, priority support.
Default soft radius (60px) — matches magnets.tg
.wam-tile pattern.
Hard-edge variant via
flat prop (radius 0 + hairline border).
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 flat>Hard-edge variant</Card>
FeatureCards · 3-column landing grid
What WAM can do
Customize
Tune your agent's voice, memory and behaviour to match your brand.
Add to groups
Works in any Telegram chat — personal, group, or channel.
Voice · Text · Photo
Understands every format. Responds naturally in the same medium.
import FeatureCards from "@lisacorp/wam-astro-components/patterns/FeatureCards.astro";
<FeatureCards
title="What WAM can do"
items={[
{ icon: "🎨", title: "Customize", caption: "Your agent, your style." },
{ icon: "👥", title: "Add to groups", caption: "Any Telegram chat." },
{ icon: "🎙️", title: "Voice · Text · Photo", caption: "Every format." },
]}
/> HeroSlideshow · crossfade photo hero
CSS-only crossfade (2–4 slides), dark gradient overlay bottom-left, content slot.
Replace /slide-N.jpg with real asset paths in your consumer.
import HeroSlideshow from "@lisacorp/wam-astro-components/patterns/HeroSlideshow.astro";
import Button from "@lisacorp/wam-astro-components/primitives/Button.astro";
<HeroSlideshow
slides={["/hero-1.jpg", "/hero-2.jpg", "/hero-3.jpg"]}
duration={5}
height="600px"
>
<div>
<img src="/logo.svg" alt="WAM" />
<p>Your AI agent in Telegram</p>
<Button variant="primary" size="lg">Create agent</Button>
<Button variant="ghost-on-dark" size="lg">Learn more</Button>
</div>
</HeroSlideshow> Masthead · three-zone page-title band
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, SiteFooter, Form, Hero
Дополнительные компоненты доступны через те же пути @lisacorp/wam-astro-components/layout/... и /primitives/.... Документация: README.