timeline

 tsx

import React from 'react';

import './ConsultationSteps.css';

const steps = [

{

number: '01',

label: 'Select Specialist',

imgSrc: '/images/specialist.png',

color: '#F59E0B',

},

{

number: '02',

label: 'Ask Questions',

imgSrc: '/images/questions.png',

color: '#16A34A',

},

{

number: '03',

label: 'Get your answers',

imgSrc: '/images/answers.png',

color: '#B91C1C',

},

];

const ConsultationSteps = () => {

return (

<div className="consultation-steps-container">

<div className="consultation-steps">

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

<div

key={index}

className={`step ${index % 2 === 1 ? 'reverse' : ''}`}

>

<div className="step-number" style={{ color: step.color }}>

{step.number}

</div>

<div className="step-image">

<img src={step.imgSrc} alt={step.label} />

</div>

<div className="step-label">{step.label}</div>

</div>

))}

</div>

<div className="step-line" />

</div>

);

};

export default ConsultationSteps;

css

.consultation-steps-container {

position: relative;

padding: 40px 20px;

background-color: #fff;

}

.consultation-steps {

display: flex;

justify-content: space-between;

align-items: flex-start;

position: relative;

z-index: 1;

}

.step {

display: flex;

flex-direction: column;

align-items: center;

width: 30%;

text-align: center;

}

.step-number {

font-size: 28px;

font-weight: bold;

margin-bottom: 6px;

}

.step-label {

font-size: 18px;

color: #374151;

margin: 6px 0;

}

.step-image img {

height: 80px;

object-fit: contain;

}

.step-line {

position: absolute;

top: 50%;

left: 6%;

right: 6%;

height: 2px;

background-image: repeating-linear-gradient(

to right,

#fcd34d,

#fcd34d 6px,

transparent 6px,

transparent 12px

);

z-index: 0;

}