dune-react 0.0.11 → 0.0.12

package/dist/components/puck-base/icon-picker-field.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { cn } from "../../utils/css-utils.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../shadcn/popover.js";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "../shadcn/command.js";
+import { ScrollArea } from "../shadcn/scroll-area.js";
+import { Input } from "../shadcn/input.js";
+import { Label } from "../shadcn/label.js";
+import { ICON_MAP, ICON_CATALOG } from "./core/icon-catalog.js";
+import { ChevronDown } from "lucide-react";
+function IconPickerField({
+  value,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const current = value ?? "none";
+  const [search, setSearch] = useState("");
+  const [manualInput, setManualInput] = useState("");
+  const CurrentIcon = ICON_MAP.get(current);
+  const filteredCatalog = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return ICON_CATALOG;
+    return ICON_CATALOG.map((cat) => ({
+      ...cat,
+      icons: cat.icons.filter((e) => e.name.toLowerCase().includes(q))
+    })).filter((cat) => cat.icons.length > 0);
+  }, [search]);
+  const handleSelect = (name) => {
+    onChange(name);
+    setSearch("");
+    setOpen(false);
+  };
+  const handleManualSubmit = () => {
+    const v = manualInput.trim();
+    if (v) {
+      onChange(v);
+      setManualInput("");
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex h-8 w-full items-center gap-2 rounded-md border bg-background px-2.5 text-sm",
+          "text-foreground transition-colors hover:bg-accent/50",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+        ),
+        children: [
+          CurrentIcon ? /* @__PURE__ */ jsx(CurrentIcon, { className: "size-4 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0 rounded-sm border border-dashed" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: current === "none" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "None" }) : current }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-72 p-0",
+        align: "start",
+        side: "bottom",
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsxs(Command, { shouldFilter: false, children: [
+          /* @__PURE__ */ jsx(
+            CommandInput,
+            {
+              placeholder: "Search icons...",
+              value: search,
+              onValueChange: setSearch
+            }
+          ),
+          /* @__PURE__ */ jsxs(CommandList, { className: "max-h-none overflow-visible", children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: "No icons found." }),
+            /* @__PURE__ */ jsxs(ScrollArea, { className: "h-72", children: [
+              /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: "none",
+                  onSelect: () => handleSelect("none"),
+                  "data-checked": current === "none" ? "true" : void 0,
+                  className: "gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0 rounded-sm border border-dashed" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "None" })
+                  ]
+                }
+              ) }),
+              filteredCatalog.map((cat) => /* @__PURE__ */ jsx(CommandGroup, { heading: cat.label, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-0.5 px-1 py-0.5", children: cat.icons.map((entry) => {
+                const IconComp = entry.component;
+                const isSelected = current === entry.name;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: entry.name,
+                    onClick: () => handleSelect(entry.name),
+                    className: cn(
+                      "flex size-8 items-center justify-center rounded-md transition-colors",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"
+                    ),
+                    "aria-label": entry.name,
+                    "aria-pressed": isSelected,
+                    children: /* @__PURE__ */ jsx(IconComp, { className: "size-4" })
+                  },
+                  entry.name
+                );
+              }) }) }, cat.label))
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t p-2", children: [
+              /* @__PURE__ */ jsx(Label, { className: "mb-1 block text-xs text-muted-foreground", children: "Or type any Lucide icon name" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: "h-7 flex-1 text-xs",
+                    placeholder: "e.g. arrow-right",
+                    value: manualInput,
+                    onChange: (e) => setManualInput(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleManualSubmit();
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleManualSubmit,
+                    className: cn(
+                      "inline-flex h-7 items-center rounded-md border bg-secondary px-2.5 text-xs font-medium",
+                      "text-secondary-foreground transition-colors hover:bg-secondary/80"
+                    ),
+                    children: "Set"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  IconPickerField
+};

package/dist/components/puck-base/index.d.ts

@@ -8,7 +8,7 @@ export { CompoundForm, type CompoundFormProps, formMethods, type FormMethods } f
 export { CompoundImage, type CompoundImageProps } from "./image";
 export { CompoundArticleCard, type CompoundArticleCardProps } from "./article-card";
 export { ImageUploadField } from "./image-upload-field";
-export { ActionField } from "./fields/action-field";
+export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./fields/action-field";
 export { ErrorBoundary } from "./error-boundary";
 export { GradientText, type GradientTextProps } from "./gradient-text";
 export { InlineEditable } from "./inline-editable";

package/dist/components/puck-block/banner-sections/announcement-banner-1/index.js

@@ -14,7 +14,7 @@ const conf = {
     styles: bannerStylesField
   },
   defaultProps: {
-    items: [{ text: "New: Check out our latest update" }],
+    items: [{ text: "Introducing v2.0 — Faster builds, smarter deploys, and a brand new editor." }],
     linkLabel: "Learn more",
     linkUrl: "#",
     styles: {

package/dist/components/puck-block/banner-sections/marquee-1/index.js

@@ -31,10 +31,12 @@ const conf = {
   },
   defaultProps: {
     items: [
-      { text: "Innovation" },
-      { text: "Design" },
-      { text: "Performance" },
-      { text: "Quality" }
+      { text: "10,000+ Teams" },
+      { text: "99.99% Uptime" },
+      { text: "50M+ Deploys" },
+      { text: "4.9★ Rating" },
+      { text: "SOC 2 Certified" },
+      { text: "24/7 Support" }
     ],
     styles: {
       ...createStylesDefaults(),

package/dist/components/puck-block/contact-sections/contact-us-1/index.js

@@ -84,16 +84,26 @@ const conf = {
       url: "",
       variant: "default"
     },
-    heading: "Something new",
-    description: "Managing a small business today is already tough. Avoid further complications by ditching outdated, tedious trade methods.",
+    heading: "Get in Touch",
+    description: "Have a question or need a demo? We'd love to hear from you.",
     buttons: [],
-    features: ["Easy to use", "Fast and reliable", "Beautiful and modern"].map(
-      (feature) => ({
+    features: [
+      {
         icon: "check",
-        name: feature,
-        description: "We've made it easy to use and understand."
-      })
-    ),
+        name: "Easy to use",
+        description: "Intuitive interface that requires no training."
+      },
+      {
+        icon: "check",
+        name: "Fast and reliable",
+        description: "99.9% uptime with sub-second response times."
+      },
+      {
+        icon: "check",
+        name: "Beautiful and modern",
+        description: "Clean, developer-friendly design built with modern standards."
+      }
+    ],
     fields: [
       { label: "Name", name: "name", type: "text", required: true },
       { label: "Email", name: "email", type: "email", required: true },

package/dist/components/puck-block/contact-sections/contact-us-2/contact-us-2.js

@@ -28,7 +28,7 @@ const ContactUs2 = ({
     email: ((_b = fields.find((field) => field.name === "email")) == null ? void 0 : _b.label) ?? "Email Address",
     phone: ((_c = fields.find((field) => field.name === "phone")) == null ? void 0 : _c.label) ?? "Phone",
     company: ((_d = fields.find((field) => field.name === "company")) == null ? void 0 : _d.label) ?? "Company",
-    message: ((_e = fields.find((field) => field.name === "message")) == null ? void 0 : _e.label) ?? "Tell us about your fitness goals"
+    message: ((_e = fields.find((field) => field.name === "message")) == null ? void 0 : _e.label) ?? "Tell us about your project"
   };
   const imagePosition = (styles == null ? void 0 : styles.imagePosition) ?? "end";
   const { isEditor: isEditorMode, siteId, domain } = useEditorContext();

package/dist/components/puck-block/contact-sections/contact-us-2/index.js

@@ -1,4 +1,4 @@
-import { image1x1Placeholder, image, icon } from "../../../puck-base/core/fields.js";
+import { image, icon } from "../../../puck-base/core/fields.js";
 import { ContactUs2 } from "./contact-us-2.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const contactUs2StylesField = createStylesField({
@@ -48,20 +48,20 @@ const conf = {
     styles: contactUs2StylesField
   },
   defaultProps: {
-    heading: "Ready to transform your fitness?",
-    description: "Tell us about your goals and we'll reach out within 24 hours to schedule your first session.",
+    heading: "Let's talk about your project",
+    description: "Tell us about your needs and our team will get back to you within 24 hours.",
     fields: [
-      { label: "Your Name", name: "name" },
-      { label: "Email Address", name: "email" },
+      { label: "Name", name: "name" },
+      { label: "Email", name: "email" },
       { label: "Phone", name: "phone" },
       { label: "Company", name: "company" },
-      { label: "Tell us about your fitness goals", name: "message" }
+      { label: "Tell us about your project", name: "message" }
     ],
     submitLabel: "Send Message",
     submitVariant: "default",
     submitSize: "default",
     submitIcon: "none",
-    image: image1x1Placeholder,
+    image: { src: "https://images.pexels.com/photos/3888151/pexels-photo-3888151.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Modern developer workspace with laptop displaying code" },
     styles: {
       ...createStylesDefaults(),
       imagePosition: "end"

package/dist/components/puck-block/contact-sections/contact-us-3/index.js

@@ -87,8 +87,8 @@ const conf = {
     styles: contactUs3StylesField
   },
   defaultProps: {
-    heading: "Let's start a\nconversation",
-    description: "Have a question or ready to get started? Fill out the form and we'll get back to you within 24 hours.",
+    heading: "Contact our team",
+    description: "We're here to help. Reach out and we'll respond as soon as we can.",
     infoItems: defaultInfoItems,
     fields: [
       { label: "Full Name", name: "name" },

package/dist/components/puck-block/cta-sections/banner-cta-1/index.js

@@ -18,11 +18,11 @@ const conf = {
     styles: bannerCtaStylesField
   },
   defaultProps: {
-    heading: "Ready to transform your workflow?",
-    description: "Join thousands of teams already using our platform to ship faster and smarter.",
+    heading: "Start building for free today",
+    description: "No credit card required. Free plan includes unlimited projects.",
     buttons: [
-      { label: "Get started free", variant: "secondary" },
-      { label: "Talk to sales", variant: "outline" }
+      { label: "Sign Up Free", variant: "secondary" },
+      { label: "Contact Sales", variant: "outline" }
     ],
     styles: {
       ...createStylesDefaults(),

package/dist/components/puck-block/cta-sections/cta-1/index.js

@@ -15,23 +15,23 @@ const conf = {
     styles: createStylesField()
   },
   defaultProps: {
-    heading: "Try our platform today!",
-    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    heading: "Ready to build something great?",
+    description: "Join thousands of teams already shipping faster. Start free — no credit card required.",
     badge: {
-      label: "FAQ",
-      url: "/faq",
+      label: "Get Started",
+      url: "",
       variant: "default"
     },
     buttons: [
       {
-        label: "Jump on a call",
-        icon: "phone-call",
-        variant: "outline"
+        label: "Start Free Trial",
+        icon: "move-right",
+        variant: "default"
       },
       {
-        label: "Sign up here",
+        label: "Talk to Sales",
         icon: "move-right",
-        variant: "default"
+        variant: "outline"
       }
     ],
     layout: "contained",

package/dist/components/puck-block/cta-sections/gradient-cta-1/index.js

@@ -35,10 +35,10 @@ const conf = {
     styles: gradientCtaStylesField
   },
   defaultProps: {
-    heading: "Ready to get started?",
-    description: "Join thousands of teams already using our platform.",
+    heading: "Ship your next project faster",
+    description: "Everything you need to go from idea to production.",
     buttons: [
-      { label: "Start Free Trial", icon: "move-right", variant: "default" }
+      { label: "Get Started Free", icon: "move-right", variant: "default" }
     ],
     styles: {
       ...createStylesDefaults(),

package/dist/components/puck-block/cta-sections/newsletter-signup-1/index.js

@@ -18,7 +18,7 @@ const conf = {
   },
   defaultProps: {
     heading: "Stay in the loop",
-    description: "Get the latest updates delivered to your inbox.",
+    description: "Get product updates, engineering insights, and tips delivered to your inbox.",
     buttons: [{ label: "Subscribe" }],
     placeholder: "Enter your email",
     styles: createStylesDefaults()

package/dist/components/puck-block/cta-sections/promo-section-1/index.js

@@ -20,16 +20,16 @@ const conf = {
     styles: createStylesField()
   },
   defaultProps: {
-    heading: "Summer Sale — Up to 50% Off",
-    description: "Don't miss our biggest sale of the year. Shop now and save on your favorite items.",
+    heading: "Limited Time — 3 Months Free on Pro",
+    description: "Upgrade to Pro and unlock advanced features, priority support, and unlimited collaborators.",
     image: {
-      src: "https://picsum.photos/seed/Promo%20Image/800/600",
-      alt: "Promotional image"
+      src: "https://images.pexels.com/photos/4218883/pexels-photo-4218883.jpeg?auto=compress&cs=tinysrgb&w=1200",
+      alt: "Developer workspace with computer displaying code interface"
     },
     imagePosition: "right",
     buttons: [
       {
-        label: "Shop Now",
+        label: "Claim Offer",
         variant: "default",
         size: "lg",
         icon: "none"

package/dist/components/puck-block/faq-sections/accordion-1/index.js

@@ -19,15 +19,19 @@ const conf = {
     items: [
       {
         title: "How do I get started?",
-        content: "Sign up for a free account and follow the onboarding guide."
+        content: "Sign up for a free account, connect your repository, and follow the onboarding guide. Most teams are up and running in under 5 minutes."
       },
       {
         title: "What pricing plans are available?",
-        content: "We offer Free, Pro, and Enterprise plans."
+        content: "We offer Free, Pro, and Enterprise plans. The free plan includes unlimited projects with basic features. Pro adds team collaboration, and Enterprise includes custom integrations and dedicated support."
       },
       {
         title: "Can I cancel anytime?",
-        content: "Yes, you can cancel your subscription at any time."
+        content: "Absolutely. No contracts, no cancellation fees. You can downgrade or cancel your subscription at any time from your account settings."
+      },
+      {
+        title: "Do you offer integrations?",
+        content: "Yes — we integrate with GitHub, GitLab, Slack, Jira, Linear, and 50+ other tools out of the box. Enterprise plans also support custom integrations."
       }
     ],
     styles: createStylesDefaults()

package/dist/components/puck-block/faq-sections/faq-1/index.js

@@ -53,8 +53,8 @@ const conf = {
       url: "",
       variant: "secondary"
     },
-    heading: "Heading",
-    description: "Description",
+    heading: "Frequently asked questions",
+    description: "Everything you need to know about getting started.",
     buttons: [
       {
         label: "Find out more",
@@ -66,8 +66,20 @@ const conf = {
     collapsible: true,
     items: [
       {
-        question: "Question",
-        answer: "Answer"
+        question: "Is there a free plan?",
+        answer: "Yes! Our free plan includes unlimited projects and basic features. No credit card required."
+      },
+      {
+        question: "Can I cancel anytime?",
+        answer: "Absolutely. No contracts, no cancellation fees. You can downgrade or cancel at any time."
+      },
+      {
+        question: "Do you offer team plans?",
+        answer: "Yes, our Pro plan supports unlimited team members with role-based permissions and collaboration features."
+      },
+      {
+        question: "Is my data secure?",
+        answer: "We use enterprise-grade encryption, SOC 2 compliance, and regular security audits to keep your data safe."
       }
     ],
     layout: "two-col",

package/dist/components/puck-block/faq-sections/faq-2/index.js

@@ -1,22 +1,22 @@
-import { image1x1Placeholder, image } from "../../../puck-base/core/fields.js";
+import { image } from "../../../puck-base/core/fields.js";
 import { Faq2 } from "./faq-2.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultItems = [
   {
-    question: "What's included in a session?",
-    answer: "Each session includes a personalized warm-up, structured training tailored to your goals, form coaching, and a cool-down. You'll also receive guidance on next steps to keep progressing."
+    question: "How long does setup take?",
+    answer: "Most teams are up and running in under 5 minutes. Just connect your repo and you're good to go."
   },
   {
-    question: "How do I know if this is right for me?",
-    answer: "If you have a goal — whether it's losing weight, building strength, improving mobility, or just feeling better — we can help. We offer a free consultation to assess your needs and build a plan."
+    question: "Do you integrate with my existing tools?",
+    answer: "Yes — we integrate with GitHub, GitLab, Slack, Jira, Linear, and 50+ other tools out of the box."
   },
   {
-    question: "How often should I train to see results?",
-    answer: "Most clients see meaningful results training 2–3 times per week. We'll work with your schedule and lifestyle to find the right frequency for your goals."
+    question: "What kind of support do you offer?",
+    answer: "Free plans get community support. Pro and Enterprise plans include priority email and live chat support."
   },
   {
-    question: "Do you offer programs for specific goals?",
-    answer: "Yes — we tailor every program to your specific objectives, whether that's weight loss, muscle gain, athletic performance, or general wellness."
+    question: "Can I migrate from another platform?",
+    answer: "We offer free migration assistance for teams on Pro and Enterprise plans. Most migrations take less than a day."
   }
 ];
 const conf = {
@@ -48,9 +48,9 @@ const conf = {
     styles: createStylesField()
   },
   defaultProps: {
-    heading: "Questions about getting started",
+    heading: "Common questions about getting started",
     items: defaultItems,
-    image: image1x1Placeholder,
+    image: { src: "https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Tech team collaborating at a modern office workspace" },
     imagePosition: "right",
     styles: createStylesDefaults()
   },

package/dist/components/puck-block/feature-sections/bento-1/bento.js

@@ -23,7 +23,13 @@ const Bento = ({
         spacing: "tight"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 grid-rows-2 gap-8 sm:grid-cols-2 lg:grid-cols-3", children: cards == null ? void 0 : cards.map((card, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "grid gap-8",
+      cards.length === 1 && "grid-cols-1",
+      cards.length === 2 && "grid-cols-1 sm:grid-cols-2",
+      cards.length === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      cards.length >= 4 && "grid-cols-1 grid-rows-2 sm:grid-cols-2 lg:grid-cols-3"
+    ), children: cards == null ? void 0 : cards.map((card, index) => /* @__PURE__ */ jsx(
       CompoundCard,
       {
         image: card.image,
@@ -31,12 +37,15 @@ const Bento = ({
         heading: card.heading,
         description: card.description,
         button: card.button,
-        className: cn({
-          "[grid-area:1/1/2/3]": index === 0,
-          "aspect-square [grid-area:1/3/2/4]": index === 1,
-          "aspect-square [grid-area:2/1/3/2]": index === 2,
-          "[grid-area:2/2/3/4]": index === 3
-        })
+        className: cn(
+          cards.length >= 4 && {
+            "[grid-area:1/1/2/3]": index === 0,
+            "aspect-square [grid-area:1/3/2/4]": index === 1,
+            "aspect-square [grid-area:2/1/3/2]": index === 2,
+            "[grid-area:2/2/3/4]": index === 3
+          },
+          cards.length === 3 && index === 0 && "sm:col-span-2 lg:col-span-1"
+        )
       },
       index
     )) })

package/dist/components/puck-block/feature-sections/bento-1/index.js

@@ -17,13 +17,26 @@ const conf = {
       url: "",
       variant: "default"
     },
-    heading: "Something new!",
-    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+    heading: "Everything you need to ship faster",
+    description: "Powerful features designed for modern teams.",
     buttons: [],
-    cards: Array.from({ length: 1 }).map((_, index) => ({
-      ...cards.defaultItemProps,
-      heading: `Card ${index + 1}`
-    })),
+    cards: [
+      {
+        ...cards.defaultItemProps,
+        heading: "Real-time Collaboration",
+        description: "Edit together with your team — no conflicts, no waiting."
+      },
+      {
+        ...cards.defaultItemProps,
+        heading: "Smart Automation",
+        description: "Automate repetitive tasks and focus on what matters."
+      },
+      {
+        ...cards.defaultItemProps,
+        heading: "Built-in Analytics",
+        description: "Track performance with dashboards that update in real time."
+      }
+    ],
     styles: createStylesDefaults()
   },
   render: Bento

package/dist/components/puck-block/feature-sections/feature-cards-1/index.js

@@ -1,4 +1,4 @@
-import { image16x9Placeholder, button, image, contentFields } from "../../../puck-base/core/fields.js";
+import { button, image, contentFields } from "../../../puck-base/core/fields.js";
 import { FeatureCards } from "./feature-cards.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
@@ -23,6 +23,7 @@ const conf = {
     },
     cards: {
       type: "array",
+      max: 9,
       getItemSummary: (item, index = 0) => item.heading || `Card ${index + 1}`,
       arrayFields: {
         image,
@@ -31,9 +32,9 @@ const conf = {
         button
       },
       defaultItemProps: {
-        image: image16x9Placeholder,
-        heading: "Card heading",
-        description: "Card description goes here.",
+        image: { src: "https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Developer screen showing lines of code with syntax highlighting" },
+        heading: "Feature highlight",
+        description: "A brief explanation of this feature and why it matters.",
         button: {
           label: "",
           variant: "link",
@@ -45,10 +46,10 @@ const conf = {
     styles: createStylesField()
   },
   defaultProps: {
-    heading: "Something new!",
-    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+    heading: "Why teams choose us",
+    description: "Simple tools that solve complex problems — so you can focus on building great products.",
     badge: {
-      label: "Platform",
+      label: "Features",
       url: "",
       variant: "default"
     },
@@ -57,9 +58,9 @@ const conf = {
     columns: 3,
     cards: [
       {
-        image: image16x9Placeholder,
-        heading: "Card 1",
-        description: "Card description goes here.",
+        image: { src: "https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Developer screen showing lines of code with syntax highlighting" },
+        heading: "Lightning-fast deploys",
+        description: "Push to production in seconds with zero-downtime deployments.",
         button: {
           label: "",
           variant: "link",