Initial commit

editor/components/features/features.editor.tsx

@@ -0,0 +1,54 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Sparkles } from "lucide-react";
+import { Features, type FeaturesProps } from "@/editor/components/features/features";
+
+export const featuresEditor: ComponentConfig<FeaturesProps> = {
+  label: "Features",
+  icon: <Sparkles size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Why us",
+    heading: "Built with intention",
+    subheading: "A small set of values that shape every piece we make.",
+    columns: "3",
+    items: [
+      {
+        title: "Natural fibers",
+        body: "Linen, organic cotton, and merino — sourced from mills with traceable supply chains.",
+      },
+      {
+        title: "Small batches",
+        body: "Made in considered quantities so nothing goes to waste — and nothing gets discounted into the bin.",
+      },
+      {
+        title: "Built to last",
+        body: "Reinforced seams, double-stitched edges, and finishes that age into something better.",
+      },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    columns: {
+      label: "Columns",
+      type: "select",
+      options: [
+        { label: "2 columns", value: "2" },
+        { label: "3 columns", value: "3" },
+        { label: "4 columns", value: "4" },
+      ],
+    },
+    items: {
+      label: "Items",
+      type: "array",
+      defaultItemProps: { title: "Feature", body: "Description." },
+      getItemSummary: (it) => it?.title || "Feature",
+      arrayFields: {
+        title: { label: "Title", type: "text", contentEditable: true },
+        body: { label: "Body", type: "textarea", contentEditable: true },
+      },
+    },
+  },
+  render: (props) => <Features {...props} />,
+};

editor/components/features/features.tsx

@@ -0,0 +1,51 @@
+import { Typography } from "@/editor/theme/Typography";
+
+export type FeaturesProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  columns: "2" | "3" | "4";
+  items: Array<{ title: string; body: string }>;
+};
+
+const colClass: Record<FeaturesProps["columns"], string> = {
+  "2": "md:grid-cols-2",
+  "3": "md:grid-cols-3",
+  "4": "md:grid-cols-2 lg:grid-cols-4",
+};
+
+export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <div className="container mx-auto max-w-7xl px-6">
+        <div className="mx-auto mb-16 max-w-2xl text-center">
+          {tagline ? (
+            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+              {tagline}
+            </p>
+          ) : null}
+          <Typography variant="h2">{heading}</Typography>
+          {subheading ? (
+            <Typography variant="subtitle1" className="mt-3">
+              {subheading}
+            </Typography>
+          ) : null}
+        </div>
+
+        <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
+          {items.map((item, i) => (
+            <div key={i} className="border-t border-border pt-6">
+              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
+                {String(i + 1).padStart(2, "0")}
+              </p>
+              <Typography variant="h5">{item.title}</Typography>
+              <Typography variant="body2" className="mt-3 text-muted-foreground">
+                {item.body}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}