* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: transparent; padding: 40px 20px; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } h1 { text-align: center; color: #2d3748; margin-bottom: 20px; font-size: 2.5rem; } .timeline-label { text-align: center; font-size: 1.1rem; color: #718096; margin-bottom: 60px; } .roadmap { position: relative; padding: 60px 0; } .road { position: relative; height: 120px; background: linear-gradient(to bottom, #e2e8f0 0%, #cbd5e0 50%, #e2e8f0 100%); border-radius: 60px; overflow: visible; } .road-line { position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( to right, white 0px, white 20px, transparent 20px, transparent 40px ); transform: translateY(-50%); } .milestones { position: relative; display: flex; justify-content: space-between; padding: 0 50px; } .milestone { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .milestone-marker { position: relative; width: 80px; height: 80px; background: white; border: 6px solid #0079c1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 2rem; color: #0079c1; box-shadow: 0 8px 25px rgba(0, 121, 193, 0.3); transition: all 0.3s ease; z-index: 10; margin-top: -40px; } .milestone:hover .milestone-marker { transform: scale(1.15) translateY(-5px); box-shadow: 0 12px 35px rgba(0, 121, 193, 0.4); } .milestone.active .milestone-marker { background: #0079c1; color: white; transform: scale(1.2) translateY(-5px); } .milestone-icon { position: absolute; width: 35px; height: 35px; color: #0079c1; } .milestone.active .milestone-icon { color: white; } .milestone-label { margin-top: 100px; text-align: center; } .milestone-title { font-size: 1.2rem; font-weight: 700; color: #2d3748; margin-bottom: 5px; } .milestone-date { font-size: 0.9rem; color: #718096; font-weight: 600; } .details-panel { margin-top: 80px; background: white; border-radius: 16px; padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); opacity: 0; transform: translateY(20px); transition: all 0.4s ease; } .details-panel.active { opacity: 1; transform: translateY(0); } .details-panel h2 { color: #2d3748; font-size: 2rem; margin-bottom: 10px; display: flex; align-items: center; gap: 15px; } .details-panel .phase-number { width: 50px; height: 50px; background: #0079c1; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 1.5rem; } .details-panel p { color: #4a5568; font-size: 1.1rem; line-height: 1.7; margin-bottom: 25px; } .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .detail-card { background: #f7fafc; padding: 20px; border-radius: 12px; border-left: 4px solid #0079c1; } .detail-card h4 { color: #2d3748; margin-bottom: 8px; font-size: 1.05rem; } .detail-card p { color: #718096; font-size: 0.95rem; margin: 0; } @media (max-width: 768px) { .milestones { padding: 0 20px; } .milestone-marker { width: 60px; height: 60px; font-size: 1.5rem; } .milestone-icon { width: 25px; height: 25px; } .milestone-label { margin-top: 80px; } .milestone-title { font-size: 1rem; } .details-grid { grid-template-columns: 1fr; } } const phases = [ { number: 1, title: "Blueprint and Design", description: "We work with your team to fully understand your employee time tracking needs and system requirements. Our goal is to create a personalized plan for your business needs that ensures the system we develop meets your expectations for monitoring employee work hours.", details: [ { title: "Needs Assessment", text: "Comprehensive review of your time tracking requirements" }, { title: "System Requirements", text: "Identify technical and business specifications" }, { title: "Personalized Plan", text: "Develop a customized blueprint for your organization" }, { title: "Expectations Alignment", text: "Ensure the solution meets your monitoring goals" } ] }, { number: 2, title: "Features and Customization", description: "Our experts help your team create customized time tracking software to track employee work hours efficiently. Together, we identify and implement features that best serve your business processes and objectives.", details: [ { title: "Feature Selection", text: "Identify capabilities aligned with your workflows" }, { title: "Custom Development", text: "Build tailored solutions for your requirements" }, { title: "Process Integration", text: "Align features with business operations" }, { title: "Objective Alignment", text: "Ensure features support your goals" } ] }, { number: 3, title: "Installation", description: "Once the blueprint, design and feature customizations are finalized, our experienced team oversees the installation process of your new time clocks. We check all cloud based time clocks, including biometric time clocks, to ensure they work well and track employee hours accurately.", details: [ { title: "Hardware Deployment", text: "Install time clocks at designated locations" }, { title: "Cloud Configuration", text: "Set up cloud-based time tracking infrastructure" }, { title: "Biometric Setup", text: "Configure facial recognition or fingerprint scanners" }, { title: "Quality Assurance", text: "Verify all systems are tracking hours accurately" } ] }, { number: 4, title: "Training", description: "Our team trains your staff to use the new solution effectively and become proficient in it. This training teaches your team how to use the time clocks and any custom features we've added for accurate time tracking and employee work hours.", details: [ { title: "Staff Onboarding", text: "Comprehensive training for all users" }, { title: "Clock Usage", text: "Hands-on instruction for time clock operation" }, { title: "Custom Features", text: "Training on personalized functionality" }, { title: "Best Practices", text: "Guidelines for accurate time tracking" } ] }, { number: 5, title: "Testing", description: "We test the seamlessly integrated system before it goes live to ensure the time clock software is working correctly. This stage ensures the system works and meets the requirements outlined in the blueprint for tracking employee hours.", details: [ { title: "System Validation", text: "Comprehensive testing of all components" }, { title: "Integration Testing", text: "Verify seamless system connectivity" }, { title: "Blueprint Compliance", text: "Confirm alignment with original requirements" }, { title: "Accuracy Verification", text: "Validate precise employee hour tracking" } ] }, { number: 6, title: "Go-Live!", description: "With biometric or badge reader employee time clocks and trained staff at the ready, you can launch and monitor your new time-tracking system confidently. We'll help you during the change, making sure you have a smooth go-live experience.", details: [ { title: "Production Launch", text: "Activate your time tracking system" }, { title: "Launch Support", text: "On-site or remote assistance during transition" }, { title: "Monitoring", text: "Real-time oversight of system performance" }, { title: "Smooth Transition", text: "Ensure minimal disruption to operations" } ] }, { number: 7, title: "Ongoing Support", description: "Following implementation of the time clock systems, we continue to provide support tailored to your chosen support level. We are here to assist with any inquiries, concerns, or modifications you may require. As your business grows, especially for small businesses, our support helps ensure time and attendance management stays simple.", details: [ { title: "Dedicated Support", text: "Assistance based on your support tier" }, { title: "Issue Resolution", text: "Quick response to inquiries and concerns" }, { title: "System Modifications", text: "Ongoing customization as needs evolve" }, { title: "Scalability Support", text: "Help your system grow with your business" } ] } ]; function showPhase(index) { // Update milestone active states document.querySelectorAll('.milestone').forEach((m, i) => { m.classList.toggle('active', i === index); }); // Update details panel const phase = phases[index]; const panel = document.getElementById('detailsPanel'); panel.innerHTML = `

${phase.number} ${phase.title}

${phase.description}

`; // Trigger animation panel.classList.remove('active'); setTimeout(() => panel.classList.add('active'), 10); } // Initialize with first phase showPhase(0);