Hero with logos + carousel
I built a simple hero section combining a logo marquee with a carousel. It’s a common pattern in modern product pages. Logos for trust, carousel for showcasing visuals, but I wanted something easy ...

Source: DEV Community
I built a simple hero section combining a logo marquee with a carousel. It’s a common pattern in modern product pages. Logos for trust, carousel for showcasing visuals, but I wanted something easy to reuse and compose. This was the result: Here’s the component code: 'use client' import Image from 'next/image' import Balancer from 'react-wrap-balancer' import type { LogoMarqueeItem } from '@/components/flx/blocks/logos/logo-marquee/logo-marquee' import { LogoMarquee } from '@/components/flx/blocks/logos/logo-marquee/logo-marquee' import type { CtaProps } from '@/components/flx/blocks/shared/cta/cta' import { Cta } from '@/components/flx/blocks/shared/cta/cta' import { Carousel, CarouselContent, CarouselItem, } from '@/components/ui/carousel' import { cn } from '@/lib/utils' export interface HeroLogosCarouselCarouselItem { title: string image: string } export interface HeroLogosCarouselProps { title: string description: string logosInfo: string primaryCTA?: CtaProps secondaryCTA?: CtaPro