diff --git a/assets/scss/_collaboration.scss b/assets/scss/_collaboration.scss
new file mode 100644
index 0000000..0b8670d
--- /dev/null
+++ b/assets/scss/_collaboration.scss
@@ -0,0 +1,424 @@
+.collaboration-section {
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .container {
+        padding: 0 24px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .collaboration-content {
+        .icon-box {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            background: rgba(0, 179, 159, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 24px;
+            border: 1px solid rgba(0, 179, 159, 0.2);
+
+            svg {
+                color: #00D3A9;
+                width: 24px;
+                height: 24px;
+            }
+        }
+
+        h2 {
+            font-size: clamp(2rem, 3vw, 2.8rem);
+            margin-bottom: 20px;
+            line-height: 1.2;
+            background: linear-gradient(to right, #ffffff, #9EFFEC);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        p {
+            color: var(--muted);
+            font-size: 1.1rem;
+            line-height: 1.6;
+            margin-bottom: 32px;
+        }
+
+        .feature-list {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+
+            li {
+                display: flex;
+                align-items: flex-start;
+                gap: 12px;
+                color: #e2e8f0;
+                font-size: 1rem;
+
+                .check-icon {
+                    flex-shrink: 0;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    background: #00B39F;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-top: 2px;
+
+                    svg {
+                        width: 12px;
+                        height: 12px;
+                        color: #041018;
+                    }
+                }
+            }
+        }
+    }
+
+    .collaboration-visual {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .visual-inner {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            img {
+                width: 100%;
+                height: auto;
+                border-radius: 12px;
+                display: block;
+            }
+        }
+    }
+
+
+    .team-workspace-card {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: linear-gradient(145deg,
+                #0f1a20,
+                #0c1117);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
+        border-radius: 24px;
+        overflow: hidden;
+        backdrop-filter: blur(28px) saturate(160%);
+        -webkit-backdrop-filter: blur(28px) saturate(160%);
+        font-family: 'Inter', sans-serif;
+        position: relative;
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px 24px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+
+            .header-left {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+
+                .icon-box {
+                    width: 40px;
+                    height: 40px;
+                    background: rgba(0, 179, 159, 0.15); // Teal tint
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #00D3A9; // Teal
+                    border: 1px solid rgba(0, 179, 159, 0.25);
+
+                    svg {
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+
+                .titles {
+                    h3 {
+                        font-size: 1rem;
+                        font-weight: 600;
+                        color: white;
+                        margin: 0;
+                        line-height: 1.2;
+                    }
+
+                    p {
+                        font-size: 0.8rem;
+                        color: #94a3b8;
+                        margin: 0;
+                        line-height: 1.2;
+                    }
+                }
+            }
+
+            .header-right {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+
+                .avatars {
+                    display: flex;
+                    align-items: center;
+
+                    .initials {
+                        font-size: 0.85rem;
+                        font-weight: 600;
+                        margin-left: 8px;
+                        position: relative;
+
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            bottom: 0;
+                            right: -2px;
+                            width: 6px;
+                            height: 6px;
+                            background: #00D3A9; 
+                            border-radius: 50%;
+                            border: 1px solid #0f172a;
+                            box-shadow: 0 0 6px rgba(0, 211, 169, 0.5);
+                        }
+
+                        &:nth-child(1) {
+                            color: #d946ef; 
+                        }
+
+                        &:nth-child(2) {
+                            color: #359AC0; 
+                        }
+
+                        &:nth-child(3) {
+                            color: #B91C1C; 
+                        }
+
+                        &:nth-child(4) {
+                            color: #6750A3;
+                        }
+
+                        &:nth-child(5) {
+                            color: $primary;
+                        }
+
+                        // Taylor
+                    }
+
+                    .status-dot {
+                        display: none;
+                    }
+                }
+
+                .add-btn {
+                    width: 32px;
+                    height: 32px;
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #94a3b8;
+                    cursor: pointer;
+                    transition: all 0.2s;
+
+                    &:hover {
+                        background: rgba(255, 255, 255, 0.05);
+                        color: white;
+                    }
+                }
+            }
+        }
+
+
+        .card-canvas {
+            height: 340px;
+            position: relative;
+            overflow: hidden;
+
+            .canvas-grid {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 440px;
+                height: 100%;
+                border-radius: 0;
+                background-size: 48px 48px;
+            }
+
+
+            .multi-cursor {
+                position: absolute;
+                width: 50px;
+                height: 50px;
+                z-index: 20;
+                opacity: 0.9;
+                pointer-events: none;
+                overflow: visible;
+                top: 0;
+                left: 0;
+
+                img {
+                    width: 100%;
+                    height: auto;
+                    display: block;
+                    border-radius: 0; 
+                    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
+                }
+            }
+        }
+
+
+        .card-footer {
+            padding: 20px 24px;
+            background: rgba(5, 10, 20, 0.6);
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(10px);
+
+            .toolbar {
+                display: flex;
+                gap: 12px;
+                margin-bottom: 24px;
+                flex-wrap: wrap;
+
+                .tool-btn {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    padding: 8px 14px;
+                    background: rgba(255, 255, 255, 0.03);
+                    border: 1px solid rgba(255, 255, 255, 0.06);
+                    border-radius: 8px;
+                    font-size: 0.85rem;
+                    font-weight: 500;
+                    color: #cbd5e1;
+                    cursor: pointer;
+                    transition: all 0.2s;
+
+                    &:hover {
+                        background: rgba(255, 255, 255, 0.08);
+                    }
+
+                    &.active {
+                        background: rgba(0, 179, 159, 0.15); 
+                        border-color: rgba(0, 179, 159, 0.4);
+                        color: #9EFFEC;
+                    }
+
+                    svg {
+                        width: 16px;
+                        height: 16px;
+                    }
+
+                    .icon-blue {
+                        color: #3b82f6;
+                    }
+
+                    .icon-purple {
+                        color: #d946ef;
+                    }
+
+                    .icon-green {
+                        color: #22c55e;
+                    }
+
+                    .icon-orange {
+                        color: #f97316;
+                    }
+                }
+            }
+
+            .live-activity {
+                h4 {
+                    font-size: 0.7rem;
+                    text-transform: uppercase;
+                    letter-spacing: 0.08em;
+                    color: #64748b;
+                    margin-bottom: 16px;
+                    font-weight: 600;
+                }
+
+                .activity-item {
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 0.85rem;
+                    margin-bottom: 10px;
+                    align-items: center;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    .left {
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        color: #94a3b8;
+
+                        .dot {
+                            width: 6px;
+                            height: 6px;
+                            border-radius: 50%;
+                            box-shadow: 0 0 8px currentColor;
+                        }
+
+                        strong {
+                            color: #e2e8f0;
+                            font-weight: 600;
+                        }
+
+                        .target {
+                            color: #f8fafc;
+                            font-weight: 600;
+                        }
+                    }
+
+                    .time {
+                        color: #475569;
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+        }
+    }
+
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 80%;
+        height: 80%;
+        background: radial-gradient(circle, rgba(0, 179, 159, 0.15) 0%, transparent 70%);
+        filter: blur(100px);
+        z-index: -1;
+        opacity: 0.5;
+    }
+}
+
+@keyframes pulse-glow {
+    0% {
+        opacity: 0.4;
+        transform: scale(0.95);
+    }
+
+    100% {
+        opacity: 0.7;
+        transform: scale(1.05);
+    }
+}
\ No newline at end of file
diff --git a/assets/scss/_gitops-card.scss b/assets/scss/_gitops-card.scss
new file mode 100644
index 0000000..4d0a0bd
--- /dev/null
+++ b/assets/scss/_gitops-card.scss
@@ -0,0 +1,515 @@
+$gitops-orange: #f59e0b;
+$gitops-teal: #00d3a9;
+$gitops-purple: #a78bfa;
+$gitops-blue: #3b82f6;
+
+.gitops-card-section {
+    max-width: 900px;
+}
+
+.gitops-card-wrapper {
+    width: 121%;
+}
+
+.gitops-card {
+    position: relative;
+    border-radius: 16px;
+    background: linear-gradient(145deg,
+            #0f1a20,
+            #0c1117);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
+    transition: box-shadow 0.3s ease;
+}
+
+.gitops-card-gradient {
+    position: absolute;
+    inset: 0;
+    border-radius: 16px;
+    background: linear-gradient(135deg, rgba($primary, 0.05) 0%, transparent 50%, rgba($secondary, 0.05) 100%);
+    pointer-events: none;
+}
+
+.gitops-card-header {
+    position: relative;
+    padding: 0 $spacer * 1.5 $spacer;
+}
+
+.gitops-card-header-inner {
+    display: flex;
+    align-items: center;
+    gap: $spacer * 0.75;
+    margin-bottom: $spacer * 0.5;
+}
+
+.gitops-card-icon-wrap {
+    padding: $spacer * 0.8;
+    border-radius: 8px;
+    background: rgba($primary, 0.15);
+    color: $primary;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    i {
+        font-size: 2rem;
+    }
+}
+
+.gitops-card-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: $white;
+    margin: 0;
+}
+
+.gitops-card-desc {
+    color: $casper;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    margin: 0;
+    max-width: 46rem;
+}
+
+// Pipeline area
+.gitops-pipeline-wrap {
+    position: relative;
+    padding: $spacer * 2.5 $spacer * 1.5;
+}
+
+.gitops-pipeline-inner {
+    position: relative;
+    background: rgba($white, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: $spacer * 1.5;
+}
+
+.gitops-pipeline-nodes {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: $spacer * 0.5;
+    flex-wrap: nowrap;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.gitops-node-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    min-width: 0;
+
+    @media (max-width: 768px) {
+        width: 100%;
+        flex: none;
+        flex-direction: column;
+
+        &:not(.gitops-node-wrap--last)::after {
+            content: "";
+            width: 2px;
+            height: 24px;
+            background: rgba($secondary, 0.3);
+            margin: 4px 0;
+        }
+    }
+
+    &.gitops-node-wrap--last .gitops-connector {
+        display: none;
+    }
+}
+
+.gitops-node {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $spacer * 0.5;
+    padding: $spacer * 0.75;
+    border-radius: 12px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    background: rgba($white, 0.04);
+    color: $casper;
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-align: center;
+
+    &:hover,
+    &.is-active {
+        .gitops-node-label {
+            color: $white;
+        }
+    }
+
+    &.is-active .gitops-node-glow {
+        opacity: 1;
+    }
+}
+
+.gitops-node-glow {
+    position: absolute;
+    inset: 0;
+    border-radius: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.gitops-node-icon-wrap {
+    position: relative;
+    z-index: 1;
+    padding: 0.4rem 0.5rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+
+    i {
+        font-size: 1.9rem;
+    }
+}
+
+.gitops-node-label {
+    font-size: 1rem;
+}
+
+.gitops-node--commit {
+    .gitops-node-glow {
+        background: rgba($gitops-orange, 0.2);
+        box-shadow: 0 0 0 2px $gitops-orange;
+    }
+
+    .gitops-node-icon-wrap {
+        background: rgba($gitops-orange, 0.2);
+        color: $gitops-orange;
+    }
+
+    &.is-active .gitops-node-icon-wrap {
+        background: $gitops-orange;
+        color: $black;
+        box-shadow: 0 0 20px rgba($gitops-orange, 0.5);
+    }
+}
+
+.gitops-node--pr {
+    .gitops-node-glow {
+        background: rgba($gitops-orange, 0.2);
+        box-shadow: 0 0 0 2px $gitops-orange;
+    }
+
+    .gitops-node-icon-wrap {
+        background: rgba($gitops-orange, 0.2);
+        color: $gitops-orange;
+    }
+
+    &.is-active .gitops-node-icon-wrap {
+        background: $gitops-orange;
+        color: $black;
+        box-shadow: 0 0 20px rgba($gitops-orange, 0.5);
+    }
+}
+
+.gitops-node--ci {
+    .gitops-node-glow {
+        background: rgba($gitops-teal, 0.2);
+        box-shadow: 0 0 0 2px $gitops-teal;
+    }
+
+    .gitops-node-icon-wrap {
+        background: rgba($gitops-teal, 0.2);
+        color: $gitops-teal;
+    }
+
+    &.is-active .gitops-node-icon-wrap {
+        background: $gitops-teal;
+        color: $black;
+        box-shadow: 0 0 20px rgba($gitops-teal, 0.5);
+    }
+}
+
+.gitops-node--deploy {
+    .gitops-node-glow {
+        background: rgba($gitops-purple, 0.2);
+        box-shadow: 0 0 0 2px $gitops-purple;
+    }
+
+    .gitops-node-icon-wrap {
+        background: rgba($gitops-purple, 0.2);
+        color: $gitops-purple;
+    }
+
+    &.is-active .gitops-node-icon-wrap {
+        background: $gitops-purple;
+        color: $white;
+        box-shadow: 0 0 20px rgba($gitops-purple, 0.5);
+    }
+}
+
+.gitops-node--k8s {
+    .gitops-node-glow {
+        background: rgba($gitops-blue, 0.2);
+        box-shadow: 0 0 0 2px $gitops-blue;
+    }
+
+    .gitops-node-icon-wrap {
+        background: rgba($gitops-blue, 0.2);
+        color: $gitops-blue;
+    }
+
+    &.is-active .gitops-node-icon-wrap {
+        background: $gitops-blue;
+        color: $white;
+        box-shadow: 0 0 20px rgba($gitops-blue, 0.5);
+    }
+}
+
+.gitops-node-label {
+    position: relative;
+    z-index: 1;
+    transition: color 0.3s ease;
+}
+
+.gitops-tooltip {
+    position: absolute;
+    bottom: -3.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 20;
+    width: 11rem;
+    padding: $spacer * 0.75;
+    border-radius: 8px;
+    background: rgba($dark, 0.95);
+    border: 1px solid rgba($secondary, 0.2);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    font-size: 0.75rem;
+    color: $casper;
+    text-align: center;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+
+.gitops-node-wrap:hover .gitops-tooltip,
+.gitops-node:focus-visible+.gitops-tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(-4px);
+}
+
+.gitops-connector {
+    width: 60px;
+    flex: 1;
+    height: 2px;
+    margin: 0 $spacer * 0.5;
+    position: relative;
+    overflow: hidden;
+    border-radius: 2px;
+    min-width: 6rem;
+
+    @media (max-width: 768px) {
+        display: none;
+    }
+}
+
+.gitops-connector-line {
+    position: absolute;
+    inset: 0;
+    background: rgba($secondary, 0.2);
+}
+
+.gitops-connector-flow {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2rem;
+    background: linear-gradient(90deg, transparent, $primary, transparent);
+    opacity: 0;
+    animation: gitops-flow 6s linear infinite;
+}
+
+.gitops-flow-paused .gitops-connector-flow {
+    animation-play-state: paused;
+}
+
+@keyframes gitops-flow {
+    0% {
+        transform: translateX(-100%);
+        opacity: 1;
+    }
+
+    25% {
+        transform: translateX(500%);
+        opacity: 1;
+    }
+
+    25.001% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes gitops-flow-reverse {
+    0% {
+        transform: translateX(500%);
+        opacity: 1;
+    }
+
+    25% {
+        transform: translateX(-100%);
+        opacity: 1;
+    }
+
+    25.001% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateX(500%);
+    }
+}
+
+.gitops-connector-flow--2 {
+    animation-delay: 1.5s;
+}
+
+.gitops-connector-flow--3 {
+    animation-name: gitops-flow-reverse;
+    animation-delay: 3s;
+}
+
+.gitops-connector-flow--4 {
+    animation-delay: 4.5s;
+}
+
+.gitops-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacer;
+    margin-top: $spacer * 2;
+    padding-top: $spacer;
+    border-top: 1px solid rgba($secondary, 0.15);
+}
+
+.gitops-status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacer * 0.5;
+    padding: $spacer * 0.5 $spacer;
+    border-radius: 9999px;
+    background: rgba($primary, 0.15);
+    color: $primary;
+    font-size: 1rem;
+    font-weight: 500;
+    animation: gitops-pulse 2s ease-in-out infinite;
+}
+
+@keyframes gitops-pulse {
+
+    0%,
+    100% {
+        opacity: 0.85;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+.gitops-flow-btn {
+    padding: $spacer * 0.5 $spacer * 0.75;
+    border-radius: 9999px;
+    background: rgba($white, 0.06);
+    border: 1px solid rgba($secondary, 0.2);
+    color: $casper;
+    font-size: 1rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease;
+
+    &:hover {
+        background: rgba($white, 0.1);
+        color: $white;
+    }
+}
+
+.gitops-footer {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $spacer * 0.75;
+    padding: $spacer * 1.5;
+
+    @media (max-width: 600px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.gitops-footer-item {
+    display: flex;
+    align-items: center;
+    gap: $spacer * 0.5;
+    padding: $spacer * 0.75;
+    border-radius: 8px;
+    background: rgba($white, 0.03);
+    border: 1px solid rgba($secondary, 0.15);
+    font-size: 0.75rem;
+    color: $casper;
+
+    i {
+        color: $primary;
+        font-size: 0.875rem;
+    }
+}
+
+//worflow section 
+.workflow-section {
+    padding: 100px 0;
+}
+
+.workflow-header {
+    text-align: center;
+    margin-bottom: 80px;
+}
+
+.workflow-layout {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.workflow-top {
+    display: flex;
+    justify-content: left;
+    margin-left: 25px;
+    margin-bottom: 20px;
+}
+
+.workflow-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    gap: 20px;
+    padding: 0 25px;
+}
+
+.workflow-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 4f5ce35..889498d 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -15,13 +15,16 @@
 @import "floating-logo";
 @import "browser";
 @import "cursors";
+@import "gitops-card";
+@import "collaboration";
+@import "timeline";
 @import "feedback";
 @import "section-transitions";
 @import "scroll-cube";
 
 body {
-  background-color: $dark;      
-  color: $white;                
+  background-color: $dark;
+  color: $white;
   margin: 0;
   -webkit-font-smoothing: antialiased;
   font-family: $font-family-base; 
@@ -35,8 +38,8 @@ body {
 }
 
 .btn-primary {
-  background-color: $primary;   
-  color: $white;                
+  background-color: $primary;
+  color: $white;
   padding: 0.5rem 1.25rem;
   border-radius: 4px;
   text-decoration: none;
@@ -46,6 +49,6 @@ body {
 
   &:hover {
     filter: brightness(1.1);
-    box-shadow: 0 0 15px rgba($primary, 0.3); 
+    box-shadow: 0 0 15px rgba($primary, 0.3);
   }
-}
+}
\ No newline at end of file
diff --git a/assets/scss/_timeline.scss b/assets/scss/_timeline.scss
new file mode 100644
index 0000000..6fbdcf0
--- /dev/null
+++ b/assets/scss/_timeline.scss
@@ -0,0 +1,541 @@
+.timeline-section {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .container {
+        padding: 0 24px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .timeline-visual {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        .visual-inner {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: transparent;
+        }
+    }
+
+    // Timeline DVR Card Styles
+    .timeline-card {
+        background: linear-gradient(145deg, #0f1a20, #0c1117);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(28px) saturate(160%);
+        -webkit-backdrop-filter: blur(28px) saturate(160%);
+        font-family: $font-serif;
+        flex: 1;
+
+        .timeline-card-gradient {
+            position: absolute;
+            inset: 0;
+            border-radius: 16px;
+            background: linear-gradient(135deg, rgba($primary, 0.05) 0%, transparent 50%, rgba($secondary, 0.05) 100%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        // Card Header
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px 24px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            flex-shrink: 0;
+
+            .header-left {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+
+                .icon-box {
+                    width: 40px;
+                    height: 40px;
+                    background: rgba($primary, 0.15);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: $secondary;
+                    border: 1px solid rgba($primary, 0.25);
+
+                    svg {
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+
+                .titles {
+                    h3 {
+                        font-size: 1rem;
+                        font-weight: 600;
+                        color: white;
+                        margin: 0;
+                        line-height: 1.2;
+                    }
+
+                    p {
+                        font-size: 0.8rem;
+                        color: $casper;
+                        margin: 0;
+                        line-height: 1.2;
+                    }
+                }
+            }
+
+            .header-right {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+
+                .live-badge {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+                    padding: 4px 10px;
+                    background: rgba($danger, 0.1);
+                    border: 1px solid rgba($danger, 0.3);
+                    border-radius: 12px;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    color: $light;
+                    letter-spacing: 0.05em;
+
+                    .dot {
+                        width: 6px;
+                        height: 6px;
+                        background: $danger;
+                        border-radius: 50%;
+                        animation: pulse-live 2s ease-in-out infinite;
+                    }
+                }
+            }
+        }
+
+        .active-event-display {
+            display: flex;
+            align-items: flex-start;
+            gap: 16px;
+            padding: 20px 24px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            background: rgba($dark, 0.4);
+            height: 108px;
+            overflow: hidden;
+            flex-shrink: 0;
+
+            .event-icon-box {
+                width: 44px;
+                height: 44px;
+                flex-shrink: 0;
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.3s ease;
+
+                &.success {
+                    background: rgba($primary, 0.15);
+                    color: $secondary;
+                    border: 1px solid rgba($primary, 0.25);
+                }
+
+                &.warning {
+                    background: rgba($warning, 0.15);
+                    color: $warning;
+                    border: 1px solid rgba($warning, 0.25);
+                }
+
+                &.error {
+                    background: rgba($danger, 0.15);
+                    color: $danger;
+                    border: 1px solid rgba($danger, 0.25);
+                }
+
+                svg {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+
+            .event-details {
+                flex: 1;
+                min-width: 0;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+                .event-header {
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                    flex-wrap: nowrap;
+                    overflow: hidden;
+
+                    h4 {
+                        font-size: 1.15rem;
+                        font-weight: 600;
+                        margin: 0;
+                        color: white;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        min-width: 0;
+                    }
+
+                    .status-badge {
+                        padding: 4px 10px;
+                        border-radius: 12px;
+                        font-size: 0.75rem;
+                        font-weight: 600;
+                        display: flex;
+                        align-items: center;
+                        gap: 6px;
+                        flex-shrink: 0;
+
+                        .dot {
+                            width: 6px;
+                            height: 6px;
+                            border-radius: 50%;
+                        }
+
+                        &.success {
+                            background: rgba($primary, 0.1);
+                            color: $secondary;
+                            border: 1px solid rgba($primary, 0.25);
+
+                            .dot {
+                                background: $secondary;
+                            }
+                        }
+
+                        &.warning {
+                            background: rgba($warning, 0.1);
+                            color: $warning;
+                            border: 1px solid rgba($warning, 0.25);
+
+                            .dot {
+                                background: $warning;
+                            }
+                        }
+
+                        &.error {
+                            background: rgba($danger, 0.1);
+                            color: $danger;
+                            border: 1px solid rgba($danger, 0.25);
+
+                            .dot {
+                                background: $danger;
+                            }
+                        }
+                    }
+                }
+
+                p {
+                    margin: 0;
+                    font-size: 0.9rem;
+                    color: $casper;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .event-meta {
+                    display: flex;
+                    align-items: center;
+                    gap: 12px;
+                    font-size: 0.8rem;
+                    color: rgba($casper, 0.7);
+                    font-family: $font-family-monospace;
+
+                    .service-tag {
+                        background: rgba(255, 255, 255, 0.08);
+                        padding: 2px 8px;
+                        border-radius: 4px;
+                        border: 1px solid rgba(255, 255, 255, 0.1);
+                    }
+                }
+            }
+        }
+
+        .timeline-track {
+            position: relative;
+            padding: 28px 24px 16px;
+            background: transparent;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            .segments {
+                position: relative;
+                width: 100%;
+                height: 90px;
+                background: rgba(255, 255, 255, 0.03);
+                border-radius: 12px;
+                box-shadow:
+                    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+                    inset 0 2px 8px rgba(0, 0, 0, 0.4);
+                border: 1px solid rgba(255, 255, 255, 0.06);
+                cursor: pointer;
+                overflow: visible;
+
+                .tmdvr-track-progress {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    height: 100%;
+                    width: 0%;
+                    background: linear-gradient(90deg, rgba($primary, 0.06), rgba($secondary, 0.2));
+                    border-radius: 11px;
+                    pointer-events: none;
+                    transition: none;
+                }
+
+                .tmdvr-marker {
+                    position: absolute;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50%;
+                    padding: 0;
+                    border: 1.5px solid rgba(255, 255, 255, 0.2);
+                    cursor: pointer;
+                    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+                    z-index: 5;
+                    opacity: 0.65;
+
+                    &:hover {
+                        opacity: 1;
+                        transform: translate(-50%, -50%) scale(1.5);
+                        border-color: rgba(255, 255, 255, 0.5);
+                    }
+
+                    &.active {
+                        width: 14px;
+                        height: 14px;
+                        opacity: 1;
+                        z-index: 10;
+                        border-color: rgba(255, 255, 255, 0.6);
+                    }
+
+                    &.success {
+                        background: $primary;
+                        box-shadow: 0 0 6px rgba($primary, 0.5);
+                    }
+
+                    &.warning {
+                        background: $warning;
+                        box-shadow: 0 0 6px rgba($warning, 0.5);
+                    }
+
+                    &.error {
+                        background: $danger;
+                        box-shadow: 0 0 6px rgba($danger, 0.5);
+                    }
+
+                    &.active.success {
+                        box-shadow: 0 0 16px rgba($primary, 0.9);
+                    }
+
+                    &.active.warning {
+                        box-shadow: 0 0 16px rgba($warning, 0.9);
+                    }
+
+                    &.active.error {
+                        box-shadow: 0 0 16px rgba($danger, 0.9);
+                    }
+                }
+
+                // Playhead — child of .segments so % coords align exactly with markers
+                .playhead {
+                    position: absolute;
+                    top: 0;
+                    height: 100%;
+                    width: 2px;
+                    background: linear-gradient(180deg,
+                            rgba($primary, 0.1) 0%,
+                            $primary 20%,
+                            $secondary 80%,
+                            rgba($secondary, 0.1) 100%);
+                    box-shadow: 0 0 14px rgba($secondary, 0.7);
+                    border-radius: 2px;
+                    z-index: 15;
+                    pointer-events: none;
+                    transform: translateX(-50%);
+                    will-change: left;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: -5px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        width: 11px;
+                        height: 11px;
+                        background: $secondary;
+                        border-radius: 50%;
+                        border: 2px solid #0c1117;
+                        box-shadow: 0 0 10px $secondary;
+                    }
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        bottom: -5px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        width: 11px;
+                        height: 11px;
+                        background: $secondary;
+                        border-radius: 50%;
+                        border: 2px solid #0c1117;
+                        box-shadow: 0 0 10px $secondary;
+                    }
+                }
+            }
+
+            .time-labels {
+                display: flex;
+                justify-content: space-between;
+                padding: 0 1px;
+                margin-top: 10px;
+
+                span {
+                    font-size: 0.7rem;
+                    color: rgba($casper, 0.5);
+                    font-family: $font-family-monospace;
+                    letter-spacing: 0.03em;
+                }
+            }
+        }
+
+        .card-controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px 24px;
+            background: rgba(5, 10, 20, 0.6);
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            flex-shrink: 0;
+
+            .playback-controls {
+                display: flex;
+                gap: 10px;
+                align-items: center;
+
+                .control-btn {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 12px;
+                    background: rgba(255, 255, 255, 0.03);
+                    border: 1px solid rgba(255, 255, 255, 0.06);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: $casper;
+                    cursor: pointer;
+                    transition: all 0.2s;
+
+                    svg {
+                        width: 18px;
+                        height: 18px;
+                    }
+
+                    &:hover {
+                        background: rgba(255, 255, 255, 0.08);
+                        color: white;
+                        transform: scale(1.05);
+                    }
+
+                    &.pause-btn {
+                        background: linear-gradient(135deg, $primary 0%, $secondary 100%);
+                        border: none;
+                        color: $dark;
+                        box-shadow: 0 4px 12px rgba($primary, 0.3);
+
+                        &:hover {
+                            background: linear-gradient(135deg, $secondary 0%, $light 100%);
+                            box-shadow: 0 6px 16px rgba($secondary, 0.4);
+                            transform: scale(1.08);
+                        }
+                    }
+                }
+            }
+
+            .time-display {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                padding: 10px 18px;
+                background: rgba(15, 23, 42, 0.6);
+                border-radius: 14px;
+                font-size: 0.95rem;
+                font-weight: 500;
+                border: 1px solid rgba(255, 255, 255, 0.05);
+                font-family: $font-family-monospace;
+
+                svg {
+                    color: $secondary;
+                }
+
+                .current-time {
+                    font-weight: 700;
+                    background: linear-gradient(90deg, $primary 0%, $light 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+
+                .separator {
+                    color: rgba($casper, 0.3);
+                }
+
+                .total-time {
+                    color: rgba($casper, 0.5);
+                }
+            }
+        }
+    }
+
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 80%;
+        height: 80%;
+        background: radial-gradient(circle, rgba($primary, 0.15) 0%, transparent 70%);
+        filter: blur(100px);
+        z-index: -1;
+        opacity: 0.5;
+        pointer-events: none;
+    }
+}
+
+@keyframes pulse-live {
+
+    0%,
+    100% {
+        opacity: 1;
+        box-shadow: 0 0 0 0 rgba($danger, 0.7);
+    }
+
+    50% {
+        opacity: 0.7;
+        box-shadow: 0 0 0 6px rgba($danger, 0);
+    }
+}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 691a582..d0b7572 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,11 +1,12 @@
 {{ define "main" }}
-  {{ partial "section/hero-glass.html" . }}
-  {{ partial "section/customers.html" . }}
-  {{ partial "section/hero.html" . }}
-  <!-- {{ partial "section/mode.html" . }} -->
-  {{ partial "section/demo.html" . }}
-  {{ partial "section/capabilities.html" . }}
-  {{ partial "section/community.html" . }}
-  {{ partial "section/feedback.html" . }}
-  {{ partial "section/browser.html" . }}
+{{ partial "section/hero-glass.html" . }}
+{{ partial "section/customers.html" . }}
+{{ partial "section/hero.html" . }}
+<!-- {{ partial "section/mode.html" . }} -->
+{{ partial "section/demo.html" . }}
+{{ partial "section/card.html" . }}
+{{ partial "section/capabilities.html" . }}
+{{ partial "section/community.html" . }}
+{{ partial "section/feedback.html" . }}
+{{ partial "section/browser.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/section/card.html b/layouts/partials/section/card.html
new file mode 100644
index 0000000..5c4b4a3
--- /dev/null
+++ b/layouts/partials/section/card.html
@@ -0,0 +1,19 @@
+<section class="workflow-section">
+
+    <div class="workflow-header">
+        <h2 class="heading-style-h2 linnear-color">Discover features that transform workflows</h2>
+    </div>
+    <div class="workflow-layout">
+        <div class="workflow-top">
+            {{ partial "section/card/gitops-card.html" . }}
+        </div>
+        <div class="workflow-row">
+            <div class="workflow-card">
+                {{ partial "section/card/collaboration.html" . }}
+            </div>
+            <div class="workflow-card">
+                {{ partial "section/card/timeline.html" . }}
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/layouts/partials/section/card/collaboration.html b/layouts/partials/section/card/collaboration.html
new file mode 100644
index 0000000..2f4ee78
--- /dev/null
+++ b/layouts/partials/section/card/collaboration.html
@@ -0,0 +1,51 @@
+<section class="collaboration-section" id="collaboration">
+    <div class="container">
+        <div class="collaboration-visual">
+            <div class="visual-inner">
+                <!-- Team Workspace Card -->
+                <div class="team-workspace-card">
+                    <!-- Header -->
+                    <div class="card-header">
+                        <div class="header-left">
+                            <div class="icon-box">
+                                <i class="fas fa-users"></i>
+                            </div>
+                            <div class="titles">
+                                <h3>Team Workspace</h3>
+                                <p>5 collaborators online</p>
+                            </div>
+                        </div>
+                        <div class="header-right">
+                            <div class="avatars">
+                                <span class="initials">SH</span>
+                                <span class="initials">SN</span>
+                                <span class="initials">RN</span>
+                                <span class="initials">OA</span>
+                                <span class="initials">JE</span>
+                            </div>
+                            <button class="add-btn">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Main Canvas with Cursors — exact same structure as hero canvas-preview -->
+                    <div class="card-canvas" data-cursors="0,1,2,3,4" data-social-proof="online=22">
+                        <div class="cursor-social-proof" aria-live="polite"></div>
+
+                        <div class="canvas-grid">
+                            <div class="connector connector--one"></div>
+                            <div class="connector connector--two"></div>
+                            <div class="connector connector--three"></div>
+                            <div class="node node--a"></div>
+                            <div class="node node--b"></div>
+                            <div class="node node--c"></div>
+                            <div class="node node--d"></div>
+                            <div class="node node--e"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/layouts/partials/section/card/gitops-card.html b/layouts/partials/section/card/gitops-card.html
new file mode 100644
index 0000000..473d816
--- /dev/null
+++ b/layouts/partials/section/card/gitops-card.html
@@ -0,0 +1,146 @@
+<section class="gitops-card-section">
+  <div class="gitops-card-wrapper">
+    <div class="gitops-card">
+      <!-- Gradient overlay -->
+      <div class="gitops-card-gradient" aria-hidden="true"></div>
+
+      <!-- Pipeline visualization -->
+      <div class="gitops-pipeline-wrap">
+        <div class="gitops-pipeline-inner">
+          <div class="gitops-pipeline-nodes">
+            <!-- Git Commit -->
+            <div class="gitops-node-wrap">
+              <button type="button" class="gitops-node gitops-node--commit" data-tooltip="Push code changes to your repository" aria-label="Git Commit">
+                <span class="gitops-node-glow gitops-node-glow--commit"></span>
+                <span class="gitops-node-icon-wrap gitops-node-icon-wrap--commit">
+                  <i class="fas fa-code-commit" aria-hidden="true"></i>
+                </span>
+                <span class="gitops-node-label">Git Commit</span>
+              </button>
+              <div class="gitops-tooltip" role="tooltip"></div>
+              <div class="gitops-connector">
+                <span class="gitops-connector-line"></span>
+                <span class="gitops-connector-flow gitops-connector-flow--1"></span>
+              </div>
+            </div>
+
+            <!-- Pull Request -->
+            <div class="gitops-node-wrap">
+              <button type="button" class="gitops-node gitops-node--pr" data-tooltip="Review and merge code changes" aria-label="Pull Request">
+                <span class="gitops-node-glow gitops-node-glow--pr"></span>
+                <span class="gitops-node-icon-wrap gitops-node-icon-wrap--pr">
+                  <i class="fas fa-code-pull-request" aria-hidden="true"></i>
+                </span>
+                <span class="gitops-node-label">Pull Request</span>
+              </button>
+              <div class="gitops-tooltip" role="tooltip">Review and merge code changes</div>
+              <div class="gitops-connector">
+                <span class="gitops-connector-line"></span>
+                <span class="gitops-connector-flow gitops-connector-flow--2"></span>
+              </div>
+            </div>
+
+            <!-- CI Pipeline -->
+            <div class="gitops-node-wrap">
+              <button type="button" class="gitops-node gitops-node--ci" data-tooltip="Build, test, and validate your code" aria-label="CI Pipeline">
+                <span class="gitops-node-glow gitops-node-glow--ci"></span>
+                <span class="gitops-node-icon-wrap gitops-node-icon-wrap--ci">
+                  <i class="fas fa-bolt" aria-hidden="true"></i>
+                </span>
+                <span class="gitops-node-label">CI Pipeline</span>
+              </button>
+              <div class="gitops-tooltip" role="tooltip">Build, test, and validate your code</div>
+              <div class="gitops-connector">
+                <span class="gitops-connector-line"></span>
+                <span class="gitops-connector-flow gitops-connector-flow--3"></span>
+              </div>
+            </div>
+
+            <!-- ArgoCD -->
+            <div class="gitops-node-wrap">
+              <button type="button" class="gitops-node gitops-node--deploy" data-tooltip="Sync desired state with cluster" aria-label="ArgoCD">
+                <span class="gitops-node-glow gitops-node-glow--deploy"></span>
+                <span class="gitops-node-icon-wrap gitops-node-icon-wrap--deploy">
+                  <i class="fas fa-server" aria-hidden="true"></i>
+                </span>
+                <span class="gitops-node-label">ArgoCD</span>
+              </button>
+              <div class="gitops-tooltip" role="tooltip">Sync desired state with cluster</div>
+              <div class="gitops-connector">
+                <span class="gitops-connector-line"></span>
+                <span class="gitops-connector-flow gitops-connector-flow--4"></span>
+              </div>
+            </div>
+
+            <!-- Kubernetes -->
+            <div class="gitops-node-wrap gitops-node-wrap--last">
+              <button type="button" class="gitops-node gitops-node--k8s" data-tooltip="Deploy to production clusters" aria-label="Kubernetes">
+                <span class="gitops-node-glow gitops-node-glow--k8s"></span>
+                <span class="gitops-node-icon-wrap gitops-node-icon-wrap--k8s">
+                  <i class="fas fa-cube" aria-hidden="true"></i>
+                </span>
+                <span class="gitops-node-label">Kubernetes</span>
+              </button>
+              <div class="gitops-tooltip" role="tooltip">Deploy to production clusters</div>
+            </div>
+          </div>
+
+          <!-- Status indicator -->
+          <div class="gitops-status">
+            <span class="gitops-status-badge" aria-live="polite">
+              <i class="fas fa-check" aria-hidden="true"></i>
+              <span>Pipeline synced</span>
+            </span>
+            <button type="button" class="gitops-flow-btn" id="gitops-flow-btn" aria-pressed="true">
+              <span class="gitops-flow-btn-text">Pause</span> flow
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer features -->
+      <div class="gitops-card-header">
+        <div class="gitops-card-header-inner">
+          <div class="gitops-card-icon-wrap">
+            <i class="fas fa-code-branch" aria-hidden="true"></i>
+          </div>
+          <h3 class="gitops-card-title">GitOps Integration</h3>
+        </div>
+        <p class="gitops-card-desc">
+          Integrate visual reviews into your CI/CD pipeline. Version control your infrastructure designs alongside your code.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+(function() {
+  var section = document.querySelector('.gitops-card-section');
+  if (!section) return;
+
+  var nodes = section.querySelectorAll('.gitops-node');
+  var flowBtn = section.querySelector('#gitops-flow-btn');
+  var flowText = section.querySelector('.gitops-flow-btn-text');
+  var flowing = true;
+
+  nodes.forEach(function(node) {
+    node.addEventListener('mouseenter', function() {
+      section.querySelectorAll('.gitops-node').forEach(function(n) { n.classList.remove('is-active'); });
+      this.classList.add('is-active');
+    });
+    node.addEventListener('mouseleave', function() {
+      this.classList.remove('is-active');
+    });
+  });
+
+  if (flowBtn) {
+    flowBtn.addEventListener('click', function() {
+      flowing = !flowing;
+      flowBtn.setAttribute('aria-pressed', flowing ? 'true' : 'false');
+      flowText.textContent = flowing ? 'Pause' : 'Resume';
+      section.classList.toggle('gitops-flow-paused', !flowing);
+    });
+  }
+})();
+</script>
\ No newline at end of file
diff --git a/layouts/partials/section/card/timeline.html b/layouts/partials/section/card/timeline.html
new file mode 100644
index 0000000..9298e27
--- /dev/null
+++ b/layouts/partials/section/card/timeline.html
@@ -0,0 +1,308 @@
+<section class="timeline-section" id="timeline">
+    <div class="container">
+        <div class="timeline-visual">
+            <div class="visual-inner">
+                <!-- Timeline DVR Card -->
+                <div class="timeline-card">
+                    <!-- Gradient overlay -->
+                    <div class="timeline-card-gradient" aria-hidden="true"></div>
+
+                    <!-- Header -->
+                    <div class="card-header">
+                        <div class="header-left">
+                            <div class="icon-box">
+                                <i class="fas fa-play-circle"></i>
+                            </div>
+                            <div class="titles">
+                                <h3>Deployment Playback</h3>
+                                <p>Timeline DVR</p>
+                            </div>
+                        </div>
+                        <div class="header-right">
+                            <span class="live-badge">
+                                <span class="dot"></span>
+                                LIVE
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Active Event -->
+                    <div class="active-event-display">
+                        <div class="event-icon-box success" id="tmdvr-active-icon-box">
+                            <!-- Icon injected by JS -->
+                        </div>
+                        <div class="event-details">
+                            <div class="event-header">
+                                <h4 id="tmdvr-active-title">Loading...</h4>
+                                <span class="status-badge success" id="tmdvr-active-status-badge">
+                                    <span class="dot"></span>
+                                    <span id="tmdvr-active-status-text">success</span>
+                                </span>
+                            </div>
+                            <p id="tmdvr-active-desc">---</p>
+                            <div class="event-meta">
+                                <span id="tmdvr-active-time">00:00:00</span>
+                                <span class="service-tag" id="tmdvr-active-service">---</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Timeline Track -->
+                    <div class="timeline-track">
+                        <div class="segments" id="tmdvr-track" style="cursor: pointer;">
+                            <div class="tmdvr-track-progress" id="tmdvr-track-progress"></div>
+                            <div id="tmdvr-event-markers"></div>
+                            <!-- Playhead lives inside segments so % coords are aligned -->
+                            <div class="playhead" id="tmdvr-scrub-head"></div>
+                        </div>
+                        <div class="time-labels">
+                            <span>09:00</span>
+                            <span>11:00</span>
+                            <span>13:00</span>
+                            <span>15:00</span>
+                            <span>17:30</span>
+                        </div>
+                    </div>
+
+                    <!-- Controls -->
+                    <div class="card-controls">
+                        <div class="playback-controls">
+                            <button class="control-btn" id="tmdvr-btn-prev">
+                                <i class="fas fa-backward-step"></i>
+                            </button>
+                            <button class="control-btn pause-btn" id="tmdvr-btn-play">
+                                <i id="tmdvr-icon-play" class="fas fa-play"></i>
+                                <i id="tmdvr-icon-pause" class="fas fa-pause" style="display: none;"></i>
+                            </button>
+                            <button class="control-btn" id="tmdvr-btn-next">
+                                <i class="fas fa-forward-step"></i>
+                            </button>
+                        </div>
+                        <div class="time-display">
+                            <i class="fas fa-clock" style="font-size: 14px;"></i>
+                            <span class="current-time" id="tmdvr-time-display">09:00:12</span>
+                            <span class="separator">/</span>
+                            <span class="total-time">17:30:00</span>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const events = [
+            { id: "1", timestamp: "0%", time: "09:00:12", title: "Deploy v2.4.1", description: "Frontend service updated with new auth flow", type: "deploy", service: "frontend", status: "success" },
+            { id: "2", timestamp: "12%", time: "09:15:33", title: "Config Update", description: "Rate limiting rules adjusted for API gateway", type: "config", service: "api-gateway", status: "success" },
+            { id: "3", timestamp: "25%", time: "10:02:45", title: "Scale Up", description: "Auto-scaled payment service to 8 replicas", type: "scale", service: "payments", status: "success" },
+            { id: "4", timestamp: "38%", time: "11:18:02", title: "Deploy v3.0.0", description: "Major backend release with breaking changes", type: "deploy", service: "backend-api", status: "warning" },
+            { id: "5", timestamp: "50%", time: "12:30:00", title: "Security Patch", description: "CVE-2024-1234 patched across all services", type: "security", service: "all-services", status: "success" },
+            { id: "6", timestamp: "62%", time: "13:45:22", title: "Rollback v3.0.0", description: "Reverted backend to v2.9.8 due to latency spike", type: "rollback", service: "backend-api", status: "error" },
+            { id: "7", timestamp: "75%", time: "15:10:55", title: "Deploy v3.0.1", description: "Hotfix for connection pooling issue", type: "deploy", service: "backend-api", status: "success" },
+            { id: "8", timestamp: "88%", time: "16:42:10", title: "Scale Down", description: "Reduced replicas after traffic normalization", type: "scale", service: "payments", status: "success" },
+            { id: "9", timestamp: "96%", time: "17:30:00", title: "Config Update", description: "Updated TLS certificates for all endpoints", type: "config", service: "ingress", status: "success" },
+        ];
+
+        const typeIcons = {
+            deploy: '<i class="fas fa-bolt"></i>',
+            rollback: '<i class="fas fa-undo"></i>',
+            config: '<i class="fas fa-cog"></i>',
+            scale: '<i class="fas fa-arrows-alt"></i>',
+            security: '<i class="fas fa-shield-alt"></i>',
+        };
+
+        let activeEvent = events[0];
+        let scrubPosition = 0;
+        let isPlaying = false;
+        let animRef = null;
+
+        // DOM Elements
+        const track = document.getElementById("tmdvr-track");
+        const trackProgress = document.getElementById("tmdvr-track-progress");
+        const scrubHead = document.getElementById("tmdvr-scrub-head");
+        const eventMarkersContainer = document.getElementById("tmdvr-event-markers");
+        const timeDisplay = document.getElementById("tmdvr-time-display");
+
+        // Header UI
+        const activeIconBox = document.getElementById("tmdvr-active-icon-box");
+        const activeTitle = document.getElementById("tmdvr-active-title");
+        const activeStatusBadge = document.getElementById("tmdvr-active-status-badge");
+        const activeStatusText = document.getElementById("tmdvr-active-status-text");
+        const activeDesc = document.getElementById("tmdvr-active-desc");
+        const activeTime = document.getElementById("tmdvr-active-time");
+        const activeService = document.getElementById("tmdvr-active-service");
+
+        // Buttons
+        const btnPlayPause = document.getElementById("tmdvr-btn-play");
+        const iconPlay = document.getElementById("tmdvr-icon-play");
+        const iconPause = document.getElementById("tmdvr-icon-pause");
+        const btnPrev = document.getElementById("tmdvr-btn-prev");
+        const btnNext = document.getElementById("tmdvr-btn-next");
+
+        function renderMarkers() {
+            eventMarkersContainer.innerHTML = "";
+            events.forEach(ev => {
+                const isActive = ev.id === activeEvent.id;
+                const marker = document.createElement("button");
+
+                let classes = ["tmdvr-marker"];
+                classes.push(ev.status);
+
+                if (isActive) {
+                    classes.push("active");
+                }
+
+                marker.className = classes.join(" ");
+                marker.style.left = ev.timestamp;
+
+                marker.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    setActiveEvent(ev);
+                    setScrubPosition(parseFloat(ev.timestamp));
+                    setIsPlaying(false);
+                });
+                eventMarkersContainer.appendChild(marker);
+            });
+        }
+
+        function updateActiveEventUI() {
+            activeTitle.textContent = activeEvent.title;
+            activeDesc.textContent = activeEvent.description;
+            activeTime.textContent = activeEvent.time;
+            timeDisplay.textContent = activeEvent.time;
+            activeService.textContent = activeEvent.service;
+
+            activeStatusText.textContent = activeEvent.status;
+
+            // Reset classes
+            activeStatusBadge.className = `status-badge ${activeEvent.status}`;
+            activeIconBox.className = `event-icon-box ${activeEvent.status}`;
+
+            activeIconBox.innerHTML = typeIcons[activeEvent.type] || typeIcons['deploy'];
+        }
+
+        function setScrubPosition(pos) {
+            scrubPosition = Math.max(0, Math.min(100, pos));
+            trackProgress.style.width = `${scrubPosition}%`;
+            scrubHead.style.left = `${scrubPosition}%`;
+        }
+
+        function setActiveEvent(ev) {
+            activeEvent = ev;
+            updateActiveEventUI();
+            renderMarkers();
+        }
+
+        function setIsPlaying(p) {
+            isPlaying = p;
+            if (isPlaying) {
+                iconPlay.style.display = "none";
+                iconPause.style.display = "block";
+            } else {
+                iconPlay.style.display = "block";
+                iconPause.style.display = "none";
+            }
+        }
+
+        function getLastPassedEvent(pos) {
+            let passed = events[0];
+            for (const ev of events) {
+                if (parseFloat(ev.timestamp) <= pos) {
+                    passed = ev;
+                } else {
+                    break;
+                }
+            }
+            return passed;
+        }
+
+        function handleScrub(e) {
+            const rect = track.getBoundingClientRect();
+            const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            setScrubPosition(x * 100);
+
+            const passed = getLastPassedEvent(scrubPosition);
+            if (passed.id !== activeEvent.id) {
+                setActiveEvent(passed);
+            }
+        }
+
+        function playTick(start, startPos) {
+            if (!isPlaying) return;
+
+            const now = performance.now();
+            const elapsed = now - start;
+            let newPos = startPos + (elapsed / 80);
+
+            if (newPos >= 100) {
+                // Loop back to start instead of stopping
+                const wrapStart = performance.now();
+                const wrapPos = 0;
+                setScrubPosition(0);
+                setActiveEvent(events[0]);
+                animRef = requestAnimationFrame(() => playTick(wrapStart, wrapPos));
+                return;
+            }
+
+            setScrubPosition(newPos);
+
+            const passed = getLastPassedEvent(newPos);
+            if (passed.id !== activeEvent.id) {
+                setActiveEvent(passed);
+            }
+
+            animRef = requestAnimationFrame(() => playTick(start, startPos));
+        }
+
+        // Event Listeners
+        track.addEventListener("mousedown", (e) => {
+            handleScrub(e);
+
+            const onMove = (ev) => handleScrub(ev);
+            const onUp = () => {
+                window.removeEventListener("mousemove", onMove);
+                window.removeEventListener("mouseup", onUp);
+            };
+
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+        });
+
+        btnPlayPause.addEventListener("click", () => {
+            if (isPlaying) {
+                setIsPlaying(false);
+                if (animRef) cancelAnimationFrame(animRef);
+            } else {
+                if (scrubPosition >= 100) {
+                    setScrubPosition(0);
+                    setActiveEvent(events[0]);
+                }
+                setIsPlaying(true);
+                const startStr = performance.now();
+                const posStr = scrubPosition;
+                animRef = requestAnimationFrame(() => playTick(startStr, posStr));
+            }
+        });
+
+        function jumpTo(direction) {
+            const currentIdx = events.findIndex(e => e.id === activeEvent.id);
+            const newIdx = direction === "prev" ? Math.max(0, currentIdx - 1) : Math.min(events.length - 1, currentIdx + 1);
+            setActiveEvent(events[newIdx]);
+            setScrubPosition(parseFloat(events[newIdx].timestamp));
+            setIsPlaying(false);
+            if (animRef) cancelAnimationFrame(animRef);
+        }
+
+        btnPrev.addEventListener("click", () => jumpTo("prev"));
+        btnNext.addEventListener("click", () => jumpTo("next"));
+
+        // Initial render
+        setActiveEvent(events[0]);
+        setScrubPosition(0);
+        setIsPlaying(true);
+        animRef = requestAnimationFrame(() => playTick(performance.now(), 0));
+    });
+</script>
\ No newline at end of file