<div class="roadmap-container"> <h1>Our Journey</h1> <div class="timeline"> <div class="milestone"> <div class="milestone-date">2023 Q4</div> <div class="milestone-content"> <h3>Platform Launch</h3> <p>Initial release of our decentralized infrastructure and core services.</p> </div> </div> <div class="milestone"> <div class="milestone-date">2024 Q1</div> <div class="milestone-content"> <h3>Network Expansion</h3> <p>Global node deployment and enhanced network capabilities.</p> </div> </div> <div class="milestone"> <div class="milestone-date">2024 Q2</div> <div class="milestone-content"> <h3>Developer Tools</h3> <p>Release of comprehensive SDK and developer documentation.</p> </div> </div> <div class="milestone"> <div class="milestone-date">2024 Q3</div> <div class="milestone-content"> <h3>Enterprise Solutions</h3> <p>Launch of enterprise-grade features and support services.</p> </div> </div> </div> </div> <style> .roadmap-container { width: 100%; max-width: 1200px; margin: 2rem auto; padding: 2rem 3rem; background: var(--hero-background); border-radius: 1.2rem; box-shadow: 0 8px 32px #0000004D; } .roadmap-container h1 { color: var(--hero-subtitle-background); text-align: center; margin-bottom: 2rem; } .timeline { position: relative; padding: 2rem 0; } .timeline::before { content: ''; position: absolute; left: 85px; top: 0; bottom: 0; width: 2px; background: #888; } .milestone { display: flex; margin-bottom: 2rem; position: relative; align-items: flex-start; } .milestone::before { content: ''; position: absolute; left: 85px; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: #888; border: 2px solid var(--hero-background); transform: translate(-50%, -50%); box-sizing: border-box; } .milestone-date { width: 70px; padding-right: 1rem; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--hero-subtitle-background); padding-top: 8px; white-space: nowrap; } .milestone-content { flex: 1; background: rgba(255, 255, 255, 0.05); padding: 1.5rem 2rem; border-radius: 8px; margin-left: 2rem; margin-right: 1rem; } .milestone-content h3 { margin-top: 0; color: var(--hero-subtitle-background); } .milestone-content p { margin-bottom: 0; color: var(--body-text); } @media (max-width: 768px) { .roadmap-container { width: 90%; padding: 1.6rem; } .timeline::before { left: 50px; } .milestone::before { left: 50px; } .milestone-date { width: 60px; font-size: 0.9rem; } .milestone-content { margin-left: 1.5rem; margin-right: 0.5rem; padding: 1rem 1.5rem; } } @media (max-width: 480px) { .roadmap-container { width: 85%; padding: 1rem; } } </style>