@equal-experts/kuat-vue 0.12.0 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/agent-docs/AGENTS.md +10 -0
- package/agent-docs/README.md +17 -0
- package/agent-docs/bundle-manifest.json +63 -0
- package/agent-docs/components/_template.md +21 -0
- package/agent-docs/components/button-group.md +27 -0
- package/agent-docs/components/button.md +50 -0
- package/agent-docs/components/components.manifest.json +20 -0
- package/agent-docs/components/kuat-header.md +27 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/LOADING.md +166 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/accessibility.md +444 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/brand.md +99 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/README.md +28 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/formatting.md +93 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/numbers.md +69 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/punctuation.md +75 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/voice-and-tone.md +263 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/content/writing-style.md +91 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/README.md +28 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/borders.md +159 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/colours.md +173 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/design-language.md +116 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/spacing.md +130 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/design/typography.md +155 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/foundations/logo.md +151 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/content/README.md +26 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/content/blog-posts.md +33 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/content/marketing-content.md +65 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/content/seo.md +44 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/emails.md +74 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/scenarios/README.md +18 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/scenarios/marketing-pages.md +368 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/website.md +169 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/DEPRECATIONS.md +28 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/README.md +65 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/accessibility.md +402 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/component-decision-tree.md +263 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/component-registry.md +68 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/README.md +29 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/actions.md +51 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/confirmations.md +57 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/empty-states.md +43 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/errors.md +54 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/forms.md +74 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/content/product-content.md +138 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/design.md +207 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/emails.md +71 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-checklist.md +57 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/review-context.md +44 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/README.md +82 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/authentication.md +303 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/dashboards.md +313 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/documentation.md +333 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/scenarios/forms.md +361 -0
- package/agent-docs/external/kuat-agent-rules/kuat-docs/rules/types/web/product/technical.md +488 -0
- package/agent-docs/kuat-docs/rules/README.md +148 -0
- package/agent-docs/kuat-docs/rules/design/layouts.md +394 -0
- package/agent-docs/kuat-docs/rules/scenarios/README.md +83 -0
- package/agent-docs/kuat-docs/rules/scenarios/authentication.md +301 -0
- package/agent-docs/kuat-docs/rules/scenarios/dashboards.md +314 -0
- package/agent-docs/kuat-docs/rules/scenarios/documentation.md +333 -0
- package/agent-docs/kuat-docs/rules/scenarios/forms.md +359 -0
- package/agent-docs/kuat-docs/rules/scenarios/marketing-pages.md +367 -0
- package/agent-docs/manifest.json +9 -0
- package/agent-docs/rules/LOADING-consumer.md +27 -0
- package/dist/{AccordionTrigger-BRz5PzEd.js → AccordionTrigger-BGVFRlgt.js} +1 -1
- package/dist/{AlertDialogTrigger.vue_vue_type_script_setup_true_lang-CK1Um8CY.js → AlertDialogTrigger.vue_vue_type_script_setup_true_lang-DosgAcSM.js} +1 -1
- package/dist/{KuatSelect.vue_vue_type_script_setup_true_lang-DP66U_wg.js → KuatSelect.vue_vue_type_script_setup_true_lang-CT1xn9gs.js} +1 -1
- package/dist/accordion.js +1 -1
- package/dist/alert-dialog.js +1 -1
- package/dist/button-group.js +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/components/ui/icon-button/IconButton.vue.d.ts +62 -0
- package/dist/components/ui/icon-button/constants.d.ts +13 -0
- package/dist/components/ui/icon-button/index.d.ts +14 -0
- package/dist/components/ui/kuat-header/KuatHeader.vue.d.ts +7 -6
- package/dist/components/ui/kuat-header/constants.d.ts +79 -0
- package/dist/components/ui/kuat-header/index.d.ts +3 -2
- package/dist/components/ui/kuat-header/kuat-header.logic.d.ts +29 -0
- package/dist/components/ui/select/KuatSelect.vue.d.ts +2 -2
- package/dist/components/ui/select/SelectTrigger.vue.d.ts +1 -1
- package/dist/{constants-Ils7NSfg.js → constants-BZKku54w.js} +1 -1
- package/dist/{constants-BpzIL1jq.js → constants-DC1CCNlp.js} +1 -1
- package/dist/{constants-D_fYMnOg.js → constants-DWBWMp2p.js} +1 -1
- package/dist/icon-button.d.ts +3 -0
- package/dist/icon-button.js +12 -0
- package/dist/index-OELvcT-N.js +54 -0
- package/dist/{index-iz_NZI-V.js → index-Tp80OeHH.js} +1 -1
- package/dist/index-lZY__1xm.js +76 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1188 -392
- package/dist/radio.js +1 -1
- package/dist/select.js +1 -1
- package/dist/style.css +1 -1
- package/dist/switch.js +1 -1
- package/dist/toggle-group.js +1 -1
- package/package.json +8 -2
- package/dist/index-A7umpmtg.js +0 -37
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
# Marketing Page Scenarios
|
|
2
|
+
|
|
3
|
+
Patterns for landing pages, feature pages, pricing, testimonials, and promotional content.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Principles
|
|
8
|
+
|
|
9
|
+
### User Goals
|
|
10
|
+
|
|
11
|
+
- **Understand the value** - What's in it for me?
|
|
12
|
+
- **Build trust** - Is this credible?
|
|
13
|
+
- **Make decisions** - Which option is right for me?
|
|
14
|
+
- **Take action** - Easy path to next step
|
|
15
|
+
|
|
16
|
+
### UX Principles
|
|
17
|
+
|
|
18
|
+
| Principle | Implementation |
|
|
19
|
+
|-----------|----------------|
|
|
20
|
+
| Clear value proposition | Hero communicates benefit immediately |
|
|
21
|
+
| Social proof | Testimonials, logos, metrics build trust |
|
|
22
|
+
| Scannable content | Users skim before they read |
|
|
23
|
+
| Clear CTAs | Obvious next steps at every section |
|
|
24
|
+
|
|
25
|
+
### Success Metrics
|
|
26
|
+
|
|
27
|
+
- Time on page
|
|
28
|
+
- Scroll depth
|
|
29
|
+
- CTA click-through rate
|
|
30
|
+
- Conversion rate
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## Layout
|
|
35
|
+
|
|
36
|
+
**Base Layout:** [Horizontal Navigation](../design/layouts.md#1-horizontal-navigation-layout)
|
|
37
|
+
|
|
38
|
+
Marketing pages use full-width sections with contained content.
|
|
39
|
+
|
|
40
|
+
### Landing Page Structure
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
┌─────────────────────────────────────┐
|
|
44
|
+
│ Header │
|
|
45
|
+
├─────────────────────────────────────┤
|
|
46
|
+
│ Hero Section (full width) │
|
|
47
|
+
├─────────────────────────────────────┤
|
|
48
|
+
│ Social Proof / Logos │
|
|
49
|
+
├─────────────────────────────────────┤
|
|
50
|
+
│ Features Section │
|
|
51
|
+
├─────────────────────────────────────┤
|
|
52
|
+
│ Benefits / How It Works │
|
|
53
|
+
├─────────────────────────────────────┤
|
|
54
|
+
│ Testimonials │
|
|
55
|
+
├─────────────────────────────────────┤
|
|
56
|
+
│ CTA Section │
|
|
57
|
+
├─────────────────────────────────────┤
|
|
58
|
+
│ Footer │
|
|
59
|
+
└─────────────────────────────────────┘
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Pricing Page Structure
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
┌─────────────────────────────────────┐
|
|
66
|
+
│ Header │
|
|
67
|
+
├─────────────────────────────────────┤
|
|
68
|
+
│ Heading: "Pricing" or "Choose Plan" │
|
|
69
|
+
│ [Monthly] [Annual] toggle │
|
|
70
|
+
├─────────────────────────────────────┤
|
|
71
|
+
│ ┌─────┐ ┌─────┐ ┌─────┐ │
|
|
72
|
+
│ │Free │ │ Pro │ │Enter│ │
|
|
73
|
+
│ │ │ │ ★ │ │prise│ │
|
|
74
|
+
│ └─────┘ └─────┘ └─────┘ │
|
|
75
|
+
├─────────────────────────────────────┤
|
|
76
|
+
│ Feature Comparison Table │
|
|
77
|
+
├─────────────────────────────────────┤
|
|
78
|
+
│ FAQ Section │
|
|
79
|
+
├─────────────────────────────────────┤
|
|
80
|
+
│ Footer │
|
|
81
|
+
└─────────────────────────────────────┘
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Specifications
|
|
85
|
+
|
|
86
|
+
| Element | Value |
|
|
87
|
+
|---------|-------|
|
|
88
|
+
| Header height | 64-80px |
|
|
89
|
+
| Content container | max-width 1200-1400px, centered |
|
|
90
|
+
| Section padding | 64-96px vertical |
|
|
91
|
+
| Footer padding | 48-64px vertical |
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Design
|
|
96
|
+
|
|
97
|
+
### Color Tokens
|
|
98
|
+
|
|
99
|
+
| Element | Token |
|
|
100
|
+
|---------|-------|
|
|
101
|
+
| Page background | `bg-background` |
|
|
102
|
+
| Header | `bg-background` (light) |
|
|
103
|
+
| Alternating sections | `bg-muted` or `bg-background` |
|
|
104
|
+
| CTA sections | `bg-primary` or dark |
|
|
105
|
+
| Footer | `bg-muted` |
|
|
106
|
+
|
|
107
|
+
### Typography
|
|
108
|
+
|
|
109
|
+
| Element | Style |
|
|
110
|
+
|---------|-------|
|
|
111
|
+
| Hero heading | `text-4xl md:text-5xl lg:text-6xl font-bold` |
|
|
112
|
+
| Hero subheading | `text-xl text-muted-foreground` |
|
|
113
|
+
| Section heading | `text-3xl font-bold` |
|
|
114
|
+
| Section subheading | `text-lg text-muted-foreground` |
|
|
115
|
+
| Body text | `text-base` or `text-lg` |
|
|
116
|
+
| Feature title | `text-lg font-semibold` |
|
|
117
|
+
|
|
118
|
+
### Spacing Between Sections
|
|
119
|
+
|
|
120
|
+
| Section Type | Vertical Padding |
|
|
121
|
+
|--------------|-----------------|
|
|
122
|
+
| Hero | 64-96px |
|
|
123
|
+
| Standard content | 64px |
|
|
124
|
+
| CTA sections | 64-80px |
|
|
125
|
+
| Compact (logos) | 32-48px |
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## Content
|
|
130
|
+
|
|
131
|
+
### Hero Section
|
|
132
|
+
|
|
133
|
+
**Required Elements:**
|
|
134
|
+
|
|
135
|
+
1. Headline - Clear value proposition
|
|
136
|
+
2. Subheadline - Supporting detail
|
|
137
|
+
3. Primary CTA button
|
|
138
|
+
4. Secondary CTA (optional)
|
|
139
|
+
5. Hero image/illustration (optional)
|
|
140
|
+
|
|
141
|
+
**Hero Variants:**
|
|
142
|
+
|
|
143
|
+
| Variant | Structure |
|
|
144
|
+
|---------|-----------|
|
|
145
|
+
| Centered | Text centered, buttons centered below |
|
|
146
|
+
| Split | Text left (50%), image right (50%) |
|
|
147
|
+
| With background | Dark/image background, light text |
|
|
148
|
+
|
|
149
|
+
**Specifications:**
|
|
150
|
+
|
|
151
|
+
| Element | Value |
|
|
152
|
+
|---------|-------|
|
|
153
|
+
| Heading | Max 10-12 words |
|
|
154
|
+
| Subheading | 1-2 sentences |
|
|
155
|
+
| CTA spacing | 16px between buttons |
|
|
156
|
+
|
|
157
|
+
### Feature Sections
|
|
158
|
+
|
|
159
|
+
**Feature Grid:**
|
|
160
|
+
|
|
161
|
+
```
|
|
162
|
+
┌─────────┐ ┌─────────┐ ┌─────────┐
|
|
163
|
+
│ Icon │ │ Icon │ │ Icon │
|
|
164
|
+
│ Heading │ │ Heading │ │ Heading │
|
|
165
|
+
│ Text │ │ Text │ │ Text │
|
|
166
|
+
└─────────┘ └─────────┘ └─────────┘
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
| Element | Specification |
|
|
170
|
+
|---------|---------------|
|
|
171
|
+
| Grid | 3 columns desktop, 2 tablet, 1 mobile |
|
|
172
|
+
| Gap | 32px |
|
|
173
|
+
| Icon size | 48px, brand color |
|
|
174
|
+
| Alignment | Center or left |
|
|
175
|
+
|
|
176
|
+
**Feature Alternating:**
|
|
177
|
+
|
|
178
|
+
```
|
|
179
|
+
┌─────────────────────────────────────┐
|
|
180
|
+
│ [Image] Text content │
|
|
181
|
+
├─────────────────────────────────────┤
|
|
182
|
+
│ Text content [Image] │
|
|
183
|
+
├─────────────────────────────────────┤
|
|
184
|
+
│ [Image] Text content │
|
|
185
|
+
└─────────────────────────────────────┘
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
- Alternate image position left/right
|
|
189
|
+
- 50/50 or 60/40 split
|
|
190
|
+
- Stack on mobile (image above text)
|
|
191
|
+
|
|
192
|
+
### Pricing Cards
|
|
193
|
+
|
|
194
|
+
| Element | Specification |
|
|
195
|
+
|---------|---------------|
|
|
196
|
+
| Card padding | 32px (`p-8`) |
|
|
197
|
+
| Highlighted tier | `border-primary`, "Popular" badge |
|
|
198
|
+
| Price display | `text-4xl font-bold` |
|
|
199
|
+
| Period | `text-sm text-muted-foreground` |
|
|
200
|
+
| Feature list | 8-10 items max, checkmarks |
|
|
201
|
+
| CTA button | Full width at bottom |
|
|
202
|
+
|
|
203
|
+
### Testimonials
|
|
204
|
+
|
|
205
|
+
**Card Pattern:**
|
|
206
|
+
|
|
207
|
+
| Element | Specification |
|
|
208
|
+
|---------|---------------|
|
|
209
|
+
| Quote | `text-lg`, optional quotation marks |
|
|
210
|
+
| Avatar | 48-64px, rounded full |
|
|
211
|
+
| Name | `font-semibold` |
|
|
212
|
+
| Title/Company | `text-muted-foreground` |
|
|
213
|
+
| Logo | 80-120px wide |
|
|
214
|
+
|
|
215
|
+
**Layout Options:**
|
|
216
|
+
|
|
217
|
+
| Layout | Use Case |
|
|
218
|
+
|--------|----------|
|
|
219
|
+
| Grid (3 col) | Multiple equal testimonials |
|
|
220
|
+
| Carousel | Many testimonials, limited space |
|
|
221
|
+
| Featured | Single prominent quote |
|
|
222
|
+
|
|
223
|
+
### CTA Sections
|
|
224
|
+
|
|
225
|
+
**Mid-page CTA:**
|
|
226
|
+
|
|
227
|
+
| Element | Specification |
|
|
228
|
+
|---------|---------------|
|
|
229
|
+
| Background | `bg-muted` |
|
|
230
|
+
| Padding | 64px vertical |
|
|
231
|
+
| Content | Centered heading + button |
|
|
232
|
+
|
|
233
|
+
**Final CTA (above footer):**
|
|
234
|
+
|
|
235
|
+
| Element | Specification |
|
|
236
|
+
|---------|---------------|
|
|
237
|
+
| Background | `bg-primary` or dark |
|
|
238
|
+
| Text | White/light |
|
|
239
|
+
| Padding | 80-96px vertical |
|
|
240
|
+
| Content | Strong headline + single button |
|
|
241
|
+
|
|
242
|
+
---
|
|
243
|
+
|
|
244
|
+
## Accessibility
|
|
245
|
+
|
|
246
|
+
**Base requirements:** See [accessibility/design.md](../accessibility/design.md), [accessibility/content.md](../accessibility/content.md), and [accessibility/technical.md](../accessibility/technical.md)
|
|
247
|
+
|
|
248
|
+
**Scenario-specific:**
|
|
249
|
+
|
|
250
|
+
| Requirement | Implementation |
|
|
251
|
+
|-------------|----------------|
|
|
252
|
+
| Image alt text | Describe meaningful images, decorative get empty alt |
|
|
253
|
+
| Heading structure | H1 (hero) → H2 (sections) → H3 (sub-sections) |
|
|
254
|
+
| Link purpose | CTAs describe destination/action |
|
|
255
|
+
| Contrast on dark sections | Ensure text meets 4.5:1 on dark backgrounds |
|
|
256
|
+
| Video captions | All promotional videos have captions |
|
|
257
|
+
|
|
258
|
+
### Pricing Table Accessibility
|
|
259
|
+
|
|
260
|
+
- Use semantic `<table>` for comparison tables
|
|
261
|
+
- Clear header row with `<th>` elements
|
|
262
|
+
- Don't rely on color alone for highlighting
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## Implementation
|
|
267
|
+
|
|
268
|
+
### Header Pattern
|
|
269
|
+
|
|
270
|
+
| Element | Specification |
|
|
271
|
+
|---------|---------------|
|
|
272
|
+
| Background | `bg-background` (light) |
|
|
273
|
+
| Logo | Full-color, left-aligned, 120-150px |
|
|
274
|
+
| Navigation | Right-aligned, horizontal |
|
|
275
|
+
| CTA button | Primary action in header |
|
|
276
|
+
| Height | 64-80px |
|
|
277
|
+
|
|
278
|
+
### Footer Pattern
|
|
279
|
+
|
|
280
|
+
| Element | Specification |
|
|
281
|
+
|---------|---------------|
|
|
282
|
+
| Background | `bg-muted` |
|
|
283
|
+
| Logo | Full-color, 100-120px |
|
|
284
|
+
| Link columns | Company, Resources, Legal |
|
|
285
|
+
| Social links | Icons, 24px |
|
|
286
|
+
| Copyright | Bottom, `text-sm text-muted-foreground` |
|
|
287
|
+
|
|
288
|
+
### Case Study Structure
|
|
289
|
+
|
|
290
|
+
1. Hero with client logo and headline
|
|
291
|
+
2. Challenge section - What problem?
|
|
292
|
+
3. Solution section - How did we help?
|
|
293
|
+
4. Results section - Metrics and outcomes
|
|
294
|
+
5. Client quote
|
|
295
|
+
6. Related case studies CTA
|
|
296
|
+
|
|
297
|
+
**Results Display:**
|
|
298
|
+
|
|
299
|
+
```
|
|
300
|
+
┌──────┐ ┌──────┐ ┌──────┐
|
|
301
|
+
│ 50% │ │ 3x │ │ 24h │
|
|
302
|
+
│ cost │ │faster│ │deploy│
|
|
303
|
+
│ saved│ │ time │ │ time │
|
|
304
|
+
└──────┘ └──────┘ └──────┘
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
- Use KPI card pattern
|
|
308
|
+
- Include context (e.g., "50% reduction in...")
|
|
309
|
+
|
|
310
|
+
### Responsive Behavior
|
|
311
|
+
|
|
312
|
+
| Element | Desktop | Tablet | Mobile |
|
|
313
|
+
|---------|---------|--------|--------|
|
|
314
|
+
| Hero heading | `text-6xl` | `text-5xl` | `text-4xl` |
|
|
315
|
+
| Feature grid | 3 columns | 2 columns | 1 column |
|
|
316
|
+
| Pricing cards | 3 horizontal | 3 horizontal | Stacked |
|
|
317
|
+
| Split sections | 50/50 | 50/50 | Stacked |
|
|
318
|
+
| Testimonials | 3 columns | 2 columns | 1 column |
|
|
319
|
+
|
|
320
|
+
---
|
|
321
|
+
|
|
322
|
+
## Best Practices
|
|
323
|
+
|
|
324
|
+
### Do's
|
|
325
|
+
|
|
326
|
+
1. **Lead with value** - Hero should answer "what's in it for me?"
|
|
327
|
+
2. **Use social proof** - Logos, testimonials, metrics
|
|
328
|
+
3. **Clear CTAs** - One primary action per section
|
|
329
|
+
4. **Scannable content** - Users skim before reading
|
|
330
|
+
5. **Mobile-first** - Many visitors are on mobile
|
|
331
|
+
6. **Fast loading** - Optimize images, lazy load below fold
|
|
332
|
+
|
|
333
|
+
### Don'ts
|
|
334
|
+
|
|
335
|
+
1. **Don't overwhelm** - One message per section
|
|
336
|
+
2. **Don't hide CTAs** - Make them prominent
|
|
337
|
+
3. **Don't use jargon** - Plain language for broad audience
|
|
338
|
+
4. **Don't auto-play video with sound** - Respect user preferences
|
|
339
|
+
5. **Don't neglect footer** - Important for trust and navigation
|
|
340
|
+
|
|
341
|
+
### Common Mistakes
|
|
342
|
+
|
|
343
|
+
| Mistake | Solution |
|
|
344
|
+
|---------|----------|
|
|
345
|
+
| Unclear value prop | Test headline with users |
|
|
346
|
+
| Too many CTAs | One primary per section |
|
|
347
|
+
| Walls of text | Break into scannable sections |
|
|
348
|
+
| Generic testimonials | Specific, credible quotes |
|
|
349
|
+
| Missing social proof | Add logos, numbers, quotes |
|
|
350
|
+
| Slow loading | Optimize images, lazy load |
|
|
351
|
+
|
|
352
|
+
### Edge Cases
|
|
353
|
+
|
|
354
|
+
| Case | Handling |
|
|
355
|
+
|------|----------|
|
|
356
|
+
| No testimonials yet | Use partner logos, team credentials |
|
|
357
|
+
| Complex pricing | Summary cards + detailed table |
|
|
358
|
+
| Many features | Categorize, show top 3-6, link to full list |
|
|
359
|
+
| Video content | Thumbnail + play button, don't auto-play |
|
|
360
|
+
| International | Consider localization, currency display |
|
|
361
|
+
|
|
362
|
+
---
|
|
363
|
+
|
|
364
|
+
## Related Documentation
|
|
365
|
+
|
|
366
|
+
- [Layout Primitives](../design/layouts.md) - Horizontal Navigation layout
|
|
367
|
+
- [Rules index](../README.md) - Marketing content and logo (paths under *Types — web — marketing* and *Foundations — logo*)
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Kuat consumer rules (bundled)
|
|
2
|
+
|
|
3
|
+
**Package:** @equal-experts/kuat-core (and mirrored in kuat-react / kuat-vue agent-docs)
|
|
4
|
+
|
|
5
|
+
**Snapshot:** 67fc215fe87c
|
|
6
|
+
|
|
7
|
+
## Default load (web product / marketing UI)
|
|
8
|
+
|
|
9
|
+
1. `external/kuat-agent-rules/kuat-docs/rules/foundations/` (design, content, brand, logo, accessibility)
|
|
10
|
+
2. `external/kuat-agent-rules/kuat-docs/rules/types/web/product/` — core files + scenarios + content (examples excluded)
|
|
11
|
+
3. `external/kuat-agent-rules/kuat-docs/rules/types/web/marketing/`
|
|
12
|
+
4. `kuat-docs/rules/design/layouts.md` — Kuat layout primitives
|
|
13
|
+
5. `kuat-docs/rules/scenarios/` — Kuat scenario overlays
|
|
14
|
+
6. Component guides on demand: `components/{slug}.md` via `components.manifest.json`
|
|
15
|
+
|
|
16
|
+
## Component IDs
|
|
17
|
+
|
|
18
|
+
Resolve `shadcn:button`, `kuat:button-group`, etc. using `components/components.manifest.json`.
|
|
19
|
+
|
|
20
|
+
## Full org taxonomy
|
|
21
|
+
|
|
22
|
+
Set `KUAT_RULES_PATH` to a `kuat-agent-docs` git clone for slides, graphics, and latest upstream.
|
|
23
|
+
|
|
24
|
+
## Related
|
|
25
|
+
|
|
26
|
+
- [README.md](../README.md)
|
|
27
|
+
- Upstream [LOADING.md](../external/kuat-agent-rules/kuat-docs/rules/LOADING.md)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as d, createBlock as i, openBlock as l, unref as o, normalizeProps as A, guardReactiveProps as y, withCtx as c, renderSlot as n, mergeProps as p, createElementVNode as B, normalizeClass as C, createVNode as g } from "vue";
|
|
2
2
|
import { useForwardPropsEmits as v, AccordionRoot as $, AccordionContent as h, useForwardProps as P, AccordionItem as b, AccordionHeader as w, AccordionTrigger as I } from "reka-ui";
|
|
3
3
|
import { c as m } from "./utils-DLUjLwnh.js";
|
|
4
|
-
import { r as u } from "./index-
|
|
4
|
+
import { r as u } from "./index-OELvcT-N.js";
|
|
5
5
|
import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
6
6
|
import { ChevronDown as V } from "lucide-vue-next";
|
|
7
7
|
const D = /* @__PURE__ */ d({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as l, createBlock as p, openBlock as r, unref as e, normalizeProps as D, guardReactiveProps as $, withCtx as n, renderSlot as c, mergeProps as u, createVNode as A, createElementBlock as v, normalizeClass as h } from "vue";
|
|
2
2
|
import { useForwardPropsEmits as C, AlertDialogRoot as y, AlertDialogAction as B, AlertDialogCancel as P, AlertDialogPortal as I, AlertDialogOverlay as O, AlertDialogContent as w, AlertDialogDescription as T, AlertDialogTitle as b, AlertDialogTrigger as F } from "reka-ui";
|
|
3
3
|
import { c as d } from "./utils-DLUjLwnh.js";
|
|
4
|
-
import { r as g } from "./index-
|
|
4
|
+
import { r as g } from "./index-OELvcT-N.js";
|
|
5
5
|
import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
6
6
|
const G = /* @__PURE__ */ l({
|
|
7
7
|
__name: "AlertDialog",
|
|
@@ -2,7 +2,7 @@ import { defineComponent as f, createBlock as i, openBlock as l, unref as s, mer
|
|
|
2
2
|
import { c as m } from "./utils-DLUjLwnh.js";
|
|
3
3
|
import { useForwardPropsEmits as x, SelectRoot as L, SelectScrollDownButton as O, SelectScrollUpButton as N, SelectPortal as U, SelectContent as D, SelectViewport as F, SelectGroup as A, SelectItem as G, SelectItemText as q, SelectItemIndicator as j, SelectLabel as K, SelectSeparator as M, SelectTrigger as R, SelectIcon as W, SelectValue as Z } from "reka-ui";
|
|
4
4
|
import { ChevronDown as E, ChevronUp as J, Check as Q } from "lucide-vue-next";
|
|
5
|
-
import { r as S } from "./index-
|
|
5
|
+
import { r as S } from "./index-OELvcT-N.js";
|
|
6
6
|
const $e = ["regular", "large", "small", "mini"], Be = ["single", "double"];
|
|
7
7
|
function X(a) {
|
|
8
8
|
return "items" in a;
|
package/dist/accordion.js
CHANGED
package/dist/alert-dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { c as l } from "./utils-DLUjLwnh.js";
|
|
2
|
-
import { _ as r, A as t, a as i, b as g, c as s, d as A, e as D, f as c, g as n } from "./AlertDialogTrigger.vue_vue_type_script_setup_true_lang-
|
|
2
|
+
import { _ as r, A as t, a as i, b as g, c as s, d as A, e as D, f as c, g as n } from "./AlertDialogTrigger.vue_vue_type_script_setup_true_lang-DosgAcSM.js";
|
|
3
3
|
export {
|
|
4
4
|
r as AlertDialog,
|
|
5
5
|
t as AlertDialogAction,
|
package/dist/button-group.js
CHANGED
package/dist/checkbox.js
CHANGED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { PrimitiveProps } from 'reka-ui';
|
|
2
|
+
import { HTMLAttributes } from 'vue';
|
|
3
|
+
import { ButtonVariant, ButtonColor } from '../button/constants';
|
|
4
|
+
import { IconButtonSize, IconButtonRoundness } from './constants';
|
|
5
|
+
|
|
6
|
+
interface Props extends PrimitiveProps {
|
|
7
|
+
variant?: ButtonVariant | "default";
|
|
8
|
+
size?: IconButtonSize | "sm" | "lg";
|
|
9
|
+
color?: ButtonColor;
|
|
10
|
+
roundness?: IconButtonRoundness;
|
|
11
|
+
type?: "button" | "submit" | "reset";
|
|
12
|
+
class?: HTMLAttributes["class"];
|
|
13
|
+
}
|
|
14
|
+
declare function __VLS_template(): {
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
};
|
|
17
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
18
|
+
as: string;
|
|
19
|
+
variant: string;
|
|
20
|
+
size: string;
|
|
21
|
+
color: string;
|
|
22
|
+
roundness: string;
|
|
23
|
+
type: string;
|
|
24
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
25
|
+
as: string;
|
|
26
|
+
variant: string;
|
|
27
|
+
size: string;
|
|
28
|
+
color: string;
|
|
29
|
+
roundness: string;
|
|
30
|
+
type: string;
|
|
31
|
+
}>>> & Readonly<{}>, {
|
|
32
|
+
as: import('reka-ui').AsTag | import('vue').Component;
|
|
33
|
+
type: "button" | "submit" | "reset";
|
|
34
|
+
size: IconButtonSize | "sm" | "lg";
|
|
35
|
+
color: ButtonColor;
|
|
36
|
+
variant: ButtonVariant | "default";
|
|
37
|
+
roundness: IconButtonRoundness;
|
|
38
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
39
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
40
|
+
export default _default;
|
|
41
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
42
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
43
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
44
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
45
|
+
} : {
|
|
46
|
+
type: import('vue').PropType<T[K]>;
|
|
47
|
+
required: true;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
type __VLS_WithDefaults<P, D> = {
|
|
51
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
52
|
+
default: D[K];
|
|
53
|
+
}> : P[K];
|
|
54
|
+
};
|
|
55
|
+
type __VLS_Prettify<T> = {
|
|
56
|
+
[K in keyof T]: T[K];
|
|
57
|
+
} & {};
|
|
58
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
59
|
+
new (): {
|
|
60
|
+
$slots: S;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ButtonVariant, ButtonColor } from '../button/constants';
|
|
2
|
+
|
|
3
|
+
export type { ButtonVariant, ButtonColor };
|
|
4
|
+
/** @deprecated Use "primary" instead. */
|
|
5
|
+
export declare const ICON_BUTTON_VARIANT_DEFAULT_ALIAS = "default";
|
|
6
|
+
export declare const ICON_BUTTON_SIZES: readonly ["mini", "small", "regular", "large"];
|
|
7
|
+
/** @deprecated Use "small" instead. */
|
|
8
|
+
export declare const ICON_BUTTON_SIZE_SM_ALIAS = "sm";
|
|
9
|
+
/** @deprecated Use "large" instead. */
|
|
10
|
+
export declare const ICON_BUTTON_SIZE_LG_ALIAS = "lg";
|
|
11
|
+
export declare const ICON_BUTTON_ROUNDNESS: readonly ["default", "round"];
|
|
12
|
+
export type IconButtonSize = (typeof ICON_BUTTON_SIZES)[number];
|
|
13
|
+
export type IconButtonRoundness = (typeof ICON_BUTTON_ROUNDNESS)[number];
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ButtonVariant, ButtonColor } from '../button/constants';
|
|
2
|
+
import { IconButtonSize, IconButtonRoundness } from './constants';
|
|
3
|
+
|
|
4
|
+
export { default as IconButton } from './IconButton.vue';
|
|
5
|
+
export { ICON_BUTTON_SIZES, ICON_BUTTON_ROUNDNESS, ICON_BUTTON_VARIANT_DEFAULT_ALIAS, ICON_BUTTON_SIZE_SM_ALIAS, ICON_BUTTON_SIZE_LG_ALIAS, } from './constants';
|
|
6
|
+
export type { ButtonVariant, ButtonColor, IconButtonSize, IconButtonRoundness, } from './constants';
|
|
7
|
+
export type IconButtonVariants = {
|
|
8
|
+
variant?: ButtonVariant | "default";
|
|
9
|
+
size?: IconButtonSize | "sm" | "lg";
|
|
10
|
+
color?: ButtonColor;
|
|
11
|
+
roundness?: IconButtonRoundness;
|
|
12
|
+
};
|
|
13
|
+
/** Returns class string for icon button variant/size/color/roundness. */
|
|
14
|
+
export declare function iconButtonVariants(options?: IconButtonVariants): string;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'vue';
|
|
2
|
-
import { KuatHeaderVariant } from './constants';
|
|
2
|
+
import { KuatHeaderVariant, KuatHeaderNavItem, KuatHeaderAccountConfig, KuatHeaderAppSwitcherConfig, KuatHeaderLockupConfig } from './constants';
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
5
|
class?: HTMLAttributes["class"];
|
|
6
6
|
variant?: KuatHeaderVariant;
|
|
7
7
|
title?: string;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
lockup?: KuatHeaderLockupConfig;
|
|
9
|
+
navigationItems?: KuatHeaderNavItem[];
|
|
10
|
+
account?: KuatHeaderAccountConfig;
|
|
11
|
+
appSwitcher?: KuatHeaderAppSwitcherConfig;
|
|
12
|
+
mobileMenuAriaLabel?: string;
|
|
10
13
|
}
|
|
11
14
|
declare function __VLS_template(): {
|
|
12
15
|
logo?(_: {
|
|
@@ -14,6 +17,7 @@ declare function __VLS_template(): {
|
|
|
14
17
|
}): any;
|
|
15
18
|
title?(_: {}): any;
|
|
16
19
|
navigation?(_: {}): any;
|
|
20
|
+
"account-markup"?(_: {}): any;
|
|
17
21
|
actions?(_: {}): any;
|
|
18
22
|
"mobile-menu-trigger"?(_: {}): any;
|
|
19
23
|
"mobile-menu"?(_: {}): any;
|
|
@@ -21,13 +25,10 @@ declare function __VLS_template(): {
|
|
|
21
25
|
};
|
|
22
26
|
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
23
27
|
variant: string;
|
|
24
|
-
hideLogo: boolean;
|
|
25
28
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
26
29
|
variant: string;
|
|
27
|
-
hideLogo: boolean;
|
|
28
30
|
}>>> & Readonly<{}>, {
|
|
29
31
|
variant: KuatHeaderVariant;
|
|
30
|
-
hideLogo: boolean;
|
|
31
32
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
32
33
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
33
34
|
export default _default;
|