From 7f592e0962b6755147e8a81f3f587cc79e5f1345 Mon Sep 17 00:00:00 2001
From: Toromo7 <tonyroland4real@gmail.com>
Date: Sat, 25 Apr 2026 10:28:13 +0100
Subject: [PATCH] feat: implement smart contract activity timeline UI #46

---
 app/page.tsx                    |  8 ++++-
 components/ActivityTimeline.tsx | 56 +++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 components/ActivityTimeline.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 2be56ee..2a2c081 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,6 +6,7 @@ import { Testimonials } from '@/components/testimonials'
 import { CTA } from '@/components/cta'
 import { Footer } from '@/components/footer'
 import { Navbar } from '@/components/navbar'
+import ActivityTimeline from '@/components/ActivityTimeline';
 
 export default function Home() {
   return (
@@ -13,6 +14,11 @@ export default function Home() {
       <Navbar />
       <Hero />
       
+      {/* This is the timeline section we added */}
+      <section className="py-12 bg-gray-50">
+        <ActivityTimeline />
+      </section>
+
       <Features />
       <HowItWorks />
       <Benefits />
@@ -20,5 +26,5 @@ export default function Home() {
       <CTA />
       <Footer />
     </main>
-  )
+  );
 }
diff --git a/components/ActivityTimeline.tsx b/components/ActivityTimeline.tsx
new file mode 100644
index 0000000..91ec702
--- /dev/null
+++ b/components/ActivityTimeline.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+// This data array makes the component "Reusable" as per requirements
+const timelineEvents = [
+  { id: 1, label: 'Escrow Created', status: 'completed', date: 'Oct 24, 2025' },
+  { id: 2, label: 'Milestone Funded', status: 'completed', date: 'Oct 25, 2025' },
+  { id: 3, label: 'Payment Released', status: 'current', date: 'In Progress' },
+  { id: 4, label: 'Dispute Raised', status: 'upcoming', date: 'Pending' },
+];
+
+const ActivityTimeline = () => {
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-md max-w-lg mx-auto">
+      <h2 className="text-xl font-bold mb-6 text-gray-800">Contract Activity Timeline</h2>
+      
+      <div className="relative">
+        {/* The Vertical Line */}
+        <div className="absolute left-4 top-0 h-full w-0.5 bg-gray-200"></div>
+
+        <div className="space-y-8">
+          {timelineEvents.map((event) => (
+            <div key={event.id} className="relative flex items-center ml-1">
+              
+              {/* Step Indicator Dot */}
+              <div className={`z-10 w-7 h-7 rounded-full flex items-center justify-center border-2 
+                ${event.status === 'completed' ? 'bg-green-500 border-green-500' : 
+                  event.status === 'current' ? 'bg-white border-blue-500 animate-pulse' : 
+                  'bg-white border-gray-300'}`}>
+                
+                {event.status === 'completed' && (
+                  <span className="text-white text-xs">✓</span>
+                )}
+                {event.status === 'current' && (
+                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                )}
+              </div>
+
+              {/* Event Content */}
+              <div className="ml-6">
+                <p className={`font-semibold ${event.status === 'upcoming' ? 'text-gray-400' : 'text-gray-900'}`}>
+                  {event.label}
+                </p>
+                <p className="text-xs text-gray-500 uppercase tracking-wide">
+                  {event.date}
+                </p>
+              </div>
+
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityTimeline;
\ No newline at end of file