Karkas · pattern
Hero bölimi
Landingning birinçi ekrani (4.170): yangilik tabletkasi (eyebrow), katta sarlavha (urğu söz mavzu gradientida yoki aylanuvçi söz — textfx), bir-ikki gaplik izoh, ikki tugma, işonç qatori (✓ belgili qisqa da'volar) va katta media (skrinşot, terminal, jonli UI). data-layout: center (standart) yoki split (matn çapda, media öngda). Orqa fon — içidagi .fx-bg (katak/nuqta + mavzu nuri). Kirişda bloklar poğonali kötariladi; data-tilt bilan media scroll paytida egiklikdan tikka turadi (qöllamaydigan brauzerda — tekis). Sarlavha ölçami ekran eniga qarab silliq ösadi.
YangiEffektlar va marketing naqşlari — nima yangi
Dizayn tizimi — özbekça, töğridan-töğri kodda
Komponentlar, tokenlar va qoidalar bitta paketda. Mavzu va uslubni bitta atribut bilan tanlaysiz, yangilaniş taklif bölib keladi, AI agent esa qoidalarni MCP orqali özi oladi.
- Oçiq yadro npm'da
- Figma şart emas
- 1 litsenziya — 3 qurilma
npx foxui initMavzu: amethyst · Uslub: AylanaTayyor — komponentlar va qoidalar ulandi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-layout | split matn çapda, media öngda | center |
data-size | compact içki sahifa hero bloki | default |
data-tilt | on media scroll bilan tikka turadi | off |
Anatomiya
- root
.fx-heroşart - content
.fx-hero__contentşart - eyebrow
.fx-hero__eyebrowixtiyoriy - title
.fx-hero__titleşart - accent (urğu söz)
.fx-hero__accentixtiyoriy - text
.fx-hero__textixtiyoriy - actions
.fx-hero__actionsixtiyoriy - note (işonç qatori)
.fx-hero__noteixtiyoriy - media
.fx-hero__mediaixtiyoriy - screen (media içidagi ekran)
.fx-hero__screenixtiyoriy
Klaviatura va kiriş
<section aria-labelledby> + bitta h1. Urğu gradienti faqat bezak — matn oddiy öqiladi; forced-colors'da tizim rangi. Işonç qatori — röyxat (ul). Kiriş animatsiyasi bir marta, prefers-reduced-motion'da yöq; media egiklik effekti ham öçadi. Tugmalar — havola (<a>) yoki tugma vazifasiga qarab.
Kod
AI uçun: qaçon işlatiladi
- Landing yoki mahsulot sahifasining birinçi ekrani.
- Yangi relizni e'lon qiliş sahifasi (eyebrow + media).
- Ilova içidagi sahifa sarlavhasi →
page-header - Sahifa oxiridagi çaqiriq →
cta - Hero blokiga uçtadan ortiq tugma qöymang — bitta asosiy, bitta ikkinçi darajali.
- Sarlavhani uzun qilmang — 6–10 söz; tafsilot izohda.
- Bir hero blokida aylanuvçi söz, yozuv maşinkasi va çegara nurini birga işlatmang — bitta urğu.
- Media örniga bezak rasmini qöymang — mahsulotning özini körsating.
npx foxui add hero
<section class="fx-hero" data-tilt aria-labelledby="hero-t">
<div class="fx-bg" data-pattern="grid" data-glow aria-hidden="true"></div>
<div class="fx-hero__content">
<p class="fx-hero__eyebrow"><span class="fx-phase" data-phase="preview" data-variant="pill"><strong class="fx-phase__tag">Yangi</strong><span class="fx-phase__text">Effektlar va marketing naqşlari — <a href="#">nima yangi</a></span></span></p>
<h1 class="fx-hero__title" id="hero-t">Dizayn tizimi — <span class="fx-hero__accent">özbekça</span>, töğridan-töğri kodda</h1>
<p class="fx-hero__text">Komponentlar, tokenlar va qoidalar bitta paketda. Mavzu va uslubni bitta atribut bilan tanlaysiz, yangilaniş taklif bölib keladi, AI agent esa qoidalarni MCP orqali özi oladi.</p>
<div class="fx-hero__actions"><a class="fx-btn" data-variant="primary" data-size="lg" href="#">Bepul boşlaş</a><a class="fx-btn" data-size="lg" href="#">Hujjatlarni köriş</a></div>
<ul class="fx-hero__note"><li>Oçiq yadro npm'da</li><li>Figma şart emas</li><li>1 litsenziya — 3 qurilma</li></ul>
</div>
<div class="fx-hero__media">
<div class="fx-terminal" data-fx-terminal data-fx-scheme="dark" data-dots="color" role="figure" aria-label="FoxUI'ni örnatiş"><div class="fx-terminal__bar"><span class="fx-terminal__dots" aria-hidden="true"><i></i><i></i><i></i></span><p class="fx-terminal__title">~/dökon-sayti</p></div><pre class="fx-terminal__body"><span class="fx-terminal__line" data-kind="cmd">npx foxui init</span><span class="fx-terminal__line" data-kind="out">Mavzu: amethyst · Uslub: Aylana</span><span class="fx-terminal__line" data-kind="ok">Tayyor — komponentlar va qoidalar ulandi</span></pre></div>
</div>
</section>Tokenlar: --fx-bg-brand-solid --fx-bg-category-coral --fx-bg-category-pink --fx-bg-page --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-dialog-width --fx-duration-stagger --fx-ease-emphasized --fx-fg-success --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-md --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-sm --fx-font-size-xl --fx-font-weight-semibold --fx-knob-motion --fx-motion-shift-lg --fx-motion-slower --fx-radius-overlay --fx-shadow-lg --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary