The Performance-First Visual CMS for React

import React from "react";
import { motion } from "framer-motion";
import { IBlockswebComponent, RichText } from "@blocksweb/core";
import { PerformanceMetrics } from "@blocksweb/performance";

type FeaturesProps = {
  title: string;
  description: string;
};

export const Features: IBlockswebComponent = (props: FeaturesProps) => {
  return (
    <section>
      <div className="container mx-auto">
        {/* Performance monitoring built in */}
        <PerformanceMetrics componentName="Features" />
        
        <RichText propName="title" text={props.title} />
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          viewport={{ once: true }}
        >
          {props.description}
        </motion.p>
      </div>
    </section>
  );
};

Features.schema = {
  displayName: "Features Grid",
  options: [
    {
      name: "title",
      type: "richtext",
      label: "Title",
      default: "How does it work?",
    },
    {
      name: "description",
      type: "text",
      label: "Description",
      default:
        "You can create a React component how you always do, hook it up to the registry and specify what the content editors can edit.",
    },
  ],
};

// Use the block in your React component
import { BlocksRenderer, useBlocksContent } from 'blocksweb';

// Performance monitoring automatically enabled
function HomePage() {
  const { blocks, loading } = useBlocksContent('home-page');
  
  if (loading) return <Loading />;
  
  return (
    <BlocksRenderer 
      blocks={blocks}
      locale="en-US" 
      // Auto-optimized for Core Web Vitals
      optimizeImages={true}
      lazyLoad={true}
      prefetchBlocks={true}
    />
  );
}