dune-react 0.0.23 → 0.0.24

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -12,7 +12,11 @@ const ScrollParallax = (props) => {
     ...ScrollParallaxDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
@@ -22,42 +26,60 @@ const ScrollParallax = (props) => {
   });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
   if (isEditor) {
-    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
-      /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
-        /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          className: "aspect-video w-full object-cover",
-          src: image.src,
-          alt: image.alt
-        }
-      ) }, index)) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
-    /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
-      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
-      motion.div,
+    return /* @__PURE__ */ jsxs(
+      SectionWrapper,
       {
-        style: { x },
-        className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
-        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+        ref: transformRef,
+        className: cn(sectionClassName),
+        style: sectionStyle,
+        css,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+            /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+            /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+            CompoundImage,
+            {
+              className: "aspect-video w-full object-cover",
+              src: image.src,
+              alt: image.alt
+            }
+          ) }, index)) }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      ref: transformRef,
+      className: cn(sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
+          motion.div,
           {
-            className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
-            src: image.src,
-            alt: image.alt
+            style: { x },
+            className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
+            children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
+                src: image.src,
+                alt: image.alt
+              }
+            ) }) }, index))
           }
-        ) }) }, index))
-      }
-    ) }) })
-  ] });
+        ) }) })
+      ]
+    }
+  );
 };
 const ScrollParallaxDefaults = {
   tagline: "",
@@ -66,9 +88,18 @@ const ScrollParallaxDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [
-    { src: "https://picsum.photos/seed/scroll-1/1200/800", alt: "Gallery image 1" },
-    { src: "https://picsum.photos/seed/scroll-2/1200/800", alt: "Gallery image 2" },
-    { src: "https://picsum.photos/seed/scroll-3/1200/800", alt: "Gallery image 3" }
+    {
+      src: "https://picsum.photos/seed/scroll-1/1200/800",
+      alt: "Gallery image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/scroll-2/1200/800",
+      alt: "Gallery image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/scroll-3/1200/800",
+      alt: "Gallery image 3"
+    }
   ],
   projects: [],
   hoverLinks: [],

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js

@@ -8,18 +8,39 @@ import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallaxPortfolio = (props) => {
-  const { projects, styles } = {
+  const { projects: projects2, styles } = {
     ...ScrollParallaxPortfolioDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, animation = "threeImageParallax" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    animation = "threeImageParallax"
+  } = styles ?? {};
   if (animation === "scaleOpacity") {
-    return /* @__PURE__ */ jsx(ScaleOpacityVariant, { projects, sectionClassName, sectionStyle, css });
+    return /* @__PURE__ */ jsx(
+      ScaleOpacityVariant,
+      {
+        projects: projects2,
+        sectionClassName,
+        sectionStyle,
+        css
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(ThreeImageParallaxVariant, { projects, sectionClassName, sectionStyle, css });
+  return /* @__PURE__ */ jsx(
+    ThreeImageParallaxVariant,
+    {
+      projects: projects2,
+      sectionClassName,
+      sectionStyle,
+      css
+    }
+  );
 };
 const ThreeImageParallaxVariant = ({
-  projects,
+  projects: projects2,
   sectionClassName,
   sectionStyle,
   css
@@ -37,19 +58,29 @@ const ThreeImageParallaxVariant = ({
     restDelta: 1e-3,
     mass: 0.5
   });
-  const computedStyles = projects.map((_, index) => {
-    const blockOffset = projects.length ? index / projects.length : 0;
+  const computedStyles = projects2.map((_, index) => {
+    const blockOffset = projects2.length ? index / projects2.length : 0;
     return {
       headerStyles: {
         opacity: useTransform(
           smoothProgress,
-          [45e-4 + blockOffset, 0.022 + blockOffset, 0.06 + blockOffset, 0.082 + blockOffset],
+          [
+            45e-4 + blockOffset,
+            0.022 + blockOffset,
+            0.06 + blockOffset,
+            0.082 + blockOffset
+          ],
           [0, 1, 1, 0],
           { ease: easeInOut }
         ),
         scale: useTransform(
           smoothProgress,
-          [0 + blockOffset, 0.022 + blockOffset, 0.06 + blockOffset, 0.082 + blockOffset],
+          [
+            0 + blockOffset,
+            0.022 + blockOffset,
+            0.06 + blockOffset,
+            0.082 + blockOffset
+          ],
           [0.9, 1, 1, 0.9],
           { ease: easeInOut }
         )
@@ -72,78 +103,144 @@ const ThreeImageParallaxVariant = ({
       }
     };
   });
-  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: [
-    /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects.map((project, index) => {
-      var _a, _b, _c, _d, _e, _f;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn("relative flex flex-col", isEditor ? "h-auto mb-12" : "h-[500vh]", {
-            "mt-[-40vh]": !isEditor && index > 0
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                className: cn("flex justify-center", isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"),
-                style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
-                children: /* @__PURE__ */ jsxs("div", { className: cn("-z-10 flex w-full max-w-lg flex-col items-center text-center", isEditor ? "relative" : "absolute top-[50vh]"), children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
-                  project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex items-center justify-center overflow-hidden", isEditor ? "relative h-auto" : "sticky top-0 h-screen"), children: [
-              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: cn("flex w-full max-w-lg items-center justify-center overflow-hidden", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
-                CompoundImage,
-                {
-                  src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
-                  alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
-                  className: "size-full object-contain"
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
-                motion.div,
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      className: cn("relative px-[5%]", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects2.map((project, index) => {
+          var _a, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative flex flex-col",
+                isEditor ? "h-auto mb-12" : "h-[500vh]",
                 {
-                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
-                  style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
-                  children: /* @__PURE__ */ jsx(
-                    CompoundImage,
-                    {
-                      src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
-                      alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
-                      className: "w-full object-contain"
-                    }
-                  )
+                  "mt-[-40vh]": !isEditor && index > 0
                 }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
-                  style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
-                  children: /* @__PURE__ */ jsx(
-                    CompoundImage,
-                    {
-                      src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
-                      alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
-                      className: "w-full object-contain"
-                    }
-                  )
-                }
-              ) })
-            ] }),
-            !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
-          ]
-        },
-        index
-      );
-    }) }) }),
-    !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
-  ] });
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: cn(
+                      "flex justify-center",
+                      isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"
+                    ),
+                    style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
+                    children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "-z-10 flex w-full max-w-lg flex-col items-center text-center",
+                          isEditor ? "relative" : "absolute top-[50vh]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
+                          project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "z-10 flex items-center justify-center overflow-hidden",
+                      isEditor ? "relative h-auto" : "sticky top-0 h-screen"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex w-full max-w-5xl items-center justify-center overflow-hidden",
+                            isEditor ? "h-auto" : "h-screen"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            CompoundImage,
+                            {
+                              src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
+                              alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
+                              className: "size-full object-contain"
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xs lg:flex",
+                            isEditor ? "h-auto" : "h-screen"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              className: cn(
+                                "relative w-full",
+                                isEditor ? "pt-0" : "pt-[100vh]"
+                              ),
+                              style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
+                              children: /* @__PURE__ */ jsx(
+                                CompoundImage,
+                                {
+                                  src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
+                                  alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
+                                  className: "w-full object-contain"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xs lg:flex",
+                            isEditor ? "h-auto" : "h-screen"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              className: cn(
+                                "relative w-full",
+                                isEditor ? "pt-0" : "pt-[100vh]"
+                              ),
+                              style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
+                              children: /* @__PURE__ */ jsx(
+                                CompoundImage,
+                                {
+                                  src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
+                                  alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
+                                  className: "w-full object-contain"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+              ]
+            },
+            index
+          );
+        }) }) }),
+        !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
+      ]
+    }
+  );
 };
 const ScaleOpacityVariant = ({
-  projects,
+  projects: projects2,
   sectionClassName,
   sectionStyle,
   css
@@ -155,77 +252,116 @@ const ScaleOpacityVariant = ({
     target: containerRef,
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
-  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"), children: projects.map((project, index) => {
-    const segmentSize = 1 / projects.length;
-    const start = index * segmentSize;
-    const end = start + segmentSize;
-    const opacity = useTransform(
-      scrollYProgress,
-      [start, start + segmentSize * 0.15, end - segmentSize * 0.15, end],
-      [0, 1, 1, 0]
-    );
-    const scale = useTransform(
-      scrollYProgress,
-      [start, start + segmentSize * 0.15, end - segmentSize * 0.15, end],
-      [0.8, 1, 1, 0.8]
-    );
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
-        className: cn("flex items-center justify-center", isEditor ? "relative w-full" : "absolute inset-0"),
-        children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              alt: project.image.alt,
-              className: "aspect-video w-full object-cover"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl", children: project.title }),
-          /* @__PURE__ */ jsx("p", { children: project.description }),
-          project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-              children: tag.label
-            },
-            tagIndex
-          )) })
-        ] })
-      },
-      index
-    );
-  }) }) }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      ref: containerRef,
+      className: cn("relative px-[5%]", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center",
+            isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"
+          ),
+          children: projects2.map((project, index) => {
+            const segmentSize = 1 / projects2.length;
+            const start = index * segmentSize;
+            const end = start + segmentSize;
+            const opacity = useTransform(
+              scrollYProgress,
+              [
+                start,
+                start + segmentSize * 0.15,
+                end - segmentSize * 0.15,
+                end
+              ],
+              [0, 1, 1, 0]
+            );
+            const scale = useTransform(
+              scrollYProgress,
+              [
+                start,
+                start + segmentSize * 0.15,
+                end - segmentSize * 0.15,
+                end
+              ],
+              [0.8, 1, 1, 0.8]
+            );
+            return /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
+                className: cn(
+                  "flex items-center justify-center",
+                  isEditor ? "relative w-full" : "absolute inset-0"
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
+                  /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+                    CompoundImage,
+                    {
+                      src: project.image.src,
+                      alt: project.image.alt,
+                      className: "aspect-video w-full object-cover"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl", children: project.title }),
+                  /* @__PURE__ */ jsx("p", { children: project.description }),
+                  project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                      children: tag.label
+                    },
+                    tagIndex
+                  )) })
+                ] })
+              },
+              index
+            );
+          })
+        }
+      ) })
+    }
+  );
 };
-const defaultProject = {
-  title: "Project name",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  image: {
-    src: "https://picsum.photos/seed/scroll-port/1200/800",
-    alt: "Placeholder image"
+const projects = [
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: { src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=1200&h=800&fit=crop", alt: "Web design workspace" },
+    url: "#",
+    button: { label: "View project" },
+    tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
+    imageCenter: { src: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=1000&h=660&fit=crop", alt: "Web design process" },
+    imageLeft: { src: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=600&h=400&fit=crop", alt: "Wireframe sketches" },
+    imageRight: { src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop", alt: "Analytics dashboard" }
   },
-  url: "#",
-  button: { label: "View project" },
-  tags: [
-    { label: "Tag one", url: "#" },
-    { label: "Tag two", url: "#" },
-    { label: "Tag three", url: "#" }
-  ],
-  imageCenter: {
-    src: "https://picsum.photos/seed/scroll-port-center/800/1000",
-    alt: "Placeholder center"
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: { src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=1200&h=800&fit=crop", alt: "Design studio" },
+    url: "#",
+    button: { label: "View project" },
+    tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
+    imageCenter: { src: "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?w=1000&h=660&fit=crop", alt: "Colorful abstract shapes" },
+    imageLeft: { src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop", alt: "Brand color palette" },
+    imageRight: { src: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=600&h=400&fit=crop", alt: "Typography design" }
   },
-  imageLeft: {
-    src: "https://picsum.photos/seed/scroll-port-left/400/600",
-    alt: "Placeholder left"
-  },
-  imageRight: {
-    src: "https://picsum.photos/seed/scroll-port-right/400/600",
-    alt: "Placeholder right"
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: { src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200&h=800&fit=crop", alt: "Mobile device" },
+    url: "#",
+    button: { label: "View project" },
+    tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
+    imageCenter: { src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=1000&h=660&fit=crop", alt: "App mockup" },
+    imageLeft: { src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&h=400&fit=crop", alt: "Wireframe sketches" },
+    imageRight: { src: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=600&h=400&fit=crop", alt: "Mobile app in use" }
   }
-};
+];
 const ScrollParallaxPortfolioDefaults = {
   tagline: "",
   heading: "",
@@ -233,21 +369,7 @@ const ScrollParallaxPortfolioDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [],
-  projects: [
-    { ...defaultProject },
-    {
-      ...defaultProject,
-      imageCenter: { src: "https://picsum.photos/seed/spp-c2/800/1000", alt: "Center 2" },
-      imageLeft: { src: "https://picsum.photos/seed/spp-l2/400/600", alt: "Left 2" },
-      imageRight: { src: "https://picsum.photos/seed/spp-r2/400/600", alt: "Right 2" }
-    },
-    {
-      ...defaultProject,
-      imageCenter: { src: "https://picsum.photos/seed/spp-c3/800/1000", alt: "Center 3" },
-      imageLeft: { src: "https://picsum.photos/seed/spp-l3/400/600", alt: "Left 3" },
-      imageRight: { src: "https://picsum.photos/seed/spp-r3/400/600", alt: "Right 3" }
-    }
-  ],
+  projects,
   hoverLinks: [],
   styles: {
     animation: "threeImageParallax"