create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/components/blocks/renderers/SectionBlockRenderer.tsx

@@ -1,16 +1,60 @@
 // components/blocks/renderers/SectionBlockRenderer.tsx
 import React from "react";
+import Image from "next/image";
 import type { SectionBlockContent } from "../../../lib/blocks/blockRegistry";
-import { getBlockDefinition } from "../../../lib/blocks/blockRegistry";
-import dynamic from "next/dynamic";
+import { buildVisualEditAttributes } from "../../../lib/visual-editing/edit-info";
+import type {
+  VisualEditAttributes,
+  VisualEditingDocumentContext,
+} from "../../../lib/visual-editing/types";
+import { getPublicBlockRendererLoader } from "../publicRendererLoaders";
+import SectionSlider from "./SectionSlider";
+import { getCachedCustomBlockDefinitionBySlug } from "../../../lib/custom-block-definitions";
+import { CachedDynamicLayoutEngine } from "../../renderers/CachedDynamicLayoutEngine";
+import { resolveBlockRelations } from "../../../lib/resolve-block-relations";
+
+// Static imports for core block renderers for LCP/performance optimization
+import TextBlockRenderer from "./TextBlockRenderer";
+import HeadingBlockRenderer from "./HeadingBlockRenderer";
+import ImageBlockRenderer from "./ImageBlockRenderer";
+import ButtonBlockRenderer from "./ButtonBlockRenderer";
 
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+const BACKGROUND_COMPOSITING_CLASSES =
+  "isolate transform-gpu [backface-visibility:hidden] [transform-style:preserve-3d]";
+const ABSOLUTE_BACKGROUND_CLASSES =
+  "pointer-events-none absolute inset-[-1px] -z-10 transform-gpu [backface-visibility:hidden] [transform-style:preserve-3d]";
+const ECOMMERCE_BLOCK_TYPES = new Set([
+  "product_grid",
+  "featured_product",
+  "cart",
+  "checkout",
+  "product_details",
+]);
+
+function loadEcommerceBlockRenderer(blockType: string) {
+  return import("../ecommerceRendererLoaders").then((module) =>
+    module.loadEcommerceBlockRenderer(blockType)
+  );
+}
 
 interface SectionBlockRendererProps {
   content: SectionBlockContent;
   languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
+  visualEditing?: VisualEditingDocumentContext;
+  parentBlockId?: number;
+  parentBlockIndex?: number;
+  blockType?: "section";
+  botProtectionPublic?: BotProtectionPublicSettings;
+  scriptNonce?: string;
 }
 
+type BotProtectionPublicSettings = {
+  provider: 'none' | 'turnstile' | 'recaptcha';
+  siteKey: string;
+};
+
 // Container class mapping
 const containerClasses = {
   'full-width': 'w-full',
@@ -54,7 +98,38 @@ const verticalAlignmentClasses = {
   stretch: 'items-stretch'
 };
 
-// Background style generator
+function formatMinHeight(value?: string) {
+  if (!value) return undefined;
+  const trimmed = value.trim();
+  if (/^\d+$/.test(trimmed)) {
+    return `${trimmed}px`;
+  }
+  return trimmed;
+}
+
+function formatStopPosition(position: number) {
+  return Number.isInteger(position) ? String(position) : position.toFixed(1);
+}
+
+function formatGradientStops(stops: Array<{ color: string; position: number }>) {
+  return stops
+    .map((stop, index) => {
+      const previous = stops[index - 1];
+      const next = stops[index + 1];
+      let position = stop.position;
+
+      if (next && next.position === stop.position && stop.position > 0) {
+        position = stop.position - 0.1;
+      } else if (previous && previous.position === stop.position && stop.position < 100) {
+        position = stop.position + 0.1;
+      }
+
+      return `${stop.color} ${formatStopPosition(position)}%`;
+    })
+    .join(', ');
+}
+
+// Background style generator (handles solid, theme and gradients; image handled in JSX)
 function generateBackgroundStyles(background: SectionBlockContent['background']) {
   const styles: React.CSSProperties = {};
   let className = '';
@@ -80,63 +155,155 @@ function generateBackgroundStyles(background: SectionBlockContent['background'])
     case 'gradient':
       if (background.gradient) {
         const { type, direction, stops } = background.gradient;
-        const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+        const gradientStops = formatGradientStops(stops);
         styles.background = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
       }
       break;
     
     case 'image':
-      if (background.image) {
-        const imageUrl = `${R2_BASE_URL}/${background.image.object_key}`;
-        styles.backgroundSize = background.image.size || 'cover';
-        styles.backgroundPosition = background.image.position || 'center';
-
-        let finalBackgroundImage = `url(${imageUrl})`;
-
-        if (background.image.overlay && background.image.overlay.gradient) {
-          const { type, direction, stops } = background.image.overlay.gradient;
-          const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
-          const gradient = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
-          finalBackgroundImage = `${gradient}, ${finalBackgroundImage}`;
-        }
-        
-        styles.backgroundImage = finalBackgroundImage;
-      }
+      // Handled via absolute next/image in the render tree for LCP & sizing optimization
       break;
     
     default:
-      // No background
       break;
   }
 
   return { styles, className };
 }
 
-// Dynamic block renderer component
-const DynamicNestedBlockRenderer: React.FC<{
+function generateGradientOverlayStyle(gradient: any): React.CSSProperties {
+  const { type, direction, stops } = gradient;
+  const gradientStops = formatGradientStops(stops);
+  return {
+    background: `${type}-gradient(${direction || 'to right'}, ${gradientStops})`,
+  };
+}
+
+interface NestedBlockRendererProps {
   block: SectionBlockContent['column_blocks'][0][0];
   languageId: number;
-}> = ({ block, languageId }) => {
-  const blockDefinition = getBlockDefinition(block.block_type);
-  
-  if (!blockDefinition) {
+  parentBlockId?: number;
+  parentBlockIndex?: number;
+  visualEditing?: VisualEditingDocumentContext;
+  visualEditAttributes?: VisualEditAttributes;
+  botProtectionPublic?: BotProtectionPublicSettings;
+  scriptNonce?: string;
+  priority?: boolean;
+}
+
+async function renderNestedBlock({
+  block,
+  languageId,
+  parentBlockId,
+  parentBlockIndex,
+  visualEditing,
+  visualEditAttributes,
+  botProtectionPublic,
+  scriptNonce,
+  priority = false,
+}: NestedBlockRendererProps) {
+  // Statically resolve core block types first to avoid dynamic imports overhead
+  if (block.block_type === 'text') {
+    return (
+      <TextBlockRenderer
+        content={block.content as any}
+        languageId={languageId}
+        visualEditAttributes={visualEditAttributes}
+        renderContext="section"
+      />
+    );
+  }
+
+  if (block.block_type === 'heading') {
+    return (
+      <HeadingBlockRenderer
+        content={block.content as any}
+        languageId={languageId}
+        visualEditAttributes={visualEditAttributes}
+      />
+    );
+  }
+
+  if (block.block_type === 'button') {
+    return (
+      <ButtonBlockRenderer
+        content={block.content as any}
+        languageId={languageId}
+        visualEditAttributes={visualEditAttributes}
+      />
+    );
+  }
+
+  if (block.block_type === 'image') {
+    return (
+      <ImageBlockRenderer
+        content={block.content as any}
+        languageId={languageId}
+        priority={priority}
+        visualEditAttributes={visualEditAttributes}
+      />
+    );
+  }
+
+  // Fallback to dynamic loader for custom/other block types
+  const rendererLoader = getPublicBlockRendererLoader(block.block_type);
+
+  if (!rendererLoader) {
+    if (ECOMMERCE_BLOCK_TYPES.has(block.block_type)) {
+      const { default: EcommerceRendererComponent } = await loadEcommerceBlockRenderer(
+        block.block_type
+      );
+
+      return (
+        <EcommerceRendererComponent
+          content={block.content}
+          languageId={languageId}
+          visualEditAttributes={visualEditAttributes}
+        />
+      );
+    }
+
+    // Custom block definitions are data-rendered the same way as at the top
+    // level. A custom block's block_type is the definition slug.
+    const definition = await getCachedCustomBlockDefinitionBySlug(block.block_type);
+    if (definition) {
+      const resolvedBlock = (await resolveBlockRelations({
+        data: block.content as Record<string, any>,
+        fields: definition.fields,
+      })) as any;
+
+      return (
+        <div {...visualEditAttributes}>
+          <CachedDynamicLayoutEngine
+            definition={definition}
+            layoutSchema={definition.layout_schema}
+            fields={definition.fields}
+            data={{
+              ...(resolvedBlock.data || {}),
+              resolved_relations: resolvedBlock.resolved_relations || {},
+            }}
+          />
+        </div>
+      );
+    }
+
+    // Unknown type with no matching definition: keep the diagnostic out of the
+    // public-facing page (only show it inside the live editor).
+    if (!visualEditing?.enabled) {
+      return null;
+    }
+
     return (
-      <div className="p-2 border rounded bg-destructive/10 text-destructive text-sm">
+      <div
+        className="p-2 border rounded bg-destructive/10 text-destructive text-sm"
+        {...visualEditAttributes}
+      >
         <strong>Unsupported block type:</strong> {block.block_type}
       </div>
     );
   }
 
-  // Create dynamic component with proper SSR handling
-  const RendererComponent = dynamic(
-    () => import(`./${blockDefinition.rendererComponentFilename}`),
-    {
-      loading: () => (
-        <div className="animate-pulse bg-muted rounded h-8"></div>
-      ),
-      ssr: true,
-    }
-  ) as React.ComponentType<any>;
+  const { default: RendererComponent } = await rendererLoader();
 
   // Handle different prop requirements for different renderers
   if (block.block_type === 'posts_grid') {
@@ -145,6 +312,7 @@ const DynamicNestedBlockRenderer: React.FC<{
         content={block.content}
         languageId={languageId}
         block={{ ...block, id: 0, language_id: languageId, order: 0, created_at: '', updated_at: '' }}
+        visualEditAttributes={visualEditAttributes}
       />
     );
   }
@@ -153,16 +321,29 @@ const DynamicNestedBlockRenderer: React.FC<{
     <RendererComponent
       content={block.content}
       languageId={languageId}
+      visualEditAttributes={visualEditAttributes}
+      visualEditing={visualEditing}
+      parentBlockId={parentBlockId}
+      parentBlockIndex={parentBlockIndex}
+      botProtectionPublic={botProtectionPublic}
+      scriptNonce={scriptNonce}
     />
   );
-};
+}
 
-const SectionBlockRenderer: React.FC<SectionBlockRendererProps> = ({
+export default async function SectionBlockRenderer({
   content,
   languageId,
-}) => {
-  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
-  
+  visualEditAttributes,
+  visualEditing,
+  parentBlockId,
+  parentBlockIndex,
+  blockType,
+  botProtectionPublic,
+  scriptNonce,
+}: SectionBlockRendererProps) {
+  const isHero = content.is_hero === true;
+
   // Build CSS classes
   const containerClass = containerClasses[content.container_type] || containerClasses.container;
   const gridClass = columnClasses[content.responsive_columns.desktop] || columnClasses[3];
@@ -171,21 +352,211 @@ const SectionBlockRenderer: React.FC<SectionBlockRendererProps> = ({
   const paddingBottomClass = paddingClasses[content.padding.bottom] || paddingClasses.md;
   const alignmentClass = content.vertical_alignment ? verticalAlignmentClasses[content.vertical_alignment] : 'items-start';
 
+  // --- Render Slide-based Carousel Section ---
+  if (content.slider && content.slides && content.slides.length > 0) {
+    const renderedSlides = await Promise.all(
+      content.slides.map(async (slide, slideIndex) => {
+        const isFirstSlide = slideIndex === 0;
+        // Priority loading for the first slide of a hero carousel
+        const slidePriority = isHero && isFirstSlide;
+
+        const slideBackground = slide.background || { type: "none" };
+        const { styles: slideBgStyles, className: slideBgClassName } = generateBackgroundStyles(slideBackground);
+
+        const renderedColumns = await Promise.all(
+          slide.column_blocks.map(async (columnBlocks, columnIndex) => {
+            const blocks = Array.isArray(columnBlocks) ? columnBlocks : [];
+            const renderedBlocks = await Promise.all(
+              blocks.map(async (block, blockIndex) => ({
+                key: `${block.block_type}-${columnIndex}-${blockIndex}`,
+                node: await renderNestedBlock({
+                  block,
+                  languageId,
+                  parentBlockId,
+                  parentBlockIndex,
+                  visualEditing,
+                  botProtectionPublic,
+                  scriptNonce,
+                  priority: slidePriority, // Pass down priority
+                  visualEditAttributes:
+                    typeof parentBlockId === "number" && typeof parentBlockIndex === "number"
+                      ? buildVisualEditAttributes(visualEditing, {
+                          kind: "nested",
+                          parentBlockId,
+                          parentBlockIndex,
+                          parentBlockType: "section",
+                          columnIndex,
+                          blockIndex,
+                          blockType: block.block_type,
+                        })
+                      : undefined,
+                }),
+              }))
+            );
+
+            return { columnIndex, renderedBlocks };
+          })
+        );
+
+        return (
+          <div
+            key={`slide-${slideIndex}`}
+            className={`relative w-full flex items-center ${BACKGROUND_COMPOSITING_CLASSES} ${paddingTopClass} ${paddingBottomClass} ${slideBgClassName}`}
+            style={{
+              ...slideBgStyles,
+              minHeight: formatMinHeight(slideBackground.min_height) || '400px'
+            }}
+          >
+            {/* Background image Layer for slide */}
+            {slideBackground.type === 'image' && slideBackground.image && (
+              <div className={ABSOLUTE_BACKGROUND_CLASSES}>
+                <Image
+                  src={`${R2_BASE_URL}/${slideBackground.image.object_key}`}
+                  alt={slideBackground.image.alt_text || ""}
+                  fill
+                  priority={slidePriority}
+                  fetchPriority={slidePriority ? "high" : "auto"}
+                  placeholder={slideBackground.image.blur_data_url ? "blur" : "empty"}
+                  blurDataURL={slideBackground.image.blur_data_url || undefined}
+                  quality={slideBackground.image.quality || 80}
+                  sizes="100vw"
+                  style={{
+                    objectFit: slideBackground.image.size === 'contain' ? 'contain' : 'cover',
+                    objectPosition: slideBackground.image.position || 'center',
+                  }}
+                />
+                {slideBackground.image.overlay && slideBackground.image.overlay.gradient && (
+                  <div 
+                    className="absolute inset-0 transform-gpu [backface-visibility:hidden]"
+                    style={generateGradientOverlayStyle(slideBackground.image.overlay.gradient)}
+                  />
+                )}
+              </div>
+            )}
+
+            <div className={`${containerClass} w-full`}>
+              <div className={`grid ${gridClass} ${gapClass} ${alignmentClass}`}>
+                {renderedColumns.map(({ columnIndex, renderedBlocks }) => (
+                  <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
+                    {renderedBlocks.map(({ key, node }) => (
+                      <React.Fragment key={key}>{node}</React.Fragment>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        );
+      })
+    );
+
+    // Determine the slider's container min-height from configured slides
+    let sliderMinHeight = '400px';
+    if (content.slides && content.slides.length > 0) {
+      const configuredHeight = content.slides
+        .map(s => s.background?.min_height)
+        .find(Boolean);
+      if (configuredHeight) {
+        sliderMinHeight = formatMinHeight(configuredHeight) || '400px';
+      }
+    }
+
+    return (
+      <section
+        className={`relative w-full overflow-hidden ${BACKGROUND_COMPOSITING_CLASSES}`}
+        {...visualEditAttributes}
+      >
+        <SectionSlider
+          autoplay={content.autoplay}
+          timeframe={content.timeframe}
+          minHeight={sliderMinHeight}
+        >
+          {renderedSlides}
+        </SectionSlider>
+      </section>
+    );
+  }
+
+  // --- Render Standard Single Layout Section ---
+  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
+
+  const renderedColumns = await Promise.all(
+    content.column_blocks.map(async (columnBlocks, columnIndex) => {
+      const blocks = Array.isArray(columnBlocks) ? columnBlocks : [];
+      const renderedBlocks = await Promise.all(
+        blocks.map(async (block, blockIndex) => ({
+          key: `${block.block_type}-${columnIndex}-${blockIndex}`,
+          node: await renderNestedBlock({
+            block,
+            languageId,
+            parentBlockId,
+            parentBlockIndex,
+            visualEditing,
+            botProtectionPublic,
+            scriptNonce,
+            priority: isHero, // Pass priority down to nested image blocks
+            visualEditAttributes:
+              typeof parentBlockId === "number" && typeof parentBlockIndex === "number"
+                ? buildVisualEditAttributes(visualEditing, {
+                    kind: "nested",
+                    parentBlockId,
+                    parentBlockIndex,
+                    parentBlockType: "section",
+                    columnIndex,
+                    blockIndex,
+                    blockType: block.block_type,
+                  })
+                : undefined,
+          }),
+        }))
+      );
+
+      return { columnIndex, renderedBlocks };
+    })
+  );
+
   return (
     <section
-      className={`w-full ${paddingTopClass} ${paddingBottomClass} ${backgroundClassName}`.trim()}
-      style={styles}
+      className={`relative w-full ${BACKGROUND_COMPOSITING_CLASSES} ${paddingTopClass} ${paddingBottomClass} ${backgroundClassName}`.trim()}
+      style={{
+        ...styles,
+        minHeight: formatMinHeight(content.background?.min_height)
+      }}
+      {...visualEditAttributes}
     >
+      {/* Background image Layer */}
+      {content.background?.type === 'image' && content.background.image && (
+        <div className={ABSOLUTE_BACKGROUND_CLASSES}>
+          <Image
+            src={`${R2_BASE_URL}/${content.background.image.object_key}`}
+            alt={content.background.image.alt_text || ""}
+            fill
+            priority={isHero}
+            fetchPriority={isHero ? "high" : "auto"}
+            placeholder={content.background.image.blur_data_url ? "blur" : "empty"}
+            blurDataURL={content.background.image.blur_data_url || undefined}
+            quality={content.background.image.quality || 80}
+            sizes="100vw"
+            style={{
+              objectFit: content.background.image.size === 'contain' ? 'contain' : 'cover',
+              objectPosition: content.background.image.position || 'center',
+            }}
+          />
+          {content.background.image.overlay && content.background.image.overlay.gradient && (
+            <div 
+              className="absolute inset-0 transform-gpu [backface-visibility:hidden]"
+              style={generateGradientOverlayStyle(content.background.image.overlay.gradient)}
+            />
+          )}
+        </div>
+      )}
+
       <div className={containerClass}>
         <div className={`grid ${gridClass} ${gapClass} ${alignmentClass}`}>
-          {content.column_blocks.map((columnBlocks, columnIndex) => (
+          {renderedColumns.map(({ columnIndex, renderedBlocks }) => (
             <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
-              {(Array.isArray(columnBlocks) ? columnBlocks : []).map((block, blockIndex) => (
-                <DynamicNestedBlockRenderer
-                  key={`${block.block_type}-${columnIndex}-${blockIndex}`}
-                  block={block}
-                  languageId={languageId}
-                />
+              {renderedBlocks.map(({ key, node }) => (
+                <React.Fragment key={key}>{node}</React.Fragment>
               ))}
             </div>
           ))}
@@ -193,6 +564,4 @@ const SectionBlockRenderer: React.FC<SectionBlockRendererProps> = ({
       </div>
     </section>
   );
-};
-
-export default SectionBlockRenderer;
+}

package/templates/nextblock-template/components/blocks/renderers/SectionSlider.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface SectionSliderProps {
+  autoplay?: boolean;
+  timeframe?: number; // In seconds
+  children: React.ReactNode[];
+  minHeight?: string;
+}
+
+export default function SectionSlider({
+  autoplay = false,
+  timeframe = 5,
+  children,
+  minHeight = '400px',
+}: SectionSliderProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const totalSlides = children.length;
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Reset to first slide if children count changes
+  useEffect(() => {
+    setCurrentIndex(0);
+  }, [totalSlides]);
+
+  useEffect(() => {
+    if (!autoplay || totalSlides <= 1 || isPaused) {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+      return;
+    }
+
+    const intervalMs = timeframe * 1000;
+
+    timerRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % totalSlides);
+    }, intervalMs);
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [autoplay, timeframe, totalSlides, isPaused]);
+
+  const handlePrev = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCurrentIndex((prev) => (prev - 1 + totalSlides) % totalSlides);
+  };
+
+  const handleNext = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCurrentIndex((prev) => (prev + 1) % totalSlides);
+  };
+
+  const handleDotClick = (index: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCurrentIndex(index);
+  };
+
+  if (totalSlides === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="relative w-full overflow-hidden group"
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+      style={{ minHeight }}
+    >
+      {/* Slides Container */}
+      <div className="relative w-full" style={{ minHeight }}>
+        {children.map((child, index) => {
+          const isActive = index === currentIndex;
+          return (
+            <div
+              key={index}
+              className={`w-full transition-opacity duration-700 ease-in-out ${
+                isActive
+                  ? "relative opacity-100 z-10 pointer-events-auto"
+                  : "absolute inset-x-0 top-0 opacity-0 z-0 pointer-events-none"
+              }`}
+            >
+              {child}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Navigation Chevrons */}
+      {totalSlides > 1 && (
+        <>
+          <button
+            onClick={handlePrev}
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-20 flex items-center justify-center w-12 h-12 rounded-full border border-white/20 bg-white/10 dark:bg-black/20 hover:bg-white/25 dark:hover:bg-black/45 backdrop-blur-md text-white shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-105 active:scale-95"
+            aria-label="Previous slide"
+          >
+            <ChevronLeft className="w-6 h-6 text-current" />
+          </button>
+          <button
+            onClick={handleNext}
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-20 flex items-center justify-center w-12 h-12 rounded-full border border-white/20 bg-white/10 dark:bg-black/20 hover:bg-white/25 dark:hover:bg-black/45 backdrop-blur-md text-white shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-105 active:scale-95"
+            aria-label="Next slide"
+          >
+            <ChevronRight className="w-6 h-6 text-current" />
+          </button>
+        </>
+      )}
+
+      {/* Navigation Dots */}
+      {totalSlides > 1 && (
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex items-center justify-center space-x-2">
+          {children.map((_, index) => {
+            const isActive = index === currentIndex;
+            return (
+              <button
+                key={index}
+                onClick={(e) => handleDotClick(index, e)}
+                className={`h-2.5 rounded-full transition-all duration-300 border border-white/10 ${
+                  isActive
+                    ? "w-7 bg-white shadow-md"
+                    : "w-2.5 bg-white/40 hover:bg-white/70"
+                }`}
+                aria-label={`Go to slide ${index + 1}`}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}