'use client'; import { useCallback, useEffect, useRef, useState } from 'react'; import { RiLoader2Line } from '@remixicon/react'; import Image from './next-image-mock'; import * as StatusBadge from './components/ui/status-badge'; const CheckIcon = () => ( ); const steps = [ { id: 1, number: '01', title: 'Add your product details', description: 'Upload clean, high-quality visuals to make your listings look more trustworthy and clear.', image: 'https://alignui.com/images/blocks/hiw-3-image-1.jpg', darkImage: 'https://alignui.com/images/blocks/hiw-3-image-1-dark.jpg', }, { id: 2, number: '02', title: 'Set your pricing', description: 'Upload clean, high-quality visuals to make your listings look more trustworthy and clear.', image: 'https://alignui.com/images/blocks/hiw-3-image-1.jpg', darkImage: 'https://alignui.com/images/blocks/hiw-3-image-1-dark.jpg', }, { id: 3, number: '03', title: 'Upload product visuals', description: 'Upload clean, high-quality visuals to make your listings look more trustworthy and clear.', image: 'https://alignui.com/images/blocks/hiw-3-image-1.jpg', darkImage: 'https://alignui.com/images/blocks/hiw-3-image-1-dark.jpg', }, { id: 4, number: '04', title: 'Manage your stock status', description: 'Upload clean, high-quality visuals to make your listings look more trustworthy and clear.', image: 'https://alignui.com/images/blocks/hiw-3-image-1.jpg', darkImage: 'https://alignui.com/images/blocks/hiw-3-image-1-dark.jpg', }, { id: 5, number: '05', title: 'Preview before you publish', description: 'Upload clean, high-quality visuals to make your listings look more trustworthy and clear.', image: 'https://alignui.com/images/blocks/hiw-3-image-1.jpg', darkImage: 'https://alignui.com/images/blocks/hiw-3-image-1-dark.jpg', }, ]; export default function HowItWorks03() { const [activeStep, setActiveStep] = useState(-1); const [completedSteps, setCompletedSteps] = useState([]); const [isInView, setIsInView] = useState(false); const sectionRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting && !isInView) { setIsInView(true); setActiveStep(0); } }, { threshold: 0.3 }, ); if (sectionRef.current) { observer.observe(sectionRef.current); } return () => observer.disconnect(); }, [isInView]); const goToNextStep = useCallback(() => { setActiveStep((prev) => { if (prev >= steps.length - 1) return prev; const next = prev + 1; if (prev >= 0 && !completedSteps.includes(prev)) { setCompletedSteps((prevCompleted) => [...prevCompleted, prev]); } return next; }); }, [completedSteps]); useEffect(() => { if (!isInView || activeStep < 0) return; if (activeStep >= steps.length - 1) { const timeout = setTimeout(() => { if (!completedSteps.includes(activeStep)) { setCompletedSteps((prev) => [...prev, activeStep]); } }, 5000); return () => clearTimeout(timeout); } const interval = setInterval(() => { goToNextStep(); }, 5000); return () => clearInterval(interval); }, [isInView, activeStep, goToNextStep, completedSteps]); const handleStepClick = (index: number) => { const newCompleted: number[] = []; for (let i = 0; i < index; i++) { newCompleted.push(i); } setCompletedSteps(newCompleted); setActiveStep(index); }; const isCompleted = (index: number) => completedSteps.includes(index); return (

How it works?

Faster listings, smarter campaigns

List products in seconds, automate the workflow, and keep your{' '} team focused on growth.

{steps.map((step, index) => (

{activeStep === index && (

)}

))}

From product to live listing — automate every{' '} step and launch faster.

{steps.map((step, index) => (

))}

); }