blocks-dusted 0.1.11 → 0.1.12

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

@@ -94,7 +94,7 @@ export const DDTeam: React.FC<DDTeamProps> = ({
 
       <div id={sectionId ?? 'team'} className="py-24">
         <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
+          {/* Header */}#BlockName-DDTeam
           <div className="text-center max-w-2xl mx-auto mb-16">
             {eyebrow && (
               <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">

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

@@ -7,16 +7,14 @@ export type DDTechStackProps = Record<string, any>
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 type MediaObj = { url?: string | null; alt?: string | null }
-type TechStackItem = {
-  image?: string | MediaObj | null
-  icon?: string | null
-  iconName?: string | null
+type TechStackItem = {
+  image?: string | MediaObj | null
+  icon?: string | null
   label?: string | null
   showLabel?: boolean | null
 }
-type TechStackRow = {
-  duration?: number | null
-  speed?: number | null
+type TechStackRow = {
+  duration?: number | null
   direction?: 'left' | 'right' | null
   items?: TechStackItem[] | null
 }
@@ -34,7 +32,7 @@ function getMediaAlt(media: string | MediaObj | null | undefined): string | null
 
 // ─── Dynamic Lucide Icon ──────────────────────────────────────────────────────
 function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === 'string' && (src.startsWith('/api/media/file/') || src.startsWith('/assets/') || src.startsWith('/logo') || src.startsWith('data:'))
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
 }
 
 function DynamicIcon({
@@ -66,7 +64,7 @@ function TechItem({
 
   return (
     <div className="relative group/tech text-center shrink-0">
-      <div className="w-20 h-20 bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] rounded-2xl p-4 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] flex items-center justify-center border border-[#2A2A30] ">
+      <div className="w-20 h-20 bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] rounded-2xl p-4 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] flex items-center justify-center border border-[#2A2A30] invert-[1] dark:invert-[0]">
         {safeImageUrl ? (
           <Image
             src={safeImageUrl}
@@ -88,18 +86,14 @@ function TechItem({
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
-export const DDTechStack: React.FC<DDTechStackProps> = ({
-  eyebrow,
-  heading,
-  headlineMain,
-  headlineAccent,
-  techRows,
-  rows: legacyRows,
-  sectionId,
-  customCSS,
-}) => {
-  const resolvedHeading = heading ?? [headlineMain, headlineAccent].filter(Boolean).join(' ')
-  const rows = (techRows ?? legacyRows ?? []) as TechStackRow[]
+export const DDTechStack: React.FC<DDTechStackProps> = ({
+  eyebrow,
+  heading,
+  techRows,
+  sectionId,
+  customCSS,
+}) => {
+  const rows = (techRows ?? []) as TechStackRow[]
   if (!rows.length) return null
 
   const rowMaskStyle: React.CSSProperties = {
@@ -111,22 +105,22 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
   return (
     <section
       id={sectionId ?? undefined}
-      className="relative mx-auto w-full max-w-6xl bg-transparent px-4 py-10 md:px-6"
+      className="relative w-full bg-transparent py-12 px-4 md:px-6 max-w-6xl mx-auto"
     >
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
 
-      {(eyebrow || resolvedHeading) && (
+      {(eyebrow || heading) && (
         <div className="mb-12">
-          
+          #BlockName-DDTechStack
           {eyebrow && (
             <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">{eyebrow}</p>
           )}
-          {resolvedHeading && (
+          {heading && (
             <h2
               className="text-3xl font-bold tracking-tighter sm:text-4xl text-stone-900 dark:text-stone-50"
               style={{ fontFamily: "'Space Grotesk', sans-serif" }}
             >
-              {resolvedHeading}
+              {heading}
             </h2>
           )}
         </div>
@@ -134,7 +128,7 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
 
       <div className="relative">
         {rows.map((row, rowIndex) => {
-          const duration = row.duration ?? row.speed ?? 40
+          const duration = row.duration ?? 40
           const direction = row.direction ?? 'left'
           const items = row.items ?? []
 
@@ -164,7 +158,7 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
                       key={idx}
                       imageUrl={imgUrl}
                       imageAlt={imgAlt}
-                      icon={item.icon ?? item.iconName}
+                      icon={item.icon}
                       label={item.label}
                       showLabel={item.showLabel}
                     />

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

@@ -1,34 +1,34 @@
-"use client";
+'use client'
 
-import React from "react";
-import Image from "next/image";
-import { Star } from "lucide-react";
-import { motion, type Variants } from "framer-motion";
-export type DDTestimonialsProps = Record<string, any>;
-type Media = { url?: string | null };
+import React from 'react'
+import Image from 'next/image'
+import { Star } from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+export type DDTestimonialsProps = Record<string, any>
+type Media = { url?: string | null }
 type Testimonial = {
-  id?: string | null;
-  title?: string | null;
-  content?: unknown;
-  designation?: unknown;
-  companyLogo?: Media | string | null;
-  fallbackAvatarUrl?: string | null;
-  rating?: number | null;
-};
+  id?: string | null
+  title?: string | null
+  content?: unknown
+  designation?: unknown
+  companyLogo?: Media | string | null
+  fallbackAvatarUrl?: string | null
+  rating?: number | null
+}
 
 function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
 }
 
 const containerVariants: Variants = {
   hidden: {},
   show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
-};
+}
 
 const cardVariants: Variants = {
   hidden: { opacity: 0, y: 24 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
-};
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+}
 
 export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
   eyebrow,
@@ -38,16 +38,16 @@ export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
   customCSS,
 }) => {
   const populated = ((testimonials ?? []) as unknown[]).filter(
-    (t): t is Testimonial => typeof t === "object" && t !== null,
-  );
+    (t): t is Testimonial => typeof t === 'object' && t !== null,
+  )
 
   return (
     <>
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
 
-      <div id={sectionId ?? "testimonials"} className="py-24">
+      <div id={sectionId ?? 'testimonials'} className="py-24">
         <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
+          {/* Header */}#BlockName-DDTestimonials
           <div className="text-center max-w-xl mx-auto mb-14">
             {eyebrow && (
               <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
@@ -69,33 +69,26 @@ export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
             >
               {populated.map((t, i) => {
                 const avatarUrl =
-                  typeof t.companyLogo === "object" &&
+                  typeof t.companyLogo === 'object' &&
                   t.companyLogo !== null &&
-                  "url" in t.companyLogo
+                  'url' in t.companyLogo
                     ? t.companyLogo.url
-                    : (t.fallbackAvatarUrl ?? null);
-                const safeAvatarUrl = isLocalImageSrc(avatarUrl)
-                  ? avatarUrl
-                  : null;
+                    : (t.fallbackAvatarUrl ?? null)
+                const safeAvatarUrl = isLocalImageSrc(avatarUrl) ? avatarUrl : null
 
-                const stars = Math.min(5, Math.max(1, t.rating ?? 5));
+                const stars = Math.min(5, Math.max(1, t.rating ?? 5))
 
                 return (
                   <motion.div
                     key={t.id ?? i}
                     className="rounded-2xl bg-stone-100 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-8 flex flex-col"
                     variants={cardVariants}
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
                   >
                     {/* Stars */}
                     <div className="flex items-center gap-1 mb-5">
                       {Array.from({ length: stars }).map((_, si) => (
-                        <Star
-                          key={si}
-                          size={14}
-                          className="text-amber-400"
-                          fill="currentColor"
-                        />
+                        <Star key={si} size={14} className="text-amber-400" fill="currentColor" />
                       ))}
                     </div>
 
@@ -104,8 +97,7 @@ export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
                       <div className="text-sm text-stone-400 leading-relaxed flex-1 mb-6">
                         {/* TODO: Reconnect this project's RichText renderer for testimonial content. */}
                         <span>
-                          Reconnect this project's RichText renderer for
-                          testimonial content.
+                          Reconnect this project's RichText renderer for testimonial content.
                         </span>
                       </div>
                     ) : null}
@@ -116,7 +108,7 @@ export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
                         <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 relative">
                           <Image
                             src={safeAvatarUrl}
-                            alt={t.title ?? ""}
+                            alt={t.title ?? ''}
                             fill
                             sizes="40px"
                             className="object-cover object-top"
@@ -136,12 +128,12 @@ export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
                       </div>
                     </div>
                   </motion.div>
-                );
+                )
               })}
             </motion.div>
           )}
         </div>
       </div>
     </>
-  );
-};
+  )
+}

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

@@ -1,157 +1,157 @@
-'use client'
-
-import React from 'react'
-import { motion } from 'framer-motion'
-import { cn } from '@/utilities/ui'
-import { Separator } from '@/components/ui/separator'
-
-export interface TextMarqueeBlockProps {
-  blockType: 'textMarquee'
-  items?: Array<{
-    text: string
-    textClass?: string
-    textStyle?: React.CSSProperties
-    fontSize?: string
-    fontWeight?: string
-    color?: string
-  }>
-  speed?: number
-  spacing?: number
-  showTopDivider?: boolean
-  showBottomDivider?: boolean
-  containerClass?: string
-}
-
-export type TextMarqueeProps = {
-  texts: {
-    text: string
-    textClass?: string
-    textStyle?: React.CSSProperties
-    fontSize?: string
-    fontWeight?: string
-    color?: string
-  }[]
-  speed?: number
-  spacing?: number
-  showTopDivider?: boolean
-  showBottomDivider?: boolean
-  containerClass?: string
-}
-
-export const TextMarqueeComponent: React.FC<TextMarqueeProps> = ({
-  texts,
-  speed = 20,
-  spacing = 48,
-  showTopDivider = false,
-  showBottomDivider = false,
-  containerClass = 'overflow-hidden py-8 bg-transparent'
-}) => {
-  if (!texts || texts.length === 0) {
-    return null
-  }
-
-  // Calculate total width - simple calculation, no memoization needed
-  const totalWidth = texts.reduce((acc, text) => {
-    const textWidth = text.text.length * 12 // ~12px per character
-    return acc + textWidth + spacing
-  }, 0)
-
-  return (
-    <>
-      {showTopDivider && <Separator gradient={true} className="border-t" />}
-      <div className={containerClass}>
-        <motion.div
-          className="flex items-center whitespace-nowrap"
-          animate={{ x: [0, -totalWidth] }}
-          transition={{
-            repeat: Infinity,
-            duration: speed,
-            ease: 'linear',
-            repeatType: 'loop'
-          }}
-          style={{ width: `${totalWidth * 2}px` }}
-        >
-          {/* First set of texts */}
-          {texts.map((item, index) => (
-            <div
-              key={`text-${index}`}
-              className="flex-shrink-0 flex items-center justify-center"
-              style={{ marginRight: `${spacing}px` }}
-            >
-              <span
-                className={cn('text-base text-center whitespace-nowrap', item.textClass)}
-                style={{
-                  fontSize: item.fontSize || '1rem',
-                  fontWeight: item.fontWeight || 'normal',
-                  color: item.color || 'currentColor',
-                  ...item.textStyle
-                }}
-              >
-                {item.text}
-              </span>
-            </div>
-          ))}
-
-          {/* Duplicate set for seamless loop */}
-          {texts.map((item, index) => (
-            <div
-              key={`text-${index}-duplicate`}
-              className="flex-shrink-0 flex items-center justify-center"
-              style={{ marginRight: `${spacing}px` }}
-            >
-              <span
-                className={cn('text-base text-center whitespace-nowrap', item.textClass)}
-                style={{
-                  fontSize: item.fontSize || '1rem',
-                  fontWeight: item.fontWeight || 'normal',
-                  color: item.color || 'currentColor',
-                  ...item.textStyle
-                }}
-              >
-                {item.text}
-              </span>
-            </div>
-          ))}
-        </motion.div>
-      </div>
-      {showBottomDivider && <Separator gradient={true} className="border-b" />}
-    </>
-  )
-}
-
-// Block component that transforms props and renders the TextMarquee
-export const DDTextMarq: React.FC<TextMarqueeBlockProps> = (props) => {
-  const {
-    items = [],
-    speed = 20,
-    spacing = 48,
-    showTopDivider = false,
-    showBottomDivider = false,
-    containerClass = 'overflow-hidden py-8 bg-transparent'
-  } = props
-
-  // Transform items to match component expectations, using array index instead of id
-  const texts = items.map((item, index) => ({
-    text: item.text,
-    textClass: item.textClass,
-    textStyle: item.textStyle,
-    fontSize: item.fontSize,
-    fontWeight: item.fontWeight,
-    color: item.color
-  }))
-
-  if (texts.length === 0) {
-    return null
-  }
-
-  return (
-    <TextMarqueeComponent
-      texts={texts}
-      speed={speed}
-      spacing={spacing}
-      showTopDivider={showTopDivider}
-      showBottomDivider={showBottomDivider}
-      containerClass={containerClass}
-    />
-  )
-}
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+import { Separator } from '@/components/ui/separator'
+
+export interface TextMarqueeBlockProps {
+  blockType: 'textMarquee'
+  items?: Array<{
+    text: string
+    textClass?: string
+    textStyle?: React.CSSProperties
+    fontSize?: string
+    fontWeight?: string
+    color?: string
+  }>
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+}
+
+export type TextMarqueeProps = {
+  texts: {
+    text: string
+    textClass?: string
+    textStyle?: React.CSSProperties
+    fontSize?: string
+    fontWeight?: string
+    color?: string
+  }[]
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+}
+
+export const TextMarqueeComponent: React.FC<TextMarqueeProps> = ({
+  texts,
+  speed = 20,
+  spacing = 48,
+  showTopDivider = false,
+  showBottomDivider = false,
+  containerClass = 'overflow-hidden py-8 bg-transparent',
+}) => {
+  if (!texts || texts.length === 0) {
+    return null
+  }
+
+  // Calculate total width - simple calculation, no memoization needed
+  const totalWidth = texts.reduce((acc, text) => {
+    const textWidth = text.text.length * 12 // ~12px per character
+    return acc + textWidth + spacing
+  }, 0)
+
+  return (
+    <>
+      {showTopDivider && <Separator gradient={true} className="border-t" />}
+      <div className={cn('overflow-clip relative top-24', containerClass)}>
+        <motion.div
+          className="flex items-center whitespace-nowrap"
+          animate={{ x: [0, -totalWidth] }}
+          transition={{
+            repeat: Infinity,
+            duration: speed,
+            ease: 'linear',
+            repeatType: 'loop',
+          }}
+          style={{ width: `${totalWidth * 2}px` }}
+        >
+          {/* First set of texts */}
+          {texts.map((item, index) => (
+            <div
+              key={`text-${index}`}
+              className="shrink-0 flex items-center justify-center"
+              style={{ marginRight: `${spacing}px` }}
+            >
+              <span
+                className={cn('text-center whitespace-nowrap uppercase', item.textClass)}
+                style={{
+                  fontSize: item.fontSize || '4rem',
+                  fontWeight: item.fontWeight || 'bold',
+                  color: item.color || 'currentColor',
+                  ...item.textStyle,
+                }}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+
+          {/* Duplicate set for seamless loop */}
+          {texts.map((item, index) => (
+            <div
+              key={`text-${index}-duplicate`}
+              className="shrink-0 flex items-center justify-center"
+              style={{ marginRight: `${spacing}px` }}
+            >
+              <span
+                className={cn('text-center whitespace-nowrap uppercase', item.textClass)}
+                style={{
+                  fontSize: item.fontSize || '4rem',
+                  fontWeight: item.fontWeight || 'bold',
+                  color: item.color || 'currentColor',
+                  ...item.textStyle,
+                }}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+      {showBottomDivider && <Separator gradient={true} className="border-b" />}
+    </>
+  )
+}
+
+// Block component that transforms props and renders the TextMarquee
+export const DDTextMarq: React.FC<TextMarqueeBlockProps> = (props) => {
+  const {
+    items = [],
+    speed = 20,
+    spacing = 48,
+    showTopDivider = false,
+    showBottomDivider = false,
+    containerClass = 'overflow-hidden py-8 bg-transparent',
+  } = props
+
+  // Transform items to match component expectations, using array index instead of id
+  const texts = items.map((item, index) => ({
+    text: item.text,
+    textClass: item.textClass,
+    textStyle: item.textStyle,
+    fontSize: item.fontSize,
+    fontWeight: item.fontWeight,
+    color: item.color,
+  }))
+
+  if (texts.length === 0) {
+    return null
+  }
+
+  return (
+    <TextMarqueeComponent
+      texts={texts}
+      speed={speed}
+      spacing={spacing}
+      showTopDivider={showTopDivider}
+      showBottomDivider={showBottomDivider}
+      containerClass={containerClass}
+    />
+  )
+}