Merge version_7 into main

Merge version_7 into main

src/app/call-history/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import CardStack from '@/components/cardStack/CardStack';
+import { Clock } from "lucide-react";
+
+export default function CallHistoryPage() {
+  const prospectNames = [
+    "Sarah Jenkins", "Ahmed Al-Mansoori", "Elena Rossi", "Mark Z", "Jane Doe", 
+    "Alice Wong", "Robert Chen", "Sophia Martinez", "David Kim", "Linda Taylor",    "Kevin Patel", "Emily Johnson", "Brian O'Connor", "Rachel Green", "Tom Hiddleston"
+  ];
+
+  const callData = Array.from({ length: 15 }).map((_, i) => ({
+    id: `call-${i}`,
+    name: prospectNames[i],
+    timestamp: `${i + 1}h ago`,
+    snippet: i % 2 === 0 
+      ? "Interest confirmed in the premium tier, scheduling demo." 
+      : "Standard inquiry regarding service availability and pricing.",    status: i % 3 === 0 ? "Booked" : i % 3 === 1 ? "Follow-up" : "Lead"
+  }));
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/#features" },
+              { name: "Live Feed", id: "/#live-feed" },
+              { name: "Call History", id: "/call-history" },
+            ]}
+            brandName="ReceptionistAI"
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+
+        <div id="call-history-list" data-section="call-history-list" className="pt-32 pb-20">
+          <CardStack
+            title="Call Interaction History"
+            description="Review your latest prospect conversations and audio analysis."
+            textboxLayout="split"
+            animationType="blur-reveal"
+            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 italic">"{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.15}s` }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardStack>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,6 +33,8 @@ export default function LandingPage() {
           name: "Features",          id: "#features"},
         {
           name: "Live Feed",          id: "#live-feed"},
+        {
+          name: "Call History",          id: "/call-history"},
       ]}
       brandName="ReceptionistAI"
     />
@@ -134,4 +136,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}