src/app/call-history/page.tsx

@@ -3,13 +3,18 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
 
 export default function CallHistoryPage() {
   const callData = Array.from({ length: 15 }).map((_, i) => ({
-    title: `Prospect #${1000 + i}`,
-    description: `Snippet: "Hello, I'm interested in the ${i % 2 === 0 ? 'premium' : 'standard'} plan..." | Tags: ${i % 2 === 0 ? 'Lead, High-Intent' : 'Inquiry, Pricing'}`,
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfrrA4gAjraum2ii37r2QQ6tll/uploaded-1775612696144-jqzjl02r.png",    imageAlt: "Audio Wave Interaction UI"
+    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"
   }));
 
   return (
@@ -40,12 +45,11 @@ export default function CallHistoryPage() {
         </div>
 
         <div id="call-history-list" data-section="call-history-list" className="pt-32 pb-20">
-          <FeatureCardSix
+          <TimelinePhoneView
             title="Active Call Interactions"
             description="Real-time audio wave analysis and prospect conversation snippets."
             textboxLayout="split"
-            useInvertedBackground={false}
-            features={callData}
+            items={callData}
           />
         </div>
       </ReactLenis>