@vadimcomanescu/nadicode-design-system 4.0.1 → 4.0.3
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/.agents/skills/seed/SKILL.md +34 -163
- package/.agents/skills/seed/references/animation.md +2 -2
- package/.agents/skills/seed/references/responsive.md +1 -1
- package/README.md +2 -2
- package/eslint-rules/nadicode/config.js +0 -1
- package/eslint-rules/nadicode/index.js +0 -2
- package/eslint-rules/nadicode/rules/no-has-svg-selector.js +1 -1
- package/package.json +1 -2
- package/scripts/ds-check.mjs +0 -10
- package/scripts/ds-update.mjs +52 -14
- package/scripts/sync-seed-skill.mjs +0 -3
- package/.agents/skills/seed/contract.md +0 -110
- package/.agents/skills/seed/intent-map.md +0 -320
- package/.agents/skills/seed/recipes/agency-home.md +0 -311
- package/.agents/skills/seed/recipes/agents-chat.md +0 -305
- package/.agents/skills/seed/recipes/analytics.md +0 -253
- package/.agents/skills/seed/recipes/auth.md +0 -254
- package/.agents/skills/seed/recipes/blog-content.md +0 -307
- package/.agents/skills/seed/recipes/checkout.md +0 -311
- package/.agents/skills/seed/recipes/company-about.md +0 -276
- package/.agents/skills/seed/recipes/company-contact.md +0 -234
- package/.agents/skills/seed/recipes/crud-form.md +0 -233
- package/.agents/skills/seed/recipes/crud-list-detail.md +0 -230
- package/.agents/skills/seed/recipes/dashboard.md +0 -354
- package/.agents/skills/seed/recipes/digital-workers.md +0 -314
- package/.agents/skills/seed/recipes/error-pages.md +0 -199
- package/.agents/skills/seed/recipes/marketing-landing.md +0 -293
- package/.agents/skills/seed/recipes/marketing-shell.md +0 -156
- package/.agents/skills/seed/recipes/navigation-shell.md +0 -787
- package/.agents/skills/seed/recipes/onboarding.md +0 -258
- package/.agents/skills/seed/recipes/pricing.md +0 -271
- package/.agents/skills/seed/recipes/service-detail.md +0 -302
- package/.agents/skills/seed/recipes/settings.md +0 -252
- package/.agents/skills/seed/references/blocks.md +0 -128
- package/.agents/skills/seed/references/components.md +0 -287
- package/.agents/skills/seed/references/icons.md +0 -169
- package/.agents/skills/seed/references/nextjs.md +0 -49
- package/.agents/skills/seed/references/tokens.md +0 -88
- package/eslint-rules/nadicode/rules/no-deprecated-ds-import.js +0 -77
|
@@ -1,320 +0,0 @@
|
|
|
1
|
-
# Intent Map
|
|
2
|
-
|
|
3
|
-
THE lookup table for "what components do I use for X?" Every page in a consumer app must map to one of these 20 intents. If your page does not match any intent, stop and report it.
|
|
4
|
-
|
|
5
|
-
For each intent: **Required** components must be present, **Allowed** may be used, **Forbidden** must never appear. **Blocks** are pre-composed sections. **States** are the UI states the page must handle.
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
### marketing-landing
|
|
10
|
-
|
|
11
|
-
| Classification | Values |
|
|
12
|
-
|----------------|--------|
|
|
13
|
-
| Routes | `/`, `/landing` |
|
|
14
|
-
| Shell | marketing-shell |
|
|
15
|
-
| Required | HeaderBlock, FooterBlock, Button, Badge, Typography, ScrollFadeIn |
|
|
16
|
-
| Allowed | HeroBlock, HeroSectionBlock, FeatureBlock, FeatureGridBlock, FAQBlock, CallToActionBlock, TestimonialsBlock, LogoCloud, StatsMarketingBlock, SocialProofBlock, ComparisonBlock, BannerBlock, AnnouncementBanner, InfiniteSlider, AnimatedGradientText, CountingNumber, PricingBlock, BentoGrid, ShaderBackground, Card, Separator |
|
|
17
|
-
| Forbidden | Sidebar, DataTable, Form, FormWizard, AgentTeamPanel, AgentTerminal, SettingsLayout |
|
|
18
|
-
| Blocks | HeroBlock, HeroSectionBlock, FeatureBlock, FeatureGridBlock, FAQBlock, CallToActionBlock, TestimonialsBlock, LogoCloud, StatsMarketingBlock, SocialProofBlock, ComparisonBlock, BannerBlock, HeaderBlock, FooterBlock, NewsletterBlock |
|
|
19
|
-
| States | default, mobile-navigation |
|
|
20
|
-
| Recipe | `recipes/marketing-landing.md` |
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
### dashboard
|
|
25
|
-
|
|
26
|
-
| Classification | Values |
|
|
27
|
-
|----------------|--------|
|
|
28
|
-
| Routes | `/dashboard` |
|
|
29
|
-
| Shell | app-shell |
|
|
30
|
-
| Required | MetricCard, ChartCard, Card, Badge, Typography, Breadcrumb, Button, Skeleton, Empty, StaggerChildren |
|
|
31
|
-
| Allowed | Sparkline, TrendIndicator, SlidingNumber, CountingNumber, ProgressRing, DataFreshness, AreaChart, BarChart, LineChart, PieChart, HeatmapChart, AgentMetricsCard, Tabs, Select, Progress, Timeline, DateRangePicker, DataTable, Tooltip, ScrollFadeIn, StatusDot |
|
|
32
|
-
| Forbidden | HeroBlock, PricingBlock, FormWizard, AuthLayout, TextReveal, AnimatedGradientText, AuroraEffect, MeteorShower |
|
|
33
|
-
| Blocks | StatsBlock, ChartBlock, ChartCollectionBlock, ActivityFeedBlock, BarChartBlock, InteractiveAreaChartBlock |
|
|
34
|
-
| States | loading, empty, has-data, error |
|
|
35
|
-
| Recipe | `recipes/dashboard.md` |
|
|
36
|
-
|
|
37
|
-
---
|
|
38
|
-
|
|
39
|
-
### crud-list-detail
|
|
40
|
-
|
|
41
|
-
| Classification | Values |
|
|
42
|
-
|----------------|--------|
|
|
43
|
-
| Routes | `/[entity]`, `/[entity]/[id]` |
|
|
44
|
-
| Shell | app-shell |
|
|
45
|
-
| Required | DataTable, Pagination, Input, Select, Button, Badge, Card, Sheet, AlertDialog, Typography, Breadcrumb, Skeleton, Empty |
|
|
46
|
-
| Allowed | Table, Dialog, Tabs, DropdownMenu, ContextMenu, Tooltip, Checkbox |
|
|
47
|
-
| Forbidden | HeroBlock, PricingBlock, FormWizard, AreaChart, BarChart, AuroraEffect, TextReveal |
|
|
48
|
-
| Blocks | DataGridBlock, DirectoryBlock |
|
|
49
|
-
| States | loading, empty, has-data, error, filtering |
|
|
50
|
-
| Recipe | `recipes/crud-list-detail.md` |
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
|
-
### kanban-board
|
|
55
|
-
|
|
56
|
-
| Classification | Values |
|
|
57
|
-
|----------------|--------|
|
|
58
|
-
| Routes | `/runs`, `/board`, `/pipeline`, `/[entity]/board` |
|
|
59
|
-
| Shell | app-shell |
|
|
60
|
-
| Required | KanbanBoard, KanbanColumn, KanbanColumnHeader, KanbanItem, KanbanHandle, Badge, Typography, Empty, Button |
|
|
61
|
-
| Allowed | Avatar, StatusDot, Tooltip, DropdownMenu, Sheet, Dialog, Skeleton, Tabs, Select, Input |
|
|
62
|
-
| Forbidden | DataTable, HeroBlock, PricingBlock, FormWizard, AreaChart, AuroraEffect, AgentTeamPanel |
|
|
63
|
-
| Blocks | KanbanDemoBlock |
|
|
64
|
-
| States | loading, empty, has-data, error, dragging |
|
|
65
|
-
| Recipe | See SKILL.md "Kanban Board" section |
|
|
66
|
-
|
|
67
|
-
---
|
|
68
|
-
|
|
69
|
-
### crud-form
|
|
70
|
-
|
|
71
|
-
| Classification | Values |
|
|
72
|
-
|----------------|--------|
|
|
73
|
-
| Routes | `/[entity]/new`, `/[entity]/[id]/edit` |
|
|
74
|
-
| Shell | app-shell |
|
|
75
|
-
| Required | Form, FormField, FormItem, FormLabel, FormControl, FormMessage, Input, Button, Card, Typography, Breadcrumb, AlertDialog, Alert, Spinner, Skeleton |
|
|
76
|
-
| Allowed | Field, Label, Textarea, Select, Switch, Checkbox, DatePicker, Combobox, TagInput, RadioGroup, Slider, FileUpload, InputOTP, NativeSelect, InputGroup, Tooltip |
|
|
77
|
-
| Forbidden | DataTable, HeroBlock, AreaChart, BarChart, AuroraEffect, AgentTeamPanel |
|
|
78
|
-
| Blocks | CreateBlock |
|
|
79
|
-
| States | pristine, dirty, submitting, success, validation-error |
|
|
80
|
-
| Recipe | `recipes/crud-form.md` |
|
|
81
|
-
|
|
82
|
-
---
|
|
83
|
-
|
|
84
|
-
### settings
|
|
85
|
-
|
|
86
|
-
| Classification | Values |
|
|
87
|
-
|----------------|--------|
|
|
88
|
-
| Routes | `/settings`, `/settings/[section]` |
|
|
89
|
-
| Shell | app-shell |
|
|
90
|
-
| Required | Card, Button, Input, Switch, Select, Typography, Breadcrumb, Tabs, AlertDialog, AvatarUpload, Form, Skeleton, Sonner |
|
|
91
|
-
| Allowed | PasswordInput, Checkbox, RadioGroup, Label, Badge, Tooltip, Separator |
|
|
92
|
-
| Forbidden | DataTable, HeroBlock, AreaChart, AuroraEffect, AgentTeamPanel, TextReveal |
|
|
93
|
-
| Blocks | SettingsLayout |
|
|
94
|
-
| States | loading, default, dirty, saving, saved, error |
|
|
95
|
-
| Recipe | `recipes/settings.md` |
|
|
96
|
-
|
|
97
|
-
---
|
|
98
|
-
|
|
99
|
-
### auth
|
|
100
|
-
|
|
101
|
-
| Classification | Values |
|
|
102
|
-
|----------------|--------|
|
|
103
|
-
| Routes | `/login`, `/signup`, `/reset-password`, `/verify` |
|
|
104
|
-
| Shell | auth-shell |
|
|
105
|
-
| Required | Card, Label, Input, PasswordInput, Button, Alert, Logo, BrandIcons, Separator, Typography, Spinner |
|
|
106
|
-
| Allowed | InputOTP, Checkbox, ShaderBackground |
|
|
107
|
-
| Forbidden | Sidebar, DataTable, NavigationMenu, AreaChart, AuroraEffect |
|
|
108
|
-
| Blocks | AuthLayout, LoginBlock, SignUpBlock, PasswordRecoveryBlock, ResetPasswordBlock, TwoFactorChallengeBlock, TwoFactorSetupBlock, AccountLockedBlock, AuthSuccessBlock |
|
|
109
|
-
| States | default, submitting, error, success |
|
|
110
|
-
| Recipe | `recipes/auth.md` |
|
|
111
|
-
|
|
112
|
-
---
|
|
113
|
-
|
|
114
|
-
### onboarding
|
|
115
|
-
|
|
116
|
-
| Classification | Values |
|
|
117
|
-
|----------------|--------|
|
|
118
|
-
| Routes | `/onboarding`, `/onboarding/[step]` |
|
|
119
|
-
| Shell | onboarding-shell |
|
|
120
|
-
| Required | Progress, Button, Card, Typography, Logo, ConfettiBurst, SuccessCheck |
|
|
121
|
-
| Allowed | FormWizard, Input, AvatarUpload, Select, Checkbox, RadioGroup, TagInput, Label, Form, FormField, Stepper, Step, Badge, Separator |
|
|
122
|
-
| Forbidden | Sidebar, DataTable, NavigationMenu, HeroBlock, AgentTeamPanel |
|
|
123
|
-
| Blocks | OnboardingBlock, WizardBlock |
|
|
124
|
-
| States | step-active, step-valid, step-error, complete |
|
|
125
|
-
| Recipe | `recipes/onboarding.md` |
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
### pricing
|
|
130
|
-
|
|
131
|
-
| Classification | Values |
|
|
132
|
-
|----------------|--------|
|
|
133
|
-
| Routes | `/pricing` |
|
|
134
|
-
| Shell | marketing-shell |
|
|
135
|
-
| Required | Card, Badge, Button, Switch, Typography, Separator, ScrollFadeIn |
|
|
136
|
-
| Allowed | PricingBlock, ComparisonBlock, Table, Tooltip, ToggleGroup, Tabs, Accordion, CountingNumber, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock, CheckoutForm |
|
|
137
|
-
| Forbidden | Sidebar, DataTable, FormWizard, AgentTeamPanel, AuroraEffect |
|
|
138
|
-
| Blocks | PricingBlock, FAQBlock, CallToActionBlock, ComparisonBlock, HeaderBlock, FooterBlock |
|
|
139
|
-
| States | default, annual-toggle, cta-loading |
|
|
140
|
-
| Recipe | `recipes/pricing.md` |
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
### analytics
|
|
145
|
-
|
|
146
|
-
| Classification | Values |
|
|
147
|
-
|----------------|--------|
|
|
148
|
-
| Routes | `/analytics` |
|
|
149
|
-
| Shell | app-shell |
|
|
150
|
-
| Required | Card, Badge, Typography, Breadcrumb, Button, DateRangePicker, Tabs, Select, Skeleton, Empty |
|
|
151
|
-
| Allowed | AreaChart, BarChart, LineChart, PieChart, RadarChart, RadialBarChart, HeatmapChart, DataTable, CountingNumber, Tooltip, Progress, Input |
|
|
152
|
-
| Forbidden | HeroBlock, FormWizard, AuthLayout, AgentTeamPanel, AuroraEffect, TextReveal |
|
|
153
|
-
| Blocks | StatsBlock, ChartBlock, ChartCollectionBlock, BarChartBlock, InteractiveAreaChartBlock, HeatmapChartBlock, UsageDonutBlock, DataGridBlock |
|
|
154
|
-
| States | loading, empty, has-data, error, date-filtered |
|
|
155
|
-
| Recipe | `recipes/analytics.md` |
|
|
156
|
-
|
|
157
|
-
---
|
|
158
|
-
|
|
159
|
-
### agents-chat
|
|
160
|
-
|
|
161
|
-
| Classification | Values |
|
|
162
|
-
|----------------|--------|
|
|
163
|
-
| Routes | `/agents`, `/voice-agents`, `/chat` |
|
|
164
|
-
| Shell | app-shell |
|
|
165
|
-
| Required | Conversation, ChatMessage, ChatResponse, ChatPromptInput, ChatToolCall, ChatActions, ChatGreeting, ChatThinkingMessage, ChatShimmer, ChatReasoning, ChatConfirmation, ChatSuggestion, ChatSources, ChatBranch, ChatChainOfThought, ChatPlan, ChatQueue, ChatPromptInputAttachments, AgentTeamPanel, AgentStatus, AgentMessageBubble, ThinkingIndicator, ToolCallCard, ApprovalCard, CodeDiffViewer, ArtifactCard, AgentTerminal, ContextMeter, Tabs, Button, ScrollArea, Sheet |
|
|
166
|
-
| Allowed | ConversationThread, AgentTimeline, AgentMetricsCard, WorkflowGraph, HandoffIndicator, MemoryInspector, SourceCitation, StreamingText, Badge, Avatar, AgentAvatar, Resizable, Textarea |
|
|
167
|
-
| Forbidden | HeroBlock, PricingBlock, FormWizard, DataTable, AuroraEffect, MeteorShower |
|
|
168
|
-
| Blocks | AgentConversationBlock, ChatLayout |
|
|
169
|
-
| States | empty, loading, running, thinking, blocked-approval, failed, complete |
|
|
170
|
-
| Recipe | `recipes/agents-chat.md` |
|
|
171
|
-
|
|
172
|
-
---
|
|
173
|
-
|
|
174
|
-
### error
|
|
175
|
-
|
|
176
|
-
| Classification | Values |
|
|
177
|
-
|----------------|--------|
|
|
178
|
-
| Routes | `/404`, `/500` |
|
|
179
|
-
| Shell | fallback-shell |
|
|
180
|
-
| Required | Button, Typography, Logo |
|
|
181
|
-
| Allowed | Card, NotFoundBlock |
|
|
182
|
-
| Forbidden | Sidebar, DataTable, NavigationMenu, AreaChart, FormWizard, AuroraEffect |
|
|
183
|
-
| Blocks | NotFoundBlock |
|
|
184
|
-
| States | not-found, server-error |
|
|
185
|
-
| Recipe | `recipes/error-pages.md` |
|
|
186
|
-
|
|
187
|
-
---
|
|
188
|
-
|
|
189
|
-
### navigation-shell
|
|
190
|
-
|
|
191
|
-
| Classification | Values |
|
|
192
|
-
|----------------|--------|
|
|
193
|
-
| Routes | `(layout)` |
|
|
194
|
-
| Shell | app-shell |
|
|
195
|
-
| Required | Sidebar, SidebarProvider, SidebarTrigger, SidebarInset, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, Breadcrumb, SearchCommand, Dialog, ThemeToggle, Button, Avatar |
|
|
196
|
-
| Allowed | SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarRail, NotificationCenter, Badge, StyleToggle, Tooltip, DropdownMenu, ScrollArea, ContextMenu, Menubar |
|
|
197
|
-
| Forbidden | HeroBlock, FooterBlock, AreaChart, Form, AgentTeamPanel |
|
|
198
|
-
| Blocks | NavUser, AppBreadcrumb, AppSearch, WorkspaceSwitcher |
|
|
199
|
-
| States | (none) |
|
|
200
|
-
| Recipe | `recipes/navigation-shell.md` |
|
|
201
|
-
|
|
202
|
-
---
|
|
203
|
-
|
|
204
|
-
### blog-content
|
|
205
|
-
|
|
206
|
-
| Classification | Values |
|
|
207
|
-
|----------------|--------|
|
|
208
|
-
| Routes | `/blog`, `/blog/[slug]`, `/changelog` |
|
|
209
|
-
| Shell | marketing-shell |
|
|
210
|
-
| Required | Card, Badge, Avatar, Typography, Pagination, Separator, Select, Button, ScrollFadeIn |
|
|
211
|
-
| Allowed | Tabs, Input, Breadcrumb, Tooltip, HeaderBlock, FooterBlock |
|
|
212
|
-
| Forbidden | Sidebar, DataTable, FormWizard, AgentTeamPanel, AreaChart |
|
|
213
|
-
| Blocks | HeaderBlock, FooterBlock, ChangelogBlock, NewsletterBlock, CodeBlock |
|
|
214
|
-
| States | loading, has-data, category-filtered |
|
|
215
|
-
| Recipe | `recipes/blog-content.md` |
|
|
216
|
-
|
|
217
|
-
---
|
|
218
|
-
|
|
219
|
-
### checkout
|
|
220
|
-
|
|
221
|
-
| Classification | Values |
|
|
222
|
-
|----------------|--------|
|
|
223
|
-
| Routes | `/checkout`, `/checkout/success` |
|
|
224
|
-
| Shell | marketing-shell |
|
|
225
|
-
| Required | CheckoutForm, Card, Input, InputGroup, Button, Typography, Separator, Logo, Form, Alert, Spinner, ConfettiBurst, SuccessCheck |
|
|
226
|
-
| Allowed | CheckoutFormDemo, Label, Select, NativeSelect, Badge, Tooltip |
|
|
227
|
-
| Forbidden | Sidebar, NavigationMenu, DataTable, AgentTeamPanel, AreaChart, AuroraEffect, HeroBlock |
|
|
228
|
-
| Blocks | (none) |
|
|
229
|
-
| States | default, submitting, processing, error, success |
|
|
230
|
-
| Recipe | `recipes/checkout.md` |
|
|
231
|
-
|
|
232
|
-
---
|
|
233
|
-
|
|
234
|
-
### marketing-shell
|
|
235
|
-
|
|
236
|
-
| Classification | Values |
|
|
237
|
-
|----------------|--------|
|
|
238
|
-
| Routes | `(marketing)` route group layout |
|
|
239
|
-
| Shell | marketing-shell (this IS the definition) |
|
|
240
|
-
| Required | HeaderBlock, FooterBlock, Logo, Button, ThemeToggle |
|
|
241
|
-
| Allowed | BannerBlock, AnnouncementBanner, SkipNav |
|
|
242
|
-
| Forbidden | Sidebar, SidebarProvider, DataTable, Form, FormWizard, AgentTeamPanel, AgentTerminal, SettingsLayout |
|
|
243
|
-
| Blocks | HeaderBlock, FooterBlock |
|
|
244
|
-
| States | default, mobile-navigation |
|
|
245
|
-
| Recipe | `recipes/marketing-shell.md` |
|
|
246
|
-
|
|
247
|
-
---
|
|
248
|
-
|
|
249
|
-
### agency-home
|
|
250
|
-
|
|
251
|
-
| Classification | Values |
|
|
252
|
-
|----------------|--------|
|
|
253
|
-
| Routes | `/`, `/home` |
|
|
254
|
-
| Shell | marketing-shell |
|
|
255
|
-
| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, ProcessFlowBlock, FeatureGridBlock, StatsMarketingBlock |
|
|
256
|
-
| Allowed | HeroBlock, HeroSectionBlock, TestimonialsBlock, LogoCloud, FAQBlock, CallToActionBlock, SocialProofBlock, InfiniteSlider, CountingNumber, ShaderBackground, Card, BentoGrid, AnimatedGradientText, Separator |
|
|
257
|
-
| Forbidden | Sidebar, DataTable, Form, FormWizard, AgentTeamPanel, AgentTerminal, SettingsLayout |
|
|
258
|
-
| Blocks | HeroBlock, HeroSectionBlock, FeatureGridBlock, ProcessFlowBlock, StatsMarketingBlock, TestimonialsBlock, LogoCloud, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock |
|
|
259
|
-
| States | default, mobile-navigation |
|
|
260
|
-
| Recipe | `recipes/agency-home.md` |
|
|
261
|
-
|
|
262
|
-
---
|
|
263
|
-
|
|
264
|
-
### digital-workers
|
|
265
|
-
|
|
266
|
-
| Classification | Values |
|
|
267
|
-
|----------------|--------|
|
|
268
|
-
| Routes | `/digital-workers`, `/agents`, `/platform` |
|
|
269
|
-
| Shell | marketing-shell |
|
|
270
|
-
| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, AgentProfileGridBlock |
|
|
271
|
-
| Allowed | HeroBlock, HeroSectionBlock, FeatureBlock, FeatureGridBlock, WorkflowGraph, IntegrationsBlock, FAQBlock, CallToActionBlock, StatsMarketingBlock, Card, BentoGrid, ShaderBackground, LogoCloud, InfiniteSlider, Separator |
|
|
272
|
-
| Forbidden | Sidebar, DataTable, Form, FormWizard, SettingsLayout, AgentTeamPanel |
|
|
273
|
-
| Blocks | AgentProfileGridBlock, FeatureBlock, IntegrationsBlock, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock |
|
|
274
|
-
| States | default, mobile-navigation |
|
|
275
|
-
| Recipe | `recipes/digital-workers.md` |
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
|
-
### service-detail
|
|
280
|
-
|
|
281
|
-
| Classification | Values |
|
|
282
|
-
|----------------|--------|
|
|
283
|
-
| Routes | `/services/[slug]`, `/products/[slug]`, `/agents/[slug]` |
|
|
284
|
-
| Shell | marketing-shell |
|
|
285
|
-
| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, SolutionShowcaseBlock |
|
|
286
|
-
| Allowed | ProcessFlowBlock, FeatureBlock, FeatureGridBlock, StatsMarketingBlock, TestimonialsBlock, FAQBlock, CallToActionBlock, HeroBlock, HeroSectionBlock, Card, ShaderBackground, BentoGrid, LogoCloud, InfiniteSlider, CountingNumber, Separator |
|
|
287
|
-
| Forbidden | Sidebar, DataTable, AgentTeamPanel, SettingsLayout, FormWizard |
|
|
288
|
-
| Blocks | SolutionShowcaseBlock, ProcessFlowBlock, FeatureBlock, FeatureGridBlock, StatsMarketingBlock, TestimonialsBlock, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock |
|
|
289
|
-
| States | default, mobile-navigation |
|
|
290
|
-
| Recipe | `recipes/service-detail.md` |
|
|
291
|
-
|
|
292
|
-
---
|
|
293
|
-
|
|
294
|
-
### company-about
|
|
295
|
-
|
|
296
|
-
| Classification | Values |
|
|
297
|
-
|----------------|--------|
|
|
298
|
-
| Routes | `/about`, `/manifesto`, `/chi-siamo` |
|
|
299
|
-
| Shell | marketing-shell |
|
|
300
|
-
| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, TeamBlock |
|
|
301
|
-
| Allowed | FeatureBlock, FeatureGridBlock, StatsMarketingBlock, LogoCloud, CallToActionBlock, HeroBlock, HeroSectionBlock, Card, ShaderBackground, TestimonialsBlock, InfiniteSlider, Separator |
|
|
302
|
-
| Forbidden | Sidebar, DataTable, Form, FormWizard, AgentTeamPanel, PricingBlock, SettingsLayout |
|
|
303
|
-
| Blocks | TeamBlock, FeatureGridBlock, StatsMarketingBlock, LogoCloud, CallToActionBlock, HeaderBlock, FooterBlock |
|
|
304
|
-
| States | default, mobile-navigation |
|
|
305
|
-
| Recipe | `recipes/company-about.md` |
|
|
306
|
-
|
|
307
|
-
---
|
|
308
|
-
|
|
309
|
-
### company-contact
|
|
310
|
-
|
|
311
|
-
| Classification | Values |
|
|
312
|
-
|----------------|--------|
|
|
313
|
-
| Routes | `/contact`, `/contatti` |
|
|
314
|
-
| Shell | marketing-shell |
|
|
315
|
-
| Required | HeaderBlock, FooterBlock, Button, ScrollFadeIn, ContactBlock |
|
|
316
|
-
| Allowed | FAQBlock, Card, FeatureGridBlock, Badge, HeroBlock, HeroSectionBlock, CallToActionBlock, Separator |
|
|
317
|
-
| Forbidden | Sidebar, DataTable, FormWizard, AgentTeamPanel, PricingBlock, SettingsLayout |
|
|
318
|
-
| Blocks | ContactBlock, FAQBlock, HeaderBlock, FooterBlock |
|
|
319
|
-
| States | default, form-submitting, form-success, form-error |
|
|
320
|
-
| Recipe | `recipes/company-contact.md` |
|
|
@@ -1,311 +0,0 @@
|
|
|
1
|
-
# Recipe: Agency Home
|
|
2
|
-
|
|
3
|
-
AI agency/platform homepage oriented around selling AI services, showcasing process and outcomes.
|
|
4
|
-
|
|
5
|
-
## Route Pattern
|
|
6
|
-
|
|
7
|
-
`/` or `/home`
|
|
8
|
-
|
|
9
|
-
## Shell
|
|
10
|
-
|
|
11
|
-
`marketing-shell` (HeaderBlock + FooterBlock)
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## Layout Blueprint (Desktop)
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
+------------------------------------------------+
|
|
19
|
-
| HeaderBlock: Logo [Nav links] [CTA Button] |
|
|
20
|
-
+------------------------------------------------+
|
|
21
|
-
| |
|
|
22
|
-
| HERO SECTION |
|
|
23
|
-
| Agency headline (centered) |
|
|
24
|
-
| Subtitle: what the agency delivers |
|
|
25
|
-
| [Primary CTA] [Secondary CTA] |
|
|
26
|
-
| ShaderBackground / ambient visual |
|
|
27
|
-
| |
|
|
28
|
-
+------------------------------------------------+
|
|
29
|
-
| Logo Cloud: client logos (InfiniteSlider) |
|
|
30
|
-
+------------------------------------------------+
|
|
31
|
-
| |
|
|
32
|
-
| SERVICES GRID (3-col) |
|
|
33
|
-
| +----------+ +----------+ +----------+ |
|
|
34
|
-
| | Service 1| | Service 2| | Service 3| |
|
|
35
|
-
| +----------+ +----------+ +----------+ |
|
|
36
|
-
| +----------+ +----------+ +----------+ |
|
|
37
|
-
| | Service 4| | Service 5| | Service 6| |
|
|
38
|
-
| +----------+ +----------+ +----------+ |
|
|
39
|
-
| |
|
|
40
|
-
+------------------------------------------------+
|
|
41
|
-
| PROCESS FLOW |
|
|
42
|
-
| [Step 1] → [Step 2] → [Step 3] → [Step 4] |
|
|
43
|
-
| How we work: discovery → design → deliver |
|
|
44
|
-
+------------------------------------------------+
|
|
45
|
-
| OUTCOME STATS |
|
|
46
|
-
| +------+ +------+ +------+ +------+ |
|
|
47
|
-
| | ROI | | Time | | Cost | | Scale| |
|
|
48
|
-
| | 340% | | -60% | | -45% | | 10x | |
|
|
49
|
-
| +------+ +------+ +------+ +------+ |
|
|
50
|
-
+------------------------------------------------+
|
|
51
|
-
| |
|
|
52
|
-
| TESTIMONIALS (carousel or grid) |
|
|
53
|
-
| |
|
|
54
|
-
+------------------------------------------------+
|
|
55
|
-
| |
|
|
56
|
-
| FAQ (Accordion) |
|
|
57
|
-
| |
|
|
58
|
-
+------------------------------------------------+
|
|
59
|
-
| FINAL CTA SECTION |
|
|
60
|
-
| Headline + [CTA Button] |
|
|
61
|
-
+------------------------------------------------+
|
|
62
|
-
| FooterBlock: columns + social + legal |
|
|
63
|
-
+------------------------------------------------+
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
---
|
|
67
|
-
|
|
68
|
-
## Section Sequence
|
|
69
|
-
|
|
70
|
-
### 1. Header
|
|
71
|
-
|
|
72
|
-
```tsx
|
|
73
|
-
<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Book a Call</Button>} />
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### 2. Hero Section
|
|
77
|
-
|
|
78
|
-
```tsx
|
|
79
|
-
<section className="relative py-24 md:py-32 overflow-hidden">
|
|
80
|
-
<ShaderBackground shader="meshGradient" intent="hero" opacity={0.25} />
|
|
81
|
-
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
82
|
-
<motion.div variants={heroStagger.container} initial="hidden" animate="visible">
|
|
83
|
-
<motion.div variants={heroStagger.child}>
|
|
84
|
-
<Badge variant="outline" className="mb-4">AI-Powered Solutions</Badge>
|
|
85
|
-
</motion.div>
|
|
86
|
-
<motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
|
|
87
|
-
{headline}
|
|
88
|
-
</motion.h1>
|
|
89
|
-
<motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto">
|
|
90
|
-
{subtitle}
|
|
91
|
-
</motion.p>
|
|
92
|
-
<motion.div variants={heroStagger.child} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
|
93
|
-
<Button size="lg">Book a Call</Button>
|
|
94
|
-
<Button size="lg" variant="outline">See Our Work</Button>
|
|
95
|
-
</motion.div>
|
|
96
|
-
</motion.div>
|
|
97
|
-
</div>
|
|
98
|
-
</section>
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### 3. Logo Cloud
|
|
102
|
-
|
|
103
|
-
```tsx
|
|
104
|
-
<section className="py-12 border-y border-border-subtle">
|
|
105
|
-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
106
|
-
<Typography variant="small" className="text-center text-text-tertiary mb-6">
|
|
107
|
-
Trusted by forward-thinking companies
|
|
108
|
-
</Typography>
|
|
109
|
-
<LogoCloud logos={clientLogos} />
|
|
110
|
-
</div>
|
|
111
|
-
</section>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### 4. Services Grid
|
|
115
|
-
|
|
116
|
-
```tsx
|
|
117
|
-
<ScrollFadeIn>
|
|
118
|
-
<section className="py-16 md:py-24">
|
|
119
|
-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
120
|
-
<div className="text-center mb-12">
|
|
121
|
-
<Heading level={2} size="section" >Our Services</Heading>
|
|
122
|
-
<Typography variant="lead" className="mt-4 text-text-secondary">
|
|
123
|
-
End-to-end AI solutions tailored to your business
|
|
124
|
-
</Typography>
|
|
125
|
-
</div>
|
|
126
|
-
<FeatureGridBlock features={services} columns={3} />
|
|
127
|
-
</div>
|
|
128
|
-
</section>
|
|
129
|
-
</ScrollFadeIn>
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
### 5. Process Flow
|
|
133
|
-
|
|
134
|
-
```tsx
|
|
135
|
-
<ScrollFadeIn>
|
|
136
|
-
<section className="py-16 md:py-24 bg-muted">
|
|
137
|
-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
138
|
-
<div className="text-center mb-12">
|
|
139
|
-
<Heading level={2} size="section" >How We Work</Heading>
|
|
140
|
-
<Typography variant="lead" className="mt-4 text-text-secondary">
|
|
141
|
-
A proven process from discovery to deployment
|
|
142
|
-
</Typography>
|
|
143
|
-
</div>
|
|
144
|
-
<ProcessFlowBlock steps={processSteps} />
|
|
145
|
-
</div>
|
|
146
|
-
</section>
|
|
147
|
-
</ScrollFadeIn>
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
### 6. Outcome Stats
|
|
151
|
-
|
|
152
|
-
```tsx
|
|
153
|
-
<ScrollFadeIn>
|
|
154
|
-
<section className="py-16 md:py-24">
|
|
155
|
-
<StatsMarketingBlock stats={outcomeStats} />
|
|
156
|
-
</section>
|
|
157
|
-
</ScrollFadeIn>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### 7. Testimonials
|
|
161
|
-
|
|
162
|
-
```tsx
|
|
163
|
-
<ScrollFadeIn>
|
|
164
|
-
<section className="py-16 md:py-24 bg-muted">
|
|
165
|
-
<TestimonialsBlock testimonials={testimonials} />
|
|
166
|
-
</section>
|
|
167
|
-
</ScrollFadeIn>
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### 8. FAQ
|
|
171
|
-
|
|
172
|
-
```tsx
|
|
173
|
-
<ScrollFadeIn>
|
|
174
|
-
<section className="py-16 md:py-24">
|
|
175
|
-
<FAQBlock items={faqItems} />
|
|
176
|
-
</section>
|
|
177
|
-
</ScrollFadeIn>
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### 9. Final CTA
|
|
181
|
-
|
|
182
|
-
```tsx
|
|
183
|
-
<ScrollFadeIn>
|
|
184
|
-
<section className="py-16 md:py-24">
|
|
185
|
-
<CallToActionBlock
|
|
186
|
-
title="Ready to transform your business with AI?"
|
|
187
|
-
description="Book a free discovery call and see how we can help."
|
|
188
|
-
action={<Button size="lg">Book a Call</Button>}
|
|
189
|
-
/>
|
|
190
|
-
</section>
|
|
191
|
-
</ScrollFadeIn>
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
### 10. Footer
|
|
195
|
-
|
|
196
|
-
```tsx
|
|
197
|
-
<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
---
|
|
201
|
-
|
|
202
|
-
## Animation Storyboard
|
|
203
|
-
|
|
204
|
-
```
|
|
205
|
-
ANIMATION STORYBOARD
|
|
206
|
-
====================
|
|
207
|
-
BUDGET: 1000ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
|
|
208
|
-
|
|
209
|
-
T+0ms [nav] Header visible (instant)
|
|
210
|
-
T+100ms [badge] Agency badge {fadeIn, snappy}
|
|
211
|
-
T+200ms [headline] Hero headline {fadeInUp, dramatic}
|
|
212
|
-
T+350ms [subtitle] Hero subtitle {fadeInUp, dramatic}
|
|
213
|
-
T+500ms [ctas] CTA buttons {fadeInUp, dramatic}
|
|
214
|
-
T+700ms [shader] Hero visual/shader appears {fadeIn, gentle}
|
|
215
|
-
T+900ms [logos] Logo cloud fades in {fadeIn, snappy}
|
|
216
|
-
|
|
217
|
-
SCROLL-TRIGGERED (below fold):
|
|
218
|
-
[services] ScrollFadeIn at 20% visible {fadeInUp, snappy, stagger 100ms}
|
|
219
|
-
[process] ScrollFadeIn at 20% visible {fadeInUp, snappy, stagger 150ms}
|
|
220
|
-
[stats] ScrollFadeIn at 20% visible {fadeInUp, snappy}
|
|
221
|
-
[testimonials] ScrollFadeIn at 20% visible {fadeIn, gentle}
|
|
222
|
-
[faq] ScrollFadeIn at 20% visible {fadeInUp, snappy}
|
|
223
|
-
[cta] ScrollFadeIn at 20% visible {scaleIn, gentle}
|
|
224
|
-
|
|
225
|
-
REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
---
|
|
229
|
-
|
|
230
|
-
## Required Components
|
|
231
|
-
|
|
232
|
-
| Component | Import Path | Purpose |
|
|
233
|
-
|-----------|-------------|---------|
|
|
234
|
-
| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site navigation |
|
|
235
|
-
| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site footer |
|
|
236
|
-
| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs |
|
|
237
|
-
| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Hero tag |
|
|
238
|
-
| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body text |
|
|
239
|
-
| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
|
|
240
|
-
| `ProcessFlowBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | How-we-work process |
|
|
241
|
-
| `FeatureGridBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Services grid |
|
|
242
|
-
| `StatsMarketingBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Outcome metrics (ROI, time saved) |
|
|
243
|
-
|
|
244
|
-
### Allowed (optional)
|
|
245
|
-
|
|
246
|
-
`HeroBlock`, `HeroSectionBlock`, `TestimonialsBlock`, `LogoCloud`, `FAQBlock`, `CallToActionBlock`, `SocialProofBlock`, `InfiniteSlider`, `CountingNumber`, `ShaderBackground`, `Card`, `BentoGrid`
|
|
247
|
-
|
|
248
|
-
### Forbidden
|
|
249
|
-
|
|
250
|
-
`Sidebar`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, `AgentTerminal`, `SettingsLayout`, `ChatLayout`
|
|
251
|
-
|
|
252
|
-
---
|
|
253
|
-
|
|
254
|
-
## Required States
|
|
255
|
-
|
|
256
|
-
| State | Trigger | Visual |
|
|
257
|
-
|-------|---------|--------|
|
|
258
|
-
| `default` | Page loaded | Full marketing content |
|
|
259
|
-
| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
|
|
260
|
-
|
|
261
|
-
---
|
|
262
|
-
|
|
263
|
-
## Responsive Contract
|
|
264
|
-
|
|
265
|
-
| Breakpoint | Hero | Services | Process | Stats | Content Width |
|
|
266
|
-
|------------|------|----------|---------|-------|---------------|
|
|
267
|
-
| Mobile | Stacked, text-center | 1 col | Vertical stack | 2 col | px-4 |
|
|
268
|
-
| `sm:` | Stacked, text-center | 2 col | Vertical stack | 2 col | px-6, max-w-7xl |
|
|
269
|
-
| `lg:` | Centered | 3 col | Horizontal flow | 4 col | px-8, max-w-7xl |
|
|
270
|
-
|
|
271
|
-
---
|
|
272
|
-
|
|
273
|
-
## Styling Rules
|
|
274
|
-
|
|
275
|
-
- Hero: `ShaderBackground` for ambient glow, `glass-floating` for elevated cards
|
|
276
|
-
- Section backgrounds alternate: `bg-background` and `bg-muted`
|
|
277
|
-
- Process flow uses connected step indicators with semantic `border-accent`
|
|
278
|
-
- Stats use `CountingNumber` for animated counters
|
|
279
|
-
- CTAs use `Button` with `size="lg"` for prominence
|
|
280
|
-
- No raw palette colors; semantic tokens only
|
|
281
|
-
|
|
282
|
-
---
|
|
283
|
-
|
|
284
|
-
## Accessibility
|
|
285
|
-
|
|
286
|
-
- Hero heading is `<h1>`, section headings are `<h2>`
|
|
287
|
-
- Skip-nav link to main content
|
|
288
|
-
- All images have alt text
|
|
289
|
-
- CTA buttons have descriptive text (not just "Click here")
|
|
290
|
-
- Mobile nav is keyboard accessible with focus trap
|
|
291
|
-
- Process flow steps are in an ordered list
|
|
292
|
-
|
|
293
|
-
---
|
|
294
|
-
|
|
295
|
-
## Reference Implementations
|
|
296
|
-
|
|
297
|
-
- `src/app/landing/page.tsx`
|
|
298
|
-
- `src/components/blocks/ProcessFlowBlock.tsx`
|
|
299
|
-
- `src/components/blocks/FeatureGridBlock.tsx`
|
|
300
|
-
- `src/components/blocks/StatsMarketingBlock.tsx`
|
|
301
|
-
|
|
302
|
-
---
|
|
303
|
-
|
|
304
|
-
## Verification
|
|
305
|
-
|
|
306
|
-
```bash
|
|
307
|
-
npx tsc --noEmit
|
|
308
|
-
npm run lint
|
|
309
|
-
npm run test
|
|
310
|
-
npx vitest run src/test/css-variable-usage.test.ts
|
|
311
|
-
```
|