@damarkuncoro/landing-page 0.1.5 → 0.1.7

package/README.md

@@ -22,6 +22,119 @@ Config-driven landing page library for building beautiful, responsive landing pa
 npm install @damarkuncoro/landing-page
 ```
 
+## Using "No Skin" (Base UI)
+
+The library supports a "no skin" option that allows you to use the base UI components without any additional styling. This gives you full control over the styling through CSS or inline styles.
+
+### Usage
+
+```typescript
+import { defineLandingPage } from '@damarkuncoro/landing-page'
+
+const landingPage = defineLandingPage({
+  title: 'My Landing Page with Base UI',
+  description: 'A landing page using the base UI components',
+  sections: [
+    {
+      id: 'hero',
+      type: 'hero',
+      config: {
+        title: 'Welcome to Our Platform',
+        subtitle: 'Discover amazing features that will transform your workflow',
+        buttons: [
+          {
+            id: 'primary-button',
+            text: 'Get Started',
+            url: '/signup',
+            variant: 'primary',
+            size: 'md',
+            skin: 'none', // Use base UI without skin
+          },
+          {
+            id: 'secondary-button',
+            text: 'Learn More',
+            url: '/about',
+            variant: 'secondary',
+            size: 'md',
+            skin: 'none', // Use base UI without skin
+          },
+        ],
+        skin: 'none', // Use base UI without skin
+      },
+    },
+    {
+      id: 'features',
+      type: 'features',
+      config: {
+        features: [
+          {
+            id: 'feature-1',
+            title: 'Fast Performance',
+            description: 'Our platform is optimized for speed and efficiency',
+          },
+          {
+            id: 'feature-2',
+            title: 'Modern Design',
+            description: 'Beautiful, responsive interface that works on all devices',
+          },
+          {
+            id: 'feature-3',
+            title: 'Secure & Reliable',
+            description: 'Enterprise-grade security and reliability',
+          },
+        ],
+        skin: 'none', // Use base UI without skin
+      },
+    },
+  ],
+})
+```
+
+### Customizing Base UI
+
+When using `skin: 'none'`, you can customize the components using the `style` and `className` props:
+
+```typescript
+const landingPage = defineLandingPage({
+  title: 'My Customized Landing Page',
+  description: 'A landing page with customized base UI components',
+  sections: [
+    {
+      id: 'hero',
+      type: 'hero',
+      config: {
+        title: 'Welcome to Our Platform',
+        subtitle: 'Discover amazing features that will transform your workflow',
+        buttons: [
+          {
+            id: 'primary-button',
+            text: 'Get Started',
+            url: '/signup',
+            variant: 'primary',
+            size: 'md',
+            skin: 'none',
+            className: 'my-custom-button', // Custom CSS class
+            style: {
+              backgroundColor: '#ff0000',
+              color: '#ffffff',
+              padding: '12px 24px',
+              borderRadius: '8px',
+              fontSize: '16px',
+            },
+          },
+        ],
+        skin: 'none',
+        className: 'my-custom-hero', // Custom CSS class
+        style: {
+          padding: '80px 0',
+          backgroundColor: '#f5f5f5',
+        },
+      },
+    },
+  ],
+})
+```
+
 ## Quick Start
 
 1. Define your landing page configuration:
@@ -283,7 +396,7 @@ interface HeroConfig {
   video?: string
   buttons: ButtonConfig[]
   alignment?: 'left' | 'center' | 'right'
-  skin?: 'default' | 'skin2' | 'skin3' | 'skin4' | 'skin5' | 'skin6' | 'skin7' | 'skin8'
+  skin?: 'default' | 'skin2' | 'skin3' | 'skin4' | 'skin5' | 'skin6' | 'skin7' | 'skin8' | 'none'
 }
 
 ### Hero Skins

package/lib/cjs/index.d.ts

@@ -6,7 +6,9 @@ interface ButtonConfig extends WithBaseConfig<{
     variant: "primary" | "secondary" | "outline" | "ghost";
     size?: "sm" | "md" | "lg";
     target?: "_blank" | "_self";
-    skin?: "default" | "tailwind";
+    skin?: "default" | "tailwind" | "none";
+    padding?: string;
+    fontSize?: string;
 }> {
 }
 interface NavbarLinkConfig {
@@ -35,18 +37,14 @@ interface HeaderConfig extends WithBaseConfig<{
     logo?: string;
     title?: string;
     links: NavbarLinkConfig[];
-    buttons?: {
-        text: string;
-        url: string;
-        variant: "primary" | "secondary" | "outline" | "ghost";
-        target?: "_blank" | "_self";
-    }[];
+    buttons?: ButtonConfig[];
     fixed?: boolean;
     scrollEffect?: boolean;
-    skin?: "default" | "tailwind";
+    skin?: "default" | "tailwind" | "modern" | "none";
     searchPlaceholder?: string;
     onSearch?: (query: string) => void;
     initialSearchValue?: string;
+    showSearchInMobileMenu?: boolean;
     languageSelector?: LanguageSelectorConfig;
     themeSwitcher?: ThemeSwitcherConfig;
 }> {
@@ -60,7 +58,7 @@ interface HeroConfig extends WithBaseConfig<{
     captionsSrc?: string;
     buttons: ButtonConfig[];
     alignment?: "left" | "center" | "right";
-    skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10" | "tailwind";
+    skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10" | "tailwind" | "none";
 }> {
 }
 interface FeatureConfig extends WithBaseConfig<{
@@ -68,7 +66,7 @@ interface FeatureConfig extends WithBaseConfig<{
     description: string;
     icon?: string;
     image?: string;
-    skin?: "default" | "tailwind";
+    skin?: "default" | "tailwind" | "none";
 }> {
 }
 interface TestimonialConfig extends WithBaseConfig<{
@@ -89,6 +87,7 @@ interface PricingConfig extends WithBaseConfig<{
         button: ButtonConfig;
         featured?: boolean;
     }[];
+    skin?: "default" | "tailwind" | "none";
 }> {
 }
 interface FooterConfig extends WithBaseConfig<{
@@ -109,6 +108,7 @@ interface FooterConfig extends WithBaseConfig<{
         icon?: string;
     }[];
     copyright?: string;
+    skin?: "default" | "tailwind" | "none";
 }> {
 }
 interface CtaConfig extends WithBaseConfig<{
@@ -116,6 +116,7 @@ interface CtaConfig extends WithBaseConfig<{
     description: string;
     button: ButtonConfig;
     image?: string;
+    skin?: "default" | "tailwind" | "none";
 }> {
 }
 interface StatConfig extends WithBaseConfig<{
@@ -132,6 +133,7 @@ interface FaqConfig extends WithBaseConfig<{
         question: string;
         answer: string;
     }[];
+    skin?: "default" | "tailwind" | "none";
 }> {
 }
 
@@ -285,20 +287,24 @@ interface FeaturesSection extends BaseSectionConfig {
     type: "features";
     config: {
         features: FeatureConfig[];
+        skin?: "default" | "tailwind" | "none";
     };
 }
 declare function createFeaturesSection(config: {
     features: FeatureConfig[];
+    skin?: "default" | "tailwind" | "none";
 }, id?: string, className?: string): FeaturesSection;
 
 interface TestimonialsSection extends BaseSectionConfig {
     type: "testimonials";
     config: {
         testimonials: TestimonialConfig[];
+        skin?: "default" | "tailwind" | "none";
     };
 }
 declare function createTestimonialsSection(config: {
     testimonials: TestimonialConfig[];
+    skin?: "default" | "tailwind" | "none";
 }, id?: string, className?: string): TestimonialsSection;
 
 interface PricingSection extends BaseSectionConfig {
@@ -323,10 +329,12 @@ interface StatsSection extends BaseSectionConfig {
     type: "stats";
     config: {
         stats: StatConfig[];
+        skin?: "default" | "tailwind" | "none";
     };
 }
 declare function createStatsSection(config: {
     stats: StatConfig[];
+    skin?: "default" | "tailwind" | "none";
 }, id?: string, className?: string): StatsSection;
 
 interface FaqSection extends BaseSectionConfig {
@@ -975,6 +983,9 @@ declare const sectionConfigSchemas: {
             initialSearchValue: {
                 type: string;
             };
+            showSearchInMobileMenu: {
+                type: string;
+            };
             languageSelector: {
                 type: string;
                 properties: {