[
  {
    "id": "hero-section",
    "name": "Hero Section",
    "icon": "🎯",
    "html": "<div class=\"hero-custom\"><h1>Welcome to Our Site</h1><p>This is a custom hero component</p><button class=\"btn btn-primary\">Get Started</button></div>",
    "styles": {
      "paddingTop": "60px",
      "paddingBottom": "60px",
      "backgroundColor": "#007bff",
      "color": "#ffffff",
      "textAlign": "center"
    },
    "cssClasses": "my-hero",
    "customCSS": ".hero-custom h1 { font-size: 48px; margin-bottom: 20px; } .hero-custom p { font-size: 20px; margin-bottom: 30px; }"
  },
  {
    "id": "feature-box",
    "name": "Feature Box",
    "icon": "⭐",
    "html": "<div class=\"feature-box\"><div class=\"feature-icon\">✨</div><h3>Feature Title</h3><p>Feature description goes here</p></div>",
    "styles": {
      "paddingTop": "30px",
      "paddingBottom": "30px",
      "paddingLeft": "30px",
      "paddingRight": "30px",
      "backgroundColor": "#f8f9fa",
      "borderRadius": "10px",
      "textAlign": "center"
    },
    "cssClasses": "shadow-sm",
    "customCSS": ".feature-icon { font-size: 48px; margin-bottom: 15px; } .feature-box h3 { color: #333; margin-bottom: 10px; }"
  }
]