From fda671109a26259b065de7c8e52487d1c4102b91 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 19 Apr 2026 05:16:54 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e5f39ae..4a70906 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,6 +12,7 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
 
 export default function LandingPage() {
   return (
@@ -33,6 +34,8 @@ export default function LandingPage() {
       navItems={[
         {
           name: "Overview",          id: "about"},
+        {
+          name: "Demo",          id: "demo"},
         {
           name: "Features",          id: "features"},
         {
@@ -70,7 +73,7 @@ export default function LandingPage() {
       ]}
       buttons={[
         {
-          text: "Launch Interactive Demo"},
+          text: "Launch Interactive Demo", href: "#demo"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/fractal-cosmic-lights-wallpaper_1017-2739.jpg?_wi=2"
       mediaAnimation="blur-reveal"
@@ -120,6 +123,19 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="demo" data-section="demo">
+    <TimelinePhoneView
+      title="Live Demo: Quantum Key Exchange"
+      description="Watch the BB84 protocol in action, moving from encrypted packet creation to secure key distribution in real-time."
+      textboxLayout="split"
+      items={[
+        { trigger: "Phase 1: Photon Emission", content: "Generation of quantum-entangled states for initial handshake.", imageOne: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637784.jpg?_wi=1" },
+        { trigger: "Phase 2: Error Correction", content: "Real-time filtering to remove noise and secure the communication channel.", imageOne: "http://img.b2bpic.net/free-photo/cybersecurity-concept-secure-data-transfer_23-2152001135.jpg?_wi=1" },
+        { trigger: "Phase 3: Secure Delivery", content: "Final key material delivery to authenticated nodes across the network.", imageOne: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg?_wi=1" }
+      ]}
+    />
+  </div>
+
   <div id="features" data-section="features">
       <FeatureCardTwentyFour
       animationType="slide-up"
@@ -251,6 +267,8 @@ export default function LandingPage() {
           title: "Platform",          items: [
             {
               label: "About",              href: "#about"},
+            {
+              label: "Demo",              href: "#demo"},
             {
               label: "Features",              href: "#features"},
             {
@@ -274,4 +292,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file