"use client"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; import { UserIcon, ContactIcon, CrosshairIcon } from "lucide-react"; const steps = [ { id: "choose-role", icon: UserIcon, title: "Choose your role", description: "Select whether you're joining as an employee or team manager.", }, { id: "enter-details", icon: ContactIcon, title: "Enter your details", description: "Set up your profile in minutes and connect with your team instantly.", }, { id: "define-focus", icon: CrosshairIcon, title: "Define your focus", description: "Choose your department and title to tailor your experience.", }, ]; export default function HowItWorksSection() { const [activeStep, setActiveStep] = useState(0); return (

{/* Header */}

How it works?

Start fast, join your team easier

Set up your profile in minutes and sync with your workspace.
No friction, no confusion — just flow.

{/* Content */}

{/* Left: 3 tall step cards stacked, filling full height */}

{steps.map((step, index) => { const isActive = index === activeStep; return ( ); })}

{/* Right: Image filling the full card */}

); }

Start fast, join your team easier

{step.title}

Shadcn how-it-works blocks