How It Works - Copy this React, Tailwind Component to your project

Arrow is noti visible in desktop view import { ArrowRight, ArrowDown } from "lucide react"; export default function HowItWorksSection() { const steps = [ { step: "01", title: "Scan Your Invoice", description: "Use your phone camera to scan invoices or upload digital copies", icon: "📸", }, { step: "02", title: "AI Processing", description: "Smart extraction and categorization of invoice data", icon: "🤖", }, { step: "03", title: "Manage & Track", description: "Real time expense tracking and report generation", icon: "📊", }, ]; return ( <section className="py 24 px 4 md:px 8 bg black" id="how it works"> <div className="max w 7xl mx auto"> {/* Heading */} <div className="text center mb 20"> <h2 className="text 4xl md:text 6xl font bold mb 4 bg gradient to r from yellow 400 to orange 500 bg clip text text transparent"> How It Works </h2> <p className="text gray 400 text xl mt 4"> Transform your invoice management in three simple steps </p> </div> {/* Steps Grid */} <div className="relative grid md:grid cols 3 gap 16 md:gap 8"> {/* Animated Connection Line (Desktop) */} <div className="hidden md:block absolute inset 0 top 24"> <div className="h 1 bg gradient to r from yellow 400/20 via orange 500 to yellow 400/20 w full animate pulse" /> <div className="absolute inset 0 flex justify between items center px 8"> {[...Array(2)].map((_, i) => ( <div key={i} className="relative w 12 h 12 flex items center justify center"> <ArrowRight className="text orange 500 w 10 h 10 animate pulse" /> </div> ))} </div> </div> {/* Steps */} {steps.map((step, index) => ( <div key={index} className="relative group flex flex col items center"> {/* Step Card */} <div className="relative z 10 w full max w sm bg gray 900 rounded 2xl p 8 transition all duration 300 hover:transform hover: translate y 4 hover:shadow 2xl hover:border orange 500 border border gray 800"> {/* Icon Container */} <div className="absolute top 8 left 1/2 translate x 1/2"> <div className="relative w 16 h 16 flex items center justify center"> <div className="absolute inset 0 bg orange 500/10 rounded full animate ping" /> <div className="w 14 h 14 bg gradient to br from yellow 400 to orange 500 rounded full flex items center justify center text 2xl backdrop blur lg transition transform duration 300 group hover:scale 110"> <span className="text white">{step.icon}</span> </div> </div> </div> {/* Content */} <div className="pt 12 text center"> <div className="text orange 500/20 text 6xl font bold absolute top 0 left 4"> {step.step} </div> <h3 className="text 2xl font semibold text gray 100 mb 3">{step.title}</h3> <p className="text gray 400 leading relaxed">{step.description}</p> </div> </div> {/* Mobile Arrows */} {index < steps.length 1 && ( <div className="md:hidden pt 12 flex flex col items center"> <ArrowDown className="text orange 500 w 10 h 10 animate bounce" /> </div> )} </div> ))} </div> </div> </section> ); }