@damarkuncoro/landing-page 0.1.1 → 0.1.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/README.md +33 -0
- package/dist/index.d.mts +35 -18
- package/dist/index.d.ts +35 -18
- package/dist/index.js +897 -305
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +897 -305
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -177,7 +177,40 @@ interface HeroConfig {
|
|
|
177
177
|
video?: string
|
|
178
178
|
buttons: ButtonConfig[]
|
|
179
179
|
alignment?: 'left' | 'center' | 'right'
|
|
180
|
+
skin?: 'default' | 'skin2' | 'skin3' | 'skin4' | 'skin5' | 'skin6' | 'skin7' | 'skin8'
|
|
180
181
|
}
|
|
182
|
+
|
|
183
|
+
### Hero Skins
|
|
184
|
+
|
|
185
|
+
#### Default Skin
|
|
186
|
+
Simple centered layout with image below text.
|
|
187
|
+
|
|
188
|
+
#### Skin 2
|
|
189
|
+
Two-column layout with image on the left and text on the right.
|
|
190
|
+
|
|
191
|
+
#### Skin 3
|
|
192
|
+
Gradient background with white text.
|
|
193
|
+
|
|
194
|
+
#### Skin 4
|
|
195
|
+
Video background with dark overlay.
|
|
196
|
+
|
|
197
|
+
#### Skin 5
|
|
198
|
+
Gambar di atas dengan teks di bawah, latar belakang berwarna terang.
|
|
199
|
+
|
|
200
|
+
#### Skin 6
|
|
201
|
+
Gambar di sebelah kanan dengan teks di kiri, latar belakang hitam dengan gradien.
|
|
202
|
+
|
|
203
|
+
#### Skin 7
|
|
204
|
+
Desain minimalis dengan latar belakang putih dan elemen yang bersih. Gambar di atas teks.
|
|
205
|
+
|
|
206
|
+
#### Skin 8
|
|
207
|
+
Desain dengan latar belakang gradien biru muda dan teks berwarna putih. Gambar di sebelah kanan dengan teks di kiri.
|
|
208
|
+
|
|
209
|
+
#### Skin 9
|
|
210
|
+
Title, subtitle, dan buttons di atas gambar.
|
|
211
|
+
|
|
212
|
+
#### Skin 10
|
|
213
|
+
Full screen hero dengan latar belakang gradien dan konten di tengah.
|
|
181
214
|
```
|
|
182
215
|
|
|
183
216
|
#### Features Section
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
type SectionType =
|
|
4
|
-
type ComponentType =
|
|
3
|
+
type SectionType = "hero" | "features" | "testimonials" | "pricing" | "cta" | "footer" | "stats" | "faq" | "header";
|
|
4
|
+
type ComponentType = "button" | "card" | "image" | "text" | "video";
|
|
5
5
|
interface BaseConfig {
|
|
6
6
|
id?: string;
|
|
7
7
|
className?: string;
|
|
@@ -33,6 +33,18 @@ interface ThemeConfig {
|
|
|
33
33
|
body: string;
|
|
34
34
|
mono: string;
|
|
35
35
|
};
|
|
36
|
+
typography: {
|
|
37
|
+
h1: string;
|
|
38
|
+
h2: string;
|
|
39
|
+
h3: string;
|
|
40
|
+
body: string;
|
|
41
|
+
small: string;
|
|
42
|
+
};
|
|
43
|
+
fontWeights: {
|
|
44
|
+
normal: number;
|
|
45
|
+
medium: number;
|
|
46
|
+
bold: number;
|
|
47
|
+
};
|
|
36
48
|
breakpoints: {
|
|
37
49
|
sm: string;
|
|
38
50
|
md: string;
|
|
@@ -72,9 +84,9 @@ declare function defineLandingPage(config: LandingPageConfig): {
|
|
|
72
84
|
interface ButtonConfig extends BaseConfig {
|
|
73
85
|
text: string;
|
|
74
86
|
url: string;
|
|
75
|
-
variant:
|
|
76
|
-
size:
|
|
77
|
-
target?:
|
|
87
|
+
variant: "primary" | "secondary" | "outline" | "ghost";
|
|
88
|
+
size: "sm" | "md" | "lg";
|
|
89
|
+
target?: "_blank" | "_self";
|
|
78
90
|
}
|
|
79
91
|
interface HeaderConfig extends BaseConfig {
|
|
80
92
|
logo?: string;
|
|
@@ -83,7 +95,7 @@ interface HeaderConfig extends BaseConfig {
|
|
|
83
95
|
id?: string;
|
|
84
96
|
text: string;
|
|
85
97
|
url: string;
|
|
86
|
-
target?:
|
|
98
|
+
target?: "_blank" | "_self";
|
|
87
99
|
}[];
|
|
88
100
|
}
|
|
89
101
|
interface HeroConfig extends BaseConfig {
|
|
@@ -92,7 +104,8 @@ interface HeroConfig extends BaseConfig {
|
|
|
92
104
|
image?: string;
|
|
93
105
|
video?: string;
|
|
94
106
|
buttons: ButtonConfig[];
|
|
95
|
-
alignment?:
|
|
107
|
+
alignment?: "left" | "center" | "right";
|
|
108
|
+
skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10";
|
|
96
109
|
}
|
|
97
110
|
interface FeatureConfig extends BaseConfig {
|
|
98
111
|
title: string;
|
|
@@ -127,7 +140,7 @@ interface FooterConfig extends BaseConfig {
|
|
|
127
140
|
items: {
|
|
128
141
|
text: string;
|
|
129
142
|
url: string;
|
|
130
|
-
target?:
|
|
143
|
+
target?: "_blank" | "_self";
|
|
131
144
|
}[];
|
|
132
145
|
}[];
|
|
133
146
|
socialLinks: {
|
|
@@ -159,19 +172,19 @@ interface FaqConfig extends BaseConfig {
|
|
|
159
172
|
}
|
|
160
173
|
|
|
161
174
|
interface HeaderSection extends SectionConfig {
|
|
162
|
-
type:
|
|
175
|
+
type: "header";
|
|
163
176
|
config: HeaderConfig;
|
|
164
177
|
}
|
|
165
178
|
declare function createHeaderSection(config: HeaderConfig, id?: string, className?: string): HeaderSection;
|
|
166
179
|
|
|
167
180
|
interface HeroSection extends SectionConfig {
|
|
168
|
-
type:
|
|
181
|
+
type: "hero";
|
|
169
182
|
config: HeroConfig;
|
|
170
183
|
}
|
|
171
184
|
declare function createHeroSection(config: HeroConfig, id?: string, className?: string): HeroSection;
|
|
172
185
|
|
|
173
186
|
interface FeaturesSection extends SectionConfig {
|
|
174
|
-
type:
|
|
187
|
+
type: "features";
|
|
175
188
|
config: {
|
|
176
189
|
features: FeatureConfig[];
|
|
177
190
|
};
|
|
@@ -181,7 +194,7 @@ declare function createFeaturesSection(config: {
|
|
|
181
194
|
}, id?: string, className?: string): FeaturesSection;
|
|
182
195
|
|
|
183
196
|
interface TestimonialsSection extends SectionConfig {
|
|
184
|
-
type:
|
|
197
|
+
type: "testimonials";
|
|
185
198
|
config: {
|
|
186
199
|
testimonials: TestimonialConfig[];
|
|
187
200
|
};
|
|
@@ -191,25 +204,25 @@ declare function createTestimonialsSection(config: {
|
|
|
191
204
|
}, id?: string, className?: string): TestimonialsSection;
|
|
192
205
|
|
|
193
206
|
interface PricingSection extends SectionConfig {
|
|
194
|
-
type:
|
|
207
|
+
type: "pricing";
|
|
195
208
|
config: PricingConfig;
|
|
196
209
|
}
|
|
197
210
|
declare function createPricingSection(config: PricingConfig, id?: string, className?: string): PricingSection;
|
|
198
211
|
|
|
199
212
|
interface CtaSection extends SectionConfig {
|
|
200
|
-
type:
|
|
213
|
+
type: "cta";
|
|
201
214
|
config: CtaConfig;
|
|
202
215
|
}
|
|
203
216
|
declare function createCtaSection(config: CtaConfig, id?: string, className?: string): CtaSection;
|
|
204
217
|
|
|
205
218
|
interface FooterSection extends SectionConfig {
|
|
206
|
-
type:
|
|
219
|
+
type: "footer";
|
|
207
220
|
config: FooterConfig;
|
|
208
221
|
}
|
|
209
222
|
declare function createFooterSection(config: FooterConfig, id?: string, className?: string): FooterSection;
|
|
210
223
|
|
|
211
224
|
interface StatsSection extends SectionConfig {
|
|
212
|
-
type:
|
|
225
|
+
type: "stats";
|
|
213
226
|
config: {
|
|
214
227
|
stats: StatConfig[];
|
|
215
228
|
};
|
|
@@ -219,7 +232,7 @@ declare function createStatsSection(config: {
|
|
|
219
232
|
}, id?: string, className?: string): StatsSection;
|
|
220
233
|
|
|
221
234
|
interface FaqSection extends SectionConfig {
|
|
222
|
-
type:
|
|
235
|
+
type: "faq";
|
|
223
236
|
config: FaqConfig;
|
|
224
237
|
}
|
|
225
238
|
declare function createFaqSection(config: FaqConfig, id?: string, className?: string): FaqSection;
|
|
@@ -466,6 +479,10 @@ declare const sectionConfigSchemas: {
|
|
|
466
479
|
type: string;
|
|
467
480
|
enum: string[];
|
|
468
481
|
};
|
|
482
|
+
skin: {
|
|
483
|
+
type: string;
|
|
484
|
+
enum: string[];
|
|
485
|
+
};
|
|
469
486
|
};
|
|
470
487
|
required: string[];
|
|
471
488
|
};
|
|
@@ -757,4 +774,4 @@ declare const sectionConfigSchemas: {
|
|
|
757
774
|
declare function validateConfig(config: Partial<LandingPageConfig>): string[];
|
|
758
775
|
declare function validateSection(section: Partial<SectionConfig>): string[];
|
|
759
776
|
|
|
760
|
-
export { ButtonConfig, ComponentType, CtaConfig, FaqConfig, FeatureConfig, FooterConfig, HeaderConfig, HeroConfig, LandingPageConfig, PricingConfig, SectionType, StatConfig, TestimonialConfig, createCtaSection, createFaqSection, createFeaturesSection, createFooterSection, createHeaderSection, createHeroSection, createPricingSection, createReactRenderer, createStatsSection, createTestimonialsSection, defaultTheme, defineLandingPage, landingPageSchema, sectionConfigSchemas, validateConfig, validateSection };
|
|
777
|
+
export { ButtonConfig, ComponentType, CtaConfig, FaqConfig, FeatureConfig, FooterConfig, HeaderConfig, HeroConfig, LandingPageConfig, PricingConfig, SectionType, StatConfig, TestimonialConfig, ThemeConfig, createCtaSection, createFaqSection, createFeaturesSection, createFooterSection, createHeaderSection, createHeroSection, createPricingSection, createReactRenderer, createStatsSection, createTestimonialsSection, defaultTheme, defineLandingPage, landingPageSchema, sectionConfigSchemas, validateConfig, validateSection };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
type SectionType =
|
|
4
|
-
type ComponentType =
|
|
3
|
+
type SectionType = "hero" | "features" | "testimonials" | "pricing" | "cta" | "footer" | "stats" | "faq" | "header";
|
|
4
|
+
type ComponentType = "button" | "card" | "image" | "text" | "video";
|
|
5
5
|
interface BaseConfig {
|
|
6
6
|
id?: string;
|
|
7
7
|
className?: string;
|
|
@@ -33,6 +33,18 @@ interface ThemeConfig {
|
|
|
33
33
|
body: string;
|
|
34
34
|
mono: string;
|
|
35
35
|
};
|
|
36
|
+
typography: {
|
|
37
|
+
h1: string;
|
|
38
|
+
h2: string;
|
|
39
|
+
h3: string;
|
|
40
|
+
body: string;
|
|
41
|
+
small: string;
|
|
42
|
+
};
|
|
43
|
+
fontWeights: {
|
|
44
|
+
normal: string;
|
|
45
|
+
medium: string;
|
|
46
|
+
bold: string;
|
|
47
|
+
};
|
|
36
48
|
breakpoints: {
|
|
37
49
|
sm: string;
|
|
38
50
|
md: string;
|
|
@@ -72,9 +84,9 @@ declare function defineLandingPage(config: LandingPageConfig): {
|
|
|
72
84
|
interface ButtonConfig extends BaseConfig {
|
|
73
85
|
text: string;
|
|
74
86
|
url: string;
|
|
75
|
-
variant:
|
|
76
|
-
size:
|
|
77
|
-
target?:
|
|
87
|
+
variant: "primary" | "secondary" | "outline" | "ghost";
|
|
88
|
+
size: "sm" | "md" | "lg";
|
|
89
|
+
target?: "_blank" | "_self";
|
|
78
90
|
}
|
|
79
91
|
interface HeaderConfig extends BaseConfig {
|
|
80
92
|
logo?: string;
|
|
@@ -83,7 +95,7 @@ interface HeaderConfig extends BaseConfig {
|
|
|
83
95
|
id?: string;
|
|
84
96
|
text: string;
|
|
85
97
|
url: string;
|
|
86
|
-
target?:
|
|
98
|
+
target?: "_blank" | "_self";
|
|
87
99
|
}[];
|
|
88
100
|
}
|
|
89
101
|
interface HeroConfig extends BaseConfig {
|
|
@@ -92,7 +104,8 @@ interface HeroConfig extends BaseConfig {
|
|
|
92
104
|
image?: string;
|
|
93
105
|
video?: string;
|
|
94
106
|
buttons: ButtonConfig[];
|
|
95
|
-
alignment?:
|
|
107
|
+
alignment?: "left" | "center" | "right";
|
|
108
|
+
skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10";
|
|
96
109
|
}
|
|
97
110
|
interface FeatureConfig extends BaseConfig {
|
|
98
111
|
title: string;
|
|
@@ -127,7 +140,7 @@ interface FooterConfig extends BaseConfig {
|
|
|
127
140
|
items: {
|
|
128
141
|
text: string;
|
|
129
142
|
url: string;
|
|
130
|
-
target?:
|
|
143
|
+
target?: "_blank" | "_self";
|
|
131
144
|
}[];
|
|
132
145
|
}[];
|
|
133
146
|
socialLinks: {
|
|
@@ -159,19 +172,19 @@ interface FaqConfig extends BaseConfig {
|
|
|
159
172
|
}
|
|
160
173
|
|
|
161
174
|
interface HeaderSection extends SectionConfig {
|
|
162
|
-
type:
|
|
175
|
+
type: "header";
|
|
163
176
|
config: HeaderConfig;
|
|
164
177
|
}
|
|
165
178
|
declare function createHeaderSection(config: HeaderConfig, id?: string, className?: string): HeaderSection;
|
|
166
179
|
|
|
167
180
|
interface HeroSection extends SectionConfig {
|
|
168
|
-
type:
|
|
181
|
+
type: "hero";
|
|
169
182
|
config: HeroConfig;
|
|
170
183
|
}
|
|
171
184
|
declare function createHeroSection(config: HeroConfig, id?: string, className?: string): HeroSection;
|
|
172
185
|
|
|
173
186
|
interface FeaturesSection extends SectionConfig {
|
|
174
|
-
type:
|
|
187
|
+
type: "features";
|
|
175
188
|
config: {
|
|
176
189
|
features: FeatureConfig[];
|
|
177
190
|
};
|
|
@@ -181,7 +194,7 @@ declare function createFeaturesSection(config: {
|
|
|
181
194
|
}, id?: string, className?: string): FeaturesSection;
|
|
182
195
|
|
|
183
196
|
interface TestimonialsSection extends SectionConfig {
|
|
184
|
-
type:
|
|
197
|
+
type: "testimonials";
|
|
185
198
|
config: {
|
|
186
199
|
testimonials: TestimonialConfig[];
|
|
187
200
|
};
|
|
@@ -191,25 +204,25 @@ declare function createTestimonialsSection(config: {
|
|
|
191
204
|
}, id?: string, className?: string): TestimonialsSection;
|
|
192
205
|
|
|
193
206
|
interface PricingSection extends SectionConfig {
|
|
194
|
-
type:
|
|
207
|
+
type: "pricing";
|
|
195
208
|
config: PricingConfig;
|
|
196
209
|
}
|
|
197
210
|
declare function createPricingSection(config: PricingConfig, id?: string, className?: string): PricingSection;
|
|
198
211
|
|
|
199
212
|
interface CtaSection extends SectionConfig {
|
|
200
|
-
type:
|
|
213
|
+
type: "cta";
|
|
201
214
|
config: CtaConfig;
|
|
202
215
|
}
|
|
203
216
|
declare function createCtaSection(config: CtaConfig, id?: string, className?: string): CtaSection;
|
|
204
217
|
|
|
205
218
|
interface FooterSection extends SectionConfig {
|
|
206
|
-
type:
|
|
219
|
+
type: "footer";
|
|
207
220
|
config: FooterConfig;
|
|
208
221
|
}
|
|
209
222
|
declare function createFooterSection(config: FooterConfig, id?: string, className?: string): FooterSection;
|
|
210
223
|
|
|
211
224
|
interface StatsSection extends SectionConfig {
|
|
212
|
-
type:
|
|
225
|
+
type: "stats";
|
|
213
226
|
config: {
|
|
214
227
|
stats: StatConfig[];
|
|
215
228
|
};
|
|
@@ -219,7 +232,7 @@ declare function createStatsSection(config: {
|
|
|
219
232
|
}, id?: string, className?: string): StatsSection;
|
|
220
233
|
|
|
221
234
|
interface FaqSection extends SectionConfig {
|
|
222
|
-
type:
|
|
235
|
+
type: "faq";
|
|
223
236
|
config: FaqConfig;
|
|
224
237
|
}
|
|
225
238
|
declare function createFaqSection(config: FaqConfig, id?: string, className?: string): FaqSection;
|
|
@@ -466,6 +479,10 @@ declare const sectionConfigSchemas: {
|
|
|
466
479
|
type: string;
|
|
467
480
|
enum: string[];
|
|
468
481
|
};
|
|
482
|
+
skin: {
|
|
483
|
+
type: string;
|
|
484
|
+
enum: string[];
|
|
485
|
+
};
|
|
469
486
|
};
|
|
470
487
|
required: string[];
|
|
471
488
|
};
|
|
@@ -757,4 +774,4 @@ declare const sectionConfigSchemas: {
|
|
|
757
774
|
declare function validateConfig(config: Partial<LandingPageConfig>): string[];
|
|
758
775
|
declare function validateSection(section: Partial<SectionConfig>): string[];
|
|
759
776
|
|
|
760
|
-
export { ButtonConfig, ComponentType, CtaConfig, FaqConfig, FeatureConfig, FooterConfig, HeaderConfig, HeroConfig, LandingPageConfig, PricingConfig, SectionType, StatConfig, TestimonialConfig, createCtaSection, createFaqSection, createFeaturesSection, createFooterSection, createHeaderSection, createHeroSection, createPricingSection, createReactRenderer, createStatsSection, createTestimonialsSection, defaultTheme, defineLandingPage, landingPageSchema, sectionConfigSchemas, validateConfig, validateSection };
|
|
777
|
+
export { ButtonConfig, ComponentType, CtaConfig, FaqConfig, FeatureConfig, FooterConfig, HeaderConfig, HeroConfig, LandingPageConfig, PricingConfig, SectionType, StatConfig, TestimonialConfig, ThemeConfig, createCtaSection, createFaqSection, createFeaturesSection, createFooterSection, createHeaderSection, createHeroSection, createPricingSection, createReactRenderer, createStatsSection, createTestimonialsSection, defaultTheme, defineLandingPage, landingPageSchema, sectionConfigSchemas, validateConfig, validateSection };
|