Back to articles
Hero with logos + carousel

Hero with logos + carousel

via Dev.to ReactFelipe Menezes

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 ?: Cta

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles