Integration 6 - Dark card with auto-scrolling logo carousel

Pro

A dark-themed rounded card with headline, description, a button containing a rotating logo, and an auto-scrolling logo strip below separators.

Vue
Shadcn Integration 6 block

Component Data

  • ID:integration6
  • Access:pro
  • Created:Apr 30, 2025
  • Type:block

Integration 6 block design & features

Integration6 is a dark-themed rounded card containing a heading and description at the top, a pill-shaped shadcn/ui Button with an embedded logo Carousel on the right, and a full-width auto-scrolling logo strip at the bottom. Separator components divide the header area from the scrolling logo region.

The card forces dark mode with bold white typography on a dark background. The button uses a secondary variant with a custom ring shadow that changes on hover. Inside the button, a small circular Carousel cycles through logos on autoplay. The bottom Carousel auto-scrolls continuously at low speed with drag disabled. Separators provide clean horizontal breaks between sections.

The forced dark container against the page background creates strong contrast and visual weight. The dual-carousel approach and ring-shadow button give the block a premium, product-showcase quality. Higher complexity due to the nested carousel inside the button and the auto-scroll plugin configuration.

On mobile, the heading and button stack vertically with the button taking full width. The bottom logo strip continues to scroll at the same speed.