0.9

assets/css/custom.css

@@ -157,13 +157,14 @@ h2 {
     position: relative;
     max-width: 1200px;
     margin: 0 auto;
+    counter-reset: timeline-counter;
 }
 
 .timeline::after {
     content: '';
     position: absolute;
     width: 6px;
-    background-color: #8B5CF6;
+    background-color: #E5E7EB; /* Lighter line color */
     top: 0;
     bottom: 0;
     left: 50%;
@@ -175,6 +176,7 @@ h2 {
     position: relative;
     background-color: inherit;
     width: 50%;
+    counter-increment: timeline-counter;
 }
 
 .timeline-item.left {
@@ -186,20 +188,26 @@ h2 {
 }
 
 .timeline-item::after {
-    content: '';
+    content: counter(timeline-counter);
     position: absolute;
-    width: 25px;
+    width: 60px;
-    height: 25px;
+    height: 60px;
-    right: -17px;
+    right: -30px;
-    background-color: white;
+    background-color: #8B5CF6;
-    border: 4px solid #8B5CF6;
+    color: white;
-    top: 15px;
+    border: 4px solid #F9FAFB;
+    top: 50%;
+    transform: translateY(-50%);
     border-radius: 50%;
     z-index: 1;
+    font-size: 1.8rem;
+    font-weight: bold;
+    text-align: center;
+    line-height: 52px;
 }
 
 .timeline-item.right::after {
-    left: -16px;
+    left: -30px;
 }
 
 .timeline-content {

assets/js/main.js

@@ -7,4 +7,64 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             behavior: 'smooth'
         });
     });
+});
+
+// Three.js 3D Visual
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.getElementById('3d-canvas-container');
+    if (container) {
+        let scene, camera, renderer, cube;
+
+        function init() {
+            // Scene
+            scene = new THREE.Scene();
+
+            // Camera
+            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+            camera.position.z = 5;
+
+            // Renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(container.clientWidth, container.clientHeight);
+            container.appendChild(renderer.domElement);
+
+            // Cube
+            const geometry = new THREE.BoxGeometry(2, 2, 2);
+            const material = new THREE.MeshStandardMaterial({ color: 0x8B5CF6, roughness: 0.5, metalness: 0.5 });
+            cube = new THREE.Mesh(geometry, material);
+            scene.add(cube);
+
+            // Lights
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+
+            const pointLight = new THREE.PointLight(0xffffff, 0.8);
+            pointLight.position.set(5, 5, 5);
+            scene.add(pointLight);
+
+            // Animation
+            animate();
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+
+            cube.rotation.x += 0.005;
+            cube.rotation.y += 0.005;
+
+            renderer.render(scene, camera);
+        }
+
+        function onWindowResize() {
+            if (container.clientWidth > 0 && container.clientHeight > 0) {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            }
+        }
+
+        window.addEventListener('resize', onWindowResize, false);
+
+        init();
+    }
 });

index.php

@@ -56,6 +56,11 @@
         </div>
     </header>
 
+    <!-- 3D Visual Section -->
+    <section id="3d-visual" class="section-3d" style="height: 400px; overflow: hidden; position: relative; background-color: #f8f9fa;">
+        <div id="3d-canvas-container" style="width: 100%; height: 100%;"></div>
+    </section>
+
     <!-- The Problem Section -->
     <section id="problem" class="section">
         <div class="container text-center">
@@ -97,48 +102,48 @@
                     <div class="timeline">
                         <div class="timeline-item left">
                             <div class="timeline-content">
-                                <a href="features/integration.php" style="text-decoration: none; color: inherit;"><h5>1. Integration</h5></a>
+                                <a href="features/upload-evidence.php" style="text-decoration: none; color: inherit;"><h5>Upload Evidence</h5></a>
-                                <p class="text-start">Integration of all your related tools such as Asset management, risk management Jira , Vulnerability management tool.</p>
-                            </div>
-                        </div>
-                        <div class="timeline-item right">
-                            <div class="timeline-content">
-                                <a href="features/login-and-workspace-overview.php" style="text-decoration: none; color: inherit;"><h5>2. Log In & Workspace Overview</h5></a>
-                                <p class="text-start">The user signs in securely via Single Sign-On (SSO) (Azure AD / Okta). Lands on the Organization Dashboard with a clear compliance score, open gaps, and quick actions.</p>
-                                <p class="text-start">🎯 <strong>Purpose:</strong> Give instant clarity — what’s secure, what’s risky, what needs action.</p>
-                            </div>
-                        </div>
-                        <div class="timeline-item left">
-                            <div class="timeline-content">
-                                <a href="features/upload-evidence.php" style="text-decoration: none; color: inherit;"><h5>3. Upload Evidence</h5></a>
                                 <p class="text-start">Click Upload Evidence → Choose File. Vision Copilot automatically uploads, analyzes, and tags the evidence, making it machine-readable.</p>
                                 <p class="text-start">🔍 <strong>Purpose:</strong> Replace tedious evidence collection with instant, machine-readable proof.</p>
                             </div>
                         </div>
                         <div class="timeline-item right">
                             <div class="timeline-content">
-                                <a href="features/automatic-gap-detection.php" style="text-decoration: none; color: inherit;"><h5>4. Automatic Gap Detection</h5></a>
+                                <a href="features/login-and-workspace-overview.php" style="text-decoration: none; color: inherit;"><h5>Log In & Workspace Overview</h5></a>
+                                <p class="text-start">The user signs in securely via Single Sign-On (SSO) (Azure AD / Okta). Lands on the Organization Dashboard with a clear compliance score, open gaps, and quick actions.</p>
+                                <p class="text-start">🎯 <strong>Purpose:</strong> Give instant clarity — what’s secure, what’s risky, what needs action.</p>
+                            </div>
+                        </div>
+                        <div class="timeline-item left">
+                            <div class="timeline-content">
+                                <a href="features/integration.php" style="text-decoration: none; color: inherit;"><h5>Integration</h5></a>
+                                <p class="text-start">Integration of all your related tools such as Asset management, risk management Jira , Vulnerability management tool.</p>
+                            </div>
+                        </div>
+                        <div class="timeline-item right">
+                            <div class="timeline-content">
+                                <a href="features/automatic-gap-detection.php" style="text-decoration: none; color: inherit;"><h5>Automatic Gap Detection</h5></a>
                                 <p class="text-start">The Gap Engine compares evidence to baseline rules, automatically generates findings, and maps them to relevant frameworks (NIS2, DORA, ISO 27001).</p>
                                 <p class="text-start">⚡ <strong>Purpose:</strong> Let the system find what’s missing before the auditor does.</p>
                             </div>
                         </div>
                         <div class="timeline-item left">
                             <div class="timeline-content">
-                                <a href="features/review-and-assign-tasks.php" style="text-decoration: none; color: inherit;"><h5>5. Review & Assign Tasks</h5></a>
+                                <a href="features/cross-framework-mapping.php" style="text-decoration: none; color: inherit;"><h5>Cross-Framework Mapping</h5></a>
-                                <p class="text-start">Navigate to the Tasks View to see all gaps with linked evidence, regulation references, and suggested remediation. Assign owners and set due dates to turn findings into trackable workflows.</p>
-                                <p class="text-start">🧩 <strong>Purpose:</strong> Turn findings into workflows — trackable, accountable, visible.</p>
-                            </div>
-                        </div>
-                        <div class="timeline-item right">
-                            <div class="timeline-content">
-                                <a href="features/cross-framework-mapping.php" style="text-decoration: none; color: inherit;"><h5>6. Cross-Framework Mapping</h5></a>
                                 <p class="text-start">Open the Control Explorer to see how controls overlap across multiple frameworks. Evidence uploaded once gives you compliance credit everywhere.</p>
                                 <p class="text-start">♻️ <strong>Purpose:</strong> One control = multiple compliances. Stop duplicating effort.</p>
                             </div>
                         </div>
+                        <div class="timeline-item right">
+                            <div class="timeline-content">
+                                <a href="features/review-and-assign-tasks.php" style="text-decoration: none; color: inherit;"><h5>Review & Assign Tasks</h5></a>
+                                <p class="text-start">Navigate to the Tasks View to see all gaps with linked evidence, regulation references, and suggested remediation. Assign owners and set due dates to turn findings into trackable workflows.</p>
+                                <p class="text-start">🧩 <strong>Purpose:</strong> Turn findings into workflows — trackable, accountable, visible.</p>
+                            </div>
+                        </div>
                         <div class="timeline-item left">
                             <div class="timeline-content">
-                                <a href="features/ai-copilot-qa.php" style="text-decoration: none; color: inherit;"><h5>7. AI Copilot Q&A</h5></a>
+                                <a href="features/ai-copilot-qa.php" style="text-decoration: none; color: inherit;"><h5>AI Copilot Q&A</h5></a>
                                 <p class="text-start">Open Ask Copilot to get instant answers to your compliance questions, with responses trained on real regulation text.</p>
                             </div>
                         </div>
@@ -301,6 +306,7 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/132/three.min.js"></script>
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>