"use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { ChevronLeft, ChevronRight } from "lucide-react" import Image from "next/image" import { Geist } from "next/font/google" interface CarouselItem { imageSrc: string altText: string } const geistFont = Geist({ subsets: ['latin'], weight: ['400', '500', '600', '700'], }) const carouselContent: CarouselItem[] = [ { imageSrc: 'https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/faq/island-faq-cover.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2ZhcS9pc2xhbmQtZmFxLWNvdmVyLnBuZyIsImlhdCI6MTc0ODUzMTUyNCwiZXhwIjoxOTA2MjExNTI0fQ.HJcm9fHkQGbR1GIGnPF5D8Q-Rwjh556Qmnnl0zwoEWQ', altText: "Component cover for the Island FAQ component", }, { imageSrc: 'https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/footer/cover_template_solid_footer.jpg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2Zvb3Rlci9jb3Zlcl90ZW1wbGF0ZV9zb2xpZF9mb290ZXIuanBnIiwiaWF0IjoxNzQ1Nzk3OTYxLCJleHAiOjE3NDg2NDkxNjF9.5ZdHaOXLk8VFExPKF57l4AIM2oBSMNf8hPvhtajx7io', altText: "Component cover for the Solid Footer component", }, { imageSrc: 'https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/features/threebento-cover.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2ZlYXR1cmVzL3RocmVlYmVudG8tY292ZXIucG5nIiwiaWF0IjoxNzQ4MTI1NDcxLCJleHAiOjE3NDg1NTc0NzF9.XINtadAY9kjbBAl3OAEMw5xnMVdUS42TcyNOxMwXhuw', altText: "Component cover for the Three Bento component", }, ] export default function IndicatoryCarousel() { const totalSlides = carouselContent.length const slideDuration = 3000 // 3 seconds per slide const [activeIndex, setActiveIndex] = useState(0) const [direction, setDirection] = useState(1) // 1 for next/forward, -1 for prev/backward useEffect(() => { const timer = setTimeout(() => { setDirection(1) setActiveIndex((prevIndex) => (prevIndex + 1) % totalSlides) }, slideDuration) return () => clearTimeout(timer) }, [activeIndex, totalSlides, slideDuration]) const handlePrev = () => { setDirection(-1) setActiveIndex((prevIndex) => (prevIndex - 1 + totalSlides) % totalSlides) } const handleNext = () => { setDirection(1) setActiveIndex((prevIndex) => (prevIndex + 1) % totalSlides) } const handleIndicatorClick = (index: number) => { if (index === activeIndex) return setDirection(index > activeIndex ? 1 : -1) setActiveIndex(index) } const currentItem = carouselContent[activeIndex] return (

Build landings in minutes

Build your landing page in minutes with our ready-made and well designed components that you can customize to your liking.

{/* Carousel Navigation */}

{Array.from({ length: totalSlides }).map((_, index) => (

handleIndicatorClick(index)} className={`h-2 rounded-full relative overflow-hidden transition-all duration-300 cursor-pointer ${index === activeIndex ? "w-8 bg-gray-300" : "w-2 bg-gray-300" }`} > {index === activeIndex && ( )}

))}

{/* Large Rounded Card with Animated Image */}

) }

Indicatory Carousel

Build landings in minutes