@damarkuncoro/landing-page 0.1.2 → 0.1.4

package/README.md

@@ -177,7 +177,40 @@ interface HeroConfig {
   video?: string
   buttons: ButtonConfig[]
   alignment?: 'left' | 'center' | 'right'
+  skin?: 'default' | 'skin2' | 'skin3' | 'skin4' | 'skin5' | 'skin6' | 'skin7' | 'skin8'
 }
+
+### Hero Skins
+
+#### Default Skin
+Simple centered layout with image below text.
+
+#### Skin 2
+Two-column layout with image on the left and text on the right.
+
+#### Skin 3
+Gradient background with white text.
+
+#### Skin 4
+Video background with dark overlay.
+
+#### Skin 5
+Gambar di atas dengan teks di bawah, latar belakang berwarna terang.
+
+#### Skin 6
+Gambar di sebelah kanan dengan teks di kiri, latar belakang hitam dengan gradien.
+
+#### Skin 7
+Desain minimalis dengan latar belakang putih dan elemen yang bersih. Gambar di atas teks.
+
+#### Skin 8
+Desain dengan latar belakang gradien biru muda dan teks berwarna putih. Gambar di sebelah kanan dengan teks di kiri.
+
+#### Skin 9
+Title, subtitle, dan buttons di atas gambar.
+
+#### Skin 10
+Full screen hero dengan latar belakang gradien dan konten di tengah.
 ```
 
 #### Features Section
@@ -290,12 +323,28 @@ interface ThemeConfig {
     body: string
     mono: string
   }
+  typography: {
+    h1: string
+    h2: string
+    h3: string
+    body: string
+    small: string
+  }
+  fontWeights: {
+    normal: string | number
+    medium: string | number
+    bold: string | number
+  }
   breakpoints: {
     sm: string
     md: string
     lg: string
     xl: string
   }
+  sizes?: {
+    subtitleMaxWidth?: string
+    containerMaxWidth?: string
+  }
 }
 ```
 

package/{dist → lib/cjs}/index.d.ts

@@ -1,82 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type SectionType = "hero" | "features" | "testimonials" | "pricing" | "cta" | "footer" | "stats" | "faq" | "header";
-type ComponentType = "button" | "card" | "image" | "text" | "video";
-interface BaseConfig {
-    id?: string;
-    className?: string;
-}
-interface LandingPageConfig extends BaseConfig {
-    title: string;
-    description: string;
-    sections: SectionConfig[];
-    theme?: Partial<ThemeConfig>;
-}
-interface ThemeConfig {
-    colors: {
-        primary: string;
-        secondary: string;
-        accent: string;
-        background: string;
-        text: string;
-        muted: string;
-    };
-    spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    fonts: {
-        heading: string;
-        body: string;
-        mono: string;
-    };
-    breakpoints: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}
-interface SectionConfig extends BaseConfig {
-    type: SectionType;
-    config: any;
-}
-
-declare function defineLandingPage(config: LandingPageConfig): {
-    theme: ThemeConfig;
-    getSection(id: string): SectionConfig | undefined;
-    addSection(section: SectionConfig): /*elided*/ any;
-    removeSection(id: string): /*elided*/ any;
-    updateSection(id: string, updates: Partial<SectionConfig>): /*elided*/ any;
-    toJSON(): {
-        id: any;
-        className: any;
-        title: any;
-        description: any;
-        sections: any;
-        theme: any;
-    };
-    validate(): string[];
-    getSectionsByType(type: string): SectionConfig[];
-    isValid(): boolean;
-    title: string;
-    description: string;
-    sections: SectionConfig[];
-    id?: string;
-    className?: string;
-};
-
-interface ButtonConfig extends BaseConfig {
+interface ButtonConfig extends WithBaseConfig<{
     text: string;
     url: string;
     variant: "primary" | "secondary" | "outline" | "ghost";
     size: "sm" | "md" | "lg";
     target?: "_blank" | "_self";
+}> {
 }
-interface HeaderConfig extends BaseConfig {
+interface HeaderConfig extends WithBaseConfig<{
     logo?: string;
     title?: string;
     links: {
@@ -85,28 +17,35 @@ interface HeaderConfig extends BaseConfig {
         url: string;
         target?: "_blank" | "_self";
     }[];
+}> {
 }
-interface HeroConfig extends BaseConfig {
+interface HeroConfig extends WithBaseConfig<{
     title: string;
-    subtitle: string;
+    subtitle?: string;
     image?: string;
+    imageAlt?: string;
     video?: string;
+    captionsSrc?: string;
     buttons: ButtonConfig[];
     alignment?: "left" | "center" | "right";
+    skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10";
+}> {
 }
-interface FeatureConfig extends BaseConfig {
+interface FeatureConfig extends WithBaseConfig<{
     title: string;
     description: string;
     icon?: string;
     image?: string;
+}> {
 }
-interface TestimonialConfig extends BaseConfig {
+interface TestimonialConfig extends WithBaseConfig<{
     quote: string;
     author: string;
     role?: string;
     avatar?: string;
+}> {
 }
-interface PricingConfig extends BaseConfig {
+interface PricingConfig extends WithBaseConfig<{
     plans: {
         id?: string;
         title: string;
@@ -117,8 +56,9 @@ interface PricingConfig extends BaseConfig {
         button: ButtonConfig;
         featured?: boolean;
     }[];
+}> {
 }
-interface FooterConfig extends BaseConfig {
+interface FooterConfig extends WithBaseConfig<{
     logo?: string;
     title?: string;
     description?: string;
@@ -136,41 +76,173 @@ interface FooterConfig extends BaseConfig {
         icon?: string;
     }[];
     copyright?: string;
+}> {
 }
-interface CtaConfig extends BaseConfig {
+interface CtaConfig extends WithBaseConfig<{
     title: string;
     description: string;
     button: ButtonConfig;
     image?: string;
+}> {
 }
-interface StatConfig extends BaseConfig {
+interface StatConfig extends WithBaseConfig<{
     number: string;
     label: string;
     icon?: string;
     prefix?: string;
     suffix?: string;
+}> {
 }
-interface FaqConfig extends BaseConfig {
+interface FaqConfig extends WithBaseConfig<{
     items: {
         id?: string;
         question: string;
         answer: string;
     }[];
+}> {
 }
 
-interface HeaderSection extends SectionConfig {
+type SectionType = "hero" | "features" | "testimonials" | "pricing" | "cta" | "footer" | "stats" | "faq" | "header";
+type ComponentType = "button" | "card" | "image" | "text" | "video";
+type WithBaseConfig<T> = T & {
+    id?: string;
+    className?: string;
+};
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+interface ThemeConfig {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        text: string;
+        muted: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fonts: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    typography: {
+        h1: string;
+        h2: string;
+        h3: string;
+        body: string;
+        small: string;
+    };
+    fontWeights: {
+        normal: string | number;
+        medium: string | number;
+        bold: string | number;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    sizes?: {
+        subtitleMaxWidth?: string;
+        containerMaxWidth?: string;
+    };
+}
+interface BaseSectionConfig {
+    type: SectionType;
+    id?: string;
+    className?: string;
+    label?: string;
+}
+type SectionConfig = WithBaseConfig<{
+    type: "hero";
+    config: HeroConfig;
+    label?: string;
+}> | WithBaseConfig<{
+    type: "features";
+    config: FeatureConfig[];
+    label?: string;
+}> | WithBaseConfig<{
+    type: "testimonials";
+    config: TestimonialConfig[];
+    label?: string;
+}> | WithBaseConfig<{
+    type: "pricing";
+    config: PricingConfig;
+    label?: string;
+}> | WithBaseConfig<{
+    type: "cta";
+    config: CtaConfig;
+    label?: string;
+}> | WithBaseConfig<{
+    type: "footer";
+    config: FooterConfig;
+    label?: string;
+}> | WithBaseConfig<{
+    type: "stats";
+    config: StatConfig[];
+    label?: string;
+}> | WithBaseConfig<{
+    type: "faq";
+    config: FaqConfig;
+    label?: string;
+}> | WithBaseConfig<{
+    type: "header";
+    config: HeaderConfig;
+    label?: string;
+}>;
+interface LandingPageConfig extends WithBaseConfig<{
+    title: string;
+    description: string;
+    sections: readonly SectionConfig[];
+    theme?: DeepPartial<ThemeConfig>;
+}> {
+}
+
+declare function defineLandingPage(config: LandingPageConfig): {
+    sections: SectionConfig[];
+    theme: ThemeConfig;
+    getSection(id: string): SectionConfig | undefined;
+    addSection(section: SectionConfig): /*elided*/ any;
+    removeSection(id: string): /*elided*/ any;
+    updateSection(id: string, updates: Partial<SectionConfig>): /*elided*/ any;
+    toJSON(): {
+        id: any;
+        className: any;
+        title: any;
+        description: any;
+        sections: any;
+        theme: any;
+    };
+    validate(): string[];
+    getSectionsByType(type: string): SectionConfig[];
+    isValid(): boolean;
+    title: string;
+    description: string;
+    id?: string;
+    className?: string;
+};
+
+interface HeaderSection extends BaseSectionConfig {
     type: "header";
     config: HeaderConfig;
 }
 declare function createHeaderSection(config: HeaderConfig, id?: string, className?: string): HeaderSection;
 
-interface HeroSection extends SectionConfig {
+interface HeroSection extends BaseSectionConfig {
     type: "hero";
     config: HeroConfig;
 }
 declare function createHeroSection(config: HeroConfig, id?: string, className?: string): HeroSection;
 
-interface FeaturesSection extends SectionConfig {
+interface FeaturesSection extends BaseSectionConfig {
     type: "features";
     config: {
         features: FeatureConfig[];
@@ -180,7 +252,7 @@ declare function createFeaturesSection(config: {
     features: FeatureConfig[];
 }, id?: string, className?: string): FeaturesSection;
 
-interface TestimonialsSection extends SectionConfig {
+interface TestimonialsSection extends BaseSectionConfig {
     type: "testimonials";
     config: {
         testimonials: TestimonialConfig[];
@@ -190,25 +262,25 @@ declare function createTestimonialsSection(config: {
     testimonials: TestimonialConfig[];
 }, id?: string, className?: string): TestimonialsSection;
 
-interface PricingSection extends SectionConfig {
+interface PricingSection extends BaseSectionConfig {
     type: "pricing";
     config: PricingConfig;
 }
 declare function createPricingSection(config: PricingConfig, id?: string, className?: string): PricingSection;
 
-interface CtaSection extends SectionConfig {
+interface CtaSection extends BaseSectionConfig {
     type: "cta";
     config: CtaConfig;
 }
 declare function createCtaSection(config: CtaConfig, id?: string, className?: string): CtaSection;
 
-interface FooterSection extends SectionConfig {
+interface FooterSection extends BaseSectionConfig {
     type: "footer";
     config: FooterConfig;
 }
 declare function createFooterSection(config: FooterConfig, id?: string, className?: string): FooterSection;
 
-interface StatsSection extends SectionConfig {
+interface StatsSection extends BaseSectionConfig {
     type: "stats";
     config: {
         stats: StatConfig[];
@@ -218,7 +290,7 @@ declare function createStatsSection(config: {
     stats: StatConfig[];
 }, id?: string, className?: string): StatsSection;
 
-interface FaqSection extends SectionConfig {
+interface FaqSection extends BaseSectionConfig {
     type: "faq";
     config: FaqConfig;
 }
@@ -303,9 +375,75 @@ declare const landingPageSchema: {
                 fonts: {
                     $ref: string;
                 };
+                typography: {
+                    $ref: string;
+                };
+                fontWeights: {
+                    $ref: string;
+                };
                 breakpoints: {
                     $ref: string;
                 };
+                sizes: {
+                    $ref: string;
+                };
+            };
+        };
+        Typography: {
+            type: string;
+            properties: {
+                h1: {
+                    type: string;
+                    description: string;
+                };
+                h2: {
+                    type: string;
+                    description: string;
+                };
+                h3: {
+                    type: string;
+                    description: string;
+                };
+                body: {
+                    type: string;
+                    description: string;
+                };
+                small: {
+                    type: string;
+                    description: string;
+                };
+            };
+            required: string[];
+        };
+        FontWeights: {
+            type: string;
+            properties: {
+                normal: {
+                    type: string[];
+                    description: string;
+                };
+                medium: {
+                    type: string[];
+                    description: string;
+                };
+                bold: {
+                    type: string[];
+                    description: string;
+                };
+            };
+            required: string[];
+        };
+        Sizes: {
+            type: string;
+            properties: {
+                subtitleMaxWidth: {
+                    type: string;
+                    description: string;
+                };
+                containerMaxWidth: {
+                    type: string;
+                    description: string;
+                };
             };
         };
         Colors: {
@@ -452,10 +590,17 @@ declare const sectionConfigSchemas: {
                 type: string;
                 format: string;
             };
+            imageAlt: {
+                type: string;
+            };
             video: {
                 type: string;
                 format: string;
             };
+            captionsSrc: {
+                type: string;
+                format: string;
+            };
             buttons: {
                 type: string;
                 items: {
@@ -466,6 +611,10 @@ declare const sectionConfigSchemas: {
                 type: string;
                 enum: string[];
             };
+            skin: {
+                type: string;
+                enum: string[];
+            };
         };
         required: string[];
     };
@@ -755,6 +904,6 @@ declare const sectionConfigSchemas: {
 };
 
 declare function validateConfig(config: Partial<LandingPageConfig>): string[];
-declare function validateSection(section: Partial<SectionConfig>): string[];
+declare function validateSection(section: any): string[];
 
-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 };
+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 };