"use client"; import { useEffect, useRef, useState } from "react"; import Image from "next/image"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Link from "next/link"; gsap.registerPlugin(ScrollTrigger); const dashboardTabs = [ { id: 1, title: "Analytics", src: "https://ui.shadcn.com/_next/image?url=%2Fr%2Fstyles%2Fnew-york-v4%2Fdashboard-01-light.png&w=3840&q=75", alt: "Dashboard Analytics Overview", }, { id: 2, title: "Users Management", src: "https://ui.shadcn.com/_next/image?url=%2Fr%2Fstyles%2Fnew-york-v4%2Fdashboard-01-light.png&w=3840&q=75", alt: "Dashboard User Management", }, { id: 3, title: "Insights & Reports", src: "https://ui.shadcn.com/_next/image?url=%2Fr%2Fstyles%2Fnew-york-v4%2Fdashboard-01-light.png&w=3840&q=75", alt: "Dashboard Reports", }, { id: 4, title: "Activity", src: "https://ui.shadcn.com/_next/image?url=%2Fr%2Fstyles%2Fnew-york-v4%2Fdashboard-01-light.png&w=3840&q=75", alt: "Dashboard Activity", }, { id: 5, title: "Trends", src: "https://ui.shadcn.com/_next/image?url=%2Fr%2Fstyles%2Fnew-york-v4%2Fdashboard-01-light.png&w=3840&q=75", alt: "Dashboard Trends", }, ]; export function FeatureCarousel() { const sectionRef = useRef(null); const sliderRef = useRef(null); const [currentSlide, setCurrentSlide] = useState(0); // Auto slide useEffect(() => { const interval = setInterval(() => { setCurrentSlide((prev) => (prev + 1) % dashboardTabs.length); }, 5000); return () => clearInterval(interval); }, []); // Scroll animations useEffect(() => { gsap.to(".hero-blur", { yPercent: 20, ease: "none", scrollTrigger: { trigger: sectionRef.current, start: "top top", end: "bottom top", scrub: true, }, }); }, []); const goToSlide = (index: number) => setCurrentSlide(index); return (

Not everything powerful
has to look complicated

Explore the key features that make our platform a game-changer for businesses of all sizes.

{/* Carousel */}

{dashboardTabs.map((tab, index) => { const position = index - currentSlide; const isActive = position === 0; const translateX = position * 100; const scale = isActive ? 1 : 0.9; return (

{isActive && (

)}

); })}

{/* Tabs */}

{dashboardTabs.map((tab, index) => ( ))}

); }

Not everything powerful has to look complicated

Not everything powerful
has to look complicated

Feature Carousel

Not everything powerful has to look complicated

Installation

Features

Not everything powerful has to look complicated

Not everything powerful
has to look complicated

Not everything powerful
has to look complicated