Page Landing Example

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

Landing Page Example

Description

This example shows a complete implementation of a responsive landing page using the widget system. The structure is defined in JSON format and can serve as a starting point for creating your own pages.

Example Features

Fully responsive design with different breakpoints
Headers, footers, and content sections
Animations and transitions
Different types of widgets (text, images, buttons, containers)
Advanced styles with shadows, borders, and effects

JSON Structure

The example JSON file defines:

Page Metadata: ID, title, slug, version, etc.
General Layout: Layout type, background colors, dimensions
Widget Definitions: Collection of widgets that make up the page
Responsive Settings: Specific configurations for different screen sizes

Sample Code

{
  "id": "landing-example-01",
  "title": "Landing Page Example",
  "slug": "landing-example",
  "version": "1.0.0",
  "layout": {
    "type": "fluid",
    "backgroundColor": "#f5f5f5",
    "maxWidth": 1200,
    "minHeight": 800
  },
  "widgets": [
    {
      "id": "header-section",
      "type": "container",
      "position": {
        "base": { "x": 0, "y": 0 }
      },
      "size": {
        "base": { "width": "100%", "height": "auto" },
      },
      "styles": {
        "base": {
          "backgroundColor": "#ffffff",
          "boxShadow": "0 2px 4px rgba(0,0,0,0.1)"
        }
      },
      "children": [
        // Logo, navigation items, etc.
      ]
    },
    {
      "id": "hero-section",
      "type": "container",
      "position": {
        "base": { "x": 0, "y": 80 }
      },
      "size": {
        "base": { "width": "100%", "height": "500px" },
        "md": { "height": "600px" },
        "lg": { "height": "700px" }
      },
      "styles": {
        "base": {
          "backgroundImage": "url(/assets/images/hero-bg.jpg)",
          "backgroundSize": "cover",
          "backgroundPosition": "center"
        }
      },
      "children": [
        // Hero content, CTA buttons, etc.
      ]
    }
    // Additional sections...
  ]
}

How to Use This Example

Copy the JSON structure
Modify it to fit your needs
Import it using the API method widgetService.importPage(jsonData)
The system will automatically create all widgets and apply responsive settings

Best Practices

Organize by Sections: Group related widgets in container widgets
Use Relative Units: Prefer percentage widths for horizontal dimensions
Define Base Values: Always set values for the base breakpoint
Test All Breakpoints: Preview your page at all breakpoints to ensure proper responsiveness

Included Widgets

Widget	Description	Quantity
Container	Containers to organize the layout	6
Text	Text with different styles and sizes	9
Button	Call to action button (CTA)	1
Image	Logo image	1
Icon	Icons for features	3

Responsiveness

The example implements a responsive design using:

Adaptive positioning for different screen sizes
Relative heights and widths (%, vw, vh) and absolute (px) as needed
Breakpoints for mobile, tablet, and desktop (base, md, lg)
Grid layouts that change from 1 to 3 columns based on screen size

View the Code

You can view the complete JSON code for this example here.

Visualization

To visualize this example:

import { WidgetPageRendererComponent } from '@widgets-editor/widgets';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [WidgetPageRendererComponent],
  template: `
    <lib-widget-page-renderer [pageData]="landingPageExample"></lib-widget-page-renderer>
  `
})
export class ExampleComponent {
  landingPageExample = // Imported JSON from the example
}