Horizontal Timeline

'use client';

import './TimelineHorizSteps.css';

/** TimelineHorizSteps — ported from astro-component-kit. */
export interface TimelineHorizStepsProps {
}

export function TimelineHorizSteps({}: TimelineHorizStepsProps) {
  return (
    <>
      <div className="h-timeline" data-rk-a73a4c="">
        <div className="h-line" data-rk-a73a4c=""></div>
        <div className="h-item" data-rk-a73a4c=""><span data-rk-a73a4c="">2022</span><strong data-rk-a73a4c="">Founded</strong></div>
        <div className="h-item" data-rk-a73a4c=""><span data-rk-a73a4c="">2023</span><strong data-rk-a73a4c="">Global</strong></div>
        <div className="h-item curr" data-rk-a73a4c=""><span data-rk-a73a4c="">2024</span><strong data-rk-a73a4c="">V2.0</strong></div>
      </div>
    </>
  );
}

export default TimelineHorizSteps;

/* TimelineHorizSteps — ported from astro-component-kit (data/TimelineHorizSteps.astro) */

.h-timeline:where([data-rk-a73a4c]) { display: flex; justify-content: space-between; position: relative; padding: 2rem 0; width: 100%; max-width: 600px; margin: 0 auto; }
.h-line:where([data-rk-a73a4c]) { position: absolute; top: 3.2rem; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); }
.h-item:where([data-rk-a73a4c]) { text-align: center; position: relative; z-index: 1; min-width: 80px; }
.h-item:where([data-rk-a73a4c]) span:where([data-rk-a73a4c]) { display: block; font-size: 0.7rem; color: #64748b; margin-bottom: 2rem; font-weight: 700; }
.h-item:where([data-rk-a73a4c])::after { content: ""; position: absolute; left: 50%; top: 1.1rem; width: 16px; height: 16px; background: #1e293b; border: 3px solid #334155; border-radius: 50%; transform: translateX(-50%); transition: 0.3s; }
strong:where([data-rk-a73a4c]) { display: block; color: #fff; font-size: 0.85rem; }
.curr:where([data-rk-a73a4c]) strong:where([data-rk-a73a4c]) { color: #6366f1; }
.curr:where([data-rk-a73a4c])::after { background: #6366f1; border-color: #080b14; box-shadow: 0 0 15px rgba(99, 102, 241, 0.6); }