import { cn } from "@/lib/utils"; interface ImageSource { src: string; alt: string; } interface ShowImageListItemProps { text: string; images: [ImageSource, ImageSource]; } function RevealImageListItem({ text, images }: ShowImageListItemProps) { const container = "absolute right-8 -top-1 z-40 h-20 w-16"; const effect = "relative duration-500 delay-100 shadow-none group-hover:shadow-xl scale-0 group-hover:scale-100 opacity-0 group-hover:opacity-100 group-hover:w-full group-hover:h-full w-16 h-16 overflow-hidden transition-all rounded-md"; return (

{text}

); } function RevealImageList() { const items: ShowImageListItemProps[] = [ { text: "Branding", images: [ { src: "https://images.unsplash.com/photo-1512295767273-ac109ac3acfa?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", alt: "Image 1", }, { src: "https://images.unsplash.com/photo-1567262439850-1d4dc1fefdd0?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", alt: "Image 2", }, ], }, { text: "Web design", images: [ { src: "https://images.unsplash.com/photo-1587440871875-191322ee64b0?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", alt: "Image 1", }, { src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", alt: "Image 2", }, ], }, { text: "Illustration", images: [ { src: "https://images.unsplash.com/photo-1575995872537-3793d29d972c?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", alt: "Image 1", }, { src: "https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", alt: "Image 2", }, ], }, ]; return (

Our services

{items.map((item, index) => ( ))}

); } export { RevealImageList };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Reveal images

Created by

Installation

How to use

Tags