@launch77-shared/plugin-marketing-ui 0.1.0 → 0.1.2
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/dist/generator.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launch77-shared/plugin-marketing-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Marketing UI component library plugin with conversion-optimized components",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -14,15 +14,17 @@
|
|
|
14
14
|
"plugin.json"
|
|
15
15
|
],
|
|
16
16
|
"scripts": {
|
|
17
|
+
"prebuild": "node scripts/validate-plugin-json.js",
|
|
17
18
|
"build": "tsup",
|
|
18
19
|
"dev": "tsup --watch",
|
|
19
20
|
"typecheck": "tsc --noEmit",
|
|
20
|
-
"lint": "eslint src/**/*.ts",
|
|
21
|
+
"lint": "eslint 'src/**/*.ts'",
|
|
21
22
|
"release:connect": "launch77-release-connect",
|
|
22
23
|
"release:verify": "launch77-release-verify"
|
|
23
24
|
},
|
|
24
25
|
"dependencies": {
|
|
25
|
-
"@launch77/
|
|
26
|
+
"@launch77-shared/lib-marketing-ui": "^0.3.1",
|
|
27
|
+
"@launch77/plugin-runtime": "^0.3.2",
|
|
26
28
|
"chalk": "^5.3.0"
|
|
27
29
|
},
|
|
28
30
|
"devDependencies": {
|
package/plugin.json
CHANGED
|
@@ -1,45 +1,90 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import { HeroCentered, HeroSplit, ContentSection, MarketingCard, CardGrid,
|
|
3
|
+
import { ShowcaseLayout, CodeBlock } from '@/modules/showcase'
|
|
4
|
+
import { AnimationProvider, HeroCentered, HeroSplit, ContentSection, MarketingCard, CardGrid, ExpandableCard, FluidHeading, FluidText, SectionContainer } from '@launch77-shared/lib-marketing-ui'
|
|
5
5
|
import { Button, Badge } from '@launch77-shared/lib-ui'
|
|
6
|
-
import { Zap, Shield, Check, Rocket, Target, Lock } from 'lucide-react'
|
|
6
|
+
import { Zap, Shield, Check, Rocket, Target, Lock, Search, ShoppingCart, CreditCard, Package, Users, Heart, Star, Award } from 'lucide-react'
|
|
7
7
|
|
|
8
8
|
export default function MarketingUiExamplesPage() {
|
|
9
|
-
|
|
9
|
+
// Define the navigation structure
|
|
10
|
+
const sections = [
|
|
11
|
+
{
|
|
12
|
+
id: 'hero-sections',
|
|
13
|
+
title: 'Hero Sections',
|
|
14
|
+
items: [
|
|
15
|
+
{ id: 'hero-centered', title: 'HeroCentered' },
|
|
16
|
+
{ id: 'hero-split', title: 'HeroSplit' },
|
|
17
|
+
],
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
id: 'animation-typography',
|
|
21
|
+
title: 'Animation & Typography',
|
|
22
|
+
items: [
|
|
23
|
+
{ id: 'animation-provider', title: 'AnimationProvider' },
|
|
24
|
+
{ id: 'fluid-heading', title: 'FluidHeading' },
|
|
25
|
+
{ id: 'fluid-text', title: 'FluidText' },
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
id: 'layout-components',
|
|
30
|
+
title: 'Layout Components',
|
|
31
|
+
items: [
|
|
32
|
+
{ id: 'content-section', title: 'ContentSection' },
|
|
33
|
+
{ id: 'section-container', title: 'SectionContainer' },
|
|
34
|
+
],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: 'cards-grids',
|
|
38
|
+
title: 'Cards & Grids',
|
|
39
|
+
items: [{ id: 'feature-cards', title: 'Feature Cards' }],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: 'process-flows',
|
|
43
|
+
title: 'Process Flows',
|
|
44
|
+
items: [
|
|
45
|
+
{ id: 'ecommerce-flow', title: 'E-commerce Checkout' },
|
|
46
|
+
{ id: 'onboarding-flow', title: 'User Onboarding' },
|
|
47
|
+
{ id: 'service-process', title: 'Service Process' },
|
|
48
|
+
],
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
id: 'expandable-cards',
|
|
52
|
+
title: 'Expandable Cards',
|
|
53
|
+
items: [
|
|
54
|
+
{ id: 'faq-section', title: 'FAQ Section' },
|
|
55
|
+
{ id: 'testimonials', title: 'Testimonials' },
|
|
56
|
+
{ id: 'product-features', title: 'Product Features' },
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
]
|
|
10
60
|
|
|
11
61
|
return (
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
{/* Page Header */}
|
|
15
|
-
<div className="space-y-4">
|
|
16
|
-
<h1 className="text-4xl font-bold">Marketing UI Components</h1>
|
|
17
|
-
<p className="text-lg text-muted-foreground">Pre-built marketing components from @launch77-shared/lib-marketing-ui for building landing pages and marketing sites.</p>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
62
|
+
<AnimationProvider>
|
|
63
|
+
<ShowcaseLayout title="Marketing UI Components" description="Pre-built marketing components from @launch77-shared/lib-marketing-ui for building landing pages and marketing sites." sections={sections}>
|
|
20
64
|
{/* Hero Sections */}
|
|
21
|
-
<section className="space-y-12">
|
|
65
|
+
<section id="hero-sections" className="space-y-12 scroll-mt-20">
|
|
22
66
|
<div>
|
|
23
67
|
<h2 className="text-3xl font-bold mb-2">Hero Sections</h2>
|
|
24
68
|
<p className="text-muted-foreground">Centered and split hero layouts for impactful first impressions</p>
|
|
25
69
|
</div>
|
|
26
70
|
|
|
27
71
|
{/* HeroCentered */}
|
|
28
|
-
<div className="space-y-4">
|
|
72
|
+
<div id="hero-centered" className="space-y-4 scroll-mt-20">
|
|
29
73
|
<h3 className="text-2xl font-semibold">HeroCentered</h3>
|
|
30
74
|
<div className="border rounded-lg overflow-hidden">
|
|
31
75
|
<HeroCentered
|
|
32
76
|
badge={
|
|
33
77
|
<Badge variant="secondary" className="text-sm">
|
|
34
|
-
|
|
78
|
+
<Rocket className="mr-2 h-3 w-3" />
|
|
79
|
+
v1.0 Released
|
|
35
80
|
</Badge>
|
|
36
81
|
}
|
|
37
|
-
headline="Build
|
|
38
|
-
subheadline="
|
|
39
|
-
primaryCTA={<Button size="lg">
|
|
82
|
+
headline="Build Better Products Faster"
|
|
83
|
+
subheadline="Launch77 provides everything you need to create amazing web experiences. From components to complete templates, we've got you covered."
|
|
84
|
+
primaryCTA={<Button size="lg">Get Started</Button>}
|
|
40
85
|
secondaryCTA={
|
|
41
|
-
<Button
|
|
42
|
-
View
|
|
86
|
+
<Button size="lg" variant="outline">
|
|
87
|
+
View Components
|
|
43
88
|
</Button>
|
|
44
89
|
}
|
|
45
90
|
/>
|
|
@@ -47,223 +92,386 @@ export default function MarketingUiExamplesPage() {
|
|
|
47
92
|
</div>
|
|
48
93
|
|
|
49
94
|
{/* HeroSplit */}
|
|
50
|
-
<div className="space-y-4">
|
|
95
|
+
<div id="hero-split" className="space-y-4 scroll-mt-20">
|
|
51
96
|
<h3 className="text-2xl font-semibold">HeroSplit</h3>
|
|
52
97
|
<div className="border rounded-lg overflow-hidden">
|
|
53
98
|
<HeroSplit
|
|
54
|
-
imageUrl="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop"
|
|
55
|
-
imageAlt="Team collaboration"
|
|
56
|
-
imageSide="right"
|
|
57
|
-
decorativeBlob={true}
|
|
58
|
-
blobGradient="from-purple-400 to-blue-400"
|
|
59
99
|
content={
|
|
60
100
|
<div className="space-y-6">
|
|
61
|
-
<Badge variant="outline"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<
|
|
101
|
+
<Badge variant="outline" className="text-sm">
|
|
102
|
+
<Zap className="mr-2 h-3 w-3" />
|
|
103
|
+
Lightning Fast
|
|
104
|
+
</Badge>
|
|
105
|
+
<div className="space-y-4">
|
|
106
|
+
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Ship Your Next Project in Days, Not Months</h1>
|
|
107
|
+
<p className="text-lg text-muted-foreground">Stop reinventing the wheel. Use our battle-tested components and templates to launch faster than ever before.</p>
|
|
108
|
+
</div>
|
|
109
|
+
<div className="flex flex-wrap gap-4">
|
|
110
|
+
<Button size="lg">Start Building</Button>
|
|
111
|
+
<Button size="lg" variant="ghost">
|
|
67
112
|
Learn More →
|
|
68
113
|
</Button>
|
|
69
114
|
</div>
|
|
70
115
|
</div>
|
|
71
116
|
}
|
|
117
|
+
imageUrl="/placeholder.jpg"
|
|
118
|
+
imageAlt="Launch77 Dashboard Preview"
|
|
72
119
|
/>
|
|
73
120
|
</div>
|
|
74
121
|
</div>
|
|
75
122
|
</section>
|
|
76
123
|
|
|
77
|
-
{/*
|
|
78
|
-
<section className="space-y-12">
|
|
124
|
+
{/* Animation & Typography */}
|
|
125
|
+
<section id="animation-typography" className="space-y-12 scroll-mt-20">
|
|
79
126
|
<div>
|
|
80
|
-
<h2 className="text-3xl font-bold mb-2">
|
|
81
|
-
<p className="text-muted-foreground">
|
|
127
|
+
<h2 className="text-3xl font-bold mb-2">Animation & Typography</h2>
|
|
128
|
+
<p className="text-muted-foreground">Core infrastructure and typography components for consistent design</p>
|
|
82
129
|
</div>
|
|
83
130
|
|
|
84
|
-
{/*
|
|
85
|
-
<div className="space-y-4">
|
|
86
|
-
<h3 className="text-2xl font-semibold">
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
131
|
+
{/* AnimationProvider */}
|
|
132
|
+
<div id="animation-provider" className="space-y-4 scroll-mt-20">
|
|
133
|
+
<h3 className="text-2xl font-semibold">AnimationProvider</h3>
|
|
134
|
+
<p className="text-muted-foreground">Required wrapper for enabling Framer Motion animations. Wrap your app or specific sections to enable smooth animations.</p>
|
|
135
|
+
<div className="border rounded-lg p-6 bg-muted/50">
|
|
136
|
+
<pre className="text-sm overflow-x-auto">
|
|
137
|
+
<code>{`// In your layout or app component:
|
|
138
|
+
import { AnimationProvider } from '@launch77-shared/lib-marketing-ui'
|
|
139
|
+
|
|
140
|
+
export default function RootLayout({ children }) {
|
|
141
|
+
return (
|
|
142
|
+
<AnimationProvider>
|
|
143
|
+
{children}
|
|
144
|
+
</AnimationProvider>
|
|
145
|
+
)
|
|
146
|
+
}`}</code>
|
|
147
|
+
</pre>
|
|
148
|
+
</div>
|
|
149
|
+
<div className="mt-4 p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
|
|
150
|
+
<p className="text-sm">
|
|
151
|
+
<strong>Note:</strong> AnimationProvider respects user's reduced motion preferences automatically. Components will gracefully degrade when prefers-reduced-motion is enabled.
|
|
152
|
+
</p>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
{/* FluidHeading */}
|
|
157
|
+
<div id="fluid-heading" className="space-y-4 scroll-mt-20">
|
|
158
|
+
<h3 className="text-2xl font-semibold">FluidHeading</h3>
|
|
159
|
+
<p className="text-muted-foreground">Responsive headings with fluid typography scaling</p>
|
|
160
|
+
<div className="space-y-6 border rounded-lg p-6">
|
|
161
|
+
<FluidHeading as="h1" scale="5xl">
|
|
162
|
+
Display Heading - Largest Size
|
|
163
|
+
</FluidHeading>
|
|
164
|
+
<FluidHeading as="h2" scale="4xl">
|
|
165
|
+
H1 Size - Page Titles
|
|
166
|
+
</FluidHeading>
|
|
167
|
+
<FluidHeading as="h3" scale="3xl">
|
|
168
|
+
H2 Size - Section Headers
|
|
169
|
+
</FluidHeading>
|
|
170
|
+
<FluidHeading as="h4" scale="2xl">
|
|
171
|
+
H3 Size - Subsection Headers
|
|
172
|
+
</FluidHeading>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
{/* FluidText */}
|
|
177
|
+
<div id="fluid-text" className="space-y-4 scroll-mt-20">
|
|
178
|
+
<h3 className="text-2xl font-semibold">FluidText</h3>
|
|
179
|
+
<p className="text-muted-foreground">Responsive text with automatic sizing based on viewport</p>
|
|
180
|
+
<div className="space-y-4 border rounded-lg p-6">
|
|
181
|
+
<FluidText scale="xl" className="font-semibold">
|
|
182
|
+
Extra Large Text - Perfect for introductions and key points
|
|
183
|
+
</FluidText>
|
|
184
|
+
<FluidText scale="lg">Large Text - Great for important paragraphs that need emphasis</FluidText>
|
|
185
|
+
<FluidText scale="base">Base Text - Default size for body content. This provides optimal readability across all device sizes with fluid scaling.</FluidText>
|
|
186
|
+
<FluidText scale="sm" className="text-muted-foreground">
|
|
187
|
+
Small Text - Useful for captions, metadata, and secondary information
|
|
188
|
+
</FluidText>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</section>
|
|
192
|
+
|
|
193
|
+
{/* Layout Components */}
|
|
194
|
+
<section id="layout-components" className="space-y-12 scroll-mt-20">
|
|
195
|
+
<div>
|
|
196
|
+
<h2 className="text-3xl font-bold mb-2">Layout Components</h2>
|
|
197
|
+
<p className="text-muted-foreground">Content sections and structural components</p>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
{/* ContentSection */}
|
|
201
|
+
<div id="content-section" className="space-y-8 scroll-mt-20">
|
|
202
|
+
<h3 className="text-2xl font-semibold">ContentSection</h3>
|
|
203
|
+
|
|
204
|
+
{/* Left Aligned */}
|
|
205
|
+
<div className="space-y-4">
|
|
206
|
+
<h4 className="text-xl font-medium">Left-Aligned Content</h4>
|
|
207
|
+
<ContentSection headline="Why Choose Launch77?" textAlign="left">
|
|
208
|
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
209
|
+
<div>
|
|
210
|
+
<h4 className="font-semibold mb-2">Developer First</h4>
|
|
211
|
+
<p className="text-sm text-muted-foreground">Built by developers, for developers. We understand what you need.</p>
|
|
98
212
|
</div>
|
|
99
|
-
<div
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
<h3 className="font-semibold mb-1">Save Money</h3>
|
|
103
|
-
<p className="text-sm text-muted-foreground">Reduce development costs by up to 70%</p>
|
|
104
|
-
</div>
|
|
213
|
+
<div>
|
|
214
|
+
<h4 className="font-semibold mb-2">Production Ready</h4>
|
|
215
|
+
<p className="text-sm text-muted-foreground">Battle-tested components used by thousands of projects worldwide.</p>
|
|
105
216
|
</div>
|
|
106
|
-
<div
|
|
107
|
-
<
|
|
108
|
-
<
|
|
109
|
-
<h3 className="font-semibold mb-1">Enterprise Security</h3>
|
|
110
|
-
<p className="text-sm text-muted-foreground">SOC 2 compliant with end-to-end encryption</p>
|
|
111
|
-
</div>
|
|
217
|
+
<div>
|
|
218
|
+
<h4 className="font-semibold mb-2">Fully Customizable</h4>
|
|
219
|
+
<p className="text-sm text-muted-foreground">Tailwind-based styling means infinite customization possibilities.</p>
|
|
112
220
|
</div>
|
|
113
|
-
<div
|
|
114
|
-
<
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
221
|
+
<div>
|
|
222
|
+
<h4 className="font-semibold mb-2">TypeScript Support</h4>
|
|
223
|
+
<p className="text-sm text-muted-foreground">Full TypeScript support with comprehensive type definitions.</p>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</ContentSection>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
{/* Centered */}
|
|
230
|
+
<div className="space-y-4">
|
|
231
|
+
<h4 className="text-xl font-medium">Centered Content (How It Works)</h4>
|
|
232
|
+
<ContentSection headline="How It Works" textAlign="center">
|
|
233
|
+
<div className="space-y-4">
|
|
234
|
+
<p className="text-lg text-muted-foreground">Get from idea to production in three simple steps</p>
|
|
235
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
|
|
236
|
+
<div className="text-center">
|
|
237
|
+
<div className="text-4xl mb-4">1️⃣</div>
|
|
238
|
+
<h3 className="font-semibold mb-2">Describe Your App</h3>
|
|
239
|
+
<p className="text-sm text-muted-foreground">Tell our AI what you want to build</p>
|
|
240
|
+
</div>
|
|
241
|
+
<div className="text-center">
|
|
242
|
+
<div className="text-4xl mb-4">2️⃣</div>
|
|
243
|
+
<h3 className="font-semibold mb-2">Customize & Review</h3>
|
|
244
|
+
<p className="text-sm text-muted-foreground">Fine-tune the generated code to your needs</p>
|
|
245
|
+
</div>
|
|
246
|
+
<div className="text-center">
|
|
247
|
+
<div className="text-4xl mb-4">3️⃣</div>
|
|
248
|
+
<h3 className="font-semibold mb-2">Deploy & Scale</h3>
|
|
249
|
+
<p className="text-sm text-muted-foreground">Go live with one click and scale effortlessly</p>
|
|
118
250
|
</div>
|
|
119
251
|
</div>
|
|
120
252
|
</div>
|
|
121
|
-
</
|
|
122
|
-
</
|
|
253
|
+
</ContentSection>
|
|
254
|
+
</div>
|
|
123
255
|
</div>
|
|
124
256
|
|
|
125
|
-
{/*
|
|
126
|
-
<div className="space-y-4">
|
|
127
|
-
<h3 className="text-2xl font-semibold">
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<div className="
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<div className="
|
|
144
|
-
|
|
145
|
-
|
|
257
|
+
{/* SectionContainer */}
|
|
258
|
+
<div id="section-container" className="space-y-4 scroll-mt-20">
|
|
259
|
+
<h3 className="text-2xl font-semibold">SectionContainer</h3>
|
|
260
|
+
<p className="text-muted-foreground">Consistent section spacing and padding wrapper</p>
|
|
261
|
+
<div className="border rounded-lg overflow-hidden">
|
|
262
|
+
<SectionContainer className="bg-muted/30">
|
|
263
|
+
<div className="space-y-4">
|
|
264
|
+
<h4 className="text-xl font-semibold">Default Section Container</h4>
|
|
265
|
+
<p className="text-muted-foreground">SectionContainer provides consistent vertical padding and responsive horizontal margins. It's the foundation for creating well-spaced page sections.</p>
|
|
266
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
|
267
|
+
<div className="p-4 border rounded-lg">
|
|
268
|
+
<h5 className="font-medium mb-2">Consistent Spacing</h5>
|
|
269
|
+
<p className="text-sm text-muted-foreground">Automatic responsive padding</p>
|
|
270
|
+
</div>
|
|
271
|
+
<div className="p-4 border rounded-lg">
|
|
272
|
+
<h5 className="font-medium mb-2">Max Width Control</h5>
|
|
273
|
+
<p className="text-sm text-muted-foreground">Content stays readable</p>
|
|
274
|
+
</div>
|
|
275
|
+
<div className="p-4 border rounded-lg">
|
|
276
|
+
<h5 className="font-medium mb-2">Mobile Optimized</h5>
|
|
277
|
+
<p className="text-sm text-muted-foreground">Adapts to all screen sizes</p>
|
|
278
|
+
</div>
|
|
146
279
|
</div>
|
|
147
280
|
</div>
|
|
148
|
-
</
|
|
149
|
-
</
|
|
281
|
+
</SectionContainer>
|
|
282
|
+
</div>
|
|
283
|
+
<div className="border rounded-lg overflow-hidden">
|
|
284
|
+
<SectionContainer width="narrow" className="bg-gradient-to-r from-primary/5 to-primary/10">
|
|
285
|
+
<div className="text-center">
|
|
286
|
+
<h4 className="text-lg font-semibold">Narrow Width Container</h4>
|
|
287
|
+
<p className="text-sm text-muted-foreground mt-2">Use width="narrow" for focused content and long-form reading</p>
|
|
288
|
+
</div>
|
|
289
|
+
</SectionContainer>
|
|
290
|
+
</div>
|
|
291
|
+
<div className="border rounded-lg overflow-hidden">
|
|
292
|
+
<SectionContainer spacing="fluid" width="wide" className="bg-gradient-to-b from-transparent to-muted/30">
|
|
293
|
+
<div className="text-center">
|
|
294
|
+
<h4 className="text-2xl font-semibold">Wide Container with Fluid Spacing</h4>
|
|
295
|
+
<p className="text-muted-foreground mt-2">Use width="wide" for hero sections and spacing="fluid" for smooth scaling</p>
|
|
296
|
+
<Button className="mt-6">Example CTA</Button>
|
|
297
|
+
</div>
|
|
298
|
+
</SectionContainer>
|
|
299
|
+
</div>
|
|
150
300
|
</div>
|
|
151
301
|
</section>
|
|
152
302
|
|
|
153
|
-
{/* Cards */}
|
|
154
|
-
<section className="space-y-12">
|
|
303
|
+
{/* Cards & Grids */}
|
|
304
|
+
<section id="cards-grids" className="space-y-12 scroll-mt-20">
|
|
155
305
|
<div>
|
|
156
|
-
<h2 className="text-3xl font-bold mb-2">Cards</h2>
|
|
157
|
-
<p className="text-muted-foreground">
|
|
306
|
+
<h2 className="text-3xl font-bold mb-2">Cards & Grids</h2>
|
|
307
|
+
<p className="text-muted-foreground">Feature cards and grid layouts for showcasing content</p>
|
|
158
308
|
</div>
|
|
159
309
|
|
|
160
|
-
{/*
|
|
161
|
-
<div className="space-y-4">
|
|
162
|
-
<h3 className="text-2xl font-semibold">
|
|
163
|
-
<
|
|
164
|
-
<MarketingCard icon={Zap} title="
|
|
165
|
-
<MarketingCard icon={
|
|
166
|
-
<MarketingCard icon={
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
{/* CardGrid */}
|
|
171
|
-
<div className="space-y-4">
|
|
172
|
-
<h3 className="text-2xl font-semibold">CardGrid</h3>
|
|
173
|
-
<CardGrid columns={3} gap="md">
|
|
174
|
-
<MarketingCard icon={Rocket} title="Fast Development" description="Build and ship features at unprecedented speed" variant="feature" />
|
|
175
|
-
<MarketingCard icon={Shield} title="Premium Quality" description="Enterprise-grade code that scales with your business" variant="solution" />
|
|
176
|
-
<MarketingCard icon={Target} title="Focus on Users" description="Spend more time on what matters - your customers" variant="feature" />
|
|
177
|
-
<MarketingCard icon={Lock} title="Secure by Default" description="Built-in security best practices and compliance" variant="solution" />
|
|
310
|
+
{/* Feature Cards */}
|
|
311
|
+
<div id="feature-cards" className="space-y-4 scroll-mt-20">
|
|
312
|
+
<h3 className="text-2xl font-semibold">Feature Cards</h3>
|
|
313
|
+
<CardGrid columns={3}>
|
|
314
|
+
<MarketingCard icon={Zap} title="Lightning Fast" description="Optimized for performance with lazy loading and code splitting built-in." />
|
|
315
|
+
<MarketingCard icon={Shield} title="Secure by Default" description="Best practices for security with OWASP compliance and regular updates." />
|
|
316
|
+
<MarketingCard icon={Target} title="SEO Optimized" description="Built-in SEO features including meta tags, sitemaps, and structured data." />
|
|
317
|
+
<MarketingCard icon={Lock} title="Enterprise Ready" description="Scale from prototype to production with confidence and reliability." />
|
|
318
|
+
<MarketingCard icon={Rocket} title="Quick Setup" description="Get up and running in minutes with our comprehensive documentation." />
|
|
319
|
+
<MarketingCard icon={Check} title="Well Tested" description="Extensive test coverage ensures reliability and maintainability." />
|
|
178
320
|
</CardGrid>
|
|
179
321
|
</div>
|
|
180
322
|
</section>
|
|
181
323
|
|
|
182
|
-
{/*
|
|
183
|
-
<section className="space-y-12">
|
|
324
|
+
{/* Process Flows */}
|
|
325
|
+
<section id="process-flows" className="space-y-12 scroll-mt-20">
|
|
184
326
|
<div>
|
|
185
|
-
<h2 className="text-3xl font-bold mb-2">
|
|
186
|
-
<p className="text-muted-foreground">
|
|
327
|
+
<h2 className="text-3xl font-bold mb-2">Process Flows</h2>
|
|
328
|
+
<p className="text-muted-foreground">Use MarketingCard components to create step-by-step process flows</p>
|
|
187
329
|
</div>
|
|
188
330
|
|
|
189
|
-
{/*
|
|
190
|
-
<div className="space-y-4">
|
|
191
|
-
<h3 className="text-2xl font-semibold">
|
|
192
|
-
<
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
}
|
|
201
|
-
>
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
variant="secondary"
|
|
207
|
-
trackingData={{
|
|
208
|
-
location: 'examples-page',
|
|
209
|
-
text: 'Learn More',
|
|
210
|
-
destination: '/learn-more',
|
|
211
|
-
}}
|
|
212
|
-
>
|
|
213
|
-
Learn More
|
|
214
|
-
</CTAButton>
|
|
215
|
-
<CTAButton
|
|
216
|
-
href="/trial"
|
|
217
|
-
size="lg"
|
|
218
|
-
external={false}
|
|
219
|
-
trackingData={{
|
|
220
|
-
location: 'examples-page',
|
|
221
|
-
text: 'Start Your Trial',
|
|
222
|
-
destination: '/trial',
|
|
223
|
-
}}
|
|
224
|
-
>
|
|
225
|
-
Start Your Trial
|
|
226
|
-
</CTAButton>
|
|
331
|
+
{/* E-commerce Process Flow */}
|
|
332
|
+
<div id="ecommerce-flow" className="space-y-4 scroll-mt-20">
|
|
333
|
+
<h3 className="text-2xl font-semibold">E-commerce Checkout Flow</h3>
|
|
334
|
+
<p className="text-muted-foreground">Simple numbered cards for process visualization</p>
|
|
335
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
336
|
+
<div className="relative">
|
|
337
|
+
<div className="absolute -top-3 -left-3 w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-bold text-sm">1</div>
|
|
338
|
+
<MarketingCard icon={Search} title="Search & Discover" description="Browse through thousands of products and find exactly what you're looking for" />
|
|
339
|
+
</div>
|
|
340
|
+
<div className="relative">
|
|
341
|
+
<div className="absolute -top-3 -left-3 w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-bold text-sm">2</div>
|
|
342
|
+
<MarketingCard icon={ShoppingCart} title="Add to Cart" description="Select your items and customize options before adding to cart" />
|
|
343
|
+
</div>
|
|
344
|
+
<div className="relative">
|
|
345
|
+
<div className="absolute -top-3 -left-3 w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-bold text-sm">3</div>
|
|
346
|
+
<MarketingCard icon={CreditCard} title="Secure Checkout" description="Complete your purchase with our secure payment system" />
|
|
347
|
+
</div>
|
|
227
348
|
</div>
|
|
228
349
|
</div>
|
|
229
350
|
|
|
230
|
-
{/*
|
|
231
|
-
<div className="space-y-4">
|
|
232
|
-
<h3 className="text-2xl font-semibold">
|
|
233
|
-
<
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
<
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
351
|
+
{/* Onboarding Flow */}
|
|
352
|
+
<div id="onboarding-flow" className="space-y-4 scroll-mt-20">
|
|
353
|
+
<h3 className="text-2xl font-semibold">User Onboarding Flow</h3>
|
|
354
|
+
<p className="text-muted-foreground">4-step onboarding process with clear progression</p>
|
|
355
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
356
|
+
<div className="relative">
|
|
357
|
+
<Badge className="absolute -top-2 -left-2 z-10">Step 1</Badge>
|
|
358
|
+
<MarketingCard icon={Users} title="Sign Up" description="Create your account in seconds" />
|
|
359
|
+
</div>
|
|
360
|
+
<div className="relative">
|
|
361
|
+
<Badge className="absolute -top-2 -left-2 z-10">Step 2</Badge>
|
|
362
|
+
<MarketingCard icon={Star} title="Choose Plan" description="Select the perfect plan for your needs" />
|
|
363
|
+
</div>
|
|
364
|
+
<div className="relative">
|
|
365
|
+
<Badge className="absolute -top-2 -left-2 z-10">Step 3</Badge>
|
|
366
|
+
<MarketingCard icon={Package} title="Setup Project" description="Configure your first project" />
|
|
243
367
|
</div>
|
|
244
|
-
|
|
368
|
+
<div className="relative">
|
|
369
|
+
<Badge className="absolute -top-2 -left-2 z-10">Step 4</Badge>
|
|
370
|
+
<MarketingCard icon={Rocket} title="Launch" description="Deploy and go live instantly" />
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
|
|
375
|
+
{/* Alternative Process Style */}
|
|
376
|
+
<div id="service-process" className="space-y-4 scroll-mt-20">
|
|
377
|
+
<h3 className="text-2xl font-semibold">Service Process</h3>
|
|
378
|
+
<p className="text-muted-foreground">Highlighted process cards with gradient badges</p>
|
|
379
|
+
<CardGrid columns={2}>
|
|
380
|
+
<div className="relative">
|
|
381
|
+
<Badge variant="outline" className="absolute -top-2 -left-2 z-10 bg-gradient-to-r from-blue-500 to-purple-600 text-white border-none">
|
|
382
|
+
Phase A
|
|
383
|
+
</Badge>
|
|
384
|
+
<MarketingCard icon={Heart} title="Discovery Phase" description="We analyze your requirements and understand your goals to create the perfect solution" />
|
|
385
|
+
</div>
|
|
386
|
+
<div className="relative">
|
|
387
|
+
<Badge variant="outline" className="absolute -top-2 -left-2 z-10 bg-gradient-to-r from-purple-600 to-pink-600 text-white border-none">
|
|
388
|
+
Phase B
|
|
389
|
+
</Badge>
|
|
390
|
+
<MarketingCard icon={Award} title="Implementation" description="Our team brings your vision to life with cutting-edge technology and best practices" />
|
|
391
|
+
</div>
|
|
392
|
+
</CardGrid>
|
|
245
393
|
</div>
|
|
246
394
|
</section>
|
|
247
395
|
|
|
248
|
-
{/*
|
|
249
|
-
<section className="space-y-12">
|
|
396
|
+
{/* Expandable Cards */}
|
|
397
|
+
<section id="expandable-cards" className="space-y-12 scroll-mt-20">
|
|
250
398
|
<div>
|
|
251
|
-
<h2 className="text-3xl font-bold mb-2">
|
|
252
|
-
<p className="text-muted-foreground">
|
|
399
|
+
<h2 className="text-3xl font-bold mb-2">Expandable Cards</h2>
|
|
400
|
+
<p className="text-muted-foreground">Cards with expandable content for FAQs, testimonials, and detailed information</p>
|
|
253
401
|
</div>
|
|
254
402
|
|
|
255
|
-
{/*
|
|
256
|
-
<div className="space-y-4">
|
|
257
|
-
<h3 className="text-2xl font-semibold">
|
|
258
|
-
<div className="
|
|
259
|
-
<
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
403
|
+
{/* FAQ Example */}
|
|
404
|
+
<div id="faq-section" className="space-y-4 scroll-mt-20">
|
|
405
|
+
<h3 className="text-2xl font-semibold">FAQ Section</h3>
|
|
406
|
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
407
|
+
<ExpandableCard title="What is Launch77?" preview="Launch77 is a comprehensive toolkit for building modern web applications..." expandedContent="Launch77 is a comprehensive toolkit for building modern web applications with Next.js, TypeScript, and Tailwind CSS. It provides pre-built components, utilities, and templates to accelerate your development process. Our goal is to help developers launch their projects faster without sacrificing quality or flexibility." expandText="Read More" collapseText="Show Less" />
|
|
408
|
+
<ExpandableCard title="How do I get started?" preview="Getting started with Launch77 is simple. Install our packages..." expandedContent="Getting started with Launch77 is simple. Install our packages using npm or yarn, import the components you need, and start building. We provide comprehensive documentation, examples, and templates to help you get up and running quickly. Check out our quick start guide for step-by-step instructions." expandText="Read More" collapseText="Show Less" />
|
|
409
|
+
<ExpandableCard title="Is Launch77 free to use?" preview="Launch77 offers both free and premium tiers..." expandedContent="Launch77 offers both free and premium tiers. The core UI components and utilities are completely free and open source. Premium features include advanced templates, priority support, and access to our design system. Check our pricing page for detailed information about what's included in each tier." expandText="Read More" collapseText="Show Less" />
|
|
410
|
+
<ExpandableCard title="Can I customize the components?" preview="Yes! All Launch77 components are fully customizable..." expandedContent="Yes! All Launch77 components are fully customizable. They're built with Tailwind CSS and accept className props for styling. You can also override default styles, extend components with your own props, and even fork the source code if needed. We believe in giving developers full control over their UI." expandText="Read More" collapseText="Show Less" />
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
|
|
414
|
+
{/* Testimonial Example */}
|
|
415
|
+
<div id="testimonials" className="space-y-4 scroll-mt-20">
|
|
416
|
+
<h3 className="text-2xl font-semibold">Testimonials</h3>
|
|
417
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
418
|
+
<ExpandableCard title="Sarah Chen" badge="Startup Founder" statusBadge="Verified" statusBadgeVariant="success" preview="Launch77 helped us go from idea to production in just 2 weeks..." expandedContent="Launch77 helped us go from idea to production in just 2 weeks. The component library is incredibly well-designed and the documentation is top-notch. We saved months of development time and were able to focus on our core product features instead of building UI from scratch. The team behind Launch77 is also very responsive and helpful. Highly recommend!" expandText="Read Full Review" />
|
|
419
|
+
<ExpandableCard title="Mike Johnson" badge="Senior Developer" statusBadge="Pro User" statusBadgeVariant="secondary" preview="As a developer, I appreciate the attention to detail..." expandedContent="As a developer, I appreciate the attention to detail in Launch77's components. The TypeScript support is excellent, the code is clean and well-organized, and everything just works out of the box. I've used it on three projects now and it's become my go-to toolkit. The ability to customize everything while maintaining consistency is exactly what I needed." expandText="Read Full Review" />
|
|
420
|
+
<ExpandableCard title="Emily Rodriguez" badge="Design Lead" statusBadge="Team Plan" statusBadgeVariant="default" preview="The design system in Launch77 is thoughtfully crafted..." expandedContent="The design system in Launch77 is thoughtfully crafted and maintains perfect consistency across all components. Our design team loves how easy it is to prototype and iterate. The components follow accessibility best practices and look great on all devices. It's rare to find a toolkit that satisfies both designers and developers, but Launch77 does it perfectly." expandText="Read Full Review" />
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
{/* Feature Cards */}
|
|
425
|
+
<div id="product-features" className="space-y-4 scroll-mt-20">
|
|
426
|
+
<h3 className="text-2xl font-semibold">Product Features</h3>
|
|
427
|
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
428
|
+
<ExpandableCard
|
|
429
|
+
title="Advanced Analytics"
|
|
430
|
+
badge="Popular"
|
|
431
|
+
badgeVariant="success"
|
|
432
|
+
imageContent={
|
|
433
|
+
<div className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
|
434
|
+
<Award className="w-24 h-24 text-white" />
|
|
435
|
+
</div>
|
|
436
|
+
}
|
|
437
|
+
preview="Get deep insights into your application performance with real-time metrics..."
|
|
438
|
+
expandedContent={
|
|
439
|
+
<div className="space-y-4">
|
|
440
|
+
<p>Get deep insights into your application performance with real-time metrics and comprehensive dashboards.</p>
|
|
441
|
+
<ul className="list-disc list-inside space-y-2 text-muted-foreground">
|
|
442
|
+
<li>Real-time performance monitoring</li>
|
|
443
|
+
<li>Custom event tracking</li>
|
|
444
|
+
<li>User behavior analytics</li>
|
|
445
|
+
<li>Conversion funnel analysis</li>
|
|
446
|
+
<li>A/B testing framework</li>
|
|
447
|
+
</ul>
|
|
448
|
+
</div>
|
|
449
|
+
}
|
|
450
|
+
/>
|
|
451
|
+
<ExpandableCard
|
|
452
|
+
title="Team Collaboration"
|
|
453
|
+
badge="New"
|
|
454
|
+
badgeVariant="secondary"
|
|
455
|
+
imageContent={
|
|
456
|
+
<div className="h-48 bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
457
|
+
<Users className="w-24 h-24 text-white" />
|
|
458
|
+
</div>
|
|
459
|
+
}
|
|
460
|
+
preview="Work together seamlessly with built-in collaboration features..."
|
|
461
|
+
expandedContent={
|
|
462
|
+
<div className="space-y-4">
|
|
463
|
+
<p>Work together seamlessly with built-in collaboration features designed for modern teams.</p>
|
|
464
|
+
<ul className="list-disc list-inside space-y-2 text-muted-foreground">
|
|
465
|
+
<li>Real-time collaborative editing</li>
|
|
466
|
+
<li>Comment threads and annotations</li>
|
|
467
|
+
<li>Version history and rollback</li>
|
|
468
|
+
<li>Role-based access control</li>
|
|
469
|
+
<li>Activity feeds and notifications</li>
|
|
470
|
+
</ul>
|
|
471
|
+
</div>
|
|
472
|
+
}
|
|
473
|
+
/>
|
|
265
474
|
</div>
|
|
266
|
-
{showCookieConsent && <CookieConsent debug={true} />}
|
|
267
475
|
</div>
|
|
268
476
|
</section>
|
|
269
477
|
|
|
@@ -277,7 +485,7 @@ export default function MarketingUiExamplesPage() {
|
|
|
277
485
|
</Button>
|
|
278
486
|
</div>
|
|
279
487
|
</section>
|
|
280
|
-
</
|
|
281
|
-
</
|
|
488
|
+
</ShowcaseLayout>
|
|
489
|
+
</AnimationProvider>
|
|
282
490
|
)
|
|
283
491
|
}
|
|
@@ -4,6 +4,10 @@ This module provides access to the Launch77 Marketing UI component library - a c
|
|
|
4
4
|
|
|
5
5
|
## Available Components
|
|
6
6
|
|
|
7
|
+
### Core Infrastructure
|
|
8
|
+
|
|
9
|
+
- **AnimationProvider** - Required wrapper for enabling Framer Motion animations throughout your app
|
|
10
|
+
|
|
7
11
|
### Hero Sections
|
|
8
12
|
|
|
9
13
|
- **HeroCentered** - Centered hero layout with headline, subheadline, badge, and CTAs
|
|
@@ -18,20 +22,17 @@ This module provides access to the Launch77 Marketing UI component library - a c
|
|
|
18
22
|
|
|
19
23
|
- **MarketingCard** - Marketing-focused card with icon, title, and description
|
|
20
24
|
- **CardGrid** - Grid layout for displaying multiple marketing cards
|
|
25
|
+
- **ExpandableCard** - Expandable/collapsible card for FAQs, testimonials, and detailed content
|
|
21
26
|
|
|
22
|
-
###
|
|
23
|
-
|
|
24
|
-
- **CTAButton** - Conversion-optimized call-to-action link button
|
|
25
|
-
|
|
26
|
-
### Utilities
|
|
27
|
+
### Typography
|
|
27
28
|
|
|
28
|
-
- **
|
|
29
|
-
- **
|
|
29
|
+
- **FluidHeading** - Responsive heading with fluid typography scaling
|
|
30
|
+
- **FluidText** - Responsive text with fluid sizing based on viewport
|
|
30
31
|
|
|
31
|
-
###
|
|
32
|
+
### Utility Functions
|
|
32
33
|
|
|
33
|
-
- **
|
|
34
|
-
- **
|
|
34
|
+
- **cn** - Tailwind class merging utility for combining classes
|
|
35
|
+
- **useReducedMotion** - React hook for respecting user's motion preferences
|
|
35
36
|
|
|
36
37
|
## Usage Examples
|
|
37
38
|
|
|
@@ -152,57 +153,27 @@ export default function FeatureCard() {
|
|
|
152
153
|
}
|
|
153
154
|
```
|
|
154
155
|
|
|
155
|
-
###
|
|
156
|
+
### Expandable Cards
|
|
156
157
|
|
|
157
158
|
```tsx
|
|
158
|
-
import {
|
|
159
|
+
import { ExpandableCard } from '@launch77-shared/lib-marketing-ui'
|
|
159
160
|
|
|
160
|
-
export default function
|
|
161
|
-
return
|
|
162
|
-
<CTAButton
|
|
163
|
-
href="/signup"
|
|
164
|
-
size="lg"
|
|
165
|
-
trackingData={{
|
|
166
|
-
location: 'hero-section',
|
|
167
|
-
text: 'Start Free Trial',
|
|
168
|
-
destination: '/signup',
|
|
169
|
-
}}
|
|
170
|
-
>
|
|
171
|
-
Start Free Trial
|
|
172
|
-
</CTAButton>
|
|
173
|
-
)
|
|
161
|
+
export default function FAQSection() {
|
|
162
|
+
return <ExpandableCard title="What is Launch77?" preview="Launch77 is a comprehensive toolkit for building modern web applications..." expandedContent="Launch77 is a comprehensive toolkit for building modern web applications with Next.js, TypeScript, and Tailwind CSS. It provides pre-built components, utilities, and templates to accelerate your development process." expandText="Read More" collapseText="Show Less" />
|
|
174
163
|
}
|
|
175
164
|
```
|
|
176
165
|
|
|
177
|
-
###
|
|
166
|
+
### Animation Provider
|
|
178
167
|
|
|
179
168
|
```tsx
|
|
180
|
-
import {
|
|
169
|
+
import { AnimationProvider } from '@launch77-shared/lib-marketing-ui'
|
|
181
170
|
|
|
182
|
-
//
|
|
171
|
+
// Wrap your app or sections to enable animations
|
|
183
172
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
184
173
|
return (
|
|
185
174
|
<html lang="en">
|
|
186
175
|
<body>
|
|
187
|
-
{children}
|
|
188
|
-
<CookieConsent privacyPolicyUrl="/privacy" />
|
|
189
|
-
</body>
|
|
190
|
-
</html>
|
|
191
|
-
)
|
|
192
|
-
}
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
### Analytics Wrapper
|
|
196
|
-
|
|
197
|
-
```tsx
|
|
198
|
-
import { AnalyticsWrapper } from '@launch77-shared/lib-marketing-ui'
|
|
199
|
-
|
|
200
|
-
// Wrap your app to enable consent-based analytics
|
|
201
|
-
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
202
|
-
return (
|
|
203
|
-
<html lang="en">
|
|
204
|
-
<body>
|
|
205
|
-
<AnalyticsWrapper>{children}</AnalyticsWrapper>
|
|
176
|
+
<AnimationProvider>{children}</AnimationProvider>
|
|
206
177
|
</body>
|
|
207
178
|
</html>
|
|
208
179
|
)
|
|
@@ -217,12 +188,14 @@ import { FluidHeading, FluidText } from '@launch77-shared/lib-marketing-ui'
|
|
|
217
188
|
export default function ResponsiveContent() {
|
|
218
189
|
return (
|
|
219
190
|
<div>
|
|
220
|
-
<FluidHeading
|
|
221
|
-
|
|
191
|
+
<FluidHeading as="h1" scale="5xl">
|
|
192
|
+
Display Heading
|
|
193
|
+
</FluidHeading>
|
|
194
|
+
<FluidHeading as="h2" scale="4xl">
|
|
195
|
+
Page Title
|
|
222
196
|
</FluidHeading>
|
|
223
|
-
<FluidText
|
|
224
|
-
|
|
225
|
-
</FluidText>
|
|
197
|
+
<FluidText scale="lg">This text scales fluidly between viewport sizes for optimal readability.</FluidText>
|
|
198
|
+
<FluidText scale="base">Body text that adapts to screen size.</FluidText>
|
|
226
199
|
</div>
|
|
227
200
|
)
|
|
228
201
|
}
|
|
@@ -283,21 +256,52 @@ export default function ResponsiveContent() {
|
|
|
283
256
|
- `className` (string, optional) - Additional CSS classes
|
|
284
257
|
- `children` (ReactNode, required) - Grid items (typically MarketingCard components)
|
|
285
258
|
|
|
286
|
-
###
|
|
259
|
+
### ExpandableCard
|
|
260
|
+
|
|
261
|
+
- `title` (string, required) - Card title/heading
|
|
262
|
+
- `preview` (string, optional) - Preview text shown when collapsed
|
|
263
|
+
- `expandedContent` (ReactNode, required) - Full content shown when expanded
|
|
264
|
+
- `badge` (string, optional) - Badge text to display
|
|
265
|
+
- `badgeVariant` (BadgeVariant, optional) - Badge styling variant
|
|
266
|
+
- `statusBadge` (string, optional) - Status badge text
|
|
267
|
+
- `statusBadgeVariant` (BadgeVariant, optional) - Status badge variant
|
|
268
|
+
- `imageContent` (ReactNode, optional) - Optional image or visual content
|
|
269
|
+
- `expandText` (string, optional) - Text for expand button (default: "Show More")
|
|
270
|
+
- `collapseText` (string, optional) - Text for collapse button (default: "Show Less")
|
|
271
|
+
- `className` (string, optional) - Additional CSS classes
|
|
272
|
+
|
|
273
|
+
### SectionContainer
|
|
274
|
+
|
|
275
|
+
- `spacing` ('fluid' | 'fixed', optional) - Vertical spacing strategy (default: 'fixed')
|
|
276
|
+
- `width` ('narrow' | 'standard' | 'wide', optional) - Maximum width constraint (default: 'standard')
|
|
277
|
+
- `as` (ElementType, optional) - HTML element to render (default: 'section')
|
|
278
|
+
- `className` (string, optional) - Additional CSS classes
|
|
279
|
+
- `children` (ReactNode, required) - Section content
|
|
280
|
+
|
|
281
|
+
### FluidHeading
|
|
282
|
+
|
|
283
|
+
- `as` ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', optional) - HTML element to render (default: 'h2')
|
|
284
|
+
- `scale` (FluidScale | string, optional) - Predefined scale ('xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl') or custom clamp() value (default: '3xl')
|
|
285
|
+
- `weight` ('normal' | 'medium' | 'semibold' | 'bold' | 'extrabold', optional) - Font weight (default: 'bold')
|
|
286
|
+
- `leading` ('none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose', optional) - Line height (default: 'tight')
|
|
287
|
+
- `tracking` ('tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest', optional) - Letter spacing (default: 'tight')
|
|
288
|
+
- `className` (string, optional) - Additional CSS classes
|
|
289
|
+
- `children` (ReactNode, required) - Heading text
|
|
290
|
+
|
|
291
|
+
### FluidText
|
|
287
292
|
|
|
288
|
-
- `
|
|
289
|
-
- `
|
|
290
|
-
- `
|
|
291
|
-
- `
|
|
292
|
-
- `
|
|
293
|
-
- `size` ('sm' | 'md' | 'lg', optional) - Button size
|
|
293
|
+
- `as` ('p' | 'span' | 'div' | 'label', optional) - HTML element to render (default: 'p')
|
|
294
|
+
- `scale` (FluidScale | string, optional) - Predefined scale ('xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl') or custom clamp() value (default: 'base')
|
|
295
|
+
- `weight` ('normal' | 'medium' | 'semibold' | 'bold', optional) - Font weight (default: 'normal')
|
|
296
|
+
- `leading` ('none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose', optional) - Line height (default: 'relaxed')
|
|
297
|
+
- `color` ('inherit' | 'primary' | 'secondary' | 'muted' | 'accent', optional) - Text color from theme
|
|
294
298
|
- `className` (string, optional) - Additional CSS classes
|
|
295
|
-
- `
|
|
299
|
+
- `children` (ReactNode, required) - Text content
|
|
296
300
|
|
|
297
|
-
###
|
|
301
|
+
### AnimationProvider
|
|
298
302
|
|
|
299
|
-
- `
|
|
300
|
-
-
|
|
303
|
+
- `children` (ReactNode, required) - Child components that will have access to animations
|
|
304
|
+
- Note: Automatically respects user's prefers-reduced-motion setting
|
|
301
305
|
|
|
302
306
|
## Styling
|
|
303
307
|
|
|
@@ -350,10 +354,12 @@ const className = cn('base-class', condition && 'conditional-class', 'another-cl
|
|
|
350
354
|
|
|
351
355
|
## Important Notes
|
|
352
356
|
|
|
357
|
+
- **AnimationProvider**: Required wrapper for components that use Framer Motion animations. Wrap your app or specific sections.
|
|
353
358
|
- **Icons**: MarketingCard accepts Lucide icon components (from `lucide-react`), not strings or emojis
|
|
354
359
|
- **HeroSplit**: Uses a `content` prop for the hero content, not individual headline/CTA props
|
|
355
|
-
- **
|
|
360
|
+
- **HeroCentered**: Uses `headline`/`subheadline` props, not `title`/`description`
|
|
356
361
|
- **CardGrid**: Uses children pattern - pass MarketingCard components as children, not a `cards` array prop
|
|
362
|
+
- **FluidTypography**: Components use `scale` prop with predefined sizes ('xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl')
|
|
357
363
|
|
|
358
364
|
## External Images Configuration
|
|
359
365
|
|