blocks-dusted 0.1.0

package/templates/blocks/DD-FeatCat/manifest.json

@@ -0,0 +1,87 @@
+{
+  "type": "block",
+  "name": "DD-FeatCat",
+  "label": "Studio Feat Cat Block",
+  "sourceName": "StudioFeatCatBlock",
+  "portableName": "DD-FeatCat",
+  "slug": "DD-FeatCat",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioFeatCatBlock",
+    "originalSlug": "studioFeatCatBlock",
+    "originalConfigExport": "StudioFeatCatBlock",
+    "originalComponentExport": "StudioFeatCatBlock",
+    "originalInterfaceName": "StudioFeatCatBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-FeatCat/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-FeatCat/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "framer-motion"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Block uses the cn utility from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDFeatCat in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-FeatCat in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDFeatCat in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-FeatCat in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDFeatCat } from '@/blocks/DD-FeatCat/config' and add DDFeatCat to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-FeatCat in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioFeatCatBlock.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDFeatCat",
+  "interfaceName": "DDFeatCat"
+}

package/templates/blocks/DD-FeatStrip/Component.tsx

@@ -0,0 +1,615 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import dynamic from "next/dynamic";
+import { ArrowRight } from "lucide-react";
+
+const DotLottieReact = dynamic(
+  () => import("@lottiefiles/dotlottie-react").then((m) => m.DotLottieReact),
+  { ssr: false },
+);
+
+/* ── Label color maps ─────────────────────────────────────────── */
+
+const labelColorMap: Record<string, string> = {
+  indigo: "text-indigo-400",
+  emerald: "text-emerald-400",
+  amber: "text-amber-400",
+  rose: "text-rose-400",
+  violet: "text-violet-400",
+  sky: "text-sky-400",
+};
+
+const exploreColorMap: Record<
+  string,
+  { base: string; hover: string; glow: string }
+> = {
+  indigo: {
+    base: "text-indigo-300",
+    hover: "group-hover:text-indigo-400",
+    glow: "rgba(99,102,241,0.08)",
+  },
+  emerald: {
+    base: "text-emerald-300",
+    hover: "group-hover:text-emerald-400",
+    glow: "rgba(16,185,129,0.08)",
+  },
+  amber: {
+    base: "text-amber-300",
+    hover: "group-hover:text-amber-400",
+    glow: "rgba(245,158,11,0.08)",
+  },
+  rose: {
+    base: "text-rose-300",
+    hover: "group-hover:text-rose-400",
+    glow: "rgba(244,63,94,0.08)",
+  },
+  violet: {
+    base: "text-violet-300",
+    hover: "group-hover:text-violet-400",
+    glow: "rgba(167,139,250,0.08)",
+  },
+  sky: {
+    base: "text-sky-300",
+    hover: "group-hover:text-sky-400",
+    glow: "rgba(56,189,248,0.08)",
+  },
+};
+
+/* ── Isometric SVG Icons ─────────────────────────────────────── */
+
+function UIBlocksIcon({ hovered }: { hovered: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 120 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-full h-full"
+      style={{
+        transition: "filter 0.4s ease",
+        filter: hovered ? "drop-shadow(0 0 12px rgba(99,102,241,0.7))" : "none",
+      }}
+    >
+      <g
+        style={{
+          transform: hovered ? "translateY(-4px)" : "translateY(0)",
+          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+        }}
+      >
+        <polygon
+          points="60,4 108,28 60,52 12,28"
+          fill={hovered ? "#312e81" : "#1e1b4b"}
+          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="12,28 12,58 60,82 60,52"
+          fill={hovered ? "#1e1b4b" : "#161430"}
+          stroke={hovered ? "#6366f1" : "#3730a3"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="108,28 108,58 60,82 60,52"
+          fill={hovered ? "#2e2a6e" : "#1a1740"}
+          stroke={hovered ? "#818cf8" : "#4338ca"}
+          strokeWidth="1.2"
+        />
+        <line
+          x1="60"
+          y1="4"
+          x2="60"
+          y2="52"
+          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          strokeWidth="0.6"
+          strokeDasharray="3 3"
+        />
+        <line
+          x1="36"
+          y1="16"
+          x2="84"
+          y2="40"
+          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          strokeWidth="0.6"
+          strokeDasharray="3 3"
+        />
+        <line
+          x1="84"
+          y1="16"
+          x2="36"
+          y2="40"
+          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          strokeWidth="0.6"
+          strokeDasharray="3 3"
+        />
+        <polygon
+          points="60,14 78,23 60,32 42,23"
+          fill={hovered ? "#4f46e5" : "#312e81"}
+          stroke={hovered ? "#a5b4fc" : "#6366f1"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="42,23 42,33 60,42 60,32"
+          fill={hovered ? "#3730a3" : "#1e1b4b"}
+          stroke={hovered ? "#818cf8" : "#4338ca"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="78,23 78,33 60,42 60,32"
+          fill={hovered ? "#4338ca" : "#272466"}
+          stroke={hovered ? "#a5b4fc" : "#6366f1"}
+          strokeWidth="1"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function TemplatesIcon({ hovered }: { hovered: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 120 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-full h-full"
+      style={{
+        transition: "filter 0.4s ease",
+        filter: hovered ? "drop-shadow(0 0 12px rgba(16,185,129,0.6))" : "none",
+      }}
+    >
+      <g
+        style={{
+          transform: hovered ? "translateY(-4px)" : "translateY(0)",
+          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+        }}
+      >
+        <polygon
+          points="60,6 104,30 60,54 16,30"
+          fill={hovered ? "#064e3b" : "#022c22"}
+          stroke={hovered ? "#34d399" : "#059669"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="16,30 16,60 60,84 60,54"
+          fill={hovered ? "#022c22" : "#011a15"}
+          stroke={hovered ? "#10b981" : "#047857"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="104,30 104,60 60,84 60,54"
+          fill={hovered ? "#043927" : "#011a15"}
+          stroke={hovered ? "#34d399" : "#059669"}
+          strokeWidth="1.2"
+        />
+        <line
+          x1="30"
+          y1="30"
+          x2="60"
+          y2="16"
+          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          strokeWidth="1"
+          opacity="0.7"
+        />
+        <line
+          x1="30"
+          y1="36"
+          x2="60"
+          y2="22"
+          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          strokeWidth="0.8"
+          opacity="0.5"
+        />
+        <line
+          x1="30"
+          y1="42"
+          x2="52"
+          y2="30"
+          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          strokeWidth="0.8"
+          opacity="0.4"
+        />
+        <line
+          x1="72"
+          y1="22"
+          x2="96"
+          y2="34"
+          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          strokeWidth="1"
+          opacity="0.7"
+        />
+        <line
+          x1="72"
+          y1="28"
+          x2="90"
+          y2="37"
+          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          strokeWidth="0.8"
+          opacity="0.5"
+        />
+        <line
+          x1="72"
+          y1="34"
+          x2="84"
+          y2="40"
+          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          strokeWidth="0.8"
+          opacity="0.4"
+        />
+        <line
+          x1="66"
+          y1="12"
+          x2="66"
+          y2="50"
+          stroke={hovered ? "#34d399" : "#059669"}
+          strokeWidth="0.8"
+          strokeDasharray="2 2"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function UIKitIcon({ hovered }: { hovered: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 120 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-full h-full"
+      style={{
+        transition: "filter 0.4s ease",
+        filter: hovered ? "drop-shadow(0 0 12px rgba(245,158,11,0.6))" : "none",
+      }}
+    >
+      <g
+        style={{
+          transform: hovered ? "translateY(-4px)" : "translateY(0)",
+          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+        }}
+      >
+        <polygon
+          points="60,42 100,62 60,82 20,62"
+          fill={hovered ? "#451a03" : "#27100a"}
+          stroke={hovered ? "#f59e0b" : "#b45309"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="20,52 20,62 60,82 60,72"
+          fill={hovered ? "#27100a" : "#1a0a05"}
+          stroke={hovered ? "#d97706" : "#92400e"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="100,52 100,62 60,82 60,72"
+          fill={hovered ? "#3b1a06" : "#1a0a05"}
+          stroke={hovered ? "#f59e0b" : "#b45309"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="60,26 100,46 60,66 20,46"
+          fill={hovered ? "#78350f" : "#451a03"}
+          stroke={hovered ? "#fbbf24" : "#d97706"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="20,36 20,46 60,66 60,56"
+          fill={hovered ? "#451a03" : "#27100a"}
+          stroke={hovered ? "#f59e0b" : "#b45309"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="100,36 100,46 60,66 60,56"
+          fill={hovered ? "#5c2a07" : "#2d1108"}
+          stroke={hovered ? "#fbbf24" : "#d97706"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="60,10 100,30 60,50 20,30"
+          fill={hovered ? "#92400e" : "#78350f"}
+          stroke={hovered ? "#fcd34d" : "#fbbf24"}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="20,20 20,30 60,50 60,40"
+          fill={hovered ? "#78350f" : "#451a03"}
+          stroke={hovered ? "#fbbf24" : "#d97706"}
+          strokeWidth="1"
+        />
+        <polygon
+          points="100,20 100,30 60,50 60,40"
+          fill={hovered ? "#7c3a0e" : "#4a2008"}
+          stroke={hovered ? "#fcd34d" : "#fbbf24"}
+          strokeWidth="1"
+        />
+        <circle
+          cx="44"
+          cy="28"
+          r="2.5"
+          fill={hovered ? "#fcd34d" : "#fbbf24"}
+          opacity="0.9"
+        />
+        <circle
+          cx="60"
+          cy="20"
+          r="2.5"
+          fill={hovered ? "#fcd34d" : "#fbbf24"}
+          opacity="0.9"
+        />
+        <circle
+          cx="76"
+          cy="28"
+          r="2.5"
+          fill={hovered ? "#fcd34d" : "#fbbf24"}
+          opacity="0.9"
+        />
+      </g>
+    </svg>
+  );
+}
+
+const iconMap: Record<string, React.FC<{ hovered: boolean }>> = {
+  uiBlocks: UIBlocksIcon,
+  templates: TemplatesIcon,
+  uiKit: UIKitIcon,
+};
+
+/* ── Icon renderer ───────────────────────────────────────────── */
+
+type MediaLike = {
+  url?: string | null;
+  mimeType?: string | null;
+  filename?: string | null;
+};
+
+function isLocalMediaSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function CardIconMedia({
+  media,
+  hovered,
+}: {
+  media: MediaLike;
+  hovered: boolean;
+}) {
+  const url = media.url ?? "";
+  const safeUrl = isLocalMediaSrc(url) ? url : "";
+  const mime = media.mimeType ?? "";
+  const filename = media.filename ?? "";
+  const isLottie =
+    mime === "application/json" ||
+    filename.endsWith(".lottie") ||
+    (mime === "application/octet-stream" && filename.endsWith(".lottie"));
+  const isDotLottie = filename.endsWith(".lottie");
+  const isJson = mime === "application/json" || filename.endsWith(".json");
+
+  if (!safeUrl) return null;
+
+  if (isDotLottie || isJson) {
+    return (
+      <DotLottieReact
+        src={safeUrl}
+        loop
+        autoplay
+        style={{
+          width: "100%",
+          height: "100%",
+          transform: hovered ? "scale(1.08)" : "scale(1)",
+          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+        }}
+      />
+    );
+  }
+
+  // SVG or raster image
+  return (
+    <Image
+      src={safeUrl}
+      alt=""
+      fill
+      className="object-contain"
+      style={{
+        transform: hovered ? "scale(1.08)" : "scale(1)",
+        transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+      }}
+    />
+  );
+}
+
+/* ── Card ────────────────────────────────────────────────────── */
+
+type CardData = { [key: string]: any };
+
+function FeatureCard({
+  card,
+  index,
+  isLast,
+  totalCards,
+  isMobile,
+}: {
+  card: CardData;
+  index: number;
+  isLast: boolean;
+  totalCards: number;
+  isMobile: boolean;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const colorKey = card.labelColor || "indigo";
+  const colors = exploreColorMap[colorKey] || exploreColorMap.indigo;
+  const labelClass = labelColorMap[colorKey] || labelColorMap.indigo;
+  const FallbackIcon = iconMap[card.iconType || "uiBlocks"] || UIBlocksIcon;
+  const iconMedia =
+    card.iconMedia &&
+    typeof card.iconMedia === "object" &&
+    (card.iconMedia as MediaLike).url
+      ? (card.iconMedia as MediaLike)
+      : null;
+
+  // On mobile, last card is full-width if total is odd
+  const isFullWidthOnMobile = isMobile && totalCards % 2 !== 0 && isLast;
+
+  let borderStyle: React.CSSProperties = {};
+  if (isMobile) {
+    const isEvenPosition = index % 2 === 0;
+    const isSecondRowOrLater = index >= 2;
+    borderStyle = {
+      borderRight:
+        isEvenPosition && index + 1 < totalCards && !isFullWidthOnMobile
+          ? "1px solid rgba(255,255,255,0.07)"
+          : "none",
+      borderTop: isSecondRowOrLater
+        ? "1px solid rgba(255,255,255,0.07)"
+        : "none",
+    };
+  } else {
+    borderStyle = {
+      borderRight: !isLast ? "1px solid rgba(255,255,255,0.07)" : "none",
+    };
+  }
+
+  const cardClass = `group relative flex flex-col sm:flex-row items-start gap-4 sm:gap-6 px-5 py-7 sm:px-8 sm:py-10${card.href ? " cursor-pointer" : ""}${isFullWidthOnMobile ? "col-span-1" : ""}`;
+
+  const innerContent = (
+    <>
+      {/* Hover bg glow */}
+      <div
+        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+        style={{
+          background: `radial-gradient(ellipse at 30% 50%, ${colors.glow} 0%, transparent 70%)`,
+        }}
+      />
+
+      {/* Icon */}
+      <div
+        className="relative shrink-0 w-14 h-11 sm:w-20 sm:h-16"
+        style={
+          !iconMedia
+            ? {
+                transform: hovered ? "scale(1.08)" : "scale(1)",
+                transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+              }
+            : undefined
+        }
+      >
+        {iconMedia ? (
+          <CardIconMedia media={iconMedia} hovered={hovered} />
+        ) : (
+          <FallbackIcon hovered={hovered} />
+        )}
+      </div>
+
+      {/* Text */}
+      <div className="relative flex flex-col gap-2 pt-1">
+        <span
+          className={`text-sm font-bold tracking-[0.15em] uppercase ${labelClass} transition-all duration-300`}
+          style={{ letterSpacing: hovered ? "0.2em" : "0.15em" }}
+        >
+          {card.label}
+        </span>
+        <p className="text-sm md:text-md text-stone-700 dark:text-stone-400 leading-relaxed  transition-colors duration-300">
+          {card.description}
+        </p>
+        {card.href && (
+          <span
+            className={`inline-flex items-center gap-1 text-sm font-medium mt-4 transition-all duration-300 ${colors.base} ${colors.hover}`}
+          >
+            Explore
+            <ArrowRight
+              size={14}
+              style={{
+                transform: hovered ? "translateX(4px)" : "translateX(0)",
+                transition: "transform 0.3s ease",
+              }}
+            />
+          </span>
+        )}
+      </div>
+    </>
+  );
+
+  if (card.href) {
+    return (
+      <Link
+        href={card.href}
+        className={cardClass}
+        style={borderStyle}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        {innerContent}
+      </Link>
+    );
+  }
+
+  return (
+    <div
+      className={cardClass}
+      style={borderStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {innerContent}
+    </div>
+  );
+}
+
+/* ── Block ───────────────────────────────────────────────────── */
+
+export type DDFeatStripProps = Record<string, any>;
+
+export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
+  cards,
+  containerClass,
+  sectionId,
+  customCSS,
+}) => {
+  if (!cards || cards.length === 0) return null;
+
+  const cardItems = cards as CardData[];
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+
+  const totalCards = cardItems.length;
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? undefined} className="py-24">
+        <div
+          className={`w-full bg-stone-100 dark:bg-stone-950 border-t border-b border-white/6 ${containerClass || ""}`}
+        >
+          <div
+            className="grid grid-cols-1"
+            style={
+              !isMobile
+                ? {
+                    gridTemplateColumns: `repeat(${totalCards}, minmax(0, 1fr))`,
+                  }
+                : undefined
+            }
+          >
+            {cardItems.map((card, i) => (
+              <FeatureCard
+                key={card.id ?? i}
+                card={card}
+                index={i}
+                isLast={i === totalCards - 1}
+                totalCards={totalCards}
+                isMobile={isMobile}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};