The only TypeScript-first visual CMS built for React developers

import {
  IBlockswebComponent,
  ComponentData,
  RichText,
} from "@blocksweb/core-local";

interface SimpleHeroProps {
  title?: string;
  subtitle?: string;
  primaryButtonText?: string;
  primaryButtonColor?: string;
}

const SimpleHero: IBlockswebComponent = (props: SimpleHeroProps) => {
  const {
    title = "Welcome to Our Website",
    subtitle = "Transform your experience",
    primaryButtonText = "Get Started",
    primaryButtonColor = "#3b82f6",
  } = props;

  return (
    <section className="relative min-h-screen flex items-center">
      <div className="max-w-7xl mx-auto px-4">
        <h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
          <RichText
            propName="title"
            text={title}
            defaultText="Welcome to Our Website"
          />
        </h1>
        <p className="text-xl text-gray-100 mb-8">
          <RichText propName="subtitle" text={subtitle} />
        </p>
        <button
          className="px-8 py-4 rounded-lg font-semibold text-white"
          style={{ backgroundColor: primaryButtonColor }}
        >
          {primaryButtonText}
        </button>
      </div>
    </section>
  );
};

SimpleHero.schema = {
  displayName: "Simple Hero Section",
  category: "Layout",
  options: [
    {
      name: "title",
      label: "Hero Title",
      type: "richtext",
      default: "Welcome to Our Website",
    },
    {
      name: "subtitle", 
      label: "Hero Subtitle",
      type: "richtext",
      default: "Transform your experience",
    },
    {
      name: "primaryButtonText",
      label: "Button Text",
      type: "text",
      default: "Get Started",
    },
    {
      name: "primaryButtonColor",
      label: "Button Color",
      type: "color",
      default: "#3b82f6",
    },
  ],
} as ComponentData;