TimeLine Steps

'use client'

import ProcessTimeline, { TimelineColors, TimelineStep } from '../ProcessTime'

export default function TarifCardPreviewPage() {
    const timelineStepsExample = [
    {
        id: 1,
        title: "Analyse des Besoins",
        description: "Nous étudions vos objectifs et vos contraintes pour définir la meilleure approche."
    },
    {
        id: 2,
        title: "Conception & Design",
        description: "Nous concevons un votre site WEB avec un design moderne et responsive. Que nous vous envoyons pour validation."
    },
    {
        id: 3,
        title: "Développement",
        description: "Avec votre validation, nous procédons au développement de votre site WEB. Grâce aux technologies modernes, nous vous offrons un site WEB performant."
    },
    {
        id: 4,
        title: "Optimisation SEO",  
        description: "Nous optimisons les performances de votre site WEB pour qu'il soit le mieux positionné chez GOOGLE et BING."
    }
    ]

    const blueTimelineColors: TimelineColors = {
    progressBarFill: 'bg-gradient-to-r from-blue-400 to-blue-600',
    activeCircleBorder: 'border-blue-400',
    activeCircleBg: 'bg-gradient-to-br from-blue-400 to-blue-600',
    shadow: 'shadow-blue-400/25'
    }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-800 grid place-items-center">
      <ProcessTimeline steps={timelineStepsExample} colors={blueTimelineColors} />
    </div>
  )
}