src/app/call-history/page.tsx

@@ -3,19 +3,16 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
+import CardStack from '@/components/cardStack/CardStack';
+import { Mic, CheckCircle2, Clock } from "lucide-react";
 
 export default function CallHistoryPage() {
   const callData = Array.from({ length: 15 }).map((_, i) => ({
-    trigger: `Prospect #${1000 + i}`,
-    content: (
-      <div className="p-4">
-        <p className="text-sm opacity-80 mb-2">{i % 2 === 0 ? 'Lead, High-Intent' : 'Inquiry, Pricing'}</p>
-        <p className="text-md font-medium">Snippet: "Hello, I'm interested in the {i % 2 === 0 ? 'premium' : 'standard'} plan..."</p>
-      </div>
-    ),
-    imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfrrA4gAjraum2ii37r2QQ6tll/uploaded-1775612696144-jqzjl02r.png",    imageAltOne: "Audio Wave Interaction UI"
-  }));
+    id: `call-${i}`,
+    name: ["Sarah Jenkins", "Ahmed Al-Mansoori", "Elena Rossi", "Mark Z", "Jane Doe"][i % 5],
+    timestamp: "2h ago",    snippet: i % 2 === 0 
+      ? "Interest confirmed in the premium tier, scheduling demo." 
+      : "Standard inquiry regarding service availability.",    status: i % 3 === 0 ? "Booked" : "Lead"}));
 
   return (
     <ThemeProvider
@@ -45,15 +42,41 @@ export default function CallHistoryPage() {
         </div>
 
         <div id="call-history-list" data-section="call-history-list" className="pt-32 pb-20">
-          <TimelinePhoneView
-            title="Active Call Interactions"
-            description="Real-time audio wave analysis and prospect conversation snippets."
+          <CardStack
+            title="Call Interaction History"
+            description="Review your latest prospect conversations and audio analysis."
             textboxLayout="split"
             animationType="blur-reveal"
-            items={callData}
-          />
+            className="max-w-4xl mx-auto"
+          >
+            <div className="space-y-4">
+              {callData.map((call) => (
+                <div key={call.id} className="flex items-center justify-between p-6 bg-card rounded-xl border border-accent/20 hover:border-accent/50 transition-colors">
+                  <div className="flex flex-col gap-1">
+                    <h3 className="font-semibold flex items-center gap-2">
+                      {call.name}
+                      <span className="text-xs font-normal px-2 py-0.5 rounded-full bg-accent/10">{call.status}</span>
+                    </h3>
+                    <p className="text-sm opacity-70">{call.snippet}</p>
+                    <p className="text-xs opacity-50 flex items-center gap-1 mt-2"><Clock className="w-3 h-3" /> {call.timestamp}</p>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <div className="w-24 h-8 flex items-end gap-0.5">
+                      {[...Array(6)].map((_, j) => (
+                        <div 
+                          key={j} 
+                          className="w-2 bg-primary-cta rounded-full animate-pulse"
+                          style={{ height: `${20 + Math.random() * 60}%`, animationDelay: `${j * 0.1}s` }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardStack>
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -136,4 +136,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}